@cogenta/theme-canonical 0.2.0 → 1.1.0

package/src/render/blocks/accordion.ts

@@ -0,0 +1,44 @@
+import type { AccordionBlock, AccordionItem } from '@cogenta/blocks'
+import type { RenderContext } from '../../theme-contract.js'
+import { blockHeadingTag, heading } from '../heading.js'
+import { type HtmlElement, h } from '../html.js'
+import { renderRichText } from '../rich-text.js'
+
+/**
+ * `blocks@2.0` (RFC 0001). Shares `faq`'s `<details>`/`<summary>` mechanics —
+ * expanding, keyboard operation and the expanded state all come from the
+ * browser, at zero bytes of JavaScript — but is its own block, since
+ * "accordion" and "frequently asked question" are different editorial
+ * intents even when the underlying question/answer shape coincides.
+ */
+function renderItem(item: AccordionItem, ctx: RenderContext): HtmlElement {
+  return h(
+    'li',
+    { class: 'cg-accordion__item' },
+    h(
+      'details',
+      { class: 'cg-accordion__details' },
+      h('summary', { class: 'cg-accordion__question' }, item.question),
+      h('div', { class: 'cg-accordion__answer' }, renderRichText(ctx, item.answer)),
+    ),
+  )
+}
+
+export function renderAccordion(block: AccordionBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-block cg-accordion', 'data-block': 'accordion' },
+    block.title === undefined
+      ? null
+      : heading(
+          blockHeadingTag('accordion') ?? 'h2',
+          { class: 'cg-accordion__title', 'data-field': 'title' },
+          block.title,
+        ),
+    h(
+      'ul',
+      { class: 'cg-accordion__items' },
+      block.items.map((item) => renderItem(item, ctx)),
+    ),
+  )
+}

package/src/render/blocks/collection-list.ts

@@ -1,5 +1,5 @@
 import type { CollectionListBlock } from '@cogenta/blocks'
-import type { ContentEntry, QueryRequest, RenderContext } from '../../theme-contract.js'
+import type { ContentEntry, RenderContext } from '../../theme-contract.js'
 import { entryDate, entryExcerpt, entryHref, entryTitle } from '../entry.js'
 import { blockHeadingTag, type HeadingTag, heading, nestedHeadingTag } from '../heading.js'
 import { type HtmlElement, h } from '../html.js'
@@ -8,21 +8,15 @@ import { type HtmlElement, h } from '../html.js'
  * The only block of the twelve that reads data at render time — contract B
  * marks it `runtime: 'server'` for that reason.
  *
- * The read is *not* done here. `query` builds the request, the `.astro`
- * component awaits `ctx.content.list(...)` in its frontmatter, and this
- * function stays a pure function of the entries it is handed. That keeps the
- * markup snapshot-testable and keeps the theme's single door to data — the
- * read-only content client — in one visible place.
+ * The read is *not* done here. `query` builds the request (`@cogenta/theme-kit`'s
+ * `buildCollectionListQuery`, shared across every theme since it derives
+ * purely from the block's own fields), the caller awaits `ctx.content.list(...)`
+ * before rendering starts, and this function stays a pure function of the
+ * entries it is handed. That keeps the markup snapshot-testable and keeps a
+ * theme's single door to data — the read-only content client — in one visible
+ * place.
  */
-export function query(block: CollectionListBlock): QueryRequest {
-  return {
-    collection: block.collection,
-    ...(block.filter === undefined ? {} : { filter: block.filter }),
-    ...(block.sort === undefined ? {} : { sort: block.sort }),
-    // Capped by contract B at 100; an absent limit still must not mean "all".
-    limit: block.limit ?? 10,
-  }
-}
+export { buildCollectionListQuery as query } from '@cogenta/theme-kit'
 
 function renderEntry(entry: ContentEntry, ctx: RenderContext, tag: HeadingTag): HtmlElement {
   const date = entryDate(entry)

package/src/render/blocks/feature-grid.ts

@@ -3,6 +3,7 @@ import type { RenderContext } from '../../theme-contract.js'
 import { href } from '../actions.js'
 import { blockHeadingTag, type HeadingTag, heading, nestedHeadingTag } from '../heading.js'
 import { type HtmlElement, h } from '../html.js'
+import { renderIcon } from '../icons.js'
 
 /**
  * The item's title is the link, so the link's accessible name is the feature's
@@ -10,7 +11,11 @@ import { type HtmlElement, h } from '../html.js'
  * WCAG 2.4.4, and the block carries no label field to write one anyway.
  *
  * `icon` names a symbol, never markup: it is exposed as a data attribute for
- * the skin and marked `aria-hidden`, since the title already names the feature.
+ * the skin (and, since L25, the page builder — see `data-icon` below) and,
+ * when the name is one `renderIcon` (`@cogenta/theme-kit`) recognises, a real
+ * inline glyph — `aria-hidden`, since the title already names the feature.
+ * An unrecognised name keeps the pre-L25 behaviour: the bare, empty
+ * `data-icon` span, styled by `.cg-feature__icon` alone.
  */
 function renderItem(item: FeatureItem, ctx: RenderContext, tag: HeadingTag): HtmlElement {
   const title =
@@ -26,7 +31,11 @@ function renderItem(item: FeatureItem, ctx: RenderContext, tag: HeadingTag): Htm
     { class: 'cg-feature' },
     item.icon === undefined
       ? null
-      : h('span', { class: 'cg-feature__icon', 'data-icon': item.icon, 'aria-hidden': 'true' }),
+      : h(
+          'span',
+          { class: 'cg-feature__icon', 'data-icon': item.icon, 'aria-hidden': 'true' },
+          renderIcon(item.icon),
+        ),
     title,
     item.text === undefined ? null : h('p', { class: 'cg-feature__text' }, item.text),
   )

package/src/render/blocks/logo-strip.ts

@@ -0,0 +1,38 @@
+import type { LogoStripBlock, LogoStripItem } from '@cogenta/blocks'
+import type { RenderContext } from '../../theme-contract.js'
+import { type HtmlElement, h } from '../html.js'
+import { image } from '../media.js'
+
+/**
+ * `blocks@2.0` (RFC 0001). The lighter-weight "as seen in" / social-proof
+ * row next to `logos`: no per-logo name or link, so no accessible-name field
+ * to require — each image's own alt text (set once, in the media library)
+ * is what names it, exactly as `logos` already falls back to when a link is
+ * absent.
+ */
+function renderItem(item: LogoStripItem, ctx: RenderContext): HtmlElement {
+  return h(
+    'li',
+    { class: 'cg-logo-strip__item' },
+    image(ctx, item.media, { className: 'cg-logo-strip__image', variant: { fit: 'contain' } }),
+  )
+}
+
+export function renderLogoStrip(block: LogoStripBlock, ctx: RenderContext): HtmlElement {
+  return h(
+    'figure',
+    { class: 'cg-block cg-logo-strip', 'data-block': 'logoStrip' },
+    h(
+      'ul',
+      { class: 'cg-logo-strip__items' },
+      block.logos.map((item) => renderItem(item, ctx)),
+    ),
+    block.caption === undefined
+      ? null
+      : h(
+          'figcaption',
+          { class: 'cg-logo-strip__caption', 'data-field': 'caption' },
+          block.caption,
+        ),
+  )
+}

package/src/render/blocks/pricing-table.ts

@@ -0,0 +1,65 @@
+import type { PricingTableBlock, PricingTier } from '@cogenta/blocks'
+import type { RenderContext } from '../../theme-contract.js'
+import { actionLink } from '../actions.js'
+import { blockHeadingTag, type HeadingTag, heading, nestedHeadingTag } from '../heading.js'
+import { type HtmlElement, h } from '../html.js'
+
+/**
+ * `blocks@2.0` (RFC 0001). `highlighted` is editorial emphasis, not a colour:
+ * it becomes `data-highlighted` for the skin to style, and `aria-current`
+ * (loosely "the one on offer") so it is announced, not only shown.
+ */
+function renderTier(tier: PricingTier, ctx: RenderContext, tag: HeadingTag): HtmlElement {
+  return h(
+    'li',
+    {
+      class: 'cg-pricing__tier',
+      'data-highlighted': tier.highlighted === true ? 'true' : undefined,
+      'aria-current': tier.highlighted === true ? 'true' : undefined,
+    },
+    heading(tag, { class: 'cg-pricing__name' }, tier.name),
+    h(
+      'p',
+      { class: 'cg-pricing__price' },
+      h('span', { class: 'cg-pricing__amount' }, tier.price),
+      tier.interval === undefined
+        ? null
+        : h('span', { class: 'cg-pricing__interval' }, tier.interval),
+    ),
+    tier.features.length === 0
+      ? null
+      : h(
+          'ul',
+          { class: 'cg-pricing__features' },
+          tier.features.map((feature) => h('li', {}, feature)),
+        ),
+    tier.action === undefined
+      ? null
+      : h(
+          'div',
+          { class: 'cg-pricing__action' },
+          actionLink(ctx, { ...tier.action, emphasis: tier.action.emphasis ?? 'primary' }),
+        ),
+  )
+}
+
+export function renderPricingTable(block: PricingTableBlock, ctx: RenderContext): HtmlElement {
+  const hasTitle = block.title !== undefined
+  const tierTag = nestedHeadingTag('pricingTable', hasTitle)
+  return h(
+    'section',
+    { class: 'cg-block cg-pricing', 'data-block': 'pricingTable' },
+    hasTitle
+      ? heading(
+          blockHeadingTag('pricingTable') ?? 'h2',
+          { class: 'cg-pricing__title', 'data-field': 'title' },
+          block.title ?? '',
+        )
+      : null,
+    h(
+      'ul',
+      { class: 'cg-pricing__tiers' },
+      block.tiers.map((tier) => renderTier(tier, ctx, tierTag)),
+    ),
+  )
+}

package/src/render/blocks/stat-counter.ts

@@ -0,0 +1,34 @@
+import type { StatCounterBlock, StatCounterItem } from '@cogenta/blocks'
+import type { RenderContext } from '../../theme-contract.js'
+import { blockHeadingTag, heading } from '../heading.js'
+import { type HtmlElement, h } from '../html.js'
+
+/**
+ * `blocks@2.0` (RFC 0001). A `<dl>`, exactly like `stats` — each figure is
+ * the description of its label — but narrower on purpose: no `unit`, since a
+ * counter row is meant for one big figure and its label, not the fuller
+ * statistic `stats` already covers.
+ */
+function renderItem(item: StatCounterItem): HtmlElement {
+  return h(
+    'div',
+    { class: 'cg-stat-counter' },
+    h('dt', { class: 'cg-stat-counter__label' }, item.label),
+    h('dd', { class: 'cg-stat-counter__value' }, item.value),
+  )
+}
+
+export function renderStatCounter(block: StatCounterBlock, _ctx: RenderContext): HtmlElement {
+  return h(
+    'section',
+    { class: 'cg-block cg-stat-counters', 'data-block': 'statCounter' },
+    block.title === undefined
+      ? null
+      : heading(
+          blockHeadingTag('statCounter') ?? 'h2',
+          { class: 'cg-stat-counters__title', 'data-field': 'title' },
+          block.title,
+        ),
+    h('dl', { class: 'cg-stat-counters__items' }, block.stats.map(renderItem)),
+  )
+}

package/src/render/blocks/testimonial.ts

@@ -0,0 +1,41 @@
+import type { TestimonialBlock } from '@cogenta/blocks'
+import type { RenderContext } from '../../theme-contract.js'
+import { type HtmlElement, h } from '../html.js'
+import { image } from '../media.js'
+import { renderRichText } from '../rich-text.js'
+
+/**
+ * `blocks@2.0` (RFC 0001). Same `<figure><blockquote>…<figcaption>` pattern
+ * as `quote`, but the quote itself is rich text (a testimonial can carry a
+ * link or emphasis the shorter, plain-text `quote` block cannot) and the
+ * attribution is one grouped field rather than three loose ones.
+ *
+ * The avatar is decorative, exactly like `quote`'s own: the name is right
+ * beside it in text, so its media entity's alt text is expected to be empty.
+ */
+export function renderTestimonial(block: TestimonialBlock, ctx: RenderContext): HtmlElement {
+  const { attribution } = block
+  return h(
+    'figure',
+    { class: 'cg-block cg-testimonial', 'data-block': 'testimonial' },
+    h('blockquote', { class: 'cg-testimonial__quote' }, renderRichText(ctx, block.quote)),
+    h(
+      'figcaption',
+      { class: 'cg-testimonial__attribution' },
+      attribution.avatar === undefined
+        ? null
+        : image(ctx, attribution.avatar, {
+            className: 'cg-testimonial__avatar',
+            variant: { width: 96, height: 96, fit: 'cover' },
+          }),
+      h(
+        'span',
+        { class: 'cg-testimonial__names' },
+        h('span', { class: 'cg-testimonial__name' }, attribution.name),
+        attribution.role === undefined
+          ? null
+          : h('span', { class: 'cg-testimonial__role' }, attribution.role),
+      ),
+    ),
+  )
+}

package/src/render/chrome.ts

@@ -0,0 +1,105 @@
+import {
+  type ChromeInput,
+  type ChromeNavLink,
+  type ChromeResult,
+  escapeAttribute,
+  escapeText,
+  renderBrandMark,
+  renderSocialLinks,
+  renderThemeToggle,
+  serialize,
+} from '@cogenta/theme-kit'
+
+/**
+ * The site header and footer — moved here, verbatim, from what used to be
+ * `@cogenta/cli`'s own hardcoded `<header class="cg-site-header">`/`<footer
+ * class="cg-site-footer">` template (`packages/cli/src/commands/theme-render.ts`,
+ * before the chrome extension point existed). Byte-identical output to that
+ * template: this is the reference theme, and every site that installed it
+ * before a second theme existed must render exactly as it always has.
+ *
+ * A future theme with a structurally different header (a mega-menu, a cart
+ * icon, no header at all) implements its own `renderChrome` instead — this is
+ * simply the one this package ships.
+ *
+ * `theme@1.4` (L25 D2) adds four optional fields, each rendered only when
+ * present: `headerAction` as a button-styled link at the end of the header
+ * nav, `tagline` under the site name in the footer, `social` as an icon-link
+ * row (`renderSocialLinks`), `footerNote` as a short "about" paragraph. A
+ * site that sets none of them, and a `1.3` render that never reaches this
+ * file at all, both keep the pre-1.4 header/footer byte for byte — see
+ * `test/chrome.test.ts`'s own "without the new fields" case.
+ */
+
+function renderNavLinks(links: readonly ChromeNavLink[]): string {
+  if (links.length === 0) return ''
+  const items = links
+    .filter((link) => link.href !== null || link.kind === 'submenu-placeholder')
+    .map((link) => {
+      const label = escapeText(link.label)
+      const titleAttr = link.title === null ? '' : ` title="${escapeAttribute(link.title)}"`
+      if (link.href === null) return `<li><span${titleAttr}>${label}</span></li>`
+      const href = escapeAttribute(link.href)
+      const target = link.openInNewTab ? ' target="_blank" rel="noopener"' : ''
+      return `<li><a href="${href}"${target}${titleAttr}>${label}</a></li>`
+    })
+    .join('')
+  return items === '' ? '' : `<ul class="cg-menu">${items}</ul>`
+}
+
+/** The header's own call-to-action link (`theme@1.4`), styled like the block vocabulary's own primary action. */
+function renderHeaderAction(action: ChromeInput['headerAction']): string {
+  if (action === undefined) return ''
+  return (
+    `<a class="cg-action cg-site-header__action" data-emphasis="primary" ` +
+    `href="${escapeAttribute(action.href)}">${escapeText(action.label)}</a>`
+  )
+}
+
+export function renderChrome(input: ChromeInput): ChromeResult {
+  const siteName = escapeAttribute(input.site.name)
+  const headerNav = renderNavLinks(input.headerNav)
+  const footerNav = renderNavLinks(input.footerNav)
+  // The uploaded logo replaces the wordmark, and only the wordmark: the
+  // footer keeps the site's name in text, so a site whose logo fails to load
+  // is still named somewhere on every page.
+  const mark = renderBrandMark(input.brand, { className: 'cg-site-header__logo' }) ?? siteName
+  const headerAction = renderHeaderAction(input.headerAction)
+  const themeToggle = serialize(renderThemeToggle(input.locale, { className: 'cg-theme-toggle' }))
+
+  const header =
+    `<header class="cg-site-header"><div class="cg-site-header__inner">` +
+    `<a class="cg-site-header__home" href="${escapeAttribute(input.homeHref)}">${mark}</a>` +
+    `${headerNav === '' ? '' : `<nav class="cg-site-header__nav" aria-label="Primary">${headerNav}</nav>`}` +
+    `${themeToggle}` +
+    `${headerAction}` +
+    `</div></header>`
+
+  const tagline =
+    input.tagline === undefined
+      ? ''
+      : `<p class="cg-site-footer__tagline">${escapeText(input.tagline)}</p>`
+  const social =
+    input.social === undefined
+      ? ''
+      : serialize(
+          renderSocialLinks(input.social, {
+            className: 'cg-site-footer__social',
+            itemClassName: 'cg-site-footer__social-item',
+          }) ?? { kind: 'text', value: '' },
+        )
+  const footerNote =
+    input.footerNote === undefined
+      ? ''
+      : `<p class="cg-site-footer__note">${escapeText(input.footerNote)}</p>`
+
+  const footer =
+    `<footer class="cg-site-footer"><div class="cg-site-footer__inner">` +
+    `<span>${siteName}</span>${tagline}` +
+    `${footerNav === '' ? '' : `<nav class="cg-site-footer__nav" aria-label="Footer">${footerNav}</nav>`}` +
+    `${social}` +
+    `${footerNote === '' ? '' : `<div class="cg-site-footer__about">${footerNote}</div>`}` +
+    `${input.brandingHtml}</div></footer>`
+
+  return { header, footer }
+}

package/src/render/comments.ts

@@ -0,0 +1,6 @@
+/** Re-exported from `@cogenta/theme-kit` — see that package's `comments.ts`. */
+export {
+  type CommentsSectionOptions,
+  type PublicComment,
+  renderCommentsSection,
+} from '@cogenta/theme-kit'

package/src/render/entry.ts

@@ -1,40 +1,2 @@
-import type { ContentEntry, RenderContext } from '../theme-contract.js'
-
-/**
- * Contract A fixes the system fields but not the schema-defined ones: which
- * fields an entry has depends on its collection, and a theme that assumes
- * `title` exists breaks on the first collection that calls it `name`.
- *
- * So every read of an unknown field goes through here, returns a fallback the
- * visitor can live with, and never renders `undefined`.
- */
-
-const TITLE_FIELDS = ['title', 'name', 'label'] as const
-
-export function entryTitle(entry: ContentEntry, ctx: RenderContext): string {
-  for (const field of TITLE_FIELDS) {
-    const value = entry[field]
-    if (typeof value === 'string' && value.trim() !== '') return value
-  }
-  return ctx.t('entry.untitled')
-}
-
-const EXCERPT_FIELDS = ['excerpt', 'summary', 'description'] as const
-
-export function entryExcerpt(entry: ContentEntry): string | undefined {
-  for (const field of EXCERPT_FIELDS) {
-    const value = entry[field]
-    if (typeof value === 'string' && value.trim() !== '') return value
-  }
-  return undefined
-}
-
-/** ISO 8601, for `<time datetime>`. Anything else is not a date this can use. */
-export function entryDate(entry: ContentEntry): string | undefined {
-  const value = entry.publishedAt ?? entry.createdAt
-  return typeof value === 'string' && !Number.isNaN(Date.parse(value)) ? value : undefined
-}
-
-export function entryHref(entry: ContentEntry, ctx: RenderContext): string {
-  return ctx.link({ collection: entry.collection, id: entry.id })
-}
+/** Re-exported from `@cogenta/theme-kit` — see that package's `entry.ts`. */
+export { entryDate, entryExcerpt, entryHref, entryImage, entryTitle } from '@cogenta/theme-kit'

package/src/render/heading.ts

@@ -1,44 +1,7 @@
-import type { HeadingLevel } from '@cogenta/blocks'
-import { VOCABULARY } from '@cogenta/blocks'
-import { type Child, type HtmlElement, h } from './html.js'
-
-/**
- * The heading level of a block is **not** a theme decision: contract B fixes it
- * in each block's `a11y.headingLevel`, and the theme reads it from there rather
- * than restating it. Restating it is how an outline drifts — one block gets
- * promoted in the theme, the page grows a second `h1`, and nothing fails.
- */
-const DECLARED_LEVELS: ReadonlyMap<string, HeadingLevel> = new Map(
-  VOCABULARY.map((block) => [block.name, block.a11y.headingLevel]),
-)
-
-export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-
-/** The level a block's own title is rendered at, or `null` if it carries none. */
-export function blockHeadingTag(blockName: string): HeadingTag | null {
-  const level = DECLARED_LEVELS.get(blockName)
-  if (level === undefined || level === 'none') return null
-  return level
-}
-
-/**
- * The level for a title *inside* a block — a feature's name, a listed entry.
- *
- * One below the block's own heading when the block renders one, and at the
- * block's declared level when it does not: a `featureGrid` without a title must
- * not start its items at `h3`, which would skip a level.
- */
-export function nestedHeadingTag(blockName: string, blockRendersHeading: boolean): HeadingTag {
-  const own = blockHeadingTag(blockName) ?? 'h2'
-  if (!blockRendersHeading) return own
-  const next = Number(own.slice(1)) + 1
-  return `h${Math.min(next, 6)}` as HeadingTag
-}
-
-export function heading(
-  tag: HeadingTag,
-  attrs: Readonly<Record<string, string | number | boolean | undefined>>,
-  ...children: readonly Child[]
-): HtmlElement {
-  return h(tag, attrs, ...children)
-}
+/** Re-exported from `@cogenta/theme-kit` — see that package's `heading.ts`. */
+export {
+  blockHeadingTag,
+  type HeadingTag,
+  heading,
+  nestedHeadingTag,
+} from '@cogenta/theme-kit'

package/src/render/html.ts

@@ -1,122 +1,15 @@
-/**
- * A minimal, dependency-free HTML tree and serialiser.
- *
- * Why the theme's markup is built here rather than written inline in the
- * `.astro` files:
- *
- * 1. It is testable without an Astro toolchain — the twelve blocks get real
- *    snapshot tests, and the heading outline and the `alt` rule get asserted on
- *    the actual output rather than on a reading of the source.
- * 2. There is **no way to emit raw HTML**. A block stores semantic data only
- *    (rule R3); with no `raw()` escape hatch, a string that arrives in a block
- *    field cannot become markup, whatever it contains.
- *
- * The `.astro` components in `src/blocks/` are the contract-D entry points and
- * stay thin on purpose: one call each, so the two never drift.
- */
-
-export type AttributeValue = string | number | boolean | undefined
-
-export type Attributes = Readonly<Record<string, AttributeValue>>
-
-export interface HtmlElement {
-  readonly kind: 'element'
-  readonly tag: string
-  readonly attrs: Attributes
-  readonly children: readonly HtmlNode[]
-}
-
-export interface HtmlText {
-  readonly kind: 'text'
-  readonly value: string
-}
-
-export type HtmlNode = HtmlElement | HtmlText
-
-/** Anything a caller may pass as a child. `null`/`false` drop out, so a
- * conditional child reads as `condition && node` without a wrapper. */
-export type Child = HtmlNode | string | null | false | undefined | readonly Child[]
-
-/**
- * Elements that carry no children and no closing tag. Serialising `<img>` with
- * one would produce markup no parser agrees on.
- */
-const VOID_ELEMENTS: ReadonlySet<string> = new Set([
-  'area',
-  'base',
-  'br',
-  'col',
-  'embed',
-  'hr',
-  'img',
-  'input',
-  'link',
-  'meta',
-  'source',
-  'track',
-  'wbr',
-])
-
-export function text(value: string): HtmlText {
-  return { kind: 'text', value }
-}
-
-function flatten(children: readonly Child[], into: HtmlNode[]): void {
-  for (const child of children) {
-    if (child === null || child === false || child === undefined) continue
-    if (typeof child === 'string') {
-      into.push(text(child))
-      continue
-    }
-    if (Array.isArray(child)) {
-      flatten(child as readonly Child[], into)
-      continue
-    }
-    into.push(child as HtmlNode)
-  }
-}
-
-export function h(tag: string, attrs: Attributes = {}, ...children: readonly Child[]): HtmlElement {
-  const collected: HtmlNode[] = []
-  flatten(children, collected)
-  return { kind: 'element', tag, attrs, children: collected }
-}
-
-/**
- * `&` first, or every following replacement would be escaped twice.
- * `<` and `>` cover text; the quotes are escaped in attributes only, where they
- * are the ones that can break out.
- */
-export function escapeText(value: string): string {
-  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-}
-
-export function escapeAttribute(value: string): string {
-  return escapeText(value).replace(/"/g, '&quot;').replace(/'/g, '&#39;')
-}
-
-function serializeAttributes(attrs: Attributes): string {
-  let out = ''
-  // Insertion order, not sorted: it is deterministic already, and an author
-  // reading a snapshot expects the order they wrote.
-  for (const [name, value] of Object.entries(attrs)) {
-    if (value === undefined || value === false) continue
-    if (value === true) {
-      out += ` ${name}`
-      continue
-    }
-    out += ` ${name}="${escapeAttribute(String(value))}"`
-  }
-  return out
-}
-
-export function serialize(node: HtmlNode): string {
-  if (node.kind === 'text') return escapeText(node.value)
-  const open = `<${node.tag}${serializeAttributes(node.attrs)}>`
-  if (VOID_ELEMENTS.has(node.tag)) return open
-  return `${open}${node.children.map(serialize).join('')}</${node.tag}>`
-}
-
-export function serializeAll(nodes: readonly HtmlNode[]): string {
-  return nodes.map(serialize).join('')
-}
+/** Re-exported from `@cogenta/theme-kit` — see that package's `html.ts`. */
+export {
+  type Attributes,
+  type AttributeValue,
+  type Child,
+  escapeAttribute,
+  escapeText,
+  type HtmlElement,
+  type HtmlNode,
+  type HtmlText,
+  h,
+  serialize,
+  serializeAll,
+  text,
+} from '@cogenta/theme-kit'

package/src/render/icons.ts

@@ -0,0 +1,2 @@
+/** Re-exported from `@cogenta/theme-kit` — see that package's `icons.ts`. */
+export { ICON_NAMES, type IconName, renderIcon } from '@cogenta/theme-kit'