@texuli/blocks 0.0.0-stage → 0.1.0-next.0

package/dist/structure/schema.js

@@ -0,0 +1,327 @@
+/**
+ * Structure-family block shapes: tabs, accordion, cards and grid.
+ * Columns, divider and cta live in core and join the family at render time.
+ * Nested child lists (tabs panels) are parsed through a core-provided
+ * `parseChildren` callback so this module stays free of a cycle with
+ * `safeParseBlock`.
+ */
+import { safeHref } from '@texuli/core/url-policy';
+import { BLOCK_CONTENT_LIMITS, fail, ok, parseBlockId, parseMultilineText, parsePlainText, } from "../core/schema/primitives.js";
+import { isBlockTone } from "../core/schema/vocabulary.js";
+export const STRUCTURE_OWNED_TYPES = [
+    'tabs',
+    'accordion',
+    'cards',
+    'grid',
+];
+function plainObject(value, path) {
+    if (value === null || typeof value !== 'object' || Array.isArray(value)) {
+        return fail(path, 'Expected a plain object');
+    }
+    const prototype = Object.getPrototypeOf(value);
+    if (prototype !== Object.prototype && prototype !== null) {
+        return fail(path, 'Objects must be plain JSON data');
+    }
+    return ok(value);
+}
+function parseTone(value, path) {
+    if (value === undefined)
+        return ok(undefined);
+    if (!isBlockTone(value))
+        return fail(path, 'tone must be a known block tone');
+    return ok(value);
+}
+function parseColumnsPref(value, path) {
+    if (value === undefined)
+        return ok(undefined);
+    if (value !== 2 && value !== 3 && value !== 4) {
+        return fail(path, 'columns must be 2, 3 or 4');
+    }
+    return ok(value);
+}
+function parsePanelId(value, path) {
+    const id = parseBlockId(value, path);
+    if (!id.success)
+        return id;
+    if (id.data === undefined)
+        return fail(path, 'id is required');
+    return ok(id.data);
+}
+export function parseTabsBlock(record, path, base, containerDepth, parseChildren) {
+    if (containerDepth >= BLOCK_CONTENT_LIMITS.containerDepth) {
+        return fail(path, `containers nest at most ${BLOCK_CONTENT_LIMITS.containerDepth} deep`);
+    }
+    const id = parsePanelId(record.id, [...path, 'id']);
+    if (!id.success)
+        return id;
+    const label = parsePlainText(record.label, [...path, 'label'], 80);
+    if (!label.success)
+        return label;
+    if (!Array.isArray(record.panels) || record.panels.length < 2) {
+        return fail([...path, 'panels'], 'tabs need at least two panels');
+    }
+    if (record.panels.length > BLOCK_CONTENT_LIMITS.tabPanels) {
+        return fail([...path, 'panels'], `tabs may have at most ${BLOCK_CONTENT_LIMITS.tabPanels} panels`);
+    }
+    const panels = [];
+    const ids = new Set();
+    for (let i = 0; i < record.panels.length; i += 1) {
+        const panelPath = [...path, 'panels', i];
+        const panel = plainObject(record.panels[i], panelPath);
+        if (!panel.success)
+            return panel;
+        const panelId = parsePanelId(panel.data.id, [...panelPath, 'id']);
+        if (!panelId.success)
+            return panelId;
+        if (ids.has(panelId.data)) {
+            return fail([...panelPath, 'id'], `duplicate panel id "${panelId.data}"`);
+        }
+        ids.add(panelId.data);
+        const panelLabel = parsePlainText(panel.data.label, [...panelPath, 'label'], 40);
+        if (!panelLabel.success)
+            return panelLabel;
+        if (!Array.isArray(panel.data.blocks)) {
+            return fail([...panelPath, 'blocks'], 'panel blocks must be an array');
+        }
+        if (panel.data.blocks.length === 0) {
+            return fail([...panelPath, 'blocks'], 'panel needs at least one block');
+        }
+        if (panel.data.blocks.length > BLOCK_CONTENT_LIMITS.blocksPerColumn) {
+            return fail([...panelPath, 'blocks'], `at most ${BLOCK_CONTENT_LIMITS.blocksPerColumn} blocks per panel`);
+        }
+        const children = parseChildren(panel.data.blocks, [...panelPath, 'blocks'], containerDepth + 1);
+        if (!children.success)
+            return children;
+        panels.push({ id: panelId.data, label: panelLabel.data, blocks: children.data });
+    }
+    let defaultPanel;
+    if (record.defaultPanel !== undefined) {
+        if (typeof record.defaultPanel !== 'string' || !ids.has(record.defaultPanel)) {
+            return fail([...path, 'defaultPanel'], 'defaultPanel must name one of the panel ids');
+        }
+        defaultPanel = record.defaultPanel;
+    }
+    return ok({
+        ...base,
+        type: 'tabs',
+        id: id.data,
+        label: label.data,
+        panels,
+        ...(defaultPanel !== undefined ? { defaultPanel } : {}),
+    });
+}
+export function parseAccordionBlock(record, path, base) {
+    let id;
+    if (record.id !== undefined) {
+        const parsed = parsePanelId(record.id, [...path, 'id']);
+        if (!parsed.success)
+            return parsed;
+        id = parsed.data;
+    }
+    let label;
+    if (record.label !== undefined) {
+        const parsed = parsePlainText(record.label, [...path, 'label'], 80);
+        if (!parsed.success)
+            return parsed;
+        label = parsed.data;
+    }
+    let mode;
+    if (record.mode !== undefined) {
+        if (record.mode !== 'single' && record.mode !== 'multiple') {
+            return fail([...path, 'mode'], 'mode must be single or multiple');
+        }
+        mode = record.mode;
+    }
+    if (!Array.isArray(record.items) || record.items.length < 1) {
+        return fail([...path, 'items'], 'accordion needs at least one item');
+    }
+    if (record.items.length > BLOCK_CONTENT_LIMITS.tabPanels) {
+        return fail([...path, 'items'], `accordion may have at most ${BLOCK_CONTENT_LIMITS.tabPanels} items`);
+    }
+    const items = [];
+    const ids = new Set();
+    for (let i = 0; i < record.items.length; i += 1) {
+        const itemPath = [...path, 'items', i];
+        const item = plainObject(record.items[i], itemPath);
+        if (!item.success)
+            return item;
+        const itemId = parsePanelId(item.data.id, [...itemPath, 'id']);
+        if (!itemId.success)
+            return itemId;
+        if (ids.has(itemId.data)) {
+            return fail([...itemPath, 'id'], `duplicate item id "${itemId.data}"`);
+        }
+        ids.add(itemId.data);
+        const title = parsePlainText(item.data.title, [...itemPath, 'title'], 80);
+        if (!title.success)
+            return title;
+        let body;
+        if (item.data.body !== undefined) {
+            const parsed = parseMultilineText(item.data.body, [...itemPath, 'body'], BLOCK_CONTENT_LIMITS.shortMarkdown);
+            if (!parsed.success)
+                return parsed;
+            body = parsed.data;
+        }
+        items.push({
+            id: itemId.data,
+            title: title.data,
+            ...(body !== undefined ? { body } : {}),
+        });
+    }
+    return ok({
+        ...base,
+        type: 'accordion',
+        items,
+        ...(id !== undefined ? { id } : {}),
+        ...(label !== undefined ? { label } : {}),
+        ...(mode !== undefined ? { mode } : {}),
+    });
+}
+export function parseCardsBlock(record, path, base) {
+    let title;
+    if (record.title !== undefined) {
+        const parsed = parsePlainText(record.title, [...path, 'title'], 120);
+        if (!parsed.success)
+            return parsed;
+        title = parsed.data;
+    }
+    const columns = parseColumnsPref(record.columns, [...path, 'columns']);
+    if (!columns.success)
+        return columns;
+    if (!Array.isArray(record.items) || record.items.length < 1) {
+        return fail([...path, 'items'], 'cards need at least one item');
+    }
+    if (record.items.length > BLOCK_CONTENT_LIMITS.cards) {
+        return fail([...path, 'items'], `cards may have at most ${BLOCK_CONTENT_LIMITS.cards} items`);
+    }
+    const items = [];
+    for (let i = 0; i < record.items.length; i += 1) {
+        const itemPath = [...path, 'items', i];
+        const item = plainObject(record.items[i], itemPath);
+        if (!item.success)
+            return item;
+        const cardTitle = parsePlainText(item.data.title, [...itemPath, 'title'], 80);
+        if (!cardTitle.success)
+            return cardTitle;
+        let eyebrow;
+        if (item.data.eyebrow !== undefined) {
+            const parsed = parsePlainText(item.data.eyebrow, [...itemPath, 'eyebrow'], 40);
+            if (!parsed.success)
+                return parsed;
+            eyebrow = parsed.data;
+        }
+        let body;
+        if (item.data.body !== undefined) {
+            const parsed = parseMultilineText(item.data.body, [...itemPath, 'body'], BLOCK_CONTENT_LIMITS.shortMarkdown);
+            if (!parsed.success)
+                return parsed;
+            body = parsed.data;
+        }
+        let href;
+        if (item.data.href !== undefined) {
+            if (typeof item.data.href !== 'string') {
+                return fail([...itemPath, 'href'], 'href must be a string');
+            }
+            if (item.data.href.length > BLOCK_CONTENT_LIMITS.href) {
+                return fail([...itemPath, 'href'], `href must be at most ${BLOCK_CONTENT_LIMITS.href} characters`);
+            }
+            const safe = safeHref(item.data.href, 'untrusted');
+            if (!safe) {
+                return fail([...itemPath, 'href'], 'href must be an https, mailto or same-document link (untrusted tier)');
+            }
+            href = safe;
+        }
+        const tone = parseTone(item.data.tone, [...itemPath, 'tone']);
+        if (!tone.success)
+            return tone;
+        items.push({
+            title: cardTitle.data,
+            ...(eyebrow !== undefined ? { eyebrow } : {}),
+            ...(body !== undefined ? { body } : {}),
+            ...(href !== undefined ? { href } : {}),
+            ...(tone.data !== undefined ? { tone: tone.data } : {}),
+        });
+    }
+    return ok({
+        ...base,
+        type: 'cards',
+        items,
+        ...(title !== undefined ? { title } : {}),
+        ...(columns.data !== undefined ? { columns: columns.data } : {}),
+    });
+}
+export function parseGridBlock(record, path, base) {
+    let title;
+    if (record.title !== undefined) {
+        const parsed = parsePlainText(record.title, [...path, 'title'], 120);
+        if (!parsed.success)
+            return parsed;
+        title = parsed.data;
+    }
+    const columns = parseColumnsPref(record.columns, [...path, 'columns']);
+    if (!columns.success)
+        return columns;
+    if (!Array.isArray(record.cells) || record.cells.length < 1) {
+        return fail([...path, 'cells'], 'grid needs at least one cell');
+    }
+    if (record.cells.length > BLOCK_CONTENT_LIMITS.cards) {
+        return fail([...path, 'cells'], `grid may have at most ${BLOCK_CONTENT_LIMITS.cards} cells`);
+    }
+    const cells = [];
+    for (let i = 0; i < record.cells.length; i += 1) {
+        const cellPath = [...path, 'cells', i];
+        const cell = plainObject(record.cells[i], cellPath);
+        if (!cell.success)
+            return cell;
+        let cellTitle;
+        if (cell.data.title !== undefined) {
+            const parsed = parsePlainText(cell.data.title, [...cellPath, 'title'], 80);
+            if (!parsed.success)
+                return parsed;
+            cellTitle = parsed.data;
+        }
+        let body;
+        if (cell.data.body !== undefined) {
+            const parsed = parseMultilineText(cell.data.body, [...cellPath, 'body'], BLOCK_CONTENT_LIMITS.shortMarkdown);
+            if (!parsed.success)
+                return parsed;
+            body = parsed.data;
+        }
+        if (cellTitle === undefined && body === undefined) {
+            return fail(cellPath, 'grid cell needs a title or body');
+        }
+        const tone = parseTone(cell.data.tone, [...cellPath, 'tone']);
+        if (!tone.success)
+            return tone;
+        cells.push({
+            ...(cellTitle !== undefined ? { title: cellTitle } : {}),
+            ...(body !== undefined ? { body } : {}),
+            ...(tone.data !== undefined ? { tone: tone.data } : {}),
+        });
+    }
+    return ok({
+        ...base,
+        type: 'grid',
+        cells,
+        ...(title !== undefined ? { title } : {}),
+        ...(columns.data !== undefined ? { columns: columns.data } : {}),
+    });
+}
+/**
+ * Dispatch for structure-owned types. Returns null when `type` is not owned
+ * here (core handles columns/divider/cta).
+ */
+export function parseStructureBlock(type, record, path, base, containerDepth, parseChildren) {
+    switch (type) {
+        case 'tabs':
+            return parseTabsBlock(record, path, base, containerDepth, parseChildren);
+        case 'accordion':
+            return parseAccordionBlock(record, path, base);
+        case 'cards':
+            return parseCardsBlock(record, path, base);
+        case 'grid':
+            return parseGridBlock(record, path, base);
+        default:
+            return null;
+    }
+}

package/dist/structure/structure.css

@@ -0,0 +1,182 @@
+@layer tx.components {
+  .tx-structure-nested {
+    display: grid;
+    gap: 0.75rem;
+  }
+
+  .tx-structure-empty,
+  .tx-structure-loading,
+  .tx-block-invalid {
+    margin: 0;
+    color: var(--tx-muted-foreground, GrayText);
+    font-size: 0.875rem;
+  }
+
+  .tx-block-invalid {
+    padding: 0.5em 0.75em;
+    border: 1px dashed currentColor;
+    border-radius: 0.375em;
+  }
+
+  .tx-structure-columns {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr;
+    align-items: start;
+  }
+
+  .tx-structure-columns[data-cols="2"] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .tx-structure-columns[data-cols="3"] {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .tx-structure-columns[data-cols="4"] {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .tx-structure-column {
+    display: grid;
+    gap: 0.75rem;
+    min-inline-size: 0;
+  }
+
+  .tx-structure-section-title {
+    margin: 0 0 0.75rem;
+    font-size: 1.125rem;
+    font-weight: 650;
+    line-height: 1.3;
+    text-wrap: balance;
+  }
+
+  .tx-structure-grid,
+  .tx-structure-cards {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .tx-structure-grid[data-cols="2"],
+  .tx-structure-cards[data-cols="2"] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .tx-structure-grid[data-cols="3"],
+  .tx-structure-cards[data-cols="3"] {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .tx-structure-grid[data-cols="4"],
+  .tx-structure-cards[data-cols="4"] {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .tx-structure-cell {
+    margin: 0;
+    padding: 0.875rem 1rem;
+    border: 1px solid var(--tx-color-border, CanvasText);
+    border-radius: 0.5rem;
+    background: var(--tx-color-surface, Canvas);
+    min-inline-size: 0;
+  }
+
+  .tx-structure-cell-title {
+    margin: 0 0 0.375rem;
+    font-weight: 650;
+    line-height: 1.3;
+  }
+
+  .tx-structure-cell-body {
+    margin: 0;
+    line-height: 1.5;
+  }
+
+  .tx-structure-card-eyebrow {
+    margin: 0 0 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--tx-muted-foreground, GrayText);
+  }
+
+  .tx-structure-card-title {
+    margin: 0;
+    font-weight: 650;
+    line-height: 1.3;
+  }
+
+  .tx-structure-card-title a {
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+
+  .tx-structure-card-title a:focus-visible {
+    outline: 2px solid var(--tx-color-ring, Highlight);
+    outline-offset: 2px;
+  }
+
+  .tx-structure-divider {
+    margin-block: 1rem;
+    margin-inline: 0;
+    border: 0;
+    border-block-start: 1px solid var(--tx-color-border, CanvasText);
+  }
+
+  .tx-structure-cta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    align-items: center;
+  }
+
+  .tx-structure-cta a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-block-size: 2.25rem;
+    padding-inline: 0.875rem;
+    border-radius: 0.375rem;
+    border: 1px solid var(--tx-color-border, CanvasText);
+    background: var(--tx-color-surface, Canvas);
+    color: var(--tx-color-foreground, CanvasText);
+    font-weight: 600;
+    text-decoration: none;
+  }
+
+  .tx-structure-cta a:focus-visible {
+    outline: 2px solid var(--tx-color-ring, Highlight);
+    outline-offset: 2px;
+  }
+
+  .tx-structure-tabs,
+  .tx-structure-accordion {
+    min-inline-size: 0;
+  }
+
+  .tx-structure-panel {
+    padding-block-start: 0.75rem;
+  }
+
+  .tx-structure-body {
+    line-height: 1.5;
+  }
+
+  @media (max-width: 39.99rem) {
+    .tx-structure-columns[data-cols],
+    .tx-structure-grid[data-cols],
+    .tx-structure-cards[data-cols] {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .tx-structure-cell,
+    .tx-structure-cta a,
+    .tx-structure-divider {
+      border-color: CanvasText;
+    }
+  }
+}

package/dist/structure/structure.css.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/text/RichText.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+import { safeHref } from '@texuli/core';
+import { DEFAULT_TEXT_BLOCK_LABELS, type TextBlockLabels } from './labels.js';
+import { headingLevels, type MdBlock, type MdInline, parseMarkdown } from './markdown.js';
+
+/**
+ * Renders block Markdown through the owned closed subset (`markdown.ts`).
+ * Text interpolation only: no HTML sink, and every href passes `safeHref`
+ * again here. Markdown headings are relative: the top level in the source
+ * maps to `headingBase` (h3 by default) and deeper levels follow without
+ * gaps, so author text cannot outrank heading blocks or skip levels.
+ */
+let {
+  source,
+  compact = false,
+  headingBase = 3,
+  labels = DEFAULT_TEXT_BLOCK_LABELS,
+}: {
+  source: string;
+  /** Unwraps a lone paragraph so list items and captions stay inline. */
+  compact?: boolean;
+  /** Heading level the source's top Markdown heading renders as (1–6). */
+  headingBase?: number;
+  labels?: TextBlockLabels;
+} = $props();
+
+const tree = $derived(parseMarkdown(source));
+const lone = $derived(
+  compact && tree.blocks.length === 1 && tree.blocks[0]?.type === 'paragraph'
+    ? tree.blocks[0].children
+    : null
+);
+const levels = $derived(headingLevels(tree.blocks));
+const headingTag = (level: number) => {
+  const base = Math.min(6, Math.max(1, Math.trunc(headingBase) || 3));
+  return `h${Math.min(6, base + levels.indexOf(level))}`;
+};
+const absolute = (href: string) => /^(?:https?:|mailto:)/i.test(href);
+const emphasisTag = (type: 'strong' | 'em' | 'del') => type;
+</script>
+
+{#snippet inline(nodes: MdInline[])}
+  {#each nodes as node, i (i)}
+    {#if node.type === 'text'}{node.text}{:else if node.type === 'break'}<br />{:else if node.type === 'code'}<code class="tx-md-code">{node.text}</code>{:else if node.type === 'link'}{@const href = safeHref(node.href)}{#if href}<a
+          {href}
+          class="tx-md-link"
+          rel={absolute(href) ? 'noopener noreferrer nofollow' : undefined}>{@render inline(node.children)}</a
+        >{:else}{@render inline(node.children)}{/if}{:else}<svelte:element this={emphasisTag(node.type)}>{@render inline(node.children)}</svelte:element>{/if}
+  {/each}
+{/snippet}
+
+{#snippet blocks(items: MdBlock[])}
+  {#each items as item, i (i)}
+    {#if item.type === 'paragraph'}
+      <p>{@render inline(item.children)}</p>
+    {:else if item.type === 'heading'}
+      <svelte:element this={headingTag(item.level)} class="tx-md-heading">{@render inline(item.children)}</svelte:element>
+    {:else if item.type === 'code'}
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex -- a scrollable fence needs keyboard access. -->
+      <pre class="tx-md-pre" tabindex="0" aria-label={labels.codeBlock} data-lang={item.lang}><code>{item.text}</code></pre>
+    {:else if item.type === 'list'}
+      <svelte:element
+        this={item.ordered ? 'ol' : 'ul'}
+        class="tx-md-list"
+        start={item.ordered && item.start !== 1 ? item.start : undefined}
+      >
+        {#each item.items as entry, j (j)}
+          <li class:tx-md-task={entry.checked !== null}>
+            {#if entry.checked !== null}<input
+                type="checkbox"
+                class="tx-md-check"
+                checked={entry.checked}
+                disabled
+                aria-label={entry.checked ? labels.taskDone : labels.taskOpen}
+              />{/if}
+            {#if entry.children.length === 1 && entry.children[0]?.type === 'paragraph'}{@render inline(
+                entry.children[0].children
+              )}{:else}{@render blocks(entry.children)}{/if}
+          </li>
+        {/each}
+      </svelte:element>
+    {:else if item.type === 'quote'}
+      <blockquote class="tx-md-quote">{@render blocks(item.children)}</blockquote>
+    {:else}
+      <hr class="tx-md-rule" />
+    {/if}
+  {/each}
+{/snippet}
+
+{#if lone}{@render inline(lone)}{:else}<div class="tx-md">{@render blocks(tree.blocks)}</div>{/if}
+
+<style>
+  .tx-md {
+    overflow-wrap: anywhere;
+  }
+  .tx-md > :global(* + *),
+  .tx-md :global(li > * + *),
+  .tx-md :global(blockquote > * + *) {
+    margin-block-start: 0.75em;
+  }
+  .tx-md :global(p),
+  .tx-md :global(.tx-md-heading),
+  .tx-md :global(.tx-md-list),
+  .tx-md :global(.tx-md-quote),
+  .tx-md :global(.tx-md-pre) {
+    margin-block-end: 0;
+  }
+  .tx-md > :global(:first-child) {
+    margin-block-start: 0;
+  }
+  .tx-md-heading {
+    font-weight: 600;
+    line-height: 1.3;
+  }
+  .tx-md-list {
+    padding-inline-start: 1.5em;
+  }
+  .tx-md-task {
+    list-style: none;
+    margin-inline-start: -1.5em;
+  }
+  .tx-md-check {
+    margin-inline-end: 0.5em;
+    vertical-align: middle;
+  }
+  .tx-md-quote {
+    margin-inline: 0;
+    padding-inline-start: 1em;
+    border-inline-start: 3px solid var(--tx-color-border-strong, currentColor);
+  }
+  .tx-md-code,
+  .tx-md-pre {
+    font-family: var(--tx-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+    font-size: 0.9em;
+  }
+  .tx-md-code {
+    padding-inline: 0.25em;
+    border-radius: 0.25em;
+    background: var(--tx-color-surface-muted, color-mix(in srgb, currentColor 10%, transparent));
+  }
+  .tx-md-pre {
+    overflow-x: auto;
+    padding: 0.75em 1em;
+    border: 1px solid var(--tx-color-border, color-mix(in srgb, currentColor 30%, transparent));
+    border-radius: 0.375em;
+    white-space: pre;
+  }
+  .tx-md-pre:focus-visible,
+  .tx-md-link:focus-visible {
+    outline: 2px solid var(--tx-color-focus, Highlight);
+    outline-offset: 2px;
+  }
+  /* Link color stays the host's (or the UA's); the underline marks links in every scheme. */
+  .tx-md-link {
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+  .tx-md-rule {
+    border: 0;
+    border-block-start: 1px solid var(--tx-color-border, color-mix(in srgb, currentColor 40%, transparent));
+  }
+  @media (forced-colors: active) {
+    .tx-md-quote,
+    .tx-md-pre,
+    .tx-md-rule {
+      border-color: CanvasText;
+    }
+  }
+</style>

package/dist/text/RichText.svelte.d.ts

@@ -0,0 +1,13 @@
+/// <reference path="../css-modules.d.ts" />
+import { type TextBlockLabels } from './labels.js';
+type $$ComponentProps = {
+    source: string;
+    /** Unwraps a lone paragraph so list items and captions stay inline. */
+    compact?: boolean;
+    /** Heading level the source's top Markdown heading renders as (1–6). */
+    headingBase?: number;
+    labels?: TextBlockLabels;
+};
+declare const RichText: import("svelte").Component<$$ComponentProps, {}, "">;
+type RichText = ReturnType<typeof RichText>;
+export default RichText;