concept-atlas-dense-explain 0.8.0 → 0.10.0

package/bin/cli.mjs

@@ -156,12 +156,13 @@ if (command === 'create' || command === 'new') {
       <Children><ConceptRef id="first-branch" /><ConceptRef id="second-branch" /></Children>
     </ConceptNode>
 
-    <ConceptNode id="first-branch" title="第一条关键分支" level="L1" parent="root-node">
+    <ConceptNode id="first-branch" title="第一条关键分支" level="L1" parent="root-node" summary="第一条关键分支解决什么问题，以及它为什么值得先理解。">
       <Overview>解释第一个重要组成部分。</Overview>
       <Example title="典型例子">填写一个具体例子，帮助读者验证理解。</Example>
+      <CodeBlock language="bash" title="验证方式" code="npm run validate" lineNumbers />
     </ConceptNode>
 
-    <ConceptNode id="second-branch" title="第二条关键分支" level="L1" parent="root-node">
+    <ConceptNode id="second-branch" title="第二条关键分支" level="L1" parent="root-node" summary="第二条关键分支解决什么问题，以及它和第一条分支如何配合。">
       <Overview>解释第二个重要组成部分。</Overview>
       <Boundary>填写它的边界、代价或常见误区。</Boundary>
     </ConceptNode>
@@ -182,6 +183,7 @@ if (command === 'create' || command === 'new') {
   <ScrollSection title="解释关键机制">
     <ScrollProse>按输入、步骤、输出的顺序解释过程，不要只罗列名词。</ScrollProse>
     <Flow title="处理流程" steps={[{title:'输入',description:'原始条件或数据'},{title:'处理',description:'关键变化或判断'},{title:'输出',description:'结果与可观察证据'}]} />
+    <CodeBlock language="bash" title="实践命令" code="npm run validate" caption="通用代码块可以放在任意章节；需要逐行讲解时加 lineNumbers。" />
   </ScrollSection>
 
   <ScrollSection title="边界与实践">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "concept-atlas-dense-explain",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Portable dense-explanation skill and MDX concept atlas template",
   "type": "module",
   "bin": {

package/skill/SKILL.md

@@ -38,7 +38,7 @@ Drive everything through the `concept-atlas-dense-explain` npm CLI. This skill i
 
 ## Component families
 
-- Node semantics: `Overview`, `Definition`, `Mechanism`, `Implementation`, `Boundary`, `Example`, `Counterexample`, `Prerequisite`, `Input`, `Output`, `Glossary`
+- Node semantics: `Overview`, `Definition`, `Mechanism`, `Implementation`, `CodeBlock`, `Boundary`, `Example`, `Counterexample`, `Prerequisite`, `Input`, `Output`, `Glossary`
 - Argument and evidence: `Evidence`, `Invariant`, `FailureMode`, `Tradeoff`, `LearningObjectives`, `KeyQuestion`
 - Information models: `Flow`, `Timeline`, `Compare`, `DecisionMatrix`, `FrameworkModel`, `MatrixModel`, `FormulaModel`, `PyramidModel`, `FunnelModel`
 - Reading and layout: `Insight`, `Callout`, `Details`, `NoteGrid`, `Tabs`, `Columns`, `Stack`, `Grid`, `Split`, `ScrollGrid`, `ScrollPair`, `ScrollToc`
@@ -52,6 +52,7 @@ Drive everything through the `concept-atlas-dense-explain` npm CLI. This skill i
 - Array props are arrays of objects: `Flow steps={[{title, description}]}`, `Timeline events={[{label, content}]}`, `MatrixModel cells={[{title, description, tone}]}`, `DecisionMatrix headers={[...]} rows={[[...]]}`, `Chart data={[{label, value}]}`, `References items={[{id, authors, year, title, url, source}]}`. The validator warns (`PROP_EXPECTS_ARRAY`) when an array prop gets a string or non-array.
 - `Relation type` must be one of `prerequisite`, `causes`, `produces`, `uses`, `implements`, `contrasts`, `depends-on`, `exception-of`, `precedes`, and each `Relation` needs a `label`. Parent/child hierarchy is implicit (via `parent` and `Children`/`ConceptRef`) — do not express it with a `Relation`.
 - **Math**: MDX parses `{ ... }` in children as expressions, so pass LaTeX with braces or backslashes through `formula`: `<Math formula="r_{\text{ann}} = (1 + r)^{12} - 1" />`, `<MathBlock formula="I(x) = -\log_2 p(x)" variables={[{symbol, description}]} />`. Brace-free children such as `<Math>\log_2 N</Math>` are fine. The validator warns (`MATH_CHILDREN_BRACES`).
+- **CodeBlock**: a general code block usable anywhere; `Implementation` is the node-bound variant. Pass the code as a string via `code` (or as children) wrapped in a template literal so MDX does not read it as expressions: `<CodeBlock language="bash" title="..." lineNumbers>{`npm run validate`}</CodeBlock>`. `language` adds the badge, `title`/`caption` add labels, `lineNumbers` and `wrap` are booleans.
 - **Chart**: `type` is `bar` | `line` | `pie`; use `data` for bar/pie and `labels` + `series={[{name, values}]}` for line. Charts follow theme colors.
 - **Figure**: a relative `src` (`./assets/diagram.png`) is inlined as base64 at build time so the HTML stays standalone; `http(s)` URLs stay links. Always set `alt`; add `label` and `caption` for a numbered caption. A missing relative file warns (`ASSET_MISSING`) and shows a placeholder. Readers can click a figure to open it full-screen (zoom, drag, `Esc`) — mention it for diagram-heavy pages.
 - **Figure size & cost**: inlining images is what makes a screenshot-heavy page large; a page with no heavy renderers otherwise lands near 250KB. When the user cares, compile with `--link-assets` to keep images as relative links (measured 1.51MB → 270KB); the output must then sit beside the MDX's `assets/`, and the CLI warns if `-o` points elsewhere — tell the user that trade-off instead of choosing silently.

package/template/guides/atlas-guide.mdx

@@ -114,9 +114,9 @@
       <RelationMap title="可视化摘要" items={[{from:'MDX',type:'produces',to:'Graph',note:'生成关系图'},{from:'Node',type:'uses',to:'Mermaid',note:'展示局部流程'}]} />
     </ConceptNode>
 
-    <ConceptNode id="extension-family" title="扩展能力：公式、图表、图片与引用" level="L1" parent="showroom" summary="数学公式、数据图表、配图题注和参考文献四项能力，让讲解可以带上推导、数据与出处。">
-      <Definition>扩展组件把文本之外的证据接进页面：Math/MathBlock 渲染数学、Chart 绘制数据、Figure 承载配图、Cite/References 保留出处。</Definition>
-      <Children><ConceptRef id="math-demo" /><ConceptRef id="chart-demo" /><ConceptRef id="figure-demo" /><ConceptRef id="citation-demo" /></Children>
+    <ConceptNode id="extension-family" title="扩展能力：公式、图表、图片、代码与引用" level="L1" parent="showroom" summary="数学公式、数据图表、配图题注、代码块和参考文献五项能力，让讲解可以带上推导、数据、实现与出处。">
+      <Definition>扩展组件把文本之外的证据接进页面：Math/MathBlock 渲染数学、Chart 绘制数据、Figure 承载配图、CodeBlock 展示代码或命令、Cite/References 保留出处。</Definition>
+      <Children><ConceptRef id="math-demo" /><ConceptRef id="chart-demo" /><ConceptRef id="figure-demo" /><ConceptRef id="code-demo" /><ConceptRef id="citation-demo" /></Children>
     </ConceptNode>
 
     <ConceptNode id="math-demo" title="Math 与 MathBlock：把推导写进正文" level="L2" parent="extension-family" summary="Math 用于行内符号，MathBlock 用于独立公式并支持变量说明。">
@@ -138,6 +138,15 @@
       <Boundary>大图会显著增大单文件 HTML；截图类内容建议控制尺寸。</Boundary>
     </ConceptNode>
 
+    <ConceptNode id="code-demo" title="CodeBlock：把命令、配置或伪代码放进正文" level="L2" parent="extension-family" summary="与绑定节点的 Implementation 不同，CodeBlock 可以出现在任何位置，并支持标题、题注、换行和行号。">
+      <Definition>CodeBlock 通过 code（或子内容）接收字符串，language 决定语言标记，title 与 caption 提供说明，lineNumbers 和 wrap 控制逐行讲解与长行折行。</Definition>
+      <CodeBlock language="bash" title="校验与构建" caption="命令行、伪代码或配置都可以用它承载，不依附于某个概念节点。" lineNumbers>{`npm run validate
+npm run sync
+npm run build`}</CodeBlock>
+      <CodeBlock language="javascript" title="语义优先" wrap>{`const explain = concept => concept.mechanism ?? concept.definition ?? concept.overview;`}</CodeBlock>
+      <Boundary>代码里的反引号、花括号请放在模板字符串中传入，避免被 MDX 当作表达式解析。</Boundary>
+    </ConceptNode>
+
     <ConceptNode id="citation-demo" title="Cite 与 References：让结论可以追溯" level="L2" parent="extension-family" summary="行内用 Cite 标记引用，文末用 References 列出完整出处，编号自动对应。">
       <Definition>Cite 的 id 与 References 条目的 id 对应，渲染时显示条目在列表中的序号，并链接到该条目。</Definition>
       <Overview>信息密度的价值在于可验证性<Cite id="shannon1948" />，而可验证性依赖清晰的出处<Cite id="tufte1983" />。</Overview>

package/template/guides/scroll-guide.mdx

@@ -42,6 +42,14 @@
     <Chart title="四周留存趋势" type="line" labels={['第1周','第2周','第3周','第4周']} series={[{name:'留存率',values:[100,72,58,49]},{name:'活跃度',values:[100,64,52,40]}]} />
   </ScrollSection>
 
+  <ScrollSection title="把命令与代码放进正文">
+    <ScrollProse>CodeBlock 承载命令行、配置或伪代码。它不依附于某个概念节点，可以出现在任何章节；需要逐行讲解时打开行号，长行过多时可以折行。</ScrollProse>
+    <CodeBlock language="bash" title="本地校验与预览" caption="CodeBlock 复用模板的代码表面，因此自动跟随当前皮肤与组件风格。" lineNumbers>{`npm run validate
+npm run sync
+npm run dev`}</CodeBlock>
+    <CodeBlock language="javascript" title="语义优先" wrap>{`const explain = concept => concept.mechanism ?? concept.definition ?? concept.overview;`}</CodeBlock>
+  </ScrollSection>
+
   <ScrollSection title="组织证据，再收敛到行动">
     <ScrollGrid columns="3">
       <PyramidModel title="论证层级" levels={[{title:'结论',description:'读者需要带走的判断'},{title:'理由',description:'支撑判断的关键分组'},{title:'证据',description:'事实、数据与案例'}]} />

package/template/index.html

@@ -33,7 +33,7 @@
     <!-- Google Fonts for Academic / Editorial Knowledge style -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Lora:ital,wght@0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Serif+SC:wght@500;600;700;900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Lora:ital,wght@0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Serif+SC:wght@500;600;700;900&display=swap" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>

package/template/src/components/MDXComponents.jsx

@@ -173,13 +173,50 @@ Mechanism.displayName = 'Mechanism';
 export function Implementation({ language = 'text', title = '实现代码', children }) {
   return (
     <div className="semantic-implementation" data-language={language}>
-      {title && <div className="impl-header">{title} <span className="lang-badge">{language}</span></div>}
-      <pre><code>{typeof children === 'string' ? children.trim() : children}</code></pre>
+      {title && (
+        <div className="semantic-code-head impl-header">
+          <span className="semantic-code-title">{title}</span>
+          {language && <span className="lang-badge">{language}</span>}
+        </div>
+      )}
+      <pre className="code-block"><code>{typeof children === 'string' ? children.trim() : children}</code></pre>
     </div>
   );
 }
 Implementation.displayName = 'Implementation';
 
+/**
+ * Generic code block for any carrier. `Implementation` is bound to a node's
+ * implementation section; `CodeBlock` is meant for shell commands, config,
+ * output, prompts and pseudocode that live anywhere in a document.
+ * Pass the code as a string through `code` (or as children) so MDX parsing and
+ * the validator never confuse code with markup.
+ */
+export function CodeBlock({ code, language = 'text', title, caption, lineNumbers = false, wrap = false, children }) {
+  const raw = typeof code === 'string' ? code : childrenToText(children);
+  const text = typeof raw === 'string' ? raw.replace(/^\n+|\s+$/g, '') : '';
+  if (!text) return null;
+  const showLanguage = Boolean(language) && language !== 'text';
+  const showHead = Boolean(title) || showLanguage;
+  return (
+    <figure className="semantic-code" data-language={language}>
+      {showHead && (
+        <div className="semantic-code-head">
+          {title && <span className="semantic-code-title">{title}</span>}
+          {showLanguage && <span className="lang-badge">{language}</span>}
+        </div>
+      )}
+      <pre className={`code-block${lineNumbers ? ' code-block-numbered' : ''}${wrap ? ' code-block-wrap' : ''}`}>
+        {lineNumbers
+          ? <code>{text.split('\n').map((line, index) => <span className="code-line" key={index}>{line}</span>)}</code>
+          : <code>{text}</code>}
+      </pre>
+      {caption && <figcaption className="semantic-code-caption">{caption}</figcaption>}
+    </figure>
+  );
+}
+CodeBlock.displayName = 'CodeBlock';
+
 export function Boundary({ title = '边界与约束', children }) {
   return (
     <div className="semantic-boundary">

package/template/src/model/validate-content.js

@@ -27,6 +27,7 @@ export const KNOWN_COMPONENTS = [
   'Definition',
   'Mechanism',
   'Implementation',
+  'CodeBlock',
   'Boundary',
   'Example',
   'Counterexample',
@@ -110,6 +111,7 @@ const CORE_CONTENT_COMPONENTS = new Set([
   'Definition',
   'Mechanism',
   'Implementation',
+  'CodeBlock',
   'Boundary',
   'Example',
   'Counterexample',

package/template/src/styles/core.css

@@ -1026,13 +1026,99 @@ button.flow-box {
   border-radius: 10px;
   overflow-x: auto;
   font-family: var(--font-data);
-  font-size: 13px;
-  line-height: 1.6;
+  /* A comfortable, taller setting for a mono face; ligatures stay off so
+     operators render exactly as they were typed. */
+  font-size: 14px;
+  line-height: 1.7;
+  font-variant-ligatures: none;
+  font-feature-settings: 'liga' 0, 'calt' 0;
   color: var(--code-text);
   border: 1px solid var(--code-border);
   box-shadow: var(--shadow-inset);
 }
 
+/* -- Code family: `.code-block` is the one shared dark inset used by the
+      explorer, `Implementation` and `CodeBlock`. Both components wrap it with
+      an optional head, caption and numbered lines, and they share the head +
+      surface classes so every style pack only has to re-voice one grammar. -- */
+.semantic-code,
+.semantic-implementation {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0;
+}
+
+.semantic-code > pre,
+.semantic-implementation > pre {
+  margin: 0;
+}
+
+.semantic-code-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.semantic-code-title {
+  font-family: var(--font-heading);
+  font-weight: 700;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+/* The language tag rides every code head; a pack may dress it as a badge. */
+.lang-badge {
+  font-family: var(--font-data);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.semantic-code-caption {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.code-block-wrap {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.code-block-numbered {
+  counter-reset: code-line;
+}
+
+.code-block-numbered code {
+  display: block;
+}
+
+.code-block-numbered .code-line {
+  position: relative;
+  display: block;
+  min-height: 1.7em;
+  padding-left: 3.6em;
+  counter-increment: code-line;
+}
+
+.code-block-numbered .code-line::before {
+  content: counter(code-line);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 2.5em;
+  padding-right: 0.85em;
+  text-align: right;
+  color: color-mix(in srgb, var(--code-text) 50%, transparent);
+  border-right: 1px solid color-mix(in srgb, var(--code-text) 18%, transparent);
+  user-select: none;
+}
+
 .example-item, .counterexample-item {
   margin-top: 12px;
   padding: 14px 18px;
@@ -2033,10 +2119,10 @@ button.flow-box {
 .relation-path-node.tone-warning { border-top-color: var(--accent-amber); }
 .relation-path-node.tone-danger { border-top-color: var(--accent-rose); }
 .relation-path-kicker, .relation-path-node strong, .relation-path-node small { display: block; }
-.relation-path-kicker { color: var(--text-dim); font: 700 10px 'Fira Code', monospace; margin-bottom: 4px; }
+.relation-path-kicker { color: var(--text-dim); font: 700 10px var(--font-data); margin-bottom: 4px; }
 .relation-path-node strong { color: var(--text-primary); font-size: 13px; }
 .relation-path-node small { margin-top: 4px; color: var(--text-muted); font-size: 11px; }
-.relation-path-edge { flex: 0 0 72px; display: grid; place-items: center; position: relative; color: var(--text-accent); font: 700 10px 'Fira Code', monospace; }
+.relation-path-edge { flex: 0 0 72px; display: grid; place-items: center; position: relative; color: var(--text-accent); font: 700 10px var(--font-data); }
 .relation-path-edge::before { content: ''; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 1px dashed var(--border-strong); }
 .relation-path-edge span { z-index: 1; padding: 2px 4px; background: var(--bg-surface); }
 
@@ -3379,7 +3465,8 @@ html[data-carrier='scroll'] #root {
 .continuous-document .model-matrix-cell span,
 .continuous-document .model-pyramid-level span,
 .continuous-document .model-funnel-step span,
-.continuous-document .tradeoff-option span {
+.continuous-document .tradeoff-option span,
+.continuous-document .code-block {
   font-size: calc(14px * var(--reading-ui-scale));
 }
 

package/template/src/styles/packs/elastic.css

@@ -515,3 +515,60 @@
 [data-style='elastic'] .semantic-compare-table tbody tr {
   transition: background-color var(--elastic-motion);
 }
+
+/* -- Code as a panel: a 6px bordered surface under a subdued header strip,
+      the well set flush inside and inset like a terminal. The whole panel
+      answers on the pack's 250ms curve with the same 1px lift as every other
+      elastic surface, and the caption closes as a dim mono footer. -- */
+[data-style='elastic'] .semantic-code,
+[data-style='elastic'] .semantic-implementation {
+  gap: 0;
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-2);
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+  transition: border-color var(--elastic-motion), transform var(--elastic-motion);
+}
+
+[data-style='elastic'] .semantic-code:hover,
+[data-style='elastic'] .semantic-implementation:hover {
+  border-color: var(--border-strong);
+  transform: translateY(-1px);
+}
+
+[data-style='elastic'] .semantic-code-head {
+  padding: 9px 12px;
+  background: var(--bg-subtle);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+[data-style='elastic'] .semantic-code-title {
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--text-primary);
+}
+
+[data-style='elastic'] .lang-badge {
+  padding: 2px 6px;
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-1);
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  letter-spacing: 0.03em;
+}
+
+[data-style='elastic'] .semantic-code > .code-block,
+[data-style='elastic'] .semantic-implementation > .code-block {
+  border: 0;
+  border-radius: 0;
+  box-shadow: var(--shadow-inset);
+}
+
+[data-style='elastic'] .semantic-code-caption {
+  padding: 8px 12px 10px;
+  border-top: 1px solid var(--border-subtle);
+  font-family: var(--font-sans);
+}

package/template/src/styles/packs/manuscript.css

@@ -424,3 +424,41 @@
   border-color: var(--primary);
   color: var(--primary);
 }
+
+/* -- Listings: the code well keeps its ink, but the frame drops to a
+      near-square ruled inset under a heavier top rule. The head reads as a
+      printed listing caption in the heading face, the language tag as a quiet
+      mono folio, and the caption closes as an italic printer's note. Paper
+      answers the pointer through rule weight only — no nudging. -- */
+[data-style='manuscript'] .code-block {
+  padding: 16px 18px;
+  border-radius: 2px;
+  border-top: 2px solid color-mix(in srgb, var(--code-text) 42%, transparent);
+  box-shadow: none;
+  transition: border-top-color var(--motion-base) var(--ease-standard);
+}
+
+[data-style='manuscript'] .code-block:hover {
+  border-top-color: color-mix(in srgb, var(--code-text) 62%, transparent);
+}
+
+[data-style='manuscript'] .semantic-code-title {
+  font-family: var(--font-heading);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+[data-style='manuscript'] .lang-badge {
+  color: var(--text-dim);
+  letter-spacing: 0.12em;
+}
+
+[data-style='manuscript'] .semantic-code-caption {
+  font-style: italic;
+}
+
+[data-style='manuscript'] .code-block-numbered .code-line::before {
+  color: color-mix(in srgb, var(--code-text) 40%, transparent);
+  border-right-color: color-mix(in srgb, var(--code-text) 16%, transparent);
+}

package/template/src/styles/packs/shadcn.css

@@ -515,3 +515,57 @@
 [data-style='shadcn'] .semantic-compare-table tbody tr {
   transition: background-color var(--shadcn-motion);
 }
+
+/* -- Code as a card: hairline chassis, a muted divided header and the well set
+      flush inside it, closed by a caption footer. The language tag is an
+      outline badge, and the surface only answers on the shared 150ms curve. -- */
+[data-style='shadcn'] .semantic-code,
+[data-style='shadcn'] .semantic-implementation {
+  gap: 0;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-3);
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+  transition: border-color var(--shadcn-motion);
+}
+
+[data-style='shadcn'] .semantic-code:hover,
+[data-style='shadcn'] .semantic-implementation:hover {
+  border-color: var(--border-medium);
+}
+
+[data-style='shadcn'] .semantic-code-head {
+  padding: 10px 14px;
+  background: var(--bg-subtle);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+[data-style='shadcn'] .semantic-code-title {
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--text-primary);
+}
+
+[data-style='shadcn'] .lang-badge {
+  padding: 2px 7px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-1);
+  background: var(--bg-surface);
+  color: var(--text-muted);
+  letter-spacing: 0.04em;
+}
+
+[data-style='shadcn'] .semantic-code > .code-block,
+[data-style='shadcn'] .semantic-implementation > .code-block {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+[data-style='shadcn'] .semantic-code-caption {
+  padding: 8px 14px 10px;
+  border-top: 1px solid var(--border-subtle);
+}

package/template/src/styles/tokens.css

@@ -262,7 +262,7 @@
   /* Family stacks */
   --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif;
   --font-serif: 'Lora', 'Noto Serif SC', Georgia, serif;
-  --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
 
   /* Roles — the only families component styles should consume */
   --font-body: var(--font-sans);