@orbit-work/ui 0.1.0

package/src/components/composite/Markdown/MarkdownSource.test.mjs

@@ -0,0 +1,126 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const markdownSource = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
+
+test("explicit markdown local links use local path click parsing while normal links stay anchors", () => {
+  assert.match(markdownSource, /const localPath = localMarkdownLinkTarget\(m\[9\], localLinkOptions\(options\)\)/)
+  assert.match(
+    markdownSource,
+    /import \{[^}]*localMarkdownLinkTarget[^}]*\} from ['"]\.\.\/\.\.\/\.\.\/utils\/markdownFileRefs['"]/,
+  )
+  assert.match(markdownSource, /localPath && openLocalPath/)
+  assert.match(markdownSource, /className="md__local-path"/)
+  assert.match(markdownSource, /function collectLocalFileRefs/)
+  // DS 2.0 P5：文件引用卡归口 domain/chat/Attachment（旧 FileReferenceCards 已并入
+  // AttachmentList + Attachment）。宿主回调名不变，只有落点换了组件。
+  assert.match(markdownSource, /<AttachmentList layout="stack" className="md-file-cards"/)
+  assert.match(markdownSource, /<Attachment\s+key=\{item\.id \?\? item\.path\}/)
+  assert.match(
+    markdownSource,
+    /onOpen=\{\(\) => \(onLocalFileCardOpen \?\? \(\(ref: AttachmentItem\) => onLocalPathClick\(ref\.path\)\)\)\(item\)\}/,
+  )
+  assert.match(
+    markdownSource,
+    /onNativeActionsMenu=\{onLocalFileCardOpenWithMenu \? \(\) => onLocalFileCardOpenWithMenu\(item\) : undefined\}/,
+  )
+  assert.match(markdownSource, /onRequestActions=\{[\s\S]{0,120}onRequestLocalFileOpenWithOptions\(item\)/)
+  assert.match(
+    markdownSource,
+    /onAction=\{onLocalFileCardOpenWith \? \(option\) => onLocalFileCardOpenWith\(item, option\) : undefined\}/,
+  )
+  assert.match(
+    markdownSource,
+    /<a key=\{key\+\+\} href=\{href\} target="_blank" rel="noreferrer noopener">[\s\S]*?\{renderLinkLabel\(label, key\+\+\)\}[\s\S]*?<\/a>/,
+  )
+})
+
+test("inline local paths open through the same handler as the file reference cards", () => {
+  assert.match(markdownSource, /function resolveLocalPathOpener/)
+  assert.match(
+    markdownSource,
+    /if \(onLocalFileOpen\) return \(path, label\) => onLocalFileOpen\(\{ name: cleanFileLabel\(label \?\? [""]["'], path\), path \}\)/,
+  )
+  assert.match(markdownSource, /onLocalFileOpen: onLocalFileCardOpen/)
+  assert.match(markdownSource, /const openLocalPath = resolveLocalPathOpener\(options\)/)
+  assert.match(markdownSource, /onClick=\{\(\) => openLocalPath\(localPath, label\)\}/)
+  assert.match(markdownSource, /onClick=\{\(\) => openLocalPath\(segment\.path\)\}/)
+})
+
+test("link labels resolve nested emphasis markup instead of leaking the markers", () => {
+  assert.match(markdownSource, /function renderLinkLabel/)
+  // renderLinkLabel must not recurse into links/images, or a label could nest
+  // an anchor inside an anchor.
+  assert.match(
+    markdownSource,
+    /const re = \/\(\\\*\\\*\(\[\^\*\]\+\)\\\*\\\*\|`\(\[\^`\]\+\)`\|\\\*\(\[\^\*\]\+\)\\\*\|_\(\[\^_\]\+\)_\)\/g/,
+  )
+})
+
+test("file reference collection is delegated to the shared parser", () => {
+  assert.match(
+    markdownSource,
+    /const collect = \(text: string\) => collectMarkdownFileRefs\(text, seen, refs, linkOptions\)/,
+  )
+})
+
+test("relative link targets resolve only when a project base dir is known", () => {
+  // The main process needs the base dir to turn out/report.md into a real path,
+  // so without one relative links must stay ordinary anchors.
+  assert.match(markdownSource, /function localLinkOptions/)
+  assert.match(markdownSource, /return \{ allowRelative: Boolean\(options\.localPathBaseDir\) \}/)
+  assert.match(markdownSource, /collectLocalFileRefs\(blocks, \{ allowRelative: Boolean\(localPathBaseDir\) \}\)/)
+})
+
+test("markdown parsing and local file collection are cached for stable messages", () => {
+  assert.match(markdownSource, /const blocks = useMemo\(\(\) => parseBlocks\(source\), \[source\]\)/)
+  assert.match(
+    markdownSource,
+    /const localFileRefs = useMemo\([\s\S]*\[blocks, localPathBaseDir, onLocalPathClick\],[\s\S]*\)/,
+  )
+})
+
+test("markdown images render through the local preview image component before normal links", () => {
+  assert.ok(markdownSource.includes("|!\\[([^\\]]*)\\]\\(([^)]+)\\)|\\[([^\\]]+)\\]\\(([^)]+)\\)|"))
+  assert.match(markdownSource, /<MarkdownImage[\s\S]*target=\{m\[7\]\}/)
+  assert.match(
+    markdownSource,
+    /buttonClassName = variant === ["']gallery["'] \? ["']md__image-button md__image-button--gallery["'] : ["']md__image-button["']/,
+  )
+  assert.match(
+    markdownSource,
+    /imageClassName = variant === ["']gallery["'] \? ["']md__image md__image--gallery["'] : ["']md__image["']/,
+  )
+
+  const imageBranch = markdownSource.indexOf("m[6] !== undefined && m[7] !== undefined")
+  const linkBranch = markdownSource.indexOf("m[8] !== undefined && m[9] !== undefined")
+  assert.ok(imageBranch >= 0)
+  assert.ok(linkBranch >= 0)
+  assert.ok(imageBranch < linkBranch)
+})
+
+test("consecutive standalone markdown images render as an adaptive gallery block", () => {
+  assert.match(markdownSource, /\| \{ kind: ["']imageGallery["']; images: MarkdownImageItem\[\] \}/)
+  assert.match(markdownSource, /function collectImageGallery/)
+  assert.match(markdownSource, /<ImageGallery key=\{idx\} images=\{block\.images\} options=\{inlineOptions\} \/>/)
+  assert.match(markdownSource, /md__image-gallery--\$\{imageGallerySizeClass\(images\.length\)\}/)
+})
+
+test("local markdown image previews expose context menu metadata", () => {
+  assert.match(markdownSource, /localPathBaseDir\?: string/)
+  assert.match(markdownSource, /data-md-image-target=\{cleanTarget\}/)
+  assert.match(markdownSource, /data-md-image-base-dir=\{localPathBaseDir \|\| undefined\}/)
+  assert.match(markdownSource, /data-md-image-name=\{alt \|\| preview\.name\}/)
+})
+
+// §8 引用块：解析 "> " 连续行为一个 blockquote，块内空行分段；段落循环必须让开引用行，
+// 否则引用会被吞进 <p>。块内文本也要进本地文件引用收集。
+test("blockquotes parse as their own block and stay out of the paragraph run", () => {
+  assert.match(markdownSource, /\| \{ kind: ["']quote["']; paragraphs: string\[\] \}/)
+  assert.match(markdownSource, /const QUOTE_LINE_RE = \/\^\\s\{0,3\}>\\s\?\//)
+  assert.match(markdownSource, /blocks\.push\(\{ kind: "quote", paragraphs \}\)/)
+  assert.match(markdownSource, /!QUOTE_LINE_RE\.test\(lines\[i\] \?\? ""\) &&/)
+  assert.match(markdownSource, /if \(block\.kind === "quote"\) block\.paragraphs\.forEach\(collect\)/)
+  assert.match(markdownSource, /<blockquote key=\{idx\}>/)
+})

package/src/components/composite/Markdown/MarkdownStyleSource.test.mjs

@@ -0,0 +1,152 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+// 合并轮：研发把 styles/markdown.css 整张撤并进 components.css 的 Markdown 段（本轮接受这次搬家）。
+// 只切出 .md 族所在的那个 @layer components 块来断言——整张 components.css 里还有
+// CodeBlock 等别族规则，doesNotMatch 那几条会被误伤。
+const componentsCss = await readFile(new URL("../../../../styles/components.css", import.meta.url), "utf8")
+const styleSource = (() => {
+  const anchor = componentsCss.indexOf(".md { font:")
+  if (anchor < 0) throw new Error("components.css 里找不到 .md 族——markdown 段是不是又搬家了？")
+  const open = componentsCss.lastIndexOf("@layer components {", anchor)
+  if (open < 0) throw new Error(".md 族没有收在 @layer components 里")
+  let depth = 0
+  for (let i = componentsCss.indexOf("{", open); i < componentsCss.length; i += 1) {
+    if (componentsCss[i] === "{") depth += 1
+    else if (componentsCss[i] === "}") {
+      depth -= 1
+      if (depth === 0) return componentsCss.slice(open, i + 1)
+    }
+  }
+  throw new Error("markdown 段的 @layer components 块没有闭合")
+})()
+
+test("markdown image gallery constrains inline image sizes and wraps multi-image output", () => {
+  assert.match(styleSource, /\.md__image-button \{[^}]*max-width: min\(360px, 100%\)/)
+  assert.match(styleSource, /\.md__image \{[^}]*max-height: 360px/)
+  assert.match(styleSource, /\.md__image-gallery \{[^}]*width: fit-content/)
+  assert.match(
+    styleSource,
+    /\.md__image-gallery--count-2 \{ grid-template-columns: repeat\(2, minmax\(120px, 220px\)\); \}/,
+  )
+  assert.match(
+    styleSource,
+    /\.md__image-gallery--count-3 \{ grid-template-columns: repeat\(3, minmax\(120px, 176px\)\); \}/,
+  )
+  assert.match(
+    styleSource,
+    /\.md__image-gallery--count-many \{ grid-template-columns: repeat\(auto-fit, minmax\(120px, 156px\)\); \}/,
+  )
+  assert.match(styleSource, /\.md__image-button--gallery \{[^}]*min-width: 120px; min-height: 120px/)
+  assert.match(styleSource, /\.md__image--gallery \{[^}]*object-fit: cover/)
+})
+
+// §2 字号只用 token：标题阶不得再出现 20/17/15px 裸值。
+test("markdown heading ladder is expressed in type tokens", () => {
+  assert.match(styleSource, /\.md h1 \{ font-size: var\(--ow-fs-title-lg\); \}/)
+  assert.match(styleSource, /\.md h2 \{ font-size: var\(--ow-fs-title-md\); \}/)
+  assert.match(styleSource, /\.md h3 \{ font-size: var\(--ow-fs-body\); \}/)
+  assert.match(
+    styleSource,
+    /\.md h4, \.md h5, \.md h6 \{ font-size: var\(--ow-fs-body\); color: var\(--ow-text-2\); \}/,
+  )
+  assert.doesNotMatch(styleSource, /\.md h[123] \{ font-size: \d+px/)
+})
+
+// 链接＝.ow-link 语法（utilities.css）：offset 3px / thickness 1→2px / visited 不变色 /
+// §6 focus-visible 走焦点环三件套 token（--ow-focus-ring-w/-ring/-offset）。hover 不再刷 info-tint 底。
+test("markdown links carry the full ow-link state set", () => {
+  for (const selector of ["\\.md a", "\\.md__local-path"]) {
+    assert.match(styleSource, new RegExp(`${selector}[^{]*\\{[^}]*text-underline-offset: 3px`))
+    assert.match(
+      styleSource,
+      new RegExp(
+        `${selector}:focus-visible[^{]*\\{[^}]*outline: var\\(--ow-focus-ring-w, 2px\\) solid var\\(--ow-focus-ring\\); outline-offset: var\\(--ow-focus-ring-offset, 2px\\)`,
+      ),
+    )
+  }
+  assert.match(styleSource, /\.md a:hover, \.md a:active \{[^}]*text-decoration-thickness: 2px/)
+  assert.match(styleSource, /\.md a:visited \{ color: var\(--ow-link\); \}/)
+  assert.doesNotMatch(styleSource, /\.md a:hover[^}]*background: var\(--ow-info-tint\)/)
+  assert.doesNotMatch(styleSource, /\.md__local-path[^{}]*\{[^}]*color: var\(--ow-info\)/)
+})
+
+// §7：行内 code＝surface-2 井底 ＋1px 边 ＋radius 4 ＋0.9em（ui-terminal-code 卡）。
+test("inline code sits in a bordered nested well at 0.9em", () => {
+  assert.match(
+    styleSource,
+    /\.md code \{ font: 400 0\.9em\/1\.5 var\(--ow-font-mono\);[^}]*background: var\(--ow-surface-2\);[^}]*border: var\(--ow-border-width-thin, 1px\) solid var\(--ow-border\);[^}]*border-radius: var\(--ow-radius-key\); \}/,
+  )
+  // 围栏代码块里的 code 必须把井底与边框都还原掉
+  // R2：排除选择器从失效的 `.ow-code-block` 归到 CodeBlock 真出的 `[data-slot="code-block"]`。
+  assert.match(styleSource, /\.md pre:not\(\[data-slot="code-block"\] pre\) code \{[^}]*background: none; border: 0;/)
+  assert.match(
+    styleSource,
+    /\.md pre:not\(\[data-slot="code-block"\] pre\) code \{[^}]*var\(--ow-fs-code\)\/var\(--ow-lh-code\)/,
+  )
+  // 旧类名不得回流（全仓零渲染消费方）。
+  assert.doesNotMatch(styleSource, /\.ow-code-block/)
+})
+
+// 表格＝DataTable 语法轻量版（§5）：容器 surface＋1px border＋radius-card，表头 surface-2。
+// 三档表面本身随主题翻转，故不留暗档特判。
+test("markdown tables reuse the DataTable facade in one theme-agnostic block", () => {
+  assert.match(
+    styleSource,
+    /\.md__table-wrap \{[^}]*solid var\(--ow-border\);[^}]*border-radius: var\(--ow-radius-card\); background: var\(--ow-surface\); \}/,
+  )
+  assert.match(
+    styleSource,
+    /\.md th \{ background: var\(--ow-surface-2\); font-weight: 500; color: var\(--ow-text\); \}/,
+  )
+  assert.doesNotMatch(styleSource, /var\(--ow-gray-00\)/)
+  assert.doesNotMatch(styleSource, /\[data-theme="dark"\] \.md/)
+  assert.match(
+    styleSource,
+    /\.md td\.al-right \{ font-family: var\(--ow-font-mono\); font-variant-numeric: tabular-nums; \}/,
+  )
+})
+
+// R2 · L1-3-1 / L2-2-1：原型（template.dc.html:1331-1344）表格只有外框＋行线，格间无竖线；
+// 数据格 --ow-text-2、表头 --ow-text/500；th 显式左对齐（无 .al-left 规则时 UA 默认会居中）。
+test("markdown tables draw row rules only — no vertical cell borders, header aligned left", () => {
+  const cellRule = styleSource.match(/\n\s*\.md th, \.md td \{[^}]*\}/)?.[0] ?? ""
+  assert.ok(cellRule, "找不到 .md th, .md td 规则")
+  assert.doesNotMatch(cellRule, /border-right/)
+  assert.match(cellRule, /border-bottom: var\(--ow-border-width-thin, 1px\) solid var\(--ow-border\)/)
+  assert.match(cellRule, /color: var\(--ow-text-2\)/)
+  assert.match(cellRule, /text-align: left/)
+  assert.doesNotMatch(styleSource, /\.md th:last-child, \.md td:last-child \{ border-right: 0; \}/)
+})
+
+// 列表（§8）：全局 reset 会把 ol/ul 的 list-style 清成 none，.md 族必须自己补回，
+// 否则无序列表没圆点、有序列表没序号（W0 断链）。
+test("markdown lists restore their bullets and numbering after the global reset", () => {
+  assert.match(styleSource, /\.md ul \{ list-style: disc outside; \}/)
+  assert.match(styleSource, /\.md ol \{ list-style: decimal outside; \}/)
+  assert.match(styleSource, /\.md ul ul \{ list-style: circle outside; \}/)
+  assert.match(styleSource, /\.md ol ol \{ list-style: lower-alpha outside; \}/)
+  assert.match(styleSource, /\.md li::marker \{ color: var\(--ow-text-3\); \}/)
+  assert.doesNotMatch(styleSource, /\.md (ul|ol)[^{]*\{[^}]*list-style: none/)
+})
+
+// 引用块（§5 贴地：0 影＋1px 边）。
+test("blockquotes render as a grounded surface with a leading rule", () => {
+  assert.match(
+    styleSource,
+    /\.md blockquote \{[^}]*border: var\(--ow-border-width-thin, 1px\) solid var\(--ow-border\); border-left: 2px solid var\(--ow-border-strong\);[^}]*background: var\(--ow-surface\); color: var\(--ow-text-2\); \}/,
+  )
+  assert.doesNotMatch(styleSource, /\.md blockquote \{[^}]*box-shadow/)
+})
+
+// 全局层级（既定态）：markdown.css 的 `.md h1`/`.md p`/`.md table` 是「类名＋元素名」
+// 选择器（0,1,1），未分层时压过 @layer utilities 的 Tailwind 工具类，宿主传给
+// <Markdown className> 的覆写会被静默吃掉。整族收进 @layer components。
+test("markdown family is declared inside @layer components", () => {
+  assert.match(styleSource, /@layer components \{/)
+  const firstRule = styleSource.indexOf(".md {")
+  const layerOpen = styleSource.indexOf("@layer components {")
+  assert.ok(layerOpen >= 0 && layerOpen < firstRule, "@layer 必须包住第一条 .md 规则")
+  assert.equal(styleSource.trimEnd().endsWith("}"), true)
+})