@uniweb/content-writer 0.2.7 → 0.2.9

package/src/nodes.js

@@ -4,7 +4,9 @@
  * Each function takes a ProseMirror node and returns a markdown string.
  */
 
+import yaml from 'js-yaml'
 import { serializeInlineContent, serializeBlockImage, serializeInsetRef } from './marks.js'
+import { serializeAttributes } from './attributes.js'
 
 // inset_ref serialization is shared with the inline path; it lives in
 // marks.js (alongside the other inline-attribute serializers) and is
@@ -49,7 +51,25 @@ export function serializeCodeBlock(node) {
   const lang = node.attrs?.language || ''
   const tag = node.attrs?.tag ? `:${node.attrs.tag}` : ''
   const text = node.content?.[0]?.text || ''
-  return `\`\`\`${lang}${tag}\n${text}\n\`\`\``
+  const fence = '`'.repeat(fenceWidthFor(text))
+  return `${fence}${lang}${tag}\n${text}\n${fence}`
+}
+
+/**
+ * How many backticks this content needs as a fence.
+ *
+ * A fence must be longer than the longest backtick run inside it, or the
+ * block ends early — which is why documentation that shows fenced markdown
+ * is itself fenced in four backticks. Emitting three unconditionally
+ * truncated those blocks and spilled their remainder into the page as prose.
+ *
+ * @param {string} text - The code block's content
+ * @returns {number} Fence length, never fewer than three
+ */
+function fenceWidthFor(text) {
+  const runs = String(text).match(/`+/g) || []
+  const longest = runs.reduce((max, run) => Math.max(max, run.length), 0)
+  return Math.max(3, longest + 1)
 }
 
 /**
@@ -76,15 +96,70 @@ export function serializeMathDisplay(node) {
     : '$$' + latex + '$$'
 }
 
+/**
+ * Serialize a container node back to its fence.
+ *
+ * The inverse of content-reader's `@Component{params}` fence. The info string
+ * is the inset's own token, so a container is byte-for-byte the block form of
+ * an inset — same concept, two levels.
+ *
+ * The fence widens past any backtick run in the body, which is what lets a
+ * container hold a code sample: `fenceWidthFor` is the same computation the
+ * plain code-block path uses.
+ *
+ * @param {Object} node - inset_block node with attrs.component + params
+ * @returns {string} Fenced container
+ */
+export function serializeInsetBlock(node) {
+  const { component, ...params } = node.attrs || {}
+  if (!component) return ''
+
+  const { serializeNode } = await_serializer()
+  const body = (node.content || [])
+    .map(child => serializeNode(child))
+    .filter(Boolean)
+    .join('\n\n')
+
+  const fence = '`'.repeat(fenceWidthFor(body))
+  const attrStr = serializeAttributes(params)
+
+  return `${fence}@${component}${attrStr}\n${body}\n${fence}`
+}
+
 /**
  * Serialize a data block node.
- * @param {Object} node - Data block node with attrs.tag and attrs.data
+ *
+ * Emits the serialization the author wrote, which `attrs.language` records.
+ * This used to hardcode JSON, so a ```yaml:nav block came back as ```json:nav
+ * — same data, rewritten source, on every editor sync.
+ *
+ * **YAML is the fallback when `language` is absent**, not JSON. A node without
+ * it predates the reader recording it, and YAML is both the form the docs
+ * teach and the friendlier one to leave in someone's file; JSON is still
+ * emitted whenever it is what the author actually chose.
+ *
+ * @param {Object} node - Data block node with attrs.tag, attrs.data, attrs.language
  * @returns {string} Tagged fenced code block with serialized data
  */
 export function serializeDataBlock(node) {
-  const { tag, data } = node.attrs || {}
-  const serialized = JSON.stringify(data, null, 2)
-  return `\`\`\`json:${tag}\n${serialized}\n\`\`\``
+  const { tag, data, language } = node.attrs || {}
+
+  if ((language || '').toLowerCase() === 'json') {
+    return `\`\`\`json:${tag}\n${JSON.stringify(data, null, 2)}\n\`\`\``
+  }
+
+  // `yaml` and `yml` are both valid fences; echo back whichever was written.
+  const fence = language || 'yaml'
+  const serialized = yaml
+    .dump(data, {
+      lineWidth: -1, // Don't wrap long lines
+      quotingType: "'", // Use single quotes when quoting is needed
+      forceQuotes: false, // Only quote when necessary
+      noRefs: true, // Don't use YAML references
+    })
+    .trimEnd()
+
+  return `\`\`\`${fence}:${tag}\n${serialized}\n\`\`\``
 }
 
 /**
@@ -110,63 +185,134 @@ export function serializeBlockquote(node) {
 
 /**
  * Serialize a bullet list node.
+ *
+ * `pad` is the literal indentation this list sits at — the parent item's
+ * CONTENT COLUMN, not a level count. See serializeListItem for why.
+ *
  * @param {Object} node - Bullet list node with content (listItem nodes)
- * @param {number} [indent=0] - Indentation level
+ * @param {string} [pad=''] - Indentation prefix for every marker in this list
  * @returns {string} Markdown bullet list
  */
-export function serializeBulletList(node, indent = 0) {
+export function serializeBulletList(node, pad = '') {
   if (!node.content) return ''
-  const prefix = '  '.repeat(indent)
   return node.content
-    .map(item => serializeListItem(item, `${prefix}- `, indent))
-    .join('\n')
+    .map(item => serializeListItem(item, `${pad}- `, isLoose(node)))
+    .join(itemSeparator(node))
 }
 
 /**
  * Serialize an ordered list node.
+ *
+ * `pad` is the literal indentation this list sits at — see serializeBulletList.
+ *
  * @param {Object} node - Ordered list node with attrs.start and content
- * @param {number} [indent=0] - Indentation level
+ * @param {string} [pad=''] - Indentation prefix for every marker in this list
  * @returns {string} Markdown ordered list
  */
-export function serializeOrderedList(node, indent = 0) {
+export function serializeOrderedList(node, pad = '') {
   if (!node.content) return ''
   const start = node.attrs?.start || 1
-  const prefix = '  '.repeat(indent)
   return node.content
-    .map((item, i) => serializeListItem(item, `${prefix}${start + i}. `, indent))
-    .join('\n')
+    .map((item, i) => serializeListItem(item, `${pad}${start + i}. `, isLoose(node)))
+    .join(itemSeparator(node))
+}
+
+/**
+ * What goes between two list items.
+ *
+ * A loose list — one the author spaced out with blank lines — keeps that
+ * spacing. `attrs.loose` is recorded by content-reader; a list without it is
+ * tight, which is both the common case and the safe default for documents
+ * written before the flag existed.
+ *
+ * @param {Object} node - A bulletList or orderedList node
+ * @returns {string}
+ */
+function itemSeparator(node) {
+  return isLoose(node) ? '\n\n' : '\n'
+}
+
+/**
+ * Did the author space this list out?
+ * @param {Object} node - A bulletList or orderedList node
+ * @returns {boolean}
+ */
+function isLoose(node) {
+  return Boolean(node.attrs?.loose)
 }
 
 /**
  * Serialize a list item.
+ *
+ * A nested list is indented to this item's CONTENT COLUMN — `bullet.length` —
+ * not by a fixed two spaces per level. The marker's width varies (`- ` is 2,
+ * `9. ` is 3, `10. ` is 4), and a child indented less than the parent's
+ * content column is not a child at all: markdown reads it as ending the
+ * outer list. That is a source-corrupting bug, not a cosmetic one — a
+ * three-item ordered list with a nested bullet list came back as three
+ * separate top-level nodes.
+ *
+ * `pad` already computes that column for every other block in the item; nested
+ * lists now use the same value instead of their own count.
+ *
  * @param {Object} node - List item node with content
  * @param {string} bullet - The bullet prefix (e.g., "- " or "1. ")
- * @param {number} indent - Current indentation level
+ * @param {boolean} [loose=false] - Whether the parent list is loose
  * @returns {string} Markdown list item
  */
-function serializeListItem(node, bullet, indent) {
+function serializeListItem(node, bullet, loose = false) {
   if (!node.content) return bullet
 
   const parts = []
+  const pad = ' '.repeat(bullet.length)
 
   for (let i = 0; i < node.content.length; i++) {
     const child = node.content[i]
 
-    if (i === 0 && child.type === 'paragraph') {
-      // First child paragraph is the item text
-      parts.push(bullet + serializeInlineContent(child.content))
-    } else if (child.type === 'bulletList') {
-      parts.push(serializeBulletList(child, indent + 1))
-    } else if (child.type === 'orderedList') {
-      parts.push(serializeOrderedList(child, indent + 1))
-    } else if (child.type === 'paragraph') {
-      // Additional paragraphs in the same list item
-      const pad = ' '.repeat(bullet.length)
-      parts.push(pad + serializeInlineContent(child.content))
+    // Nested lists carry their own indentation.
+    if (child.type === 'bulletList') {
+      parts.push(serializeBulletList(child, pad))
+      continue
+    }
+    if (child.type === 'orderedList') {
+      parts.push(serializeOrderedList(child, pad))
+      continue
     }
+
+    // Anything else is an ordinary block. A paragraph is inline content; a
+    // code block, blockquote or table goes through the node serializer, the
+    // same way a blockquote's children do. Every one of those used to fall
+    // off the end of this loop and be dropped without a trace.
+    const text =
+      child.type === 'paragraph'
+        ? serializeInlineContent(child.content)
+        : await_serializer().serializeNode(child) || ''
+
+    parts.push(indentBlock(text, i === 0 ? bullet : pad, pad))
   }
 
-  return parts.join('\n')
+  // In a loose list the item's own blocks are blank-line separated too — the
+  // spacing is a property of the whole list, not just the gaps between items.
+  return parts.join(loose ? '\n\n' : '\n')
+}
+
+/**
+ * Place a block's lines inside a list item.
+ *
+ * The first line carries the bullet (or aligns under it, for a block that is
+ * not the item's opening one); every later line aligns under the bullet so it
+ * stays part of the item instead of ending the list.
+ *
+ * @param {string} text - Serialized block, possibly multi-line
+ * @param {string} firstPrefix - Prefix for the first line
+ * @param {string} pad - Prefix for continuation lines
+ * @returns {string}
+ */
+function indentBlock(text, firstPrefix, pad) {
+  const [first = '', ...rest] = String(text).split('\n')
+  const head = firstPrefix + first
+  if (rest.length === 0) return head
+  return [head, ...rest.map(line => (line ? pad + line : ''))].join('\n')
 }
 
 /**
@@ -187,13 +333,17 @@ export function serializeTable(node) {
 
   const rows = node.content
   const headerRow = rows[0]
+  // A row with no cells is legal ProseMirror — `tableRow` is
+  // `(tableCell | tableHeader)*`, a star — and PM's toJSON omits `content`
+  // entirely for an empty node. Reading it unguarded threw.
+  const cellsOf = row => row?.content ?? []
   const bodyRows = rows.slice(1)
 
   // Serialize header cells
-  const headerCells = headerRow.content.map(cell => serializeTableCell(cell))
+  const headerCells = cellsOf(headerRow).map(cell => serializeTableCell(cell))
 
   // Build alignment row from header cell attrs
-  const alignments = headerRow.content.map(cell => {
+  const alignments = cellsOf(headerRow).map(cell => {
     const align = cell.attrs?.align
     if (align === 'left') return ':---'
     if (align === 'center') return ':---:'
@@ -203,7 +353,7 @@ export function serializeTable(node) {
 
   // Serialize body rows
   const bodyLines = bodyRows.map(row =>
-    '| ' + row.content.map(cell => serializeTableCell(cell)).join(' | ') + ' |'
+    '| ' + cellsOf(row).map(cell => serializeTableCell(cell)).join(' | ') + ' |'
   )
 
   const headerLine = '| ' + headerCells.join(' | ') + ' |'
@@ -220,7 +370,7 @@ export function serializeTable(node) {
 function serializeTableCell(cell) {
   if (!cell.content) return ''
   // Table cells contain paragraphs; serialize their inline content
-  return cell.content
+  const text = cell.content
     .map(child => {
       if (child.type === 'paragraph') {
         return serializeInlineContent(child.content)
@@ -228,6 +378,27 @@ function serializeTableCell(cell) {
       return ''
     })
     .join(' ')
+
+  return escapeTableCell(text)
+}
+
+/**
+ * Escape the one character a table cell cannot contain literally.
+ *
+ * A pipe inside a cell ends it, so markdown spells a literal one `\|` and the
+ * parser hands back the unescaped character. Writing that back out unescaped
+ * splits the cell and shifts every column after it — the table silently gains
+ * a column and stops lining up with its header.
+ *
+ * Only the pipe needs this: the cell's other content has already been through
+ * the inline serializers, and a row is a single line by construction.
+ *
+ * @param {string} text - Serialized inline content of one cell
+ * @returns {string}
+ */
+function escapeTableCell(text) {
+  // Leave an already-escaped pipe alone rather than doubling its backslash.
+  return text.replace(/\\?\|/g, '\\|')
 }
 
 // Lazy reference to serializeNode to handle circular dependency with blockquote

package/src/normalize.js

@@ -155,9 +155,20 @@ function mapVideo(node) {
  */
 function mapUniwebIcon(node) {
   const attrs = node.attrs || {}
-  if (!attrs.library || !attrs.name) return null
 
-  const out = { role: 'icon', library: attrs.library, name: attrs.name }
+  // The insert path stores a single colon-joined `family:id` name (built from
+  // the icon CDN URL) and leaves `library` unset — so requiring both dropped
+  // every icon the editor actually produces. The separate-attr form is kept
+  // for content that already carries it.
+  let { library, name } = attrs
+  if (!library && typeof name === 'string' && name.includes(':')) {
+    const [family, ...rest] = name.split(':')
+    library = family
+    name = rest.join(':')
+  }
+  if (!library || !name) return null
+
+  const out = { role: 'icon', library, name }
   if (attrs.size) out.size = attrs.size
   if (attrs.color) out.color = attrs.color
   return { type: 'image', attrs: out }
@@ -179,17 +190,36 @@ function mapEditorNode(node) {
     case 'Video':
       return mapVideo(node)
     case 'UniwebIcon':
+    case 'Icon':
       return mapUniwebIcon(node)
-    case 'text':
-      // Legacy hard break: content-reader used to emit a hard break as a
-      // standalone "\n" text node. Self-heal it to the node form so old
-      // documents converge on the next write.
-      //
-      // Deliberately narrow — ONLY a text node whose text is exactly "\n".
-      // A newline INSIDE a larger text node is a SOFT break (an ordinary
-      // wrapped paragraph), which is a space and must stay one; mapping those
-      // would inject a visible break into every wrapped paragraph.
-      return node.text === '\n' ? { type: 'hardBreak' } : null
+    case 'WarningBlock':
+    case 'details': {
+      const attrs = EDITOR_CONTAINERS[node.type](node)
+      return {
+        type: 'inset_block',
+        attrs,
+        content: node.type === 'details' ? detailsBody(node) : asBlocks(node.content),
+      }
+    }
+    case 'emoji':
+      // The node carries the character alongside a name; the character is the
+      // whole markdown form. Guarded rather than assumed to be populated.
+      return node.attrs?.emoji ? { type: 'text', text: node.attrs.emoji } : null
+    // A standalone "\n" text node is NOT mapped here, deliberately.
+    //
+    // It used to be: content-reader once spelled a hard break that way, and
+    // this healed old documents onto the node form. The migration is done —
+    // content-reader has emitted a `hardBreak` node for both markdown
+    // spellings for some time, and no persisted document carries the legacy
+    // form (confirmed 2026-07-26).
+    //
+    // Keeping the rule past that point made it wrong. content-reader still
+    // produces a lone "\n" node, but for a SOFT break — a newline lands in
+    // its own node whenever the spans on both sides are marked, as in
+    // "`--heading` → `text-heading`" followed by another such line. Healing
+    // that turned an ordinary wrapped line into a visible break: the sync
+    // wrote a trailing "\", and the next read made it a real <br>, so the
+    // page reflowed one round trip after the edit.
     default:
       return null
   }
@@ -201,10 +231,125 @@ function mapEditorNode(node) {
  * its children. Nodes without a mapping pass through unchanged so any
  * editor-dialect descendants are still caught.
  */
+/**
+ * The editor's named inline styles, and the framework spelling of each.
+ *
+ * These are theme tokens, not colours. The editor's picker offers exactly this
+ * closed set — the attribute is *named* `color` but holds a token, which its
+ * extension renders as `var(--<token>)`. So they map onto the `span` mark the
+ * framework already round-trips as `[text]{token}`, and nothing is lost.
+ *
+ * A value outside this set (a hex from a paste, until the editor gates its
+ * `parseHTML`) is deliberately NOT mapped: it falls through to the
+ * no-silent-drop guard rather than writing a raw colour into markdown, where
+ * it would contradict the theming model and not survive a change of brand.
+ */
+const NAMED_INLINE_STYLES = new Set(['accent', 'highlight', 'callout', 'muted'])
+
+/**
+ * Editor container nodes → the framework's `inset_block`, as an explicit table.
+ *
+ * Deliberately not derived from the node name. The editor's node is
+ * `WarningBlock` while the component is `Alert`, and its `type` defaults to
+ * `info` rather than `warning` — a name-derived mapping drops exactly that row,
+ * which is how `mapUniwebIcon` came to lose every icon the editor produces. A
+ * missing entry here is a visible gap rather than a silent assumption.
+ */
+const EDITOR_CONTAINERS = {
+  WarningBlock: node => ({ component: 'Alert', type: node.attrs?.type || 'info' }),
+  details: () => ({ component: 'Details' }),
+}
+
+/** Inline node types, for deciding whether a container's body needs wrapping. */
+const INLINE_TYPES = new Set([
+  'text',
+  'hardBreak',
+  'image',
+  'math_inline',
+  'inset_ref',
+  'emoji',
+  'UniwebIcon',
+])
+
+/**
+ * A container body as block content.
+ *
+ * `WarningBlock` holds `text*` today and `block+` after the editor's widening,
+ * so both shapes arrive here. Inline content is wrapped in one paragraph;
+ * block content passes through.
+ *
+ * @param {Array} content
+ * @returns {Array}
+ */
+function asBlocks(content) {
+  if (!content?.length) return []
+  return content.every(node => INLINE_TYPES.has(node.type))
+    ? [{ type: 'paragraph', content }]
+    : content
+}
+
+/**
+ * Flatten the editor's `details` › `detailsSummary` + `detailsContent` into the
+ * container's body, summary first.
+ *
+ * The summary leads rather than riding on an attribute: `detailsSummary` can
+ * carry marks, and `summary="…"` would flatten emphasis and links.
+ *
+ * @param {Object} node
+ * @returns {Array}
+ */
+function detailsBody(node) {
+  const body = []
+  for (const child of node.content || []) {
+    if (child.type === 'detailsSummary') body.push(...asBlocks(child.content))
+    else if (child.type === 'detailsContent') body.push(...(child.content || []))
+    else body.push(child)
+  }
+  return body
+}
+
+/** A mark that carries nothing and should be removed rather than reported. */
+const DROP_MARK = Symbol('drop-mark')
+
+/**
+ * Map an editor-dialect mark to the framework dialect.
+ *
+ * @param {Object} mark
+ * @returns {Object|Symbol|null} a framework mark, `DROP_MARK` when the mark
+ *   carries no styling at all, or null when there is no mapping (the original
+ *   is kept and reported by the no-silent-drop guard)
+ */
+function mapEditorMark(mark) {
+  if (mark?.type === 'highlight') {
+    // Effectively boolean in the editor: its extension hardcodes the
+    // background and ignores the attribute.
+    return { type: 'span', attrs: { highlight: true } }
+  }
+
+  if (mark?.type === 'textStyle') {
+    const token = mark.attrs?.color
+    // The picker's "Normal" option. Nothing is being dropped, so reporting it
+    // would be noise in a guard whose value depends on staying quiet.
+    if (!token) return DROP_MARK
+    if (!NAMED_INLINE_STYLES.has(token)) return null // a colour, not a token
+    return { type: 'span', attrs: { [token]: true } }
+  }
+
+  return null
+}
+
 function normalizeNode(node) {
   if (!node || typeof node !== 'object') return node
 
-  const result = mapEditorNode(node) || node
+  let result = mapEditorNode(node) || node
+
+  if (Array.isArray(result.marks) && result.marks.length) {
+    // An unmapped mark is kept, so the no-silent-drop guard still reports it.
+    result = {
+      ...result,
+      marks: result.marks.map(m => mapEditorMark(m) || m).filter(m => m !== DROP_MARK),
+    }
+  }
 
   if (Array.isArray(result.content)) {
     return { ...result, content: result.content.map(normalizeNode) }

package/src/plain-text.js

@@ -4,8 +4,15 @@
  * Strips all markdown formatting, returning just the text content
  * with newlines for structure. Useful for word counting, search
  * indexing, and generating summaries.
+ *
+ * "Plain" is meant literally: PM text nodes carry HTML (see `entities.js`),
+ * so every text run is stripped of raw inline tags and its entities resolved
+ * to the characters a reader would see. Without that, a summary can ship
+ * `&lt;` or a stray `<span>` into whatever consumes it.
  */
 
+import { toPlainCharacters } from './entities.js'
+
 /**
  * Extract plain text from a ProseMirror document.
  *
@@ -21,6 +28,64 @@ export function docToPlainText(doc) {
     .join('\n\n')
 }
 
+/**
+ * Summarize a ProseMirror document in one sentence-ish line.
+ *
+ * Reads the document's **first paragraph**, not the whole document: pages
+ * routinely open with an `# H1`, and `docToPlainText` would hand back that
+ * title as the summary. A page with no paragraph at the top level returns
+ * `''` — callers are expected to have an authored fallback.
+ *
+ * The result is plain characters (tags stripped, entities resolved), so
+ * truncating on a sentence boundary lands on a real sentence boundary
+ * rather than somewhere inside a tag or an entity.
+ *
+ * @param {Object} doc - ProseMirror document
+ * @param {Object} [options]
+ * @param {number} [options.maxChars=200] - Soft upper bound on the result
+ * @returns {string} A single-line summary, or '' when there is nothing to say
+ */
+export function docSummaryText(doc, { maxChars = 200 } = {}) {
+  if (!doc?.content) return ''
+
+  let text = ''
+  for (const node of doc.content) {
+    if (node.type !== 'paragraph') continue
+    text = inlineToPlainText(node.content).trim()
+    if (text) break
+  }
+  if (!text) return ''
+
+  // Collapse internal whitespace — a summary is one line.
+  text = text.replace(/\s+/g, ' ')
+
+  return truncateAtSentence(text, maxChars)
+}
+
+/**
+ * Trim to `maxChars`, preferring a sentence boundary, then a word boundary.
+ *
+ * @param {string} text - Already-collapsed plain text
+ * @param {number} maxChars
+ * @returns {string}
+ */
+function truncateAtSentence(text, maxChars) {
+  if (text.length <= maxChars) return text
+
+  const window = text.slice(0, maxChars)
+
+  // A sentence end is terminal punctuation followed by whitespace — so
+  // "5 minutes." ends a sentence but the dot in "site.yml" does not. Take the
+  // last one in the window, to keep as much of the paragraph as fits.
+  const ends = [...window.matchAll(/[.!?](?=\s|$)/g)]
+  const lastEnd = ends.length ? ends[ends.length - 1].index : -1
+  if (lastEnd > 0) return window.slice(0, lastEnd + 1)
+
+  const lastSpace = window.lastIndexOf(' ')
+  const cut = lastSpace > 0 ? window.slice(0, lastSpace) : window
+  return `${cut.replace(/[,;:—–-]$/, '').trimEnd()}…`
+}
+
 /**
  * Extract plain text from a single ProseMirror node.
  * @param {Object} node
@@ -67,10 +132,12 @@ function nodeToPlainText(node) {
  */
 function inlineToPlainText(content) {
   if (!content) return ''
-  return content
-    .filter(node => node.type === 'text')
-    .map(node => node.text || '')
-    .join('')
+  return toPlainCharacters(
+    content
+      .filter(node => node.type === 'text')
+      .map(node => node.text || '')
+      .join('')
+  )
 }
 
 /**

package/src/serializer.js

@@ -9,6 +9,7 @@ import {
   serializeParagraph,
   serializeImage,
   serializeInsetRef,
+  serializeInsetBlock,
   serializeCodeBlock,
   serializeDataBlock,
   serializeBlockquote,
@@ -27,6 +28,7 @@ const NODE_SERIALIZERS = {
   paragraph: serializeParagraph,
   image: serializeImage,
   inset_ref: serializeInsetRef,
+  inset_block: serializeInsetBlock,
   codeBlock: serializeCodeBlock,
   dataBlock: serializeDataBlock,
   blockquote: serializeBlockquote,

package/tests/attributes.test.js

@@ -27,12 +27,12 @@ describe('Attribute Serialization', () => {
     expect(serializeAttributes({ autoplay: true, muted: true })).toBe('{autoplay muted}')
   })
 
-  test('serializes class as dot notation', () => {
-    expect(serializeAttributes({ class: 'featured' })).toBe('{.featured}')
+  test('serializes a dotted NAME through the plain boolean branch', () => {
+    expect(serializeAttributes({ '.featured': true })).toBe('{.featured}')
   })
 
-  test('serializes multiple classes', () => {
-    expect(serializeAttributes({ class: 'featured rounded shadow' })).toBe('{.featured .rounded .shadow}')
+  test('serializes several dotted names', () => {
+    expect(serializeAttributes({ '.featured': true, '.rounded': true, '.shadow': true })).toBe('{.featured .rounded .shadow}')
   })
 
   test('serializes id as hash notation', () => {
@@ -41,7 +41,7 @@ describe('Attribute Serialization', () => {
 
   test('serializes mixed attributes', () => {
     const result = serializeAttributes({
-      class: 'featured',
+      '.featured': true,
       id: 'main-logo',
       width: 800,
       loading: 'lazy',
@@ -95,7 +95,7 @@ describe('Attribute Serialization', () => {
 
   test('serializes data attributes', () => {
     const result = serializeAttributes({
-      class: 'info',
+      '.info': true,
       'data-tooltip': 'More info',
     })
     expect(result).toBe('{.info data-tooltip="More info"}')