{node.value}
- case 'emphasis':
- return {inlines(node.children)}
- case 'strong':
- return {inlines(node.children)}
- case 'link': {
- const href = safeLink(node.url)
- return href === undefined ? (
- {inlines(node.children)}
- case 'heading': - return createElement(`h${node.depth}`, { key }, inlines(node.children)) - case 'code': - return ( -
- {node.lang?.toLowerCase() === 'silk' ? silk(node.value) : node.value}
-
- )
- case 'blockquote':
- return (
- - {node.children.map((child, index) => block(child, index))} -- ) - case 'list': { - const List = node.ordered ? 'ol' : 'ul' - return ( -
{node.value}
- case 'definition': - return null - default: - return null - } -} - -/** Safely renders the CommonMark payload supplied by one language-server hover. */ -export function Content(props: { readonly markdown: string }) { - const root = fromMarkdown(props.markdown) - return ( -` strings
+ (Prose.ts) from documentation JSON, where a fence's `language` field carries the full comma-form
+ token (`silk,ignore`).
+- `packages/language` depends only on `compiler` and `documentation`; CodeMirror is a peer
+ dependency there.
+
+## Goals / Non-Goals
+
+**Goals:**
+
+- One framework-free package owning the element; labs and the static site are both consumers.
+- Behavior parity with doctest: what the element compiles is exactly what doctest verified.
+- Keep the extraction mechanical — no new semantic engine, no worker, no protocol.
+
+**Non-Goals:**
+
+- Running snippets (evaluation/output) — display and editing semantics only.
+- Multi-file or cross-snippet projects; one element is one standalone module.
+- A worker architecture; revisit only if editable snippets measurably jank.
+- Replacing the docs app's Shiki path for non-Silk fences.
+- Publishing/versioning strategy for the element bundle beyond the site's own output.
+
+## Decisions
+
+**New package `@silk-effect/snippet`, not a `language` subpath.** The element needs
+`@silk-effect/lsp`; `packages/language` deliberately has no `lsp` dependency and other consumers
+(TextMate, vscode) should not inherit one. Dependencies: `compiler`, `lsp`, `language`,
+CodeMirror packages, `mdast-util-from-markdown`. Two deliverables: an ESM library export (custom
+element class + registration function) and a self-registering IIFE/ESM bundle for script-tag use
+in generated sites.
+
+**Keep CodeMirror for read-only snippets.** Alternative — a hand-rolled span renderer for
+read-only mode — was rejected: tooltips, squiggle decorations, byte↔UTF-16 translation, and the
+editable upgrade path all already work in CodeMirror, and read-only is one
+`EditorState.readOnly.of(true)` facet. Bundle cost is accepted until measured to matter.
+
+**Custom element with shadow DOM.** `connectedCallback` reads `textContent` as the source (HTML
+entity decoding applies; generators escape normally), replaces it with the shadow-rendered editor,
+and keeps the light-DOM text as the no-JS fallback until upgrade. Observed boolean attributes:
+`diagnostics`, `hover`, `inlay-hints`, `editable`. Theming via `--silk-snippet-*` custom
+properties with light/dark defaults keyed off `prefers-color-scheme`; the labs workbench keeps its
+own dark values by setting the properties.
+
+**Compilation is per-element, lazy, main-thread.** Each element with at least one semantic
+attribute compiles its own content with `Analysis.ofSourceRealized` (doctest's identity scheme and
+default target) when an `IntersectionObserver` first reports it visible. Highlight-only elements
+never compile. Editable elements recompile on a debounced document change, replacing the snapshot
+the semantic providers read — the same shape as labs' snapshot-per-edit flow. No snapshot sharing
+across elements: snippets are independent modules and correctness beats a cache.
+
+**Hover rendering moves from React to DOM construction.** `Hover.tsx`'s mdast walk is rewritten
+node-for-node using `document.createElement`, preserving `safeLink` (http/https/mailto only) and
+the highlighted rendering of nested `silk` code via `SilkCodeMirror.highlightRanges`. This DOM
+renderer lives in the snippet package; labs deletes `Hover.tsx` and uses the element.
+
+**Inlay hints via CodeMirror widget decorations.** `LspDocument.inlayHints` results become inline
+widget decorations (not document text), recomputed with the snapshot. This is the only genuinely
+new feature code in the change.
+
+**Labs re-points, workbench API preserved.** `SilkEditor` keeps its current props signature but
+delegates to the element (or directly to the extracted mounting API), keeping `workbench.tsx`
+untouched. The span-cursor field and URL/format wiring stay in labs — they are workbench concerns,
+exposed by the element as a small imperative surface (set span highlight, format, get/set value)
+on the element instance.
+
+**Site emission via fence attributes.** Prose.ts branches on the parsed fence language token using
+doctest's `Example.parseLanguage` convention: `silk` → element with `diagnostics hover`;
+`silk,ignore` → element with no semantic attributes; anything else → existing ``. The
+site build copies the element bundle into the output and references it with a relative `
-
+ ${
+ snippetScript ? `\n ` : ''
+ }