@conduction/docusaurus-preset 3.1.1 → 3.2.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
CHANGED
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* <McpToolShelf />
|
|
3
|
+
*
|
|
4
|
+
* Section that lists the MCP tools a Conduction app contributes to
|
|
5
|
+
* the workspace AI chat companion (hydra ADR-034). Each Conduction
|
|
6
|
+
* app implements OpenRegister's IMcpToolProvider and registers a
|
|
7
|
+
* handful of tools; this section makes that promise concrete by
|
|
8
|
+
* listing the tools the app actually exposes, alongside a sample
|
|
9
|
+
* <AgentTrace> showing one of those tools being called.
|
|
10
|
+
*
|
|
11
|
+
* The component is presentational only. The tool list is curated in
|
|
12
|
+
* MDX per app, not pulled from the live provider. Status hex follows
|
|
13
|
+
* the same legend as <FeatureGrid> (stable / beta / soon).
|
|
14
|
+
*
|
|
15
|
+
* The `showIds` prop hides the namespaced tool id by default. On
|
|
16
|
+
* conduction.nl product pages, the audience is MKB-beslisser and the
|
|
17
|
+
* id is noise. On per-app docs sites (docs.decidesk.app, etc.), the
|
|
18
|
+
* audience is developers and the id should be shown — pass
|
|
19
|
+
* `showIds={true}`.
|
|
20
|
+
*
|
|
21
|
+
* Usage in MDX:
|
|
22
|
+
*
|
|
23
|
+
* import {McpToolShelf, AgentTrace} from '@conduction/docusaurus-preset/components';
|
|
24
|
+
*
|
|
25
|
+
* <McpToolShelf
|
|
26
|
+
* eyebrow="AI chat tools"
|
|
27
|
+
* title="What this app adds to the workspace AI."
|
|
28
|
+
* lede="Install OpenRegister and the chat gets five new tools..."
|
|
29
|
+
* tools={[
|
|
30
|
+
* {
|
|
31
|
+
* icon: <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.5-4.5"/></svg>,
|
|
32
|
+
* name: 'Search registers',
|
|
33
|
+
* id: 'openregister.search',
|
|
34
|
+
* description: 'Plain-language search across every register.',
|
|
35
|
+
* status: 'stable',
|
|
36
|
+
* },
|
|
37
|
+
* // ...
|
|
38
|
+
* ]}
|
|
39
|
+
* showIds={false}
|
|
40
|
+
* trace={<AgentTrace lines={[...]} cursor mode="audit log on" />}
|
|
41
|
+
* />
|
|
42
|
+
*
|
|
43
|
+
* Props:
|
|
44
|
+
* - eyebrow: Plex Mono caption above the title (optional)
|
|
45
|
+
* - title: headline (string or ReactNode)
|
|
46
|
+
* - lede: body copy under the title (optional)
|
|
47
|
+
* - tools: array of {icon, name, id?, description, status}
|
|
48
|
+
* status ∈ 'stable' (default) | 'beta' | 'soon'
|
|
49
|
+
* - showIds: render the namespaced tool id as a monospace
|
|
50
|
+
* sub-label (default false)
|
|
51
|
+
* - trace: a rendered <AgentTrace> instance to show on the
|
|
52
|
+
* right. Omit and the component renders a generic
|
|
53
|
+
* default trace built from the first tool in the list.
|
|
54
|
+
* - mode: bottom-strip caption for the default trace, if
|
|
55
|
+
* `trace` is not provided
|
|
56
|
+
*/
|
|
57
|
+
|
|
58
|
+
import React from 'react';
|
|
59
|
+
import AgentTrace from '../AgentTrace/AgentTrace.jsx';
|
|
60
|
+
import styles from './McpToolShelf.module.css';
|
|
61
|
+
|
|
62
|
+
const STATUS_CLASSES = {stable: '', beta: styles.beta, soon: styles.soon};
|
|
63
|
+
|
|
64
|
+
function buildDefaultTrace(tools, mode) {
|
|
65
|
+
const first = tools && tools[0];
|
|
66
|
+
if (!first) return null;
|
|
67
|
+
const appId = (first.id && first.id.split('.')[0]) || 'app';
|
|
68
|
+
const toolName = first.id ? first.id.split('.').slice(1).join('.') : (first.name || 'tool');
|
|
69
|
+
return (
|
|
70
|
+
<AgentTrace
|
|
71
|
+
lines={[
|
|
72
|
+
{kind: 'tool', text: `${appId} - ${toolName} (MCP)()`},
|
|
73
|
+
{kind: 'note', bullet: 'done', text: 'Returned a typed result'},
|
|
74
|
+
{kind: 'status', text: 'Synthesising answer'},
|
|
75
|
+
]}
|
|
76
|
+
cursor
|
|
77
|
+
mode={mode || 'audit log on (every call recorded)'}
|
|
78
|
+
/>
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
export default function McpToolShelf({
|
|
83
|
+
eyebrow = 'AI chat tools',
|
|
84
|
+
title,
|
|
85
|
+
lede,
|
|
86
|
+
tools = [],
|
|
87
|
+
showIds = false,
|
|
88
|
+
trace,
|
|
89
|
+
mode,
|
|
90
|
+
className,
|
|
91
|
+
}) {
|
|
92
|
+
const resolvedTrace = trace || buildDefaultTrace(tools, mode);
|
|
93
|
+
return (
|
|
94
|
+
<section className={[styles.shelf, className].filter(Boolean).join(' ')}>
|
|
95
|
+
{(eyebrow || title || lede) && (
|
|
96
|
+
<header className={styles.head}>
|
|
97
|
+
{eyebrow && (
|
|
98
|
+
<div className={styles.eyebrow}>
|
|
99
|
+
<span className={styles.eyebrowHex} aria-hidden="true" />
|
|
100
|
+
{eyebrow}
|
|
101
|
+
</div>
|
|
102
|
+
)}
|
|
103
|
+
{title && <h2 className={styles.title}>{title}</h2>}
|
|
104
|
+
{lede && <p className={styles.lede}>{lede}</p>}
|
|
105
|
+
</header>
|
|
106
|
+
)}
|
|
107
|
+
<div className={styles.layout}>
|
|
108
|
+
<div className={styles.grid}>
|
|
109
|
+
{tools.map((t, i) => {
|
|
110
|
+
const statusClass = [styles.statusHex, STATUS_CLASSES[t.status || 'stable']]
|
|
111
|
+
.filter(Boolean)
|
|
112
|
+
.join(' ');
|
|
113
|
+
return (
|
|
114
|
+
<article key={i} className={styles.card}>
|
|
115
|
+
<div className={styles.cardHead}>
|
|
116
|
+
{t.icon && (
|
|
117
|
+
<div className={styles.cardIcon} aria-hidden="true">
|
|
118
|
+
{t.icon}
|
|
119
|
+
</div>
|
|
120
|
+
)}
|
|
121
|
+
<div className={styles.cardTitleWrap}>
|
|
122
|
+
<h3 className={styles.cardName}>{t.name}</h3>
|
|
123
|
+
{showIds && t.id && <code className={styles.cardId}>{t.id}</code>}
|
|
124
|
+
</div>
|
|
125
|
+
<span className={statusClass} aria-hidden="true" />
|
|
126
|
+
</div>
|
|
127
|
+
{t.description && <p className={styles.cardDesc}>{t.description}</p>}
|
|
128
|
+
</article>
|
|
129
|
+
);
|
|
130
|
+
})}
|
|
131
|
+
</div>
|
|
132
|
+
{resolvedTrace && (
|
|
133
|
+
<aside className={styles.traceCol}>{resolvedTrace}</aside>
|
|
134
|
+
)}
|
|
135
|
+
</div>
|
|
136
|
+
<div className={styles.legend}>
|
|
137
|
+
<span className={styles.legendItem}>
|
|
138
|
+
<span className={styles.statusHex} aria-hidden="true" />
|
|
139
|
+
Stable
|
|
140
|
+
</span>
|
|
141
|
+
<span className={styles.legendItem}>
|
|
142
|
+
<span className={[styles.statusHex, styles.beta].join(' ')} aria-hidden="true" />
|
|
143
|
+
Beta
|
|
144
|
+
</span>
|
|
145
|
+
<span className={styles.legendItem}>
|
|
146
|
+
<span className={[styles.statusHex, styles.soon].join(' ')} aria-hidden="true" />
|
|
147
|
+
Coming soon
|
|
148
|
+
</span>
|
|
149
|
+
</div>
|
|
150
|
+
</section>
|
|
151
|
+
);
|
|
152
|
+
}
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* <McpToolShelf /> styles. Header + 2-column layout: a responsive
|
|
3
|
+
* grid of tool cards on the left, an <AgentTrace> mock on the right.
|
|
4
|
+
* Collapses to single column under 900px (trace falls below the
|
|
5
|
+
* grid). Status hex on each card matches the FeatureGrid legend
|
|
6
|
+
* (mint = stable, KNVB orange = beta, cobalt-300 = soon).
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
.shelf {
|
|
10
|
+
max-width: 1280px;
|
|
11
|
+
margin: 0 auto;
|
|
12
|
+
padding: var(--space-12) var(--space-12);
|
|
13
|
+
font-family: var(--conduction-typography-font-family-body);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.head { max-width: 70ch; margin: 0 0 var(--space-8); }
|
|
17
|
+
.eyebrow {
|
|
18
|
+
display: inline-flex; align-items: center; gap: var(--space-2);
|
|
19
|
+
font-family: var(--conduction-typography-font-family-code);
|
|
20
|
+
font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
|
|
21
|
+
color: var(--c-orange-knvb);
|
|
22
|
+
margin-bottom: var(--space-3);
|
|
23
|
+
}
|
|
24
|
+
.eyebrowHex {
|
|
25
|
+
width: 10px; height: 12px;
|
|
26
|
+
clip-path: var(--hex-pointy-top);
|
|
27
|
+
background: var(--c-orange-knvb);
|
|
28
|
+
}
|
|
29
|
+
.title {
|
|
30
|
+
font-size: 36px; font-weight: 700; letter-spacing: -0.02em;
|
|
31
|
+
line-height: 1.1; color: var(--c-cobalt-900); margin: 0 0 var(--space-3);
|
|
32
|
+
}
|
|
33
|
+
.lede { font-size: 17px; line-height: 1.5; color: var(--c-cobalt-700); margin: 0; }
|
|
34
|
+
|
|
35
|
+
.layout {
|
|
36
|
+
display: grid;
|
|
37
|
+
grid-template-columns: minmax(0, 1fr) 360px;
|
|
38
|
+
gap: var(--space-8);
|
|
39
|
+
align-items: start;
|
|
40
|
+
}
|
|
41
|
+
@media (max-width: 1024px) {
|
|
42
|
+
.layout { grid-template-columns: 1fr; }
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.grid {
|
|
46
|
+
display: grid;
|
|
47
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
48
|
+
gap: var(--space-4);
|
|
49
|
+
}
|
|
50
|
+
@media (max-width: 720px) {
|
|
51
|
+
.grid { grid-template-columns: 1fr; }
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.card {
|
|
55
|
+
background: white;
|
|
56
|
+
border: 1px solid var(--c-cobalt-100);
|
|
57
|
+
border-radius: var(--radius-lg);
|
|
58
|
+
padding: var(--space-4) var(--space-5);
|
|
59
|
+
display: flex;
|
|
60
|
+
flex-direction: column;
|
|
61
|
+
gap: var(--space-3);
|
|
62
|
+
transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
|
|
63
|
+
}
|
|
64
|
+
.card:hover {
|
|
65
|
+
border-color: var(--c-cobalt-200);
|
|
66
|
+
box-shadow: var(--shadow-1);
|
|
67
|
+
transform: translateY(-1px);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.cardHead {
|
|
71
|
+
display: flex;
|
|
72
|
+
align-items: flex-start;
|
|
73
|
+
gap: var(--space-3);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.cardIcon {
|
|
77
|
+
width: 28px; height: 32px;
|
|
78
|
+
clip-path: var(--hex-pointy-top);
|
|
79
|
+
background: var(--c-blue-cobalt);
|
|
80
|
+
color: white;
|
|
81
|
+
display: flex; align-items: center; justify-content: center;
|
|
82
|
+
flex-shrink: 0;
|
|
83
|
+
}
|
|
84
|
+
.cardIcon svg {
|
|
85
|
+
width: 13px; height: 13px;
|
|
86
|
+
stroke: currentColor;
|
|
87
|
+
stroke-width: 2;
|
|
88
|
+
fill: none;
|
|
89
|
+
stroke-linecap: round;
|
|
90
|
+
stroke-linejoin: round;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.cardTitleWrap {
|
|
94
|
+
flex: 1;
|
|
95
|
+
min-width: 0;
|
|
96
|
+
display: flex;
|
|
97
|
+
flex-direction: column;
|
|
98
|
+
gap: 2px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.cardName {
|
|
102
|
+
font-size: 16px;
|
|
103
|
+
font-weight: 600;
|
|
104
|
+
letter-spacing: -0.005em;
|
|
105
|
+
color: var(--c-cobalt-900);
|
|
106
|
+
margin: 0;
|
|
107
|
+
line-height: 1.3;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.cardId {
|
|
111
|
+
font-family: var(--conduction-typography-font-family-code);
|
|
112
|
+
font-size: 11px;
|
|
113
|
+
font-weight: 500;
|
|
114
|
+
color: var(--c-cobalt-700);
|
|
115
|
+
background: var(--c-cobalt-50);
|
|
116
|
+
padding: 1px 6px;
|
|
117
|
+
border-radius: var(--radius-sm);
|
|
118
|
+
align-self: flex-start;
|
|
119
|
+
word-break: break-all;
|
|
120
|
+
line-height: 1.4;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.statusHex {
|
|
124
|
+
width: 10px; height: 12px;
|
|
125
|
+
clip-path: var(--hex-pointy-top);
|
|
126
|
+
background: var(--c-mint-500);
|
|
127
|
+
flex-shrink: 0;
|
|
128
|
+
margin-top: 4px;
|
|
129
|
+
}
|
|
130
|
+
.beta { background: var(--c-orange-knvb); }
|
|
131
|
+
.soon { background: var(--c-cobalt-300); }
|
|
132
|
+
|
|
133
|
+
.cardDesc {
|
|
134
|
+
font-size: 14px;
|
|
135
|
+
line-height: 1.55;
|
|
136
|
+
color: var(--c-cobalt-700);
|
|
137
|
+
margin: 0;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.traceCol {
|
|
141
|
+
position: sticky;
|
|
142
|
+
top: var(--space-6);
|
|
143
|
+
display: flex;
|
|
144
|
+
flex-direction: column;
|
|
145
|
+
}
|
|
146
|
+
@media (max-width: 1024px) {
|
|
147
|
+
.traceCol { position: static; }
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.legend {
|
|
151
|
+
display: flex;
|
|
152
|
+
gap: var(--space-6);
|
|
153
|
+
margin-top: var(--space-6);
|
|
154
|
+
font-family: var(--conduction-typography-font-family-code);
|
|
155
|
+
font-size: 11px;
|
|
156
|
+
letter-spacing: 0.06em;
|
|
157
|
+
text-transform: uppercase;
|
|
158
|
+
color: var(--c-cobalt-400);
|
|
159
|
+
}
|
|
160
|
+
.legendItem {
|
|
161
|
+
display: inline-flex;
|
|
162
|
+
align-items: center;
|
|
163
|
+
gap: var(--space-2);
|
|
164
|
+
}
|
|
165
|
+
.legendItem .statusHex { margin-top: 0; }
|
package/src/components/index.js
CHANGED
|
@@ -82,6 +82,7 @@ export {default as Showcase} from './Showcase/Showcase.jsx';
|
|
|
82
82
|
export {default as RotatingCards} from './RotatingCards/RotatingCards.jsx';
|
|
83
83
|
export {default as HexBackground} from './HexBackground/HexBackground.jsx';
|
|
84
84
|
export {default as AgentTrace} from './AgentTrace/AgentTrace.jsx';
|
|
85
|
+
export {default as McpToolShelf} from './McpToolShelf/McpToolShelf.jsx';
|
|
85
86
|
export {default as ExternalAppShelf} from './ExternalAppShelf/ExternalAppShelf.jsx';
|
|
86
87
|
export {default as WidgetShelf} from './WidgetShelf/WidgetShelf.jsx';
|
|
87
88
|
export {default as FeatureGrid, FeatureGridGroup, FeatureItem as FeatureGridItem} from './FeatureGrid/FeatureGrid.jsx';
|