concept-atlas-dense-explain 0.9.0 → 0.10.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.
- package/package.json +1 -1
- package/template/index.html +1 -1
- package/template/src/components/MDXComponents.jsx +7 -2
- package/template/src/styles/core.css +42 -15
- 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
package/template/index.html
CHANGED
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
<!-- Google Fonts for Academic / Editorial Knowledge style -->
|
|
34
34
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
35
35
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
36
|
-
<link href="https://fonts.googleapis.com/css2?family=
|
|
36
|
+
<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">
|
|
37
37
|
</head>
|
|
38
38
|
<body>
|
|
39
39
|
<div id="root"></div>
|
|
@@ -173,8 +173,13 @@ Mechanism.displayName = 'Mechanism';
|
|
|
173
173
|
export function Implementation({ language = 'text', title = '实现代码', children }) {
|
|
174
174
|
return (
|
|
175
175
|
<div className="semantic-implementation" data-language={language}>
|
|
176
|
-
{title &&
|
|
177
|
-
|
|
176
|
+
{title && (
|
|
177
|
+
<div className="semantic-code-head impl-header">
|
|
178
|
+
<span className="semantic-code-title">{title}</span>
|
|
179
|
+
{language && <span className="lang-badge">{language}</span>}
|
|
180
|
+
</div>
|
|
181
|
+
)}
|
|
182
|
+
<pre className="code-block"><code>{typeof children === 'string' ? children.trim() : children}</code></pre>
|
|
178
183
|
</div>
|
|
179
184
|
);
|
|
180
185
|
}
|
|
@@ -1026,26 +1026,37 @@ button.flow-box {
|
|
|
1026
1026
|
border-radius: 10px;
|
|
1027
1027
|
overflow-x: auto;
|
|
1028
1028
|
font-family: var(--font-data);
|
|
1029
|
-
|
|
1030
|
-
|
|
1029
|
+
/* A comfortable, taller setting for a mono face; ligatures stay off so
|
|
1030
|
+
operators render exactly as they were typed. */
|
|
1031
|
+
font-size: 14px;
|
|
1032
|
+
line-height: 1.7;
|
|
1033
|
+
font-variant-ligatures: none;
|
|
1034
|
+
font-feature-settings: 'liga' 0, 'calt' 0;
|
|
1031
1035
|
color: var(--code-text);
|
|
1032
1036
|
border: 1px solid var(--code-border);
|
|
1033
1037
|
box-shadow: var(--shadow-inset);
|
|
1034
1038
|
}
|
|
1035
1039
|
|
|
1036
|
-
/*
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1040
|
+
/* -- Code family: `.code-block` is the one shared dark inset used by the
|
|
1041
|
+
explorer, `Implementation` and `CodeBlock`. Both components wrap it with
|
|
1042
|
+
an optional head, caption and numbered lines, and they share the head +
|
|
1043
|
+
surface classes so every style pack only has to re-voice one grammar. -- */
|
|
1044
|
+
.semantic-code,
|
|
1045
|
+
.semantic-implementation {
|
|
1041
1046
|
display: flex;
|
|
1042
1047
|
flex-direction: column;
|
|
1043
1048
|
gap: 8px;
|
|
1049
|
+
margin: 0;
|
|
1050
|
+
}
|
|
1051
|
+
|
|
1052
|
+
.semantic-code > pre,
|
|
1053
|
+
.semantic-implementation > pre {
|
|
1054
|
+
margin: 0;
|
|
1044
1055
|
}
|
|
1045
1056
|
|
|
1046
1057
|
.semantic-code-head {
|
|
1047
1058
|
display: flex;
|
|
1048
|
-
align-items:
|
|
1059
|
+
align-items: baseline;
|
|
1049
1060
|
justify-content: space-between;
|
|
1050
1061
|
gap: 10px;
|
|
1051
1062
|
}
|
|
@@ -1057,6 +1068,17 @@ button.flow-box {
|
|
|
1057
1068
|
color: var(--text-secondary);
|
|
1058
1069
|
}
|
|
1059
1070
|
|
|
1071
|
+
/* The language tag rides every code head; a pack may dress it as a badge. */
|
|
1072
|
+
.lang-badge {
|
|
1073
|
+
font-family: var(--font-data);
|
|
1074
|
+
font-size: 10px;
|
|
1075
|
+
font-weight: 700;
|
|
1076
|
+
letter-spacing: 0.08em;
|
|
1077
|
+
text-transform: uppercase;
|
|
1078
|
+
color: var(--text-muted);
|
|
1079
|
+
white-space: nowrap;
|
|
1080
|
+
}
|
|
1081
|
+
|
|
1060
1082
|
.semantic-code-caption {
|
|
1061
1083
|
font-size: 12px;
|
|
1062
1084
|
color: var(--text-muted);
|
|
@@ -1078,18 +1100,22 @@ button.flow-box {
|
|
|
1078
1100
|
.code-block-numbered .code-line {
|
|
1079
1101
|
position: relative;
|
|
1080
1102
|
display: block;
|
|
1081
|
-
min-height: 1.
|
|
1082
|
-
padding-left:
|
|
1103
|
+
min-height: 1.7em;
|
|
1104
|
+
padding-left: 3.6em;
|
|
1083
1105
|
counter-increment: code-line;
|
|
1084
1106
|
}
|
|
1085
1107
|
|
|
1086
1108
|
.code-block-numbered .code-line::before {
|
|
1087
1109
|
content: counter(code-line);
|
|
1088
1110
|
position: absolute;
|
|
1111
|
+
top: 0;
|
|
1112
|
+
bottom: 0;
|
|
1089
1113
|
left: 0;
|
|
1090
|
-
width:
|
|
1114
|
+
width: 2.5em;
|
|
1115
|
+
padding-right: 0.85em;
|
|
1091
1116
|
text-align: right;
|
|
1092
|
-
color:
|
|
1117
|
+
color: color-mix(in srgb, var(--code-text) 50%, transparent);
|
|
1118
|
+
border-right: 1px solid color-mix(in srgb, var(--code-text) 18%, transparent);
|
|
1093
1119
|
user-select: none;
|
|
1094
1120
|
}
|
|
1095
1121
|
|
|
@@ -2093,10 +2119,10 @@ button.flow-box {
|
|
|
2093
2119
|
.relation-path-node.tone-warning { border-top-color: var(--accent-amber); }
|
|
2094
2120
|
.relation-path-node.tone-danger { border-top-color: var(--accent-rose); }
|
|
2095
2121
|
.relation-path-kicker, .relation-path-node strong, .relation-path-node small { display: block; }
|
|
2096
|
-
.relation-path-kicker { color: var(--text-dim); font: 700 10px
|
|
2122
|
+
.relation-path-kicker { color: var(--text-dim); font: 700 10px var(--font-data); margin-bottom: 4px; }
|
|
2097
2123
|
.relation-path-node strong { color: var(--text-primary); font-size: 13px; }
|
|
2098
2124
|
.relation-path-node small { margin-top: 4px; color: var(--text-muted); font-size: 11px; }
|
|
2099
|
-
.relation-path-edge { flex: 0 0 72px; display: grid; place-items: center; position: relative; color: var(--text-accent); font: 700 10px
|
|
2125
|
+
.relation-path-edge { flex: 0 0 72px; display: grid; place-items: center; position: relative; color: var(--text-accent); font: 700 10px var(--font-data); }
|
|
2100
2126
|
.relation-path-edge::before { content: ''; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 1px dashed var(--border-strong); }
|
|
2101
2127
|
.relation-path-edge span { z-index: 1; padding: 2px 4px; background: var(--bg-surface); }
|
|
2102
2128
|
|
|
@@ -3439,7 +3465,8 @@ html[data-carrier='scroll'] #root {
|
|
|
3439
3465
|
.continuous-document .model-matrix-cell span,
|
|
3440
3466
|
.continuous-document .model-pyramid-level span,
|
|
3441
3467
|
.continuous-document .model-funnel-step span,
|
|
3442
|
-
.continuous-document .tradeoff-option span
|
|
3468
|
+
.continuous-document .tradeoff-option span,
|
|
3469
|
+
.continuous-document .code-block {
|
|
3443
3470
|
font-size: calc(14px * var(--reading-ui-scale));
|
|
3444
3471
|
}
|
|
3445
3472
|
|
|
@@ -515,3 +515,60 @@
|
|
|
515
515
|
[data-style='elastic'] .semantic-compare-table tbody tr {
|
|
516
516
|
transition: background-color var(--elastic-motion);
|
|
517
517
|
}
|
|
518
|
+
|
|
519
|
+
/* -- Code as a panel: a 6px bordered surface under a subdued header strip,
|
|
520
|
+
the well set flush inside and inset like a terminal. The whole panel
|
|
521
|
+
answers on the pack's 250ms curve with the same 1px lift as every other
|
|
522
|
+
elastic surface, and the caption closes as a dim mono footer. -- */
|
|
523
|
+
[data-style='elastic'] .semantic-code,
|
|
524
|
+
[data-style='elastic'] .semantic-implementation {
|
|
525
|
+
gap: 0;
|
|
526
|
+
border: 1px solid var(--border-medium);
|
|
527
|
+
border-radius: var(--radius-2);
|
|
528
|
+
background: var(--bg-surface);
|
|
529
|
+
box-shadow: var(--shadow-card);
|
|
530
|
+
overflow: hidden;
|
|
531
|
+
transition: border-color var(--elastic-motion), transform var(--elastic-motion);
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
[data-style='elastic'] .semantic-code:hover,
|
|
535
|
+
[data-style='elastic'] .semantic-implementation:hover {
|
|
536
|
+
border-color: var(--border-strong);
|
|
537
|
+
transform: translateY(-1px);
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
[data-style='elastic'] .semantic-code-head {
|
|
541
|
+
padding: 9px 12px;
|
|
542
|
+
background: var(--bg-subtle);
|
|
543
|
+
border-bottom: 1px solid var(--border-subtle);
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
[data-style='elastic'] .semantic-code-title {
|
|
547
|
+
font-family: var(--font-sans);
|
|
548
|
+
font-size: 13px;
|
|
549
|
+
font-weight: 600;
|
|
550
|
+
letter-spacing: -0.01em;
|
|
551
|
+
color: var(--text-primary);
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
[data-style='elastic'] .lang-badge {
|
|
555
|
+
padding: 2px 6px;
|
|
556
|
+
border: 1px solid var(--border-medium);
|
|
557
|
+
border-radius: var(--radius-1);
|
|
558
|
+
background: var(--bg-surface);
|
|
559
|
+
color: var(--text-secondary);
|
|
560
|
+
letter-spacing: 0.03em;
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
[data-style='elastic'] .semantic-code > .code-block,
|
|
564
|
+
[data-style='elastic'] .semantic-implementation > .code-block {
|
|
565
|
+
border: 0;
|
|
566
|
+
border-radius: 0;
|
|
567
|
+
box-shadow: var(--shadow-inset);
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
[data-style='elastic'] .semantic-code-caption {
|
|
571
|
+
padding: 8px 12px 10px;
|
|
572
|
+
border-top: 1px solid var(--border-subtle);
|
|
573
|
+
font-family: var(--font-sans);
|
|
574
|
+
}
|
|
@@ -424,3 +424,41 @@
|
|
|
424
424
|
border-color: var(--primary);
|
|
425
425
|
color: var(--primary);
|
|
426
426
|
}
|
|
427
|
+
|
|
428
|
+
/* -- Listings: the code well keeps its ink, but the frame drops to a
|
|
429
|
+
near-square ruled inset under a heavier top rule. The head reads as a
|
|
430
|
+
printed listing caption in the heading face, the language tag as a quiet
|
|
431
|
+
mono folio, and the caption closes as an italic printer's note. Paper
|
|
432
|
+
answers the pointer through rule weight only — no nudging. -- */
|
|
433
|
+
[data-style='manuscript'] .code-block {
|
|
434
|
+
padding: 16px 18px;
|
|
435
|
+
border-radius: 2px;
|
|
436
|
+
border-top: 2px solid color-mix(in srgb, var(--code-text) 42%, transparent);
|
|
437
|
+
box-shadow: none;
|
|
438
|
+
transition: border-top-color var(--motion-base) var(--ease-standard);
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
[data-style='manuscript'] .code-block:hover {
|
|
442
|
+
border-top-color: color-mix(in srgb, var(--code-text) 62%, transparent);
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
[data-style='manuscript'] .semantic-code-title {
|
|
446
|
+
font-family: var(--font-heading);
|
|
447
|
+
font-size: 14px;
|
|
448
|
+
font-weight: 600;
|
|
449
|
+
color: var(--text-primary);
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
[data-style='manuscript'] .lang-badge {
|
|
453
|
+
color: var(--text-dim);
|
|
454
|
+
letter-spacing: 0.12em;
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
[data-style='manuscript'] .semantic-code-caption {
|
|
458
|
+
font-style: italic;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
[data-style='manuscript'] .code-block-numbered .code-line::before {
|
|
462
|
+
color: color-mix(in srgb, var(--code-text) 40%, transparent);
|
|
463
|
+
border-right-color: color-mix(in srgb, var(--code-text) 16%, transparent);
|
|
464
|
+
}
|
|
@@ -515,3 +515,57 @@
|
|
|
515
515
|
[data-style='shadcn'] .semantic-compare-table tbody tr {
|
|
516
516
|
transition: background-color var(--shadcn-motion);
|
|
517
517
|
}
|
|
518
|
+
|
|
519
|
+
/* -- Code as a card: hairline chassis, a muted divided header and the well set
|
|
520
|
+
flush inside it, closed by a caption footer. The language tag is an
|
|
521
|
+
outline badge, and the surface only answers on the shared 150ms curve. -- */
|
|
522
|
+
[data-style='shadcn'] .semantic-code,
|
|
523
|
+
[data-style='shadcn'] .semantic-implementation {
|
|
524
|
+
gap: 0;
|
|
525
|
+
border: 1px solid var(--border-subtle);
|
|
526
|
+
border-radius: var(--radius-3);
|
|
527
|
+
background: var(--bg-surface);
|
|
528
|
+
box-shadow: var(--shadow-sm);
|
|
529
|
+
overflow: hidden;
|
|
530
|
+
transition: border-color var(--shadcn-motion);
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
[data-style='shadcn'] .semantic-code:hover,
|
|
534
|
+
[data-style='shadcn'] .semantic-implementation:hover {
|
|
535
|
+
border-color: var(--border-medium);
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
[data-style='shadcn'] .semantic-code-head {
|
|
539
|
+
padding: 10px 14px;
|
|
540
|
+
background: var(--bg-subtle);
|
|
541
|
+
border-bottom: 1px solid var(--border-subtle);
|
|
542
|
+
}
|
|
543
|
+
|
|
544
|
+
[data-style='shadcn'] .semantic-code-title {
|
|
545
|
+
font-family: var(--font-sans);
|
|
546
|
+
font-size: 13px;
|
|
547
|
+
font-weight: 600;
|
|
548
|
+
letter-spacing: -0.01em;
|
|
549
|
+
color: var(--text-primary);
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
[data-style='shadcn'] .lang-badge {
|
|
553
|
+
padding: 2px 7px;
|
|
554
|
+
border: 1px solid var(--border-subtle);
|
|
555
|
+
border-radius: var(--radius-1);
|
|
556
|
+
background: var(--bg-surface);
|
|
557
|
+
color: var(--text-muted);
|
|
558
|
+
letter-spacing: 0.04em;
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
[data-style='shadcn'] .semantic-code > .code-block,
|
|
562
|
+
[data-style='shadcn'] .semantic-implementation > .code-block {
|
|
563
|
+
border: 0;
|
|
564
|
+
border-radius: 0;
|
|
565
|
+
box-shadow: none;
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
[data-style='shadcn'] .semantic-code-caption {
|
|
569
|
+
padding: 8px 14px 10px;
|
|
570
|
+
border-top: 1px solid var(--border-subtle);
|
|
571
|
+
}
|
|
@@ -262,7 +262,7 @@
|
|
|
262
262
|
/* Family stacks */
|
|
263
263
|
--font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif;
|
|
264
264
|
--font-serif: 'Lora', 'Noto Serif SC', Georgia, serif;
|
|
265
|
-
--font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
|
|
265
|
+
--font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
|
|
266
266
|
|
|
267
267
|
/* Roles — the only families component styles should consume */
|
|
268
268
|
--font-body: var(--font-sans);
|