4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T11b8,// Layout IR types for pretext-md // These types bridge the gap between mdast (remark's AST) and pretext measurement. // --- Font configuration --- export type FontConfig = { body: string // e.g. '14px "Inter", sans-serif' bold: string // e.g. 'bold 14px "Inter", sans-serif' italic: string // e.g. 'italic 14px "Inter", sans-serif' boldItalic: string // e.g. 'bold italic 14px "Inter", sans-serif' code: string // e.g. '13px "Fira Code", monospace' h1: string h2: string h3: string h4: string h5: string h6: string } export type LineHeightConfig = { body: number // e.g. 20 code: number // e.g. 18 h1: number // e.g. 32 h2: number // e.g. 28 h3: number // e.g. 24 h4: number h5: number h6: number } export type MeasureConfig = { maxWidth: number fonts: FontConfig lineHeights: LineHeightConfig plugins?: EmbedPlugin[] // Internal — used by container plugins to thread nesting state _quoteRails?: number[] _contentLeft?: number } // --- Block-level nodes (parser output) --- export type BlockNode = | ParagraphNode | HeadingNode | CodeBlockNode | BlockquoteNode | ListNode | ThematicBreakNode | ImageNode | TableNode export type ParagraphNode = { kind: 'paragraph' items: InlineItem[] } export type HeadingNode = { kind: 'heading' level: 1 | 2 | 3 | 4 | 5 | 6 items: InlineItem[] } export type CodeBlockNode = { kind: 'code-block' lang: string code: string meta?: string } export type BlockquoteNode = { kind: 'blockquote' children: BlockNode[] } export type ListNode = { kind: 'list' ordered: boolean start?: number items: BlockNode[][] } export type ThematicBreakNode = { kind: 'hr' } export type ImageNode = { kind: 'image' src: string alt?: string } export type TableAlignType = 'left' | 'center' | 'right' | null export type TableNode = { kind: 'table' align: TableAlignType[] rows: InlineItem[][][] // rows → cells → inline items } // --- Inline items (within paragraphs/headings) --- export type InlineItem = | TextItem | CodeItem | LinkItem | BreakItem export type TextItem = { kind: 'text' text: string font: FontStyle } export type CodeItem = { kind: 'code' text: string } export type LinkItem = { kind: 'link' items: InlineItem[] href: string } export type BreakItem = { kind: 'break' } // font style resolved during inline layout based on FontConfig export type FontStyle = 'body' | 'bold' | 'italic' | 'boldItalic' | 'strikethrough' // --- Measured output --- export type MeasuredBlock = { node: BlockNode height: number y: number lines?: MeasuredLine[] // for paragraph/heading/code blocks children?: MeasuredBlock[] // for blockquote inner blocks items?: MeasuredBlock[][] // for list items (each item = array of measured blocks) // Marker/rail positioning — measured coordinates for precise rendering marker?: { text: string; x: number } // list bullet/number position quoteRails?: number[] // blockquote rail x-positions (one per nesting level) contentLeft?: number // x-offset where content starts (after markers/rails) } export type MeasuredLine = { fragments: LineFragment[] width: number y: number // offset within block } export type LineFragment = { text: string width: number font: string // resolved CSS font string fontStyle: FontStyle leadingGap: number // marginLeft gap before this fragment href?: string isCode?: boolean isStrikethrough?: boolean } export type MeasureResult = { height: number lineCount: number blocks: MeasuredBlock[] } // --- Plugin system --- export type EmbedMeasurement = | { kind: 'fixed'; height: number } | { kind: 'computed'; height: number } | { kind: 'aspect-ratio'; ratio: number; maxHeight?: number } /** Context passed to plugins for recursive measurement. */ export type PluginContext = { measureBlocks: (blocks: BlockNode[], config: MeasureConfig) => MeasureResult config: MeasureConfig } export type EmbedPlugin = { name: string match: (node: BlockNode) => boolean /** Simple measurement — returns a height. For leaf blocks (code, image, hr). */ measure: (node: any, maxWidth: number, ctx?: PluginContext) => EmbedMeasurement /** Full measurement — returns MeasuredBlock with children/lines. For container blocks (blockquote, list). */ measureBlock?: (node: any, ctx: PluginContext) => MeasuredBlock } 52:T12b0,// mdast walker — converts remark AST to our layout IR (BlockNode/InlineItem) import { unified } from 'unified' import remarkParse from 'remark-parse' import remarkGfm from 'remark-gfm' import type { BlockNode, InlineItem, FontStyle, } from './types' import type { Root, Content, PhrasingContent, Paragraph, Heading, Code, Blockquote, List, ListItem, ThematicBreak, Text, Emphasis, Strong, InlineCode, Link, Delete, Break, Image, Table, TableRow, TableCell, AlignType, } from 'mdast' const parser = unified().use(remarkParse).use(remarkGfm) export function parse(markdown: string): BlockNode[] { // Strip HTML comments before parsing (same as MarkdownRenderer) const cleaned = markdown.replace(//g, '') const tree = parser.parse(cleaned) as Root return walkBlocks(tree.children) } function walkBlocks(nodes: Content[]): BlockNode[] { const blocks: BlockNode[] = [] for (const node of nodes) { const block = walkBlock(node) if (block) blocks.push(block) } return blocks } function walkBlock(node: Content): BlockNode | null { switch (node.type) { case 'paragraph': return walkParagraph(node as Paragraph) case 'heading': return walkHeading(node as Heading) case 'code': return walkCode(node as Code) case 'blockquote': return walkBlockquote(node as Blockquote) case 'list': return walkList(node as List) case 'thematicBreak': return { kind: 'hr' } as const case 'table': return walkTable(node as Table) default: return null } } function walkParagraph(node: Paragraph): BlockNode { // Image-only paragraph → promote to block-level image if (node.children.length === 1 && node.children[0]!.type === 'image') { const img = node.children[0] as Image return { kind: 'image', src: img.url, alt: img.alt ?? undefined } } return { kind: 'paragraph', items: walkInlines(node.children, 'body'), } } function walkHeading(node: Heading): BlockNode { return { kind: 'heading', level: node.depth as 1 | 2 | 3 | 4 | 5 | 6, items: walkInlines(node.children, 'body'), } } function walkCode(node: Code): BlockNode { return { kind: 'code-block', lang: node.lang ?? '', code: node.value, meta: node.meta ?? undefined, } } function walkBlockquote(node: Blockquote): BlockNode { return { kind: 'blockquote', children: walkBlocks(node.children), } } function walkList(node: List): BlockNode { return { kind: 'list', ordered: node.ordered ?? false, start: node.start ?? undefined, items: node.children.map((item: ListItem) => walkBlocks(item.children)), } } function walkTable(node: Table): BlockNode { const align = (node.align ?? []).map((a: AlignType | null | undefined) => a === 'left' || a === 'center' || a === 'right' ? a : null, ) const rows = node.children.map((row: TableRow) => row.children.map((cell: TableCell) => walkInlines(cell.children as PhrasingContent[], 'body'), ), ) return { kind: 'table', align, rows } } // --- Inline walking --- function walkInlines(nodes: PhrasingContent[], fontStyle: FontStyle): InlineItem[] { const items: InlineItem[] = [] for (const node of nodes) { walkInline(node, fontStyle, items) } return items } function walkInline(node: PhrasingContent, fontStyle: FontStyle, out: InlineItem[]): void { switch (node.type) { case 'text': out.push({ kind: 'text', text: (node as Text).value, font: fontStyle }) break case 'strong': walkInlineChildren((node as Strong).children, applyBold(fontStyle), out) break case 'emphasis': walkInlineChildren((node as Emphasis).children, applyItalic(fontStyle), out) break case 'delete': walkInlineChildren((node as Delete).children, 'strikethrough', out) break case 'inlineCode': out.push({ kind: 'code', text: (node as InlineCode).value }) break case 'link': out.push({ kind: 'link', href: (node as Link).url, items: walkInlines((node as Link).children, fontStyle), }) break case 'break': out.push({ kind: 'break' }) break default: // skip unknown inline nodes break } } function walkInlineChildren(nodes: PhrasingContent[], fontStyle: FontStyle, out: InlineItem[]): void { for (const node of nodes) { walkInline(node, fontStyle, out) } } function applyBold(current: FontStyle): FontStyle { if (current === 'italic' || current === 'boldItalic') return 'boldItalic' return 'bold' } function applyItalic(current: FontStyle): FontStyle { if (current === 'bold' || current === 'boldItalic') return 'boldItalic' return 'italic' } 53:T29b0,// Mixed-font inline layout engine // // Based on chenglou's rich-note demo pattern: // - Flatten inline items to prepared runs // - Layout lines greedily with layoutNextLine per run // - Use leadingGap (marginLeft) for inter-fragment spacing instead of absolute x // - Trim text, convert boundary whitespace to measured gaps import { prepareWithSegments, layoutNextLine, walkLineRanges, type PreparedTextWithSegments, type LayoutCursor, } from '@chenglou/pretext' import type { InlineItem, FontConfig, FontStyle, MeasuredLine, LineFragment, } from './types' // --- Internal types --- type PreparedTextItem = { kind: 'text' font: string fontStyle: FontStyle chromeWidth: number endCursor: LayoutCursor fullText: string fullWidth: number leadingGap: number prepared: PreparedTextWithSegments href?: string isCode?: boolean isStrikethrough?: boolean } type PreparedBreakItem = { kind: 'break' } type PreparedItem = PreparedTextItem | PreparedBreakItem // --- Constants --- const LINE_START: LayoutCursor = { segmentIndex: 0, graphemeIndex: 0 } const UNBOUNDED = 100_000 const CODE_CHROME_WIDTH = 8 // 4px padding each side // --- Measurement helpers --- const collapsedSpaceWidthCache = new Map() function measureSingleLineWidth(prepared: PreparedTextWithSegments): number { let maxWidth = 0 walkLineRanges(prepared, UNBOUNDED, line => { if (line.width > maxWidth) maxWidth = line.width }) return maxWidth } function getCollapsedSpaceWidth(font: string): number { const cached = collapsedSpaceWidthCache.get(font) if (cached !== undefined) return cached const joined = measureSingleLineWidth(prepareWithSegments('A A', font)) const compact = measureSingleLineWidth(prepareWithSegments('AA', font)) const w = Math.max(0, joined - compact) collapsedSpaceWidthCache.set(font, w) return w } // Resolve FontStyle to CSS font string function resolveFont(style: FontStyle, fonts: FontConfig): string { switch (style) { case 'body': return fonts.body case 'bold': return fonts.bold case 'italic': return fonts.italic case 'boldItalic': return fonts.boldItalic case 'strikethrough': return fonts.body } } // --- Flatten + prepare --- // Two-pass: first flatten the inline tree to raw runs (preserving gap state // across link boundaries), then prepare each run with pretext. type RawRun = | { kind: 'text'; text: string; font: string; fontStyle: FontStyle; href?: string; isCode?: boolean; isStrikethrough?: boolean; chromeWidth: number } | { kind: 'break' } function flattenRuns(items: InlineItem[], fonts: FontConfig, out: RawRun[], parentHref?: string): void { for (const item of items) { switch (item.kind) { case 'text': out.push({ kind: 'text', text: item.text, font: resolveFont(item.font, fonts), fontStyle: item.font, href: parentHref, isStrikethrough: item.font === 'strikethrough', chromeWidth: 0, }) break case 'code': out.push({ kind: 'text', text: item.text, font: fonts.code, fontStyle: 'body', href: parentHref, isCode: true, chromeWidth: CODE_CHROME_WIDTH, }) break case 'link': flattenRuns(item.items, fonts, out, item.href) break case 'break': out.push({ kind: 'break' }) break } } } function prepareRuns(runs: RawRun[]): PreparedItem[] { const out: PreparedItem[] = [] let pendingGap = 0 for (const run of runs) { if (run.kind === 'break') { out.push({ kind: 'break' }) pendingGap = 0 continue } const hasLeading = /^\s/.test(run.text) const hasTrailing = /\s$/.test(run.text) const trimmed = run.text.trim() const carryGap = pendingGap pendingGap = hasTrailing ? getCollapsedSpaceWidth(run.font) : 0 if (trimmed.length === 0) continue const prepared = prepareWithSegments(trimmed, run.font) const wholeLine = layoutNextLine(prepared, LINE_START, UNBOUNDED) if (wholeLine === null) continue out.push({ kind: 'text', font: run.font, fontStyle: run.fontStyle, chromeWidth: run.chromeWidth, endCursor: wholeLine.end, fullText: wholeLine.text, fullWidth: wholeLine.width, leadingGap: carryGap > 0 || hasLeading ? getCollapsedSpaceWidth(run.font) : 0, prepared, href: run.href, isCode: run.isCode, isStrikethrough: run.isStrikethrough, }) } return out } function flattenAndPrepare(items: InlineItem[], fonts: FontConfig): PreparedItem[] { const runs: RawRun[] = [] flattenRuns(items, fonts, runs) return prepareRuns(runs) } // --- Cursor helpers --- function cursorsMatch(a: LayoutCursor, b: LayoutCursor): boolean { return a.segmentIndex === b.segmentIndex && a.graphemeIndex === b.graphemeIndex } // --- Line layout --- export function layoutInline( items: InlineItem[], maxWidth: number, fonts: FontConfig, lineHeight: number, ): MeasuredLine[] { const prepared = flattenAndPrepare(items, fonts) if (prepared.length === 0) return [] const lineRanges = layoutLineRanges(prepared, maxWidth) return lineRanges.map((range, i) => { const line: MeasuredLine = { fragments: null!, width: range.width, y: i * lineHeight, } // Lazy: fragments are materialized on first access. // Offscreen lines never pay the string allocation cost. let cached: LineFragment[] | null = null Object.defineProperty(line, 'fragments', { get() { if (cached === null) cached = materializeRange(prepared, range) return cached }, enumerable: true, }) return line }) } // --- Line range types (lazy materialization) --- // The layout pass produces ranges (cursor positions + widths) without // allocating fragment text. Materialization runs only for visible lines. type FragmentRange = { itemIndex: number // index into prepared items array startCursor: LayoutCursor | null // null = whole item (fast path) endCursor: LayoutCursor width: number leadingGap: number availableWidth: number // text width offered during layout (for re-layout during materialization) } type LineRange = { fragmentRanges: FragmentRange[] width: number } function layoutLineRanges(items: PreparedItem[], maxWidth: number): LineRange[] { const lines: LineRange[] = [] const safeWidth = Math.max(1, maxWidth) let itemIdx = 0 let textCursor: LayoutCursor | null = null while (itemIdx < items.length) { const item = items[itemIdx]! if (item.kind === 'break') { lines.push({ fragmentRanges: [], width: 0 }) itemIdx++ textCursor = null continue } const ranges: FragmentRange[] = [] let lineWidth = 0 let remainingWidth = safeWidth lineLoop: while (itemIdx < items.length) { const item = items[itemIdx]! if (item.kind === 'break') break lineLoop if (textCursor !== null && cursorsMatch(textCursor, item.endCursor)) { itemIdx++ textCursor = null continue } const leadingGap = ranges.length === 0 ? 0 : item.leadingGap const reservedWidth = leadingGap + item.chromeWidth if (ranges.length > 0 && reservedWidth >= remainingWidth) break lineLoop // Fast path: entire item fits if (textCursor === null) { const fullWidth = leadingGap + item.fullWidth + item.chromeWidth if (fullWidth <= remainingWidth) { ranges.push({ itemIndex: itemIdx, startCursor: null, // null = whole item endCursor: item.endCursor, width: item.fullWidth + item.chromeWidth, leadingGap, availableWidth: UNBOUNDED, }) lineWidth += fullWidth remainingWidth = Math.max(0, safeWidth - lineWidth) itemIdx++ continue } } // Slow path: break item const startCursor = textCursor ?? LINE_START const availableWidth = Math.max(1, remainingWidth - reservedWidth) const line = layoutNextLine(item.prepared, startCursor, availableWidth) if (line === null) { itemIdx++; textCursor = null; continue } if (cursorsMatch(startCursor, line.end)) { if (ranges.length > 0) break lineLoop itemIdx++; textCursor = null; continue } // Guard against mid-word breaking when not first on line if (ranges.length > 0 && line.end.graphemeIndex > 0) { const fullLine = layoutNextLine(item.prepared, startCursor, safeWidth - item.chromeWidth) if (fullLine && !cursorsMatch(line.end, fullLine.end)) { break lineLoop } } ranges.push({ itemIndex: itemIdx, startCursor, endCursor: line.end, width: line.width + item.chromeWidth, leadingGap, availableWidth, }) lineWidth += leadingGap + line.width + item.chromeWidth remainingWidth = Math.max(0, safeWidth - lineWidth) if (cursorsMatch(line.end, item.endCursor)) { itemIdx++; textCursor = null; continue } textCursor = line.end break lineLoop } if (ranges.length === 0) break lines.push({ fragmentRanges: ranges, width: lineWidth }) } return lines } // Materialize a single line range into actual fragment objects. // Called lazily — only when the renderer accesses .fragments on a visible line. function materializeRange(items: PreparedItem[], range: LineRange): LineFragment[] { return range.fragmentRanges.map(fr => { const item = items[fr.itemIndex]! as PreparedTextItem let text: string if (fr.startCursor === null) { // Fast path: whole item was placed intact text = item.fullText } else { // Partial item: re-layout at the same available width to reproduce the break const line = layoutNextLine(item.prepared, fr.startCursor, fr.availableWidth) text = line?.text ?? '' } return { text, width: fr.width, font: item.font, fontStyle: item.fontStyle, href: item.href, isCode: item.isCode, isStrikethrough: item.isStrikethrough, leadingGap: fr.leadingGap, } }) } /** * Quick line count — same range algorithm, no materialization. */ export function countInlineLines( items: InlineItem[], maxWidth: number, fonts: FontConfig, ): number { const prepared = flattenAndPrepare(items, fonts) if (prepared.length === 0) return 0 return layoutLineRanges(prepared, maxWidth).length } 54:Tedf,// Block layout coordinator // // Stacks blocks vertically, delegates inline measurement to the inline layout engine. // Block types like code-block, image, hr are measured by plugins — the coordinator // only handles paragraph, heading, list, blockquote natively. import { layoutInline } from './inline-layout' import type { BlockNode, MeasuredBlock, MeasuredLine, MeasureConfig, MeasureResult, FontConfig, LineHeightConfig, HeadingNode, EmbedPlugin, EmbedMeasurement, PluginContext, } from './types' // Core layout constant — the coordinator owns block spacing const BLOCK_GAP = 12 function getHeadingFont(level: HeadingNode['level']): keyof FontConfig { return `h${level}` as keyof FontConfig } function getHeadingLineHeight(level: HeadingNode['level'], lineHeights: LineHeightConfig): number { return lineHeights[`h${level}` as keyof LineHeightConfig] } function resolveEmbedHeight(m: EmbedMeasurement, maxWidth: number): number { switch (m.kind) { case 'fixed': case 'computed': return m.height case 'aspect-ratio': { const h = maxWidth / m.ratio return m.maxHeight ? Math.min(h, m.maxHeight) : h } } } function findPlugin(block: BlockNode, plugins?: EmbedPlugin[]): EmbedPlugin | null { if (!plugins) return null for (const p of plugins) { if (p.match(block)) return p } return null } /** * Measure all blocks and return exact heights, y-offsets, and line data. */ export function measureBlocks( blocks: BlockNode[], config: MeasureConfig, ): MeasureResult { const measured: MeasuredBlock[] = [] let y = 0 for (let i = 0; i < blocks.length; i++) { const block = blocks[i]! const mb = measureBlock(block, config) mb.y = y measured.push(mb) y += mb.height if (i < blocks.length - 1) y += BLOCK_GAP } const totalLines = measured.reduce((sum, b) => sum + (b.lines?.length ?? 0), 0) return { height: y, lineCount: totalLines, blocks: measured, } } function measureBlock(block: BlockNode, config: MeasureConfig): MeasuredBlock { const ctx: PluginContext = { measureBlocks, config } // Plugins handle all non-inline block types const plugin = findPlugin(block, config.plugins) if (plugin) { // Full measurement: plugin returns MeasuredBlock with children/lines if (plugin.measureBlock) { return plugin.measureBlock(block, ctx) } // Simple measurement: plugin returns height const m = plugin.measure(block as any, config.maxWidth, ctx) return { node: block, height: resolveEmbedHeight(m, config.maxWidth), y: 0 } } // Core handles inline block types natively (paragraphs, headings) switch (block.kind) { case 'paragraph': return measureParagraph(block, config) case 'heading': return measureHeading(block, config) default: // Unknown block without plugin — rough fallback return { node: block, height: 40, y: 0 } } } function measureParagraph(block: BlockNode & { kind: 'paragraph' }, config: MeasureConfig): MeasuredBlock { const lines = layoutInline( block.items, config.maxWidth, config.fonts, config.lineHeights.body, ) const height = lines.length * config.lineHeights.body return { node: block, height, y: 0, lines } } function measureHeading(block: HeadingNode, config: MeasureConfig): MeasuredBlock { const lineHeight = getHeadingLineHeight(block.level, config.lineHeights) const headingFonts: FontConfig = { ...config.fonts, body: config.fonts[getHeadingFont(block.level)], bold: config.fonts[getHeadingFont(block.level)], } const lines = layoutInline( block.items, config.maxWidth, headingFonts, lineHeight, ) const height = lines.length * lineHeight return { node: block, height, y: 0, lines } } 55:T65c,// Shrinkwrap — binary search for the tightest width that preserves total height. import { parse } from './parser' import { measureBlocks } from './block-layout' import type { MeasureConfig, MeasureResult } from './types' export type ShrinkwrapResult = { width: number height: number } /** * Find the tightest width that preserves the same total height. * Binary search on width, measuring at each candidate. */ export function shrinkwrap( markdown: string, config: MeasureConfig, ): ShrinkwrapResult { const blocks = parse(markdown) const initial = measureBlocks(blocks, config) // Single-line text: no shrinkwrap needed. Any narrower width risks // wrapping to 2 lines due to canvas/DOM measurement differences. if (initial.lineCount <= 1) { return { width: Math.ceil(config.maxWidth), height: initial.height } } // Reuse a single config object, mutating maxWidth per iteration const searchConfig = { ...config } let lo = 1 let hi = Math.ceil(config.maxWidth) let lastHeight = initial.height while (lo < hi) { const mid = (lo + hi) >>> 1 searchConfig.maxWidth = mid const candidate = measureBlocks(blocks, searchConfig) if (candidate.height <= initial.height) { hi = mid lastHeight = candidate.height } else { lo = mid + 1 } } return { width: lo, height: lastHeight } } function getMaxContentWidth(result: MeasureResult): number { let max = 0 for (const block of result.blocks) { if (block.lines) { for (const line of block.lines) { max = Math.max(max, line.width) } } } return Math.ceil(max) } 56:T50f,'use client' import { createContext, useContext } from 'react' import type { FontConfig, LineHeightConfig } from '../core/types' export type PretextMdConfig = { fonts: FontConfig lineHeights: LineHeightConfig } // Font strings use rem matching the app theme scale (--text-sm: 0.9rem, etc.). // The inline layout engine resolves rem→px before passing to canvas measureText. const defaultFonts: FontConfig = { body: '0.9rem "Mona Sans", sans-serif', bold: 'bold 0.9rem "Mona Sans", sans-serif', italic: 'italic 0.9rem "Mona Sans", sans-serif', boldItalic: 'bold italic 0.9rem "Mona Sans", sans-serif', code: '0.8rem "DM Mono", "Fira Code", monospace', h1: '1.8rem "Sentient", serif', h2: '1.5rem "Sentient", serif', h3: '1.15rem "Sentient", serif', h4: '0.9rem "Sentient", serif', h5: '0.8rem "Sentient", serif', h6: '0.8rem "Sentient", serif', } const defaultLineHeights: LineHeightConfig = { body: 20, code: 18, h1: 32, h2: 28, h3: 24, h4: 20, h5: 20, h6: 18, } export const defaultConfig: PretextMdConfig = { fonts: defaultFonts, lineHeights: defaultLineHeights, } export const PretextMdContext = createContext(defaultConfig) export function usePretextMdConfig(): PretextMdConfig { return useContext(PretextMdContext) } 57:T34b8,'use client' import React, { useMemo, memo, useState, useRef, useLayoutEffect, createContext, useContext } from 'react' import { parse } from '../core/parser' import { measureBlocks } from '../core/block-layout' import type { BlockNode, ListNode, TableNode, InlineItem, MeasuredBlock, MeasuredLine, LineFragment, MeasureConfig, HeadingNode, ImageNode, CodeBlockNode, EmbedPlugin, } from '../core/types' import { usePretextMdConfig } from './context' import { defaultPlugins, renderCodeBlock, renderYouTube, renderImage, renderTable, } from './plugins' import { CodeBlock } from '@/components/infsh/code-block/code-block' const DEFAULT_PLUGINS = defaultPlugins() // --- Plugin render registry --- // Maps plugin name → render function. Plugins own both measure and render. // Receives MeasuredBlock so container plugins can render measured children. type PluginRenderer = (block: MeasuredBlock, renderChild: (b: MeasuredBlock) => React.ReactNode) => React.ReactNode const defaultRenderers: Record = { 'code-block': (b) => renderCodeBlock(b.node as CodeBlockNode), 'blockquote': (b, renderChild) => (

{b.quoteRails?.map((x, i) => ( ))} {b.children?.map((child, i) => {renderChild(child)})}

), 'list': (b) => { return (

{b.items?.map((measuredBlocks, i) => (

0 ? { marginTop: 4 } : undefined}> {measuredBlocks.map((child, j) => { if (child.marker) { return (

{child.marker.text}

) } return })}

))}

) }, 'youtube': (b) => renderYouTube(b.node as ImageNode), 'image': (b) => renderImage(b.node as ImageNode), 'table': (b) => renderTable(b.node as TableNode), 'hr': () =>

, } // --- Plugin context --- const PluginsContext = createContext<{ plugins: EmbedPlugin[] renderers: Record }>({ plugins: [], renderers: defaultRenderers }) function usePlugins() { return useContext(PluginsContext) } function findPluginForNode( node: BlockNode, plugins: EmbedPlugin[], ): EmbedPlugin | null { for (const p of plugins) { if (p.match(node)) return p } return null } // --- Main component --- type MarkdownProps = { content: string /** Fixed width for measurement. If omitted, auto-measures the container. */ maxWidth?: number className?: string measured?: boolean plugins?: EmbedPlugin[] renderers?: Record } /** * Content-box width of `el` — the width available to lay text into. * * clientWidth includes padding. The container sets none itself and no current * caller passes a padded `className`, so this subtraction is insurance rather * than a live fix — but it is the exact mistake that made text overflow when * this measured its `p-4` parent instead, so it stays. Mount-time only: the * observer below reads contentRect, which already excludes padding. */ export function contentBoxWidth(el: HTMLElement): number { const cs = getComputedStyle(el) const padX = (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0) return Math.floor(el.clientWidth - padX) } export const Markdown = memo(function Markdown({ content, maxWidth: maxWidthProp, className, measured = true, plugins: userPlugins, renderers: userRenderers, }: MarkdownProps) { const config = usePretextMdConfig() const plugins = userPlugins ?? DEFAULT_PLUGINS const renderers = useMemo( () => ({ ...defaultRenderers, ...userRenderers }), [userRenderers], ) const containerRef = useRef(null) const [containerWidth, setContainerWidth] = useState(0) const lastWidth = useRef(0) // Only whether a width was supplied matters, not its value — depending on // the number would tear down and rebuild the observer on every change. const auto = maxWidthProp === undefined // Measure our own container. Not circular: width:100% is set inline below, // and an inline style beats any class rule, so the box is always sized by // its parent and never by its own nowrap content. Verified against a // parent-measuring variant at ui.inference.sh/lab/measure — identical at // every width, in both fixed-width and w-fit parents. // // If text ever stops reflowing as the box shrinks, that invariant broke: // the inline width:100% was removed. Restore it, or fall back to measuring // `el.parentElement` — a box we do not size, so it cannot be circular // (contentBoxWidth already subtracts the padding that requires). useLayoutEffect(() => { const el = containerRef.current if (!auto || !el) return // Sync read so the first paint has a width; the observer's initial // callback fires asynchronously. const initial = contentBoxWidth(el) if (initial > 0) { lastWidth.current = initial setContainerWidth(initial) } if (typeof ResizeObserver === 'undefined') return // Exactly one observed element, so exactly one entry per callback. const ro = new ResizeObserver(([entry]) => { // contentRect is the content box the browser already computed for this // callback; getComputedStyle() here would force a style resolution per // instance on every frame of a resize drag. // // We observe ourselves, so this also fires on every height change — i.e. // on every streamed token. Compare against a ref so height-only ticks // never reach React. const w = Math.floor(entry.contentRect.width) if (Math.abs(lastWidth.current - w) <= 1) return lastWidth.current = w setContainerWidth(w) }) ro.observe(el) return () => ro.disconnect() }, [auto]) const blocks = useMemo(() => content ? parse(content) : [], [content]) // An explicit maxWidth skips measurement entirely — useful for fixed layouts // and for deterministic tests that must not depend on live layout. const effectiveWidth = maxWidthProp ?? containerWidth const measuredResult = useMemo(() => { if (!measured || effectiveWidth <= 0 || blocks.length === 0) return null const measureConfig: MeasureConfig = { maxWidth: effectiveWidth, fonts: config.fonts, lineHeights: config.lineHeights, plugins, } return measureBlocks(blocks, measureConfig) }, [blocks, effectiveWidth, config.fonts, config.lineHeights, measured, plugins]) const ctx = { plugins, renderers } // Always render the container — never unmount the ref. // Content inside is gated on width + content availability. return (

{measuredResult ? ( measuredResult.blocks.map((block, i) => ( )) ) : blocks.length > 0 ? ( blocks.map((block, i) => ( )) ) : null}

) }) // ============================================================ // MEASURED MODE // ============================================================ function MeasuredBlockRenderer({ block }: { block: MeasuredBlock }) { const { plugins, renderers } = usePlugins() const node = block.node // Plugin-rendered blocks const plugin = findPluginForNode(node, plugins) if (plugin) { const render = renderers[plugin.name] if (render) return <>{render(block, (child) => )} } // Core inline block types switch (node.kind) { case 'paragraph': return case 'heading': return default: return null } } function MeasuredInlineBlock({ block, tag }: { block: MeasuredBlock; tag: string }) { if (!block.lines) return null const Tag = tag as any const lh = block.lines.length > 0 ? block.height / block.lines.length : 20 return ( {block.lines.map((line, i) => ( ))} ) } function MeasuredLineRenderer({ line, lineHeight }: { line: MeasuredLine; lineHeight: number }) { return ( {line.fragments.map((frag, i) => ( ))} ) } function FragmentRenderer({ fragment }: { fragment: LineFragment }) { const style: React.CSSProperties = { font: fragment.font } const space = fragment.leadingGap > 0 ? ' ' : '' if (fragment.isCode) { return ( <>{space}{fragment.text} ) } let content: React.ReactNode = fragment.text if (fragment.isStrikethrough) content = ~~{content}~~ if (fragment.href) { return <>{space}{content} } return <>{space}{content} } // ============================================================ // FLOW MODE — normal browser layout, same parsed AST // ============================================================ function FlowBlockRenderer({ node }: { node: BlockNode }) { const { plugins, renderers } = usePlugins() // Leaf plugins (code-block, youtube, image, hr) work in flow mode too const plugin = findPluginForNode(node, plugins) if (plugin && !plugin.measureBlock) { const render = renderers[plugin.name] if (render) return <>{render({ node, height: 0, y: 0 }, () => null)} } switch (node.kind) { case 'paragraph': return

case 'heading': return case 'code-block': return case 'blockquote': return (

{node.children.map((child, i) => ( ))}

) case 'list': { const Tag = node.ordered ? 'ol' : 'ul' return ( {node.items.map((itemBlocks, i) => (

{itemBlocks.map((child, j) => ( ))}

))} ) } default: return null } } function FlowHeading({ node }: { node: HeadingNode }) { const Tag = `h${node.level}` as const const sizes: Record = { 1: 'text-2xl font-bold', 2: 'text-xl font-bold', 3: 'text-base font-bold', 4: 'text-sm font-bold', 5: 'text-sm font-bold', 6: 'text-xs font-bold', } return ( ) } function FlowCodeBlock({ node }: { node: CodeBlockNode }) { return ( {node.code} ) } function FlowInlineItems({ items }: { items: InlineItem[] }) { return ( <> {items.map((item, i) => ( ))} ) } function FlowInlineItem({ item }: { item: InlineItem }) { switch (item.kind) { case 'text': { const Tag = item.font === 'bold' || item.font === 'boldItalic' ? 'strong' : item.font === 'italic' ? 'em' : item.font === 'strikethrough' ? 'del' : 'span' if (item.font === 'boldItalic') return {item.text} return {item.text} } case 'code': return {item.text} case 'link': return ( ) case 'break': return
default: return null } } 58:T20f2,'use client' import React from 'react' import type { BlockNode, BlockquoteNode, ListNode, CodeBlockNode, ImageNode, TableNode, EmbedPlugin, PluginContext, } from '../core/types' import { splitLines } from '@/components/infsh/code-block/utils' import { CodeBlock } from '@/components/infsh/code-block/code-block' import { YouTubeEmbed } from '@/components/infsh/youtube-embed' import ZoomableImage from '@/components/infsh/zoomable-image' // --- YouTube detection --- function getYouTubeVideoId(url: string): string | null { const m = url.match(/(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|shorts\/))([a-zA-Z0-9_-]{11})/) return m?.[1] ?? null } // --- Code block plugin --- // Owns its own chrome dimensions — core doesn't know about these. const CODE_BLOCK_CHROME = { headerHeight: 33, // py-2 (16px) + text-xs line (16px) + border-b (1px) paddingY: 32, // p-4 top + bottom border: 2, // border top + bottom } as const export function codeBlockPlugin(lineHeight: number = 18): EmbedPlugin { return { name: 'code-block', match: (node) => node.kind === 'code-block', measure: (node) => { const codeNode = node as CodeBlockNode const hasHeader = !!codeNode.lang const numLines = splitLines(codeNode.code).length const height = (hasHeader ? CODE_BLOCK_CHROME.headerHeight : 0) + CODE_BLOCK_CHROME.paddingY + numLines * lineHeight + CODE_BLOCK_CHROME.border return { kind: 'computed', height } }, } } export function renderCodeBlock(node: CodeBlockNode): React.ReactNode { return ( {node.code} ) } // --- YouTube plugin --- export function youtubePlugin(): EmbedPlugin { return { name: 'youtube', match: (node) => node.kind === 'image' && getYouTubeVideoId((node as ImageNode).src) !== null, measure: () => ({ kind: 'aspect-ratio', ratio: 16 / 9 }), } } export function renderYouTube(node: ImageNode): React.ReactNode { const videoId = getYouTubeVideoId(node.src)! return } // --- Image plugin --- export function imagePlugin(): EmbedPlugin { return { name: 'image', match: (node) => node.kind === 'image', measure: (_, maxWidth) => ({ kind: 'aspect-ratio', ratio: 16 / 9, maxHeight: 400 }), } } export function renderImage(node: ImageNode): React.ReactNode { return } // --- HR plugin --- export function hrPlugin(): EmbedPlugin { return { name: 'hr', match: (node) => node.kind === 'hr', measure: () => ({ kind: 'fixed', height: 1 }), } } // --- Blockquote plugin --- const QUOTE_RAIL_WIDTH = 2 // border-l-2 const QUOTE_RAIL_GAP = 10 // gap between rail and content const QUOTE_INDENT = QUOTE_RAIL_WIDTH + QUOTE_RAIL_GAP export function blockquotePlugin(): EmbedPlugin { return { name: 'blockquote', match: (node) => node.kind === 'blockquote', measure: () => ({ kind: 'fixed', height: 0 }), measureBlock: (node: BlockquoteNode, ctx) => { // Collect parent rail positions and add our own const parentRails = ctx.config._quoteRails ?? [] const railX = (ctx.config._contentLeft ?? 0) const ourRails = [...parentRails, railX] const contentLeft = railX + QUOTE_INDENT const innerConfig = { ...ctx.config, maxWidth: ctx.config.maxWidth - QUOTE_INDENT, _quoteRails: ourRails, _contentLeft: contentLeft, } const inner = ctx.measureBlocks(node.children, innerConfig) return { node, height: inner.height, y: 0, children: inner.blocks, quoteRails: ourRails, contentLeft, } }, } } // --- List plugin --- const LIST_MARKER_GAP = 8 // gap between marker and content const LIST_INDENT = 18 // total indent per nesting level const LIST_ITEM_GAP = 4 // vertical gap between items export function listPlugin(): EmbedPlugin { return { name: 'list', match: (node) => node.kind === 'list', measure: () => ({ kind: 'fixed', height: 0 }), measureBlock: (node: ListNode, ctx) => { const baseLeft = ctx.config._contentLeft ?? 0 const markerX = baseLeft const contentLeft = baseLeft + LIST_INDENT const innerConfig = { ...ctx.config, maxWidth: ctx.config.maxWidth - LIST_INDENT, _contentLeft: contentLeft, } let totalHeight = 0 const measuredItems = node.items.map((itemBlocks, i) => { const inner = ctx.measureBlocks(itemBlocks, innerConfig) if (i > 0) totalHeight += LIST_ITEM_GAP // Tag each item's first block with marker info if (inner.blocks.length > 0) { const markerText = node.ordered ? `${(node.start ?? 1) + i}.` : '•' inner.blocks[0] = { ...inner.blocks[0]!, marker: { text: markerText, x: markerX }, contentLeft, } } totalHeight += inner.height return inner.blocks }) return { node, height: totalHeight, y: 0, items: measuredItems, contentLeft } }, } } // --- Table plugin --- const TABLE_ROW_HEIGHT = 33 // px-3 py-1.5 (12px) + text-sm line (~16px) + border (1px) + padding const TABLE_HEADER_HEIGHT = 33 export function tablePlugin(): EmbedPlugin { return { name: 'table', match: (node) => node.kind === 'table', measure: (node) => { const table = node as TableNode const height = TABLE_HEADER_HEIGHT + (table.rows.length - 1) * TABLE_ROW_HEIGHT + 2 // 2 = border return { kind: 'computed', height } }, } } export function renderTable(node: TableNode): React.ReactNode { if (node.rows.length === 0) return null const [headerRow, ...bodyRows] = node.rows const align = node.align return (

{headerRow && ( {headerRow.map((cell, i) => ( ))} )} {bodyRows.map((row, ri) => ( {row.map((cell, ci) => ( ))} ))}

) } /** Render inline items inside a table cell — reuses the same inline rendering as flow mode. */ function FlowCellInlines({ items }: { items: import('../core/types').InlineItem[] }) { return ( <> {items.map((item, i) => { switch (item.kind) { case 'text': { const Tag = item.font === 'bold' || item.font === 'boldItalic' ? 'strong' : item.font === 'italic' ? 'em' : item.font === 'strikethrough' ? 'del' : 'span' if (item.font === 'boldItalic') return {item.text} return {item.text} } case 'code': return {item.text} case 'link': return case 'break': return
default: return null } })} ) } // --- Default plugin set --- export function defaultPlugins(): EmbedPlugin[] { return [codeBlockPlugin(), blockquotePlugin(), listPlugin(), youtubePlugin(), imagePlugin(), hrPlugin(), tablePlugin()] } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@chenglou/pretext",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40chenglou%2Fpretext","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@chenglou/pretext"}]]}]}],["$","li","unified",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/unified","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"unified"}]]}]}],["$","li","remark-parse",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/remark-parse","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"remark-parse"}]]}]}],["$","li","remark-gfm",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/remark-gfm","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"remark-gfm"}]]}]}]]}],["$","$L4f",null,{"namespace":"@inferencesh","registryDependencies":["https://inference.sh/ui/r/code-block.json","https://inference.sh/ui/r/youtube-embed.json","https://inference.sh/ui/r/zoomable-image.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"lib/pretext-md/core/types.ts","content":"$51","type":"registry:lib","target":"lib/pretext-md/core/types.ts"},{"path":"lib/pretext-md/core/parser.ts","content":"$52","type":"registry:lib","target":"lib/pretext-md/core/parser.ts"},{"path":"lib/pretext-md/core/inline-layout.ts","content":"$53","type":"registry:lib","target":"lib/pretext-md/core/inline-layout.ts"},{"path":"lib/pretext-md/core/block-layout.ts","content":"$54","type":"registry:lib","target":"lib/pretext-md/core/block-layout.ts"},{"path":"lib/pretext-md/core/shrinkwrap.ts","content":"$55","type":"registry:lib","target":"lib/pretext-md/core/shrinkwrap.ts"},{"path":"lib/pretext-md/core/index.ts","content":"export { parse } from './parser'\nexport { layoutInline } from './inline-layout'\nexport { measureBlocks } from './block-layout'\nexport { shrinkwrap } from './shrinkwrap'\nexport type {\n BlockNode,\n InlineItem,\n FontConfig,\n LineHeightConfig,\n MeasureConfig,\n MeasuredBlock,\n MeasuredLine,\n LineFragment,\n MeasureResult,\n FontStyle,\n ParagraphNode,\n HeadingNode,\n CodeBlockNode,\n BlockquoteNode,\n ListNode,\n ThematicBreakNode,\n ImageNode,\n TextItem,\n CodeItem,\n LinkItem,\n BreakItem,\n EmbedPlugin,\n EmbedMeasurement,\n} from './types'\nexport type { ShrinkwrapResult } from './shrinkwrap'\n","type":"registry:lib","target":"lib/pretext-md/core/index.ts"},{"path":"lib/pretext-md/react/context.tsx","content":"$56","type":"registry:lib","target":"lib/pretext-md/react/context.tsx"},{"path":"lib/pretext-md/react/renderer.tsx","content":"$57","type":"registry:lib","target":"lib/pretext-md/react/renderer.tsx"},{"path":"lib/pretext-md/react/plugins.tsx","content":"$58","type":"registry:lib","target":"lib/pretext-md/react/plugins.tsx"},{"path":"lib/pretext-md/react/index.ts","content":"export { Markdown } from './renderer'\nexport { PretextMdContext, usePretextMdConfig, defaultConfig } from './context'\nexport type { PretextMdConfig } from './context'\nexport {\n defaultPlugins,\n codeBlockPlugin,\n blockquotePlugin,\n listPlugin,\n youtubePlugin,\n imagePlugin,\n hrPlugin,\n tablePlugin,\n} from './plugins'\n","type":"registry:lib","target":"lib/pretext-md/react/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]