npm - concept-atlas-dense-explain - Versions diffs - 0.9.0 → 1.0.0 - Mend

concept-atlas-dense-explain 0.9.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/package.json +1 -1
package/template/guides/scroll-guide.mdx +32 -0
package/template/index.html +1 -1
package/template/src/components/MDXComponents.jsx +92 -22
package/template/src/styles/core.css +129 -38
package/template/src/styles/packs/elastic.css +57 -0
package/template/src/styles/packs/manuscript.css +38 -0
package/template/src/styles/packs/shadcn.css +54 -0
package/template/src/styles/tokens.css +1 -1

package/package.json CHANGED Viewed

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

package/template/guides/scroll-guide.mdx CHANGED Viewed

@@ -100,6 +100,38 @@ npm run dev`}</CodeBlock>
     <RelationMap title="关系速览" items={[{from:'MDX',type:'produces',to:'Graph',note:'生成关系图'},{from:'Node',type:'uses',to:'Mermaid',note:'展示局部流程'}]} />
   </ScrollSection>
+  <ScrollSection title="附录：大图的框内适配与放大阅读">
+    <ScrollProse>较大的流程图会被等比收进框内，而不是画出边框。点击图面或标题栏的「放大阅读」可以打开全屏视图，用滚轮缩放、拖拽平移、Esc 关闭。</ScrollProse>
+    <Mermaid title="图谱生成管线" width="100%" height="360px" chart={`flowchart TD
+  S[MDX 源文件] --> P[解析与校验]
+  P --> G[概念图谱]
+  P --> F[图表与公式]
+  G --> D[节点探索]
+  G --> R[关系图谱]
+  D --> M[Mermaid 局部流程图]
+  R --> M
+  F --> M
+  M --> Z[框内自适应缩放]
+  Z --> O[点击放大阅读]
+  O --> W[拖拽平移]
+  O --> K[滚轮缩放]
+  O --> E[Esc 关闭]
+  style S fill:#172554,stroke:#38bdf8,color:#e0f2fe
+  style Z fill:#14532d,stroke:#34d399,color:#ecfdf5
+  style O fill:#78350f,stroke:#fbbf24,color:#fffbeb`} />
+    <ScrollGrid columns="2">
+      <Mermaid title="窄栏中的纵向长图" width="100%" height="220px" chart={`flowchart TD
+  A[读取] --> B[解析]
+  B --> C[建模]
+  C --> D[渲染]
+  D --> E[校验]
+  E --> F[发布]
+  F --> G[归档]
+  G --> H[复盘]`} />
+      <RelationPath title="阅读路径" steps={[{level:'L0',node:'总览',note:'建立直觉',tone:'info'},{level:'L1',node:'机制',note:'理解过程',tone:'success'},{level:'L2',node:'边界',note:'检查反例',tone:'warn'}]} />
+    </ScrollGrid>
+  </ScrollSection>
   <ScrollSection title="参考文献">
     <References title="本页引用" items={[{id:'tufte1983',authors:'Tufte, E. R.',year:'1983',title:'The Visual Display of Quantitative Information',source:'Graphics Press',note:'关于以图形压缩与呈现证据的经典论述。'}]} />
   </ScrollSection>

package/template/index.html CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -173,8 +173,13 @@ 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>
   );
 }
@@ -721,13 +726,48 @@ export function Tabs({ items = [], children }) {
 }
 Tabs.displayName = 'Tabs';
+/**
+ * Enlarged reader for a diagram. It re-renders the chart under a fresh id so
+ * the full-size copy never collides with the inline SVG, then hands the result
+ * to the shared zoom overlay (wheel zoom, drag to pan, Esc to close).
+ */
+function MermaidZoom({ chart, title, onClose }) {
+  const ref = React.useRef(null);
+  const appearanceKey = useAppearanceKey();
+  const [error, setError] = React.useState('');
+  React.useEffect(() => {
+    let cancelled = false;
+    async function renderZoom() {
+      if (!ref.current || !chart.trim()) return;
+      try {
+        configureMermaid();
+        const renderId = `mermaid-zoom-${Math.random().toString(36).slice(2, 10)}`;
+        const { svg } = await mermaid.render(renderId, chart.trim());
+        if (!cancelled && ref.current) ref.current.innerHTML = svg;
+      } catch (err) {
+        if (!cancelled) setError(err.message || 'Mermaid 图表语法错误');
+      }
+    }
+    renderZoom();
+    return () => { cancelled = true; };
+  }, [chart, appearanceKey]);
+  return (
+    <ZoomOverlay title={title || '关系草图'} caption={title} onClose={onClose}>
+      {error
+        ? <pre className="mermaid-error">{error}</pre>
+        : <div className="mermaid-zoom-canvas" ref={ref} />}
+    </ZoomOverlay>
+  );
+}
 export function Mermaid({ chart = '', title = '关系草图', width = 'auto', height = 'auto', x = 0, y = 0, position = 'flow' }) {
   const ref = React.useRef(null);
   const id = React.useId().replace(/:/g, '');
   const appearanceKey = useAppearanceKey();
   const [error, setError] = React.useState('');
-  const [scale, setScale] = React.useState(1);
-  const [pan, setPan] = React.useState({ x: 0, y: 0 });
+  const [zoomed, setZoomed] = React.useState(false);
   React.useEffect(() => {
     let cancelled = false;
@@ -749,15 +789,41 @@ export function Mermaid({ chart = '', title = '关系草图', width = 'auto', he
     return () => { cancelled = true; };
   }, [chart, id, appearanceKey]);
-  const zoom = (delta) => setScale(value => Math.max(0.5, Math.min(3, +(value + delta).toFixed(2))));
-  const reset = () => { setScale(1); setPan({ x: 0, y: 0 }); };
+  const canZoom = Boolean(chart.trim()) && !error;
+  const openZoom = () => { if (canZoom) setZoomed(true); };
+  const onKeyDown = event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      openZoom();
+    }
+  };
   return (
     <div className={`semantic-mermaid ${widgetClass(position)}`} style={widgetStyle({ width, height, x, y, position })}>
       <div className="semantic-widget-head">
         <span>{title}</span>
-        <div className="mermaid-tools"><code>MERMAID</code><button type="button" onClick={() => zoom(-0.1)} aria-label="缩小图表">−</button><span>{Math.round(scale * 100)}%</span><button type="button" onClick={() => zoom(0.1)} aria-label="放大图表">＋</button><button type="button" onClick={reset} aria-label="重置图表">↺</button></div>
+        <div className="mermaid-tools">
+          <code>MERMAID</code>
+          <button type="button" onClick={openZoom} disabled={!canZoom} aria-label={`放大阅读：${title}`}>
+            <ZoomIn size={12} />放大阅读
+          </button>
+        </div>
       </div>
-      {error ? <pre className="mermaid-error">{error}</pre> : <div className="mermaid-canvas" onWheel={(event) => { event.preventDefault(); zoom(event.deltaY < 0 ? 0.1 : -0.1); }}><div className="mermaid-canvas-inner" style={{ transform: `translate(${pan.x}px, ${pan.y}px) scale(${scale})` }} ref={ref} /></div>}
+      {error ? (
+        <pre className="mermaid-error">{error}</pre>
+      ) : (
+        <div
+          className="mermaid-canvas"
+          role="button"
+          tabIndex={0}
+          aria-label={`放大阅读：${title}`}
+          onClick={openZoom}
+          onKeyDown={onKeyDown}
+        >
+          <div className="mermaid-canvas-inner" ref={ref} />
+        </div>
+      )}
+      {zoomed && <MermaidZoom chart={chart} title={title} onClose={() => setZoomed(false)} />}
     </div>
   );
 }
@@ -1042,12 +1108,12 @@ const ZOOM_MIN = 0.5;
 const ZOOM_MAX = 6;
 /**
- * Full-viewport image viewer. Rendered through a portal so it escapes the
- * transformed/rotated ancestor surfaces (`position: fixed` would otherwise be
- * contained by them). Supports wheel zoom, drag to pan, double-click to toggle
- * 1x/2x, and Escape to close.
+ * Full-viewport zoom viewer shared by images and diagrams. Rendered through a
+ * portal so it escapes the transformed/rotated ancestor surfaces (`position:
+ * fixed` would otherwise be contained by them). Supports wheel zoom, drag to
+ * pan, double-click to toggle 1x/2x, and Escape to close.
  */
-function ImageZoom({ src, alt, caption, label, onClose }) {
+function ZoomOverlay({ title, caption, label, onClose, children }) {
   const [scale, setScale] = React.useState(1);
   const [offset, setOffset] = React.useState({ x: 0, y: 0 });
   const [dragging, setDragging] = React.useState(false);
@@ -1121,8 +1187,6 @@ function ImageZoom({ src, alt, caption, label, onClose }) {
     }
   };
-  const title = alt || caption || '图片';
   return createPortal(
     <div
       className="image-zoom-overlay"
@@ -1141,14 +1205,11 @@ function ImageZoom({ src, alt, caption, label, onClose }) {
         onDoubleClick={() => { const next = scaleRef.current > 1 ? 1 : 2; setScale(next); settle(next); }}
         onClick={event => { if (movedRef.current) { event.stopPropagation(); movedRef.current = false; } }}
       >
-        <img
-          src={src}
-          alt={alt || ''}
-          draggable="false"
-          style={{ transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})` }}
-        />
+        <div className="image-zoom-target" style={{ transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})` }}>
+          {children}
+        </div>
       </div>
-      {title && <p className="image-zoom-caption">{label && <b>{label}</b>}{caption || alt}</p>}
+      {title && <p className="image-zoom-caption">{label && <b>{label}</b>}{caption}</p>}
       <div className="image-zoom-toolbar">
         <button type="button" onClick={() => zoomBy(-0.25)} aria-label="缩小" title="缩小（−）">−</button>
         <span aria-live="polite">{Math.round(scale * 100)}%</span>
@@ -1161,6 +1222,15 @@ function ImageZoom({ src, alt, caption, label, onClose }) {
   );
 }
+function ImageZoom({ src, alt, caption, label, onClose }) {
+  const title = alt || caption || '图片';
+  return (
+    <ZoomOverlay title={title} caption={caption || alt} label={label} onClose={onClose}>
+      <img src={src} alt={alt || ''} draggable="false" />
+    </ZoomOverlay>
+  );
+}
 export function Figure({ src, alt = '', caption, label, width = 'auto', height = 'auto', x = 0, y = 0, position = 'flow' }) {
   const [zoomed, setZoomed] = React.useState(false);
   const title = alt || caption || '图片';

package/template/src/styles/core.css CHANGED Viewed

@@ -94,11 +94,45 @@ button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
 .gap-sm { gap: 8px; } .gap-md { gap: 16px; } .gap-lg { gap: 28px; }
 .semantic-tabs details { border-bottom: 1px solid var(--border-subtle); padding: 8px 0; }
 .semantic-tabs summary { cursor: pointer; font-weight: 700; color: var(--text-primary); }
-.mermaid-tools { display: inline-flex; align-items: center; gap: 5px; }
-.mermaid-tools button { width: 22px; height: 22px; border: 1px solid var(--border-medium); border-radius: 4px; background: var(--bg-subtle); font-weight: 700; }
+.mermaid-tools { display: inline-flex; align-items: center; gap: 6px; }
+.mermaid-tools button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 22px;
+  padding: 0 8px;
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-1);
+  background: var(--bg-subtle);
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 700;
+}
 .mermaid-tools button:hover { color: var(--primary); border-color: var(--primary); }
-.mermaid-canvas { overflow: hidden; min-height: 120px; display: grid; place-items: center; cursor: grab; }
-.mermaid-canvas-inner { display: inline-block; min-width: 100%; transform-origin: center center; transition: transform .15s ease; }
+.mermaid-tools button:disabled { opacity: .5; cursor: not-allowed; }
+/* The diagram frame is a bounded viewport, not a loose box: the head keeps its
+   own height and the canvas takes the rest, so a fixed `height` prop contains
+   the drawing instead of letting it paint past the border. The SVG is scaled to
+   fit with its own preserveAspectRatio; clicking opens the full-size viewer. */
+.mermaid-canvas {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 4px;
+  cursor: zoom-in;
+}
+.mermaid-canvas-inner {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  transform-origin: center center;
+}
+.mermaid-canvas svg { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
 /* Scrollbar beautification */
 ::-webkit-scrollbar {
@@ -1026,26 +1060,37 @@ 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);
 }
-/* Generic CodeBlock. It reuses `.code-block` so every skin and style pack
-   keeps one code surface, and only adds an optional title bar, wrap and
-   line numbers on top. */
-.semantic-code {
-  margin: 0;
+/* -- 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: center;
+  align-items: baseline;
   justify-content: space-between;
   gap: 10px;
 }
@@ -1057,6 +1102,17 @@ button.flow-box {
   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);
@@ -1078,18 +1134,22 @@ button.flow-box {
 .code-block-numbered .code-line {
   position: relative;
   display: block;
-  min-height: 1.6em;
-  padding-left: 3em;
+  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: 2em;
+  width: 2.5em;
+  padding-right: 0.85em;
   text-align: right;
-  color: rgba(148, 163, 184, 0.55);
+  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;
 }
@@ -2044,6 +2104,16 @@ button.flow-box {
   min-width: 0;
 }
+/* The diagram frame clips and hands its remaining height to the canvas, so a
+   fixed `height` prop can never let the drawing escape the border. */
+.semantic-mermaid {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.semantic-mermaid > .semantic-widget-head { flex: 0 0 auto; }
 .draft-board .custom-section {
   padding: 12px 14px;
 }
@@ -2093,10 +2163,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); }
@@ -2104,9 +2174,10 @@ button.flow-box {
 .draft-board .semantic-relation-map {
   width: fit-content;
   max-width: 100%;
-  overflow: visible;
 }
+.draft-board .semantic-relation-map { overflow: visible; }
 .draft-board .semantic-insight,
 .draft-board .semantic-note-grid {
   width: fit-content;
@@ -2130,22 +2201,18 @@ button.flow-box {
   font-size: 9px;
 }
-.mermaid-canvas {
-  min-height: 100px;
-  overflow: auto;
-  padding: 4px;
-  max-width: 100%;
-  min-width: 0;
-}
-.mermaid-canvas svg {
-  max-width: none;
-  min-width: 100%;
-  height: auto;
+/* The inline diagram is a preview: clicking it, or the head button, opens the
+   full-size viewer. The cursor is the only affordance on the drawing itself, so
+   nothing competes with the diagram for attention. */
+.mermaid-canvas:focus-visible {
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: 2px;
 }
 .mermaid-error {
   margin: 0;
+  min-height: 0;
+  overflow: auto;
   color: var(--accent-rose);
   font-size: 11px;
   white-space: pre-wrap;
@@ -3439,7 +3506,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));
 }
@@ -3733,6 +3801,10 @@ html[data-carrier='scroll'] #root {
   place-items: center;
   padding: 28px;
   background: var(--overlay-scrim);
+  /* Clip at the viewport, not at the media box: the zoom transform does not
+     change layout size, so a stage-sized clip would only ever reveal what the
+     un-zoomed element already covered. */
+  overflow: hidden;
 }
 .image-zoom-stage {
@@ -3740,13 +3812,22 @@ html[data-carrier='scroll'] #root {
   place-items: center;
   max-width: 100%;
   max-height: 100%;
-  overflow: hidden;
+  overflow: visible;
   cursor: grab;
   touch-action: none;
 }
 .image-zoom-stage.is-dragging { cursor: grabbing; }
+/* The pan/zoom transform rides a wrapper so the viewer can hold an <img> or a
+   rendered diagram without duplicating the gesture logic. */
+.image-zoom-target {
+  display: block;
+  transition: transform 0.12s ease-out;
+  will-change: transform;
+  user-select: none;
+}
 .image-zoom-stage img {
   display: block;
   width: auto;
@@ -3756,12 +3837,22 @@ html[data-carrier='scroll'] #root {
   border-radius: var(--radius-2);
   background: var(--bg-surface);
   box-shadow: var(--shadow-modal);
-  transition: transform 0.12s ease-out;
-  will-change: transform;
   user-select: none;
 }
-.image-zoom-stage.is-dragging img { transition: none; }
+.image-zoom-stage.is-dragging .image-zoom-target { transition: none; }
+/* A diagram keeps its natural aspect inside the viewer and paints on the
+   Mermaid canvas tone, so labels stay legible over the dark scrim. */
+.mermaid-zoom-canvas svg {
+  display: block;
+  width: min(94vw, 1800px);
+  height: auto;
+  max-height: 84vh;
+  border-radius: var(--radius-3);
+  background: var(--mermaid-canvas);
+  box-shadow: var(--shadow-modal);
+}
 .image-zoom-caption {
   position: absolute;
@@ -3820,14 +3911,14 @@ html[data-carrier='scroll'] #root {
 }
 @media (prefers-reduced-motion: reduce) {
-  .image-zoom-stage img { transition: none; }
+  .image-zoom-target { transition: none; }
 }
 @media (max-width: 760px) {
   .image-zoom-overlay { padding: 12px; }
   .image-zoom-stage img { max-height: 74vh; }
+  .mermaid-zoom-canvas svg { max-height: 74vh; }
   .image-zoom-caption { top: 10px; font-size: 12px; }
-  .image-zoom-hint { opacity: 0.9; }
 }
 .semantic-figure figcaption {

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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);