concept-atlas-dense-explain 1.2.0 → 3.0.0

package/packaged-skill/references/scroll-guide.mdx

@@ -102,8 +102,8 @@ npm run dev`}</CodeBlock>
   </ScrollSection>
 
   <ScrollSection title="补充配图与出处">
-    <ScrollProse>配图和引用让讲解从断言变成可追溯的论述<Cite id="tufte1983" />。相对路径的图片会在构建时内联，输出仍是可离线打开的单文件。</ScrollProse>
-    <Figure src="./assets/sample-diagram.svg" alt="概念缩放示意" label="图 1" caption="概念缩放：同一主题可以从 L0 全局逐层下钻到 L4 边界反例。" />
+    <ScrollProse>配图和引用让讲解从断言变成可追溯的论述<Cite id="tufte1983" />。图片默认保持外链（`--inline-assets` 可全部内联），给图一个 id 后正文可用 <FigureRef id="zoom-scale" /> 自动引用编号。</ScrollProse>
+    <Figure id="zoom-scale" src="./assets/sample-diagram.svg" alt="概念缩放示意" caption="概念缩放：同一主题可以从 L0 全局逐层下钻到 L4 边界反例。" />
     <ScrollGrid columns="2">
       <DecisionMatrix title="需要确认" headers={['变量','检查']} rows={[['新体验','是否改善核心任务'],['旧体验','能否满足需求'],['替换成本','迁移是否可接受']]} />
       <Compare items={[{label:'连续阅读',rows:['信息密度','适用场景'],values:['高','按章节论证']},{label:'概念图谱',rows:['信息密度','适用场景'],values:['中','概念下钻']}]} />
@@ -175,6 +175,20 @@ npm run dev`}</CodeBlock>
     </ScrollGrid>
   </ScrollSection>
 
+  <ScrollSection title="扩展组件：引用、清单、规格与结构">
+    <ScrollProse>以下组件补齐了引用、验证清单、规格表、显式层级与代码注解的表达缺口。</ScrollProse>
+    <Quote author="Donald Knuth" source="Literate Programming">程序首先是写给人读的，只是顺便让机器执行。</Quote>
+    <LastReviewed date="2026-09-29" by="架构组" note="随 ABI 变更重审" />
+    <Checklist title="上线前验证" items={[{text:'依赖已锁定',status:'pass'},{text:'压测通过',status:'fail',note:'P99 仍超标 12%'},{text:'回滚脚本演练',status:'todo'},{text:'灰度范围确认',status:'unknown'}]} />
+    <ScrollGrid columns="2">
+      <TreeView title="模块结构" items={[{label:'core',description:'内核',children:[{label:'scheduler'},{label:'memory',children:[{label:'allocator'}]}]}]} />
+      <PropertyList title="运行时参数" items={[{name:'heap',value:'4Gi',note:'按峰值负载预留'},{name:'gc',value:'zgc'},{name:'timeout',value:'30s'}]} />
+    </ScrollGrid>
+    <CodeTabs title="同一逻辑的两种写法" items={[{label:'JavaScript',language:'javascript',code:'const sum = ns.reduce((a, n) => a + n, 0);'},{label:'Rust',language:'rust',code:'let sum: i64 = ns.iter().sum();'}]} />
+    <AnnotatedCode language="bash" title="定位动态链接问题" code={`ldd app
+readelf -d app | head`} notes={[{line:1,text:'列出动态依赖，缺失项会显示 not found'},{line:2,text:'确认 .dynamic 段与 SONAME'}]} />
+  </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/references/atlas-guide.mdx

@@ -132,10 +132,11 @@
       <Chart title="留存趋势" type="line" labels={['第1周','第2周','第3周','第4周']} series={[{name:'留存率',values:[100,72,58,49]}]} />
     </ConceptNode>
 
-    <ConceptNode id="figure-demo" title="Figure：图片与题注一起出现" level="L2" parent="extension-family" summary="Figure 把图片、题注编号和说明绑定，构建时把本地图片内联进单文件。">
-      <Definition>相对路径的图片会在构建时转成 base64 内联，远程 URL 保持不变；label 提供“图 1”这样的编号。</Definition>
-      <Figure src="./assets/sample-diagram.svg" alt="概念缩放示意" label="图 1" caption="概念缩放：同一主题可以从 L0 全局逐层下钻到 L4 边界反例。" />
-      <Boundary>大图会显著增大单文件 HTML；截图类内容建议控制尺寸。</Boundary>
+    <ConceptNode id="figure-demo" title="Figure：图片与题注一起出现" level="L2" parent="extension-family" summary="Figure 把图片、题注编号和说明绑定；默认外链，按需内联。">
+      <Definition>相对路径的图片默认保持外链，构建时用 --inline-assets 可全部内联，单张图也可用 `inline={true}` 或 `inline={false}` 覆盖；远程 URL 保持不变。给图一个 id，正文就能用 FigureRef 自动引用“图 N”。</Definition>
+      <Figure id="zoom-scale" src="./assets/sample-diagram.svg" alt="概念缩放示意" caption="概念缩放：同一主题可以从 L0 全局逐层下钻到 L4 边界反例。" />
+      <Example title="自动图号">正文写“见 <FigureRef id="zoom-scale" />”，编号会随插图自动重排，不必手写“图 1”。</Example>
+      <Boundary>内联大图会显著增大 HTML；截图类内容建议控制尺寸，或对单张图设 `inline={false}`。</Boundary>
     </ConceptNode>
 
     <ConceptNode id="code-demo" title="CodeBlock：把命令、配置或伪代码放进正文" level="L2" parent="extension-family" summary="与绑定节点的 Implementation 不同，CodeBlock 可以出现在任何位置，并支持标题、题注、换行和行号。">

package/template/references/scroll-guide.mdx

@@ -102,8 +102,8 @@ npm run dev`}</CodeBlock>
   </ScrollSection>
 
   <ScrollSection title="补充配图与出处">
-    <ScrollProse>配图和引用让讲解从断言变成可追溯的论述<Cite id="tufte1983" />。相对路径的图片会在构建时内联，输出仍是可离线打开的单文件。</ScrollProse>
-    <Figure src="./assets/sample-diagram.svg" alt="概念缩放示意" label="图 1" caption="概念缩放：同一主题可以从 L0 全局逐层下钻到 L4 边界反例。" />
+    <ScrollProse>配图和引用让讲解从断言变成可追溯的论述<Cite id="tufte1983" />。图片默认保持外链（`--inline-assets` 可全部内联），给图一个 id 后正文可用 <FigureRef id="zoom-scale" /> 自动引用编号。</ScrollProse>
+    <Figure id="zoom-scale" src="./assets/sample-diagram.svg" alt="概念缩放示意" caption="概念缩放：同一主题可以从 L0 全局逐层下钻到 L4 边界反例。" />
     <ScrollGrid columns="2">
       <DecisionMatrix title="需要确认" headers={['变量','检查']} rows={[['新体验','是否改善核心任务'],['旧体验','能否满足需求'],['替换成本','迁移是否可接受']]} />
       <Compare items={[{label:'连续阅读',rows:['信息密度','适用场景'],values:['高','按章节论证']},{label:'概念图谱',rows:['信息密度','适用场景'],values:['中','概念下钻']}]} />
@@ -175,6 +175,20 @@ npm run dev`}</CodeBlock>
     </ScrollGrid>
   </ScrollSection>
 
+  <ScrollSection title="扩展组件：引用、清单、规格与结构">
+    <ScrollProse>以下组件补齐了引用、验证清单、规格表、显式层级与代码注解的表达缺口。</ScrollProse>
+    <Quote author="Donald Knuth" source="Literate Programming">程序首先是写给人读的，只是顺便让机器执行。</Quote>
+    <LastReviewed date="2026-09-29" by="架构组" note="随 ABI 变更重审" />
+    <Checklist title="上线前验证" items={[{text:'依赖已锁定',status:'pass'},{text:'压测通过',status:'fail',note:'P99 仍超标 12%'},{text:'回滚脚本演练',status:'todo'},{text:'灰度范围确认',status:'unknown'}]} />
+    <ScrollGrid columns="2">
+      <TreeView title="模块结构" items={[{label:'core',description:'内核',children:[{label:'scheduler'},{label:'memory',children:[{label:'allocator'}]}]}]} />
+      <PropertyList title="运行时参数" items={[{name:'heap',value:'4Gi',note:'按峰值负载预留'},{name:'gc',value:'zgc'},{name:'timeout',value:'30s'}]} />
+    </ScrollGrid>
+    <CodeTabs title="同一逻辑的两种写法" items={[{label:'JavaScript',language:'javascript',code:'const sum = ns.reduce((a, n) => a + n, 0);'},{label:'Rust',language:'rust',code:'let sum: i64 = ns.iter().sum();'}]} />
+    <AnnotatedCode language="bash" title="定位动态链接问题" code={`ldd app
+readelf -d app | head`} notes={[{line:1,text:'列出动态依赖，缺失项会显示 not found'},{line:2,text:'确认 .dynamic 段与 SONAME'}]} />
+  </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/src/app/App.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import { Network, Compass, Sun, Moon, Search, X, Link as LinkIcon } from 'lucide-react';
 import { buildGraphModel } from '../model/concept-schema.js';
 import { extractConceptData } from '../model/normalize-content.js';
@@ -30,7 +30,14 @@ export function App({ mdxContent, initialData }) {
   });
 
   // Appearance state (skin x mode x component style), shared with the scroll carrier via localStorage
-  const { skin, mode: theme, style, setSkin, setStyle, toggleMode } = useAppearance({ defaultMode: 'light' });
+  const {
+    skin,
+    mode: theme,
+    style,
+    setSkin,
+    setStyle,
+    toggleMode
+  } = useAppearance({ defaultMode: 'light' });
 
   const toggleTheme = toggleMode;
 
@@ -42,12 +49,11 @@ export function App({ mdxContent, initialData }) {
   })();
 
   const [currentNodeId, setCurrentNodeId] = useState(
-    () => initialHashNode || graph.meta.rootId || '',
+    () => initialHashNode || graph.meta.rootId || ''
   );
-  const [selectedLevel, setSelectedLevel] = useState(null);
   const [nav, setNav] = useState(() => ({
     entries: (initialHashNode ? [initialHashNode] : [graph.meta.rootId]).filter(Boolean),
-    index: 0,
+    index: 0
   }));
   // Popstate handlers must read the *current* history state, not the closure
   // captured when the effect was created.
@@ -58,35 +64,41 @@ export function App({ mdxContent, initialData }) {
 
   const searchResults = useMemo(
     () => searchNodes(Array.from(graph.nodes.values()), globalQuery),
-    [globalQuery, graph.nodes],
+    [globalQuery, graph.nodes]
   );
 
-  const navigateToNode = (nodeId, { replace = false } = {}) => {
-    if (!nodeId || !graph.nodes.has(nodeId)) return;
-    const next = pushNode(nav, nodeId);
-    setCurrentNodeId(nodeId);
-    setNav(next);
-    const nextHash = `#node=${encodeURIComponent(nodeId)}`;
-    // Each browser entry remembers which in-app history index it maps to, so
-    // popstate can restore the exact entry even when hashes repeat.
-    const historyState = { atlasIndex: next.index };
-    if (next === nav && !replace) return; // re-selecting the current node: don't grow browser history
-    if (replace) window.history.replaceState(historyState, '', nextHash);
-    else window.history.pushState(historyState, '', nextHash);
-  };
+  const navigateToNode = useCallback(
+    (nodeId, { replace = false } = {}) => {
+      if (!nodeId || !graph.nodes.has(nodeId)) return;
+      const next = pushNode(nav, nodeId);
+      setCurrentNodeId(nodeId);
+      setNav(next);
+      const nextHash = `#node=${encodeURIComponent(nodeId)}`;
+      // Each browser entry remembers which in-app history index it maps to, so
+      // popstate can restore the exact entry even when hashes repeat.
+      const historyState = { atlasIndex: next.index };
+      if (next === nav && !replace) return; // re-selecting the current node: don't grow browser history
+      if (replace) window.history.replaceState(historyState, '', nextHash);
+      else window.history.pushState(historyState, '', nextHash);
+    },
+    [nav, graph.nodes]
+  );
 
-  const moveHistory = (direction) => {
-    // Browser history mirrors the in-app entries one-for-one (every navigation
-    // pushState'd the matching { atlasIndex }), so step through the real
-    // browser history. pushState here used to fork the two stacks and grow
-    // browser history unboundedly; the popstate handler applies the result.
-    if (!stepHistory(nav, direction)) return;
-    window.history.go(direction);
-  };
+  const moveHistory = useCallback(
+    direction => {
+      // Browser history mirrors the in-app entries one-for-one (every navigation
+      // pushState'd the matching { atlasIndex }), so step through the real
+      // browser history. pushState here used to fork the two stacks and grow
+      // browser history unboundedly; the popstate handler applies the result.
+      if (!stepHistory(nav, direction)) return;
+      window.history.go(direction);
+    },
+    [nav]
+  );
 
   // Keyboard navigation shortcuts
   useEffect(() => {
-    const handleKeyDown = (e) => {
+    const handleKeyDown = e => {
       if (e.isComposing) return;
 
       // Alt + arrows move through browsing history. Handled before the modifier
@@ -104,7 +116,8 @@ export function App({ mdxContent, initialData }) {
 
       // Toggle views with 1 and 2 or 'g' and 'e' if not focused on input.
       const target = document.activeElement;
-      const typing = ['INPUT', 'TEXTAREA', 'SELECT'].includes(target?.tagName) || target?.isContentEditable;
+      const typing =
+        ['INPUT', 'TEXTAREA', 'SELECT'].includes(target?.tagName) || target?.isContentEditable;
       if (e.metaKey || e.ctrlKey || e.altKey || typing) return;
 
       const key = e.key.toLowerCase();
@@ -125,25 +138,25 @@ export function App({ mdxContent, initialData }) {
 
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [graph, currentNodeId, nav]);
+  }, [graph, currentNodeId, navigateToNode, moveHistory, toggleTheme]);
 
   useEffect(() => {
-    const handlePopState = (event) => {
+    const handlePopState = event => {
       const current = navRef.current;
       const nodeId = readNodeFromHash();
       if (nodeId && !graph.nodes.has(nodeId)) return; // stale/foreign hash: ignore
-      const tagged = event.state && Number.isInteger(event.state.atlasIndex)
-        ? event.state.atlasIndex
-        : null;
+      const tagged =
+        event.state && Number.isInteger(event.state.atlasIndex) ? event.state.atlasIndex : null;
       const taggedValid = tagged !== null && tagged >= 0 && tagged < current.entries.length;
       let next = null;
       if (nodeId) {
         // Prefer the index stamped on the entry: entries may contain the same
         // node twice, and lastIndexOf alone would resolve backwards steps to a
         // later duplicate.
-        next = taggedValid && current.entries[tagged] === nodeId
-          ? { entries: current.entries, index: tagged }
-          : syncFromLocation(current, nodeId);
+        next =
+          taggedValid && current.entries[tagged] === nodeId
+            ? { entries: current.entries, index: tagged }
+            : syncFromLocation(current, nodeId);
       } else if (taggedValid) {
         // Back to the hash-less entry the page loaded on: restore it by index.
         next = { entries: current.entries, index: tagged };
@@ -191,16 +204,38 @@ export function App({ mdxContent, initialData }) {
             <input
               value={globalQuery}
               onChange={event => setGlobalQuery(event.target.value)}
-              onKeyDown={event => { if (event.key === 'Escape') setGlobalQuery(''); }}
+              onKeyDown={event => {
+                if (event.key === 'Escape') setGlobalQuery('');
+              }}
               placeholder="搜索所有节点…"
               aria-label="搜索所有节点"
             />
-            {globalQuery && <button type="button" onClick={() => setGlobalQuery('')} aria-label="清除搜索"><X size={13} /></button>}
+            {globalQuery && (
+              <button type="button" onClick={() => setGlobalQuery('')} aria-label="清除搜索">
+                <X size={13} />
+              </button>
+            )}
             {searchResults.length > 0 && (
               <div className="global-search-results" role="listbox">
                 {searchResults.map(node => (
-                  <button type="button" key={node.id} onClick={() => { navigateToNode(node.id); setGlobalQuery(''); }} role="option">
-                    <span>{node.title}</span><small>{node.level}{node.kind && NODE_KINDS[node.kind] ? ` · ${NODE_KINDS[node.kind].label}` : ''} · {node.summary || node.id}</small>
+                  <button
+                    type="button"
+                    key={node.id}
+                    onClick={() => {
+                      navigateToNode(node.id);
+                      setGlobalQuery('');
+                    }}
+                    role="option"
+                    aria-selected={false}
+                  >
+                    <span>{node.title}</span>
+                    <small>
+                      {node.level}
+                      {node.kind && NODE_KINDS[node.kind]
+                        ? ` · ${NODE_KINDS[node.kind].label}`
+                        : ''}{' '}
+                      · {node.summary || node.id}
+                    </small>
                   </button>
                 ))}
               </div>
@@ -239,8 +274,6 @@ export function App({ mdxContent, initialData }) {
             currentNodeId={currentNodeId}
             onSelectNode={navigateToNode}
             onSwitchView={setCurrentView}
-            selectedLevel={selectedLevel}
-            onSelectLevel={setSelectedLevel}
           />
         ) : (
           <RelationGraph

package/template/src/app/search.js

@@ -10,7 +10,8 @@ const MAX_LENGTH = 4000;
  * a pathological tree cannot stall the search box.
  */
 export function collectText(value, depth = 0) {
-  if (depth > MAX_DEPTH || value === null || value === undefined || typeof value === 'boolean') return '';
+  if (depth > MAX_DEPTH || value === null || value === undefined || typeof value === 'boolean')
+    return '';
   if (typeof value === 'string' || typeof value === 'number') return String(value);
   if (Array.isArray(value)) {
     return value.map(item => collectText(item, depth + 1)).join(' ');
@@ -28,7 +29,9 @@ export function collectText(value, depth = 0) {
     return parts.join(' ');
   }
   if (typeof value === 'object') {
-    return Object.values(value).map(item => collectText(item, depth + 1)).join(' ');
+    return Object.values(value)
+      .map(item => collectText(item, depth + 1))
+      .join(' ');
   }
   return '';
 }
@@ -66,14 +69,20 @@ export function nodeSearchText(node) {
     node.invariants,
     node.failureModes,
     node.tradeoffs,
-    node.customSections,
+    node.customSections
   ];
-  return parts.map(part => collectText(part)).join(' ').slice(0, MAX_LENGTH).toLowerCase();
+  return parts
+    .map(part => collectText(part))
+    .join(' ')
+    .slice(0, MAX_LENGTH)
+    .toLowerCase();
 }
 
 /** Rank-free substring search returning at most `limit` nodes. */
 export function searchNodes(nodes, query, limit = 8) {
-  const needle = String(query || '').trim().toLowerCase();
+  const needle = String(query || '')
+    .trim()
+    .toLowerCase();
   if (!needle) return [];
   const results = [];
   for (const node of nodes) {

package/template/src/app/use-appearance.js

@@ -13,15 +13,19 @@ function normalizeMode(value, fallback = 'dark') {
  * Compile-time defaults injected via Vite `define` (CLI --skin/--default-mode
  * or CONCEPT_ATLAS_* env vars). Absent defines resolve to the carrier fallbacks.
  */
-const BUILD_DEFAULT_SKIN = typeof __ATLAS_DEFAULT_SKIN__ === 'string'
-  ? (normalizeSkin(__ATLAS_DEFAULT_SKIN__) || DEFAULT_SKIN)
-  : DEFAULT_SKIN;
-const BUILD_DEFAULT_MODE = typeof __ATLAS_DEFAULT_MODE__ === 'string' && (__ATLAS_DEFAULT_MODE__ === 'dark' || __ATLAS_DEFAULT_MODE__ === 'light')
-  ? __ATLAS_DEFAULT_MODE__
-  : null;
-const BUILD_DEFAULT_STYLE = typeof __ATLAS_DEFAULT_STYLE__ === 'string'
-  ? (normalizeStyle(__ATLAS_DEFAULT_STYLE__) || DEFAULT_STYLE)
-  : DEFAULT_STYLE;
+const BUILD_DEFAULT_SKIN =
+  typeof __ATLAS_DEFAULT_SKIN__ === 'string'
+    ? normalizeSkin(__ATLAS_DEFAULT_SKIN__) || DEFAULT_SKIN
+    : DEFAULT_SKIN;
+const BUILD_DEFAULT_MODE =
+  typeof __ATLAS_DEFAULT_MODE__ === 'string' &&
+  (__ATLAS_DEFAULT_MODE__ === 'dark' || __ATLAS_DEFAULT_MODE__ === 'light')
+    ? __ATLAS_DEFAULT_MODE__
+    : null;
+const BUILD_DEFAULT_STYLE =
+  typeof __ATLAS_DEFAULT_STYLE__ === 'string'
+    ? normalizeStyle(__ATLAS_DEFAULT_STYLE__) || DEFAULT_STYLE
+    : DEFAULT_STYLE;
 
 function readStoredAppearance(fallbackMode) {
   const fallback = normalizeMode(fallbackMode, 'dark');
@@ -34,7 +38,7 @@ function readStoredAppearance(fallbackMode) {
         // Corrupt/missing mode falls back to the carrier default instead of
         // silently coercing to dark.
         mode: normalizeMode(parsed?.mode, fallback),
-        style: normalizeStyle(parsed?.style) || BUILD_DEFAULT_STYLE,
+        style: normalizeStyle(parsed?.style) || BUILD_DEFAULT_STYLE
       };
     }
   } catch {
@@ -67,7 +71,9 @@ export { readStoredAppearance, normalizeMode };
  * localStorage key so both pages stay in sync.
  */
 export function useAppearance({ defaultMode = 'dark' } = {}) {
-  const [appearance, setAppearance] = useState(() => readStoredAppearance(BUILD_DEFAULT_MODE || defaultMode));
+  const [appearance, setAppearance] = useState(() =>
+    readStoredAppearance(BUILD_DEFAULT_MODE || defaultMode)
+  );
 
   useEffect(() => {
     document.documentElement.setAttribute('data-skin', appearance.skin);
@@ -80,18 +86,26 @@ export function useAppearance({ defaultMode = 'dark' } = {}) {
     }
   }, [appearance]);
 
-  const setSkin = useCallback((skin) => {
+  const setSkin = useCallback(skin => {
     setAppearance(prev => ({ ...prev, skin: normalizeSkin(skin) || prev.skin }));
   }, []);
-  const setMode = useCallback((mode) => {
+  const setMode = useCallback(mode => {
     setAppearance(prev => ({ ...prev, mode: normalizeMode(mode, prev.mode) }));
   }, []);
   const toggleMode = useCallback(() => {
     setAppearance(prev => ({ ...prev, mode: prev.mode === 'dark' ? 'light' : 'dark' }));
   }, []);
-  const setStyle = useCallback((style) => {
+  const setStyle = useCallback(style => {
     setAppearance(prev => ({ ...prev, style: normalizeStyle(style) || prev.style }));
   }, []);
 
-  return { skin: appearance.skin, mode: appearance.mode, style: appearance.style, setSkin, setMode, toggleMode, setStyle };
+  return {
+    skin: appearance.skin,
+    mode: appearance.mode,
+    style: appearance.style,
+    setSkin,
+    setMode,
+    toggleMode,
+    setStyle
+  };
 }

package/template/src/components/FigureScope.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+/**
+ * Numbering scope for figures. `App`'s atlas view provides the current node id
+ * so each node numbers its own figures; the scroll carrier keeps the default
+ * `document` scope so the whole article shares one sequence. Kept out of the
+ * component barrel on purpose: it is renderer plumbing, not an MDX component.
+ */
+export const FigureScope = React.createContext('document');
+
+export function FigureScopeProvider({ scope, children }) {
+  return <FigureScope.Provider value={scope || 'document'}>{children}</FigureScope.Provider>;
+}
+
+export function useFigureScope() {
+  return React.useContext(FigureScope);
+}