concept-atlas-dense-explain 0.2.2 → 0.3.0

package/{skill/assets/template → template}/src/components/MDXComponents.jsx

@@ -228,42 +228,43 @@ export function Timeline({ events = [], children }) {
   }
   return <div className="semantic-timeline">{children}</div>;
 }
-Timeline.displayName = 'Timeline';
-
-export function FrameworkModel({ title = '结构化模型', type = 'elements', elements = [], question, children }) {
-  const labels = { elements: '要素', stages: '阶段', layers: '层级', cycle: '循环' };
-  return <section className={`semantic-framework-model model-${type}`}><div className="framework-model-head"><span className="semantic-tag">▦ {title}</span><span className="framework-model-type">{labels[type] || type}</span></div>{question && <div className="framework-model-question">{question}</div>}{elements.length > 0 ? <div className="framework-model-elements">{elements.map((element, index) => <div className="framework-model-element" key={index}><span className="framework-model-index">{String(index + 1).padStart(2, '0')}</span><strong>{element.title || element.label || element.name}</strong>{element.description && <span>{element.description}</span>}</div>)}</div> : children}</section>;
-}
-FrameworkModel.displayName = 'FrameworkModel';
-
-export function MatrixModel({ title = '二维矩阵', xLabel = '横轴', yLabel = '纵轴', cells = [], children }) {
-  return <section className="semantic-model-matrix"><div className="framework-model-head"><span className="semantic-tag">▦ {title}</span></div>{cells.length > 0 ? <div className="model-matrix-grid"><div className="model-matrix-axis model-matrix-y">{yLabel}</div><div className="model-matrix-axis model-matrix-x">{xLabel}</div>{cells.map((cell, index) => <div className={`model-matrix-cell tone-${cell.tone || 'info'}`} key={index}><strong>{cell.title || cell.label}</strong>{cell.description && <span>{cell.description}</span>}</div>)}</div> : children}</section>;
-}
-MatrixModel.displayName = 'MatrixModel';
-
-export function FormulaModel({ title = '公式模型', formula, variables = [], children }) {
-  return <section className="semantic-model-formula"><div className="framework-model-head"><span className="semantic-tag">∑ {title}</span></div>{formula && <div className="model-formula-expression"><code>{formula}</code></div>}{variables.length > 0 ? <dl className="model-formula-variables">{variables.map((variable, index) => <React.Fragment key={index}><dt>{variable.symbol || variable.name}</dt><dd>{variable.description || variable.value}</dd></React.Fragment>)}</dl> : children}</section>;
-}
-FormulaModel.displayName = 'FormulaModel';
-
-export function PyramidModel({ title = '金字塔模型', levels = [], children }) {
-  return <section className="semantic-model-pyramid"><div className="framework-model-head"><span className="semantic-tag">△ {title}</span></div>{levels.length > 0 ? <div className="model-pyramid-levels">{levels.map((level, index) => <div className="model-pyramid-level" key={index} style={{ '--pyramid-width': `${Math.max(38, 100 - index * 12)}%` }}><strong>{level.title || level.label}</strong>{level.description && <span>{level.description}</span>}</div>)}</div> : children}</section>;
-}
-PyramidModel.displayName = 'PyramidModel';
-
-export function FunnelModel({ title = '漏斗模型', steps = [], children }) {
-  return <section className="semantic-model-funnel"><div className="framework-model-head"><span className="semantic-tag">▽ {title}</span></div>{steps.length > 0 ? <div className="model-funnel-steps">{steps.map((step, index) => <div className="model-funnel-step" key={index} style={{ '--funnel-width': `${Math.max(40, 100 - index * 12)}%` }}><strong>{step.title || step.label}</strong>{step.description && <span>{step.description}</span>}</div>)}</div> : children}</section>;
-}
-FunnelModel.displayName = 'FunnelModel';
+Timeline.displayName = 'Timeline';
 
-export function Callout({ type = 'info', title, children }) {
-  return (
-    <div className={`semantic-callout callout-${type}`}>
-      {title && <div className="callout-title">{title}</div>}
-      <div className="callout-content">{children}</div>
-    </div>
-  );
+export function FrameworkModel({ title = '结构化模型', type = 'elements', elements = [], question, children }) {
+  const labels = { elements: '要素', stages: '阶段', layers: '层级', cycle: '循环' };
+  return <section className={`semantic-framework-model model-${type}`}><div className="framework-model-head"><span className="semantic-tag">▦ {title}</span><span className="framework-model-type">{labels[type] || type}</span></div>{question && <div className="framework-model-question">{question}</div>}{elements.length > 0 ? <div className="framework-model-elements">{elements.map((element, index) => <div className="framework-model-element" key={index}><span className="framework-model-index">{String(index + 1).padStart(2, '0')}</span><strong>{element.title || element.label || element.name}</strong>{element.description && <span>{element.description}</span>}</div>)}</div> : children}</section>;
+}
+FrameworkModel.displayName = 'FrameworkModel';
+
+export function MatrixModel({ title = '二维矩阵', xLabel = '横轴', yLabel = '纵轴', cells = [], children }) {
+  return <section className="semantic-model-matrix"><div className="framework-model-head"><span className="semantic-tag">▦ {title}</span></div>{cells.length > 0 ? <div className="model-matrix-grid"><div className="model-matrix-axis model-matrix-y">{yLabel}</div><div className="model-matrix-axis model-matrix-x">{xLabel}</div>{cells.map((cell, index) => <div className={`model-matrix-cell tone-${cell.tone || 'info'}`} key={index}><strong>{cell.title || cell.label}</strong>{cell.description && <span>{cell.description}</span>}</div>)}</div> : children}</section>;
+}
+MatrixModel.displayName = 'MatrixModel';
+
+export function FormulaModel({ title = '公式模型', formula, variables = [], children }) {
+  return <section className="semantic-model-formula"><div className="framework-model-head"><span className="semantic-tag">∑ {title}</span></div>{formula && <div className="model-formula-expression"><code>{formula}</code></div>}{variables.length > 0 ? <dl className="model-formula-variables">{variables.map((variable, index) => <React.Fragment key={index}><dt>{variable.symbol || variable.name}</dt><dd>{variable.description || variable.value}</dd></React.Fragment>)}</dl> : children}</section>;
+}
+FormulaModel.displayName = 'FormulaModel';
+
+export function PyramidModel({ title = '金字塔模型', levels = [], children }) {
+  return <section className="semantic-model-pyramid"><div className="framework-model-head"><span className="semantic-tag">△ {title}</span></div>{levels.length > 0 ? <div className="model-pyramid-levels">{levels.map((level, index) => <div className="model-pyramid-level" key={index} style={{ '--pyramid-width': `${Math.max(38, 100 - index * 12)}%` }}><strong>{level.title || level.label}</strong>{level.description && <span>{level.description}</span>}</div>)}</div> : children}</section>;
+}
+PyramidModel.displayName = 'PyramidModel';
+
+export function FunnelModel({ title = '漏斗模型', steps = [], children }) {
+  return <section className="semantic-model-funnel"><div className="framework-model-head"><span className="semantic-tag">▽ {title}</span></div>{steps.length > 0 ? <div className="model-funnel-steps">{steps.map((step, index) => <div className="model-funnel-step" key={index} style={{ '--funnel-width': `${Math.max(40, 100 - index * 12)}%` }}><strong>{step.title || step.label}</strong>{step.description && <span>{step.description}</span>}</div>)}</div> : children}</section>;
 }
+FunnelModel.displayName = 'FunnelModel';
+
+export function Callout({ type = 'info', title, children }) {
+  const tone = ['info', 'success', 'warn', 'danger'].includes(type) ? type : 'info';
+  return (
+    <aside className={`semantic-callout callout-${tone}${title ? ' has-callout-title' : ''}`} data-tone={tone}>
+      {title && <div className="callout-title">{title}</div>}
+      <div className="callout-content">{children}</div>
+    </aside>
+  );
+}
 Callout.displayName = 'Callout';
 
 export function Details({ summary = '详细展开', children }) {
@@ -351,13 +352,49 @@ export function Tradeoff({ title = '工程权衡', options = [], children }) {
 }
 Tradeoff.displayName = 'Tradeoff';
 
-export function Columns({ children }) {
-  return <div className="semantic-columns">{children}</div>;
-}
-Columns.displayName = 'Columns';
+export function Columns({ children }) {
+  return <div className="semantic-columns">{children}</div>;
+}
+Columns.displayName = 'Columns';
+
+export function ScrollDocument({ children }) {
+  return <article className="continuous-document">{children}</article>;
+}
+ScrollDocument.displayName = 'ScrollDocument';
+
+export function ScrollHeader({ label = '连续阅读', title, children }) {
+  return <header className="continuous-header"><p>{label}</p>{title && <h1>{title}</h1>}<div>{children}</div></header>;
+}
+ScrollHeader.displayName = 'ScrollHeader';
+
+export function ScrollSection({ title, wide = false, children }) {
+  return (
+    <section className={`continuous-section${wide ? ' continuous-section-wide' : ''}`}>
+      {title && <h2>{title}</h2>}
+      {children}
+    </section>
+  );
+}
+ScrollSection.displayName = 'ScrollSection';
+
+export function ScrollProse({ children }) {
+  return <div className="continuous-prose">{children}</div>;
+}
+ScrollProse.displayName = 'ScrollProse';
+
+export function ScrollPair({ children }) {
+  return <section className="continuous-model-pair">{children}</section>;
+}
+ScrollPair.displayName = 'ScrollPair';
+
+export function ScrollGrid({ columns = 3, children }) {
+  const count = [2, 3, 4].includes(Number(columns)) ? Number(columns) : 3;
+  return <div className={`continuous-grid continuous-grid-${count}`}>{children}</div>;
+}
+ScrollGrid.displayName = 'ScrollGrid';
 
 /** Optional layout primitives. They express intent while the template owns the CSS. */
-export function Stack({ gap = 'md', children }) {
+export function Stack({ gap = 'md', children }) {
   return <div className={`semantic-stack gap-${gap}`}>{children}</div>;
 }
 Stack.displayName = 'Stack';
@@ -462,14 +499,15 @@ export function RelationPath({ title = '关系链', steps = [], children }) {
 }
 RelationPath.displayName = 'RelationPath';
 
-export function Insight({ title = '关键判断', tone = 'info', children, width = 'auto', height = 'auto', x = 0, y = 0, position = 'flow' }) {
-  return (
-    <aside className={`semantic-insight insight-${tone} ${widgetClass(position)}`} style={widgetStyle({ width, height, x, y, position })}>
-      <div className="insight-kicker">{tone === 'warn' ? '⚠' : tone === 'success' ? '✓' : '◆'} {title}</div>
-      <div className="insight-body">{children}</div>
-    </aside>
-  );
-}
+export function Insight({ title = '关键判断', tone = 'info', children, width = 'auto', height = 'auto', x = 0, y = 0, position = 'flow' }) {
+  const safeTone = ['info', 'success', 'warn', 'danger'].includes(tone) ? tone : 'info';
+  return (
+    <aside className={`semantic-insight insight-${safeTone} ${widgetClass(position)}`} data-tone={safeTone} style={widgetStyle({ width, height, x, y, position })}>
+      <div className="insight-kicker">{title}</div>
+      <div className="insight-body">{children}</div>
+    </aside>
+  );
+}
 Insight.displayName = 'Insight';
 
 export function NoteGrid({ notes = [], children, width = 'auto', height = 'auto', x = 0, y = 0, position = 'flow' }) {

package/{skill/assets/template → template}/src/main.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from './app/App.jsx';
 import * as Components from './components/index.js';
-import CompileRuntimeDoc from '../content/compile-runtime.mdx';
+import UserDocument from '@concept-atlas/content';
 
 // Mount MDX application to DOM
 const rootElement = document.getElementById('root') || document.getElementById('app');
@@ -10,7 +10,7 @@ if (rootElement) {
   const root = ReactDOM.createRoot(rootElement);
   root.render(
     <React.StrictMode>
-      <App mdxContent={<CompileRuntimeDoc components={Components} />} />
+      <App mdxContent={<UserDocument components={Components} />} />
     </React.StrictMode>
   );
 }

package/{skill/assets/template → template}/src/model/normalize-content.js

@@ -116,12 +116,18 @@ const SEMANTIC_COMPONENTS = new Set([
   'Evidence',
   'Invariant',
   'FailureMode',
-  'Tradeoff',
-  'FrameworkModel',
-  'MatrixModel',
-  'FormulaModel',
+  'Tradeoff',
+  'FrameworkModel',
+  'MatrixModel',
+  'FormulaModel',
   'PyramidModel',
   'FunnelModel',
+  'ScrollDocument',
+  'ScrollHeader',
+  'ScrollSection',
+  'ScrollProse',
+  'ScrollPair',
+  'ScrollGrid',
 ]);
 
 function isSemanticComponent(name) {

package/template/src/scroll-main.jsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import { Moon, Sun } from 'lucide-react';
+import * as Components from './components/index.js';
+import UserDocument from '@concept-atlas/content';
+import './styles/concept-explain.css';
+
+const rootElement = document.getElementById('root');
+if (rootElement) {
+  ReactDOM.createRoot(rootElement).render(
+    <React.StrictMode>
+      <ScrollApp />
+    </React.StrictMode>
+  );
+}
+
+function ScrollApp() {
+  const [theme, setTheme] = useState(() => localStorage.getItem('concept_atlas_scroll_theme') || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'));
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('concept_atlas_scroll_theme', theme);
+  }, [theme]);
+
+  return (
+    <main className="continuous-page">
+      <div className="continuous-toolbar">
+        <button type="button" onClick={() => setTheme(value => value === 'dark' ? 'light' : 'dark')} aria-label="切换主题" title="切换主题">
+          {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
+        </button>
+      </div>
+      <UserDocument components={Components} />
+    </main>
+  );
+}