@nadicodeai/ui 0.10.2 → 0.12.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/AGENTS.md +23 -135
- package/README.md +39 -110
- package/dist/components/action-band.d.ts +5 -3
- package/dist/components/action-band.d.ts.map +1 -1
- package/dist/components/action-band.js +35 -21
- package/dist/components/agent-chat.d.ts.map +1 -1
- package/dist/components/agent-chat.js +1 -1
- package/dist/components/agent-composer.d.ts.map +1 -1
- package/dist/components/agent-composer.js +1 -1
- package/dist/components/ai-elements/terminal.d.ts.map +1 -1
- package/dist/components/ai-elements/terminal.js +8 -8
- package/dist/components/artifact-panel.d.ts.map +1 -1
- package/dist/components/artifact-panel.js +5 -5
- package/dist/components/bento.d.ts +14 -3
- package/dist/components/bento.d.ts.map +1 -1
- package/dist/components/bento.js +26 -5
- package/dist/components/brand.d.ts.map +1 -1
- package/dist/components/brand.js +29 -3
- package/dist/components/contact.d.ts +22 -10
- package/dist/components/contact.d.ts.map +1 -1
- package/dist/components/contact.js +34 -12
- package/dist/components/diff-count.js +1 -1
- package/dist/components/faq-item.js +2 -2
- package/dist/components/faq.d.ts +4 -1
- package/dist/components/faq.d.ts.map +1 -1
- package/dist/components/faq.js +5 -2
- package/dist/components/feature-grid.d.ts +23 -0
- package/dist/components/feature-grid.d.ts.map +1 -0
- package/dist/components/feature-grid.js +33 -0
- package/dist/components/feature-rows.d.ts +23 -0
- package/dist/components/feature-rows.d.ts.map +1 -0
- package/dist/components/feature-rows.js +27 -0
- package/dist/components/footer.d.ts +18 -12
- package/dist/components/footer.d.ts.map +1 -1
- package/dist/components/footer.js +32 -20
- package/dist/components/hero.d.ts +28 -0
- package/dist/components/hero.d.ts.map +1 -0
- package/dist/components/hero.js +45 -0
- package/dist/components/integration-flow.d.ts +36 -0
- package/dist/components/integration-flow.d.ts.map +1 -0
- package/dist/components/integration-flow.js +36 -0
- package/dist/components/live-demo.d.ts +31 -0
- package/dist/components/live-demo.d.ts.map +1 -0
- package/dist/components/live-demo.js +30 -0
- package/dist/components/logo-band.d.ts +12 -2
- package/dist/components/logo-band.d.ts.map +1 -1
- package/dist/components/logo-band.js +16 -1
- package/dist/components/logo-tile.d.ts.map +1 -1
- package/dist/components/logo-tile.js +5 -2
- package/dist/components/nav-bar.d.ts +14 -8
- package/dist/components/nav-bar.d.ts.map +1 -1
- package/dist/components/nav-bar.js +19 -13
- package/dist/components/pricing-card.d.ts +10 -15
- package/dist/components/pricing-card.d.ts.map +1 -1
- package/dist/components/pricing-card.js +18 -29
- package/dist/components/pricing.d.ts +11 -14
- package/dist/components/pricing.d.ts.map +1 -1
- package/dist/components/pricing.js +5 -15
- package/dist/components/quote-card.d.ts +10 -2
- package/dist/components/quote-card.d.ts.map +1 -1
- package/dist/components/quote-card.js +15 -3
- package/dist/components/security-grid.d.ts +25 -0
- package/dist/components/security-grid.d.ts.map +1 -0
- package/dist/components/security-grid.js +31 -0
- package/dist/components/sidebar.js +5 -5
- package/dist/components/stat-block.d.ts +9 -5
- package/dist/components/stat-block.d.ts.map +1 -1
- package/dist/components/stat-block.js +12 -6
- package/dist/components/statement.d.ts +32 -0
- package/dist/components/statement.d.ts.map +1 -0
- package/dist/components/statement.js +40 -0
- package/dist/components/stats-band.d.ts +6 -2
- package/dist/components/stats-band.d.ts.map +1 -1
- package/dist/components/stats-band.js +10 -3
- package/dist/components/status-dot.js +4 -4
- package/dist/components/steps.d.ts +34 -0
- package/dist/components/steps.d.ts.map +1 -0
- package/dist/components/steps.js +40 -0
- package/dist/components/team-grid.d.ts +27 -0
- package/dist/components/team-grid.d.ts.map +1 -0
- package/dist/components/team-grid.js +30 -0
- package/dist/components/testimonials.d.ts +39 -12
- package/dist/components/testimonials.d.ts.map +1 -1
- package/dist/components/testimonials.js +46 -13
- package/dist/components/texture-strip.d.ts +22 -0
- package/dist/components/texture-strip.d.ts.map +1 -0
- package/dist/components/texture-strip.js +29 -0
- package/dist/index.d.ts +10 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +10 -0
- package/dist/styles/globals.css +185 -300
- package/docs/agent-work-surfaces.md +6 -5
- package/docs/agents/nadicodeai-ui.md +42 -273
- package/docs/consuming-cross-repo.md +26 -33
- package/docs/contract.md +43 -0
- package/docs/migration/nadia-consumer-readiness.md +5 -10
- package/docs/terminal-tui-semantics.md +142 -181
- package/llms.txt +49 -84
- package/package.json +3 -4
- package/skills/nadicodeai-ui/SKILL.md +6 -34
package/dist/styles/globals.css
CHANGED
|
@@ -1,26 +1,22 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* @nadicodeai/ui — Tailwind v4 + shadcn entry stylesheet.
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
* to brand tokens.
|
|
4
|
+
* Tailwind and the complete design-system CSS module are composed here, behind
|
|
5
|
+
* the package's one public stylesheet interface. The generated raw-token theme,
|
|
6
|
+
* :root/.dark semantic role maps, and Tailwind semantic bridge come from
|
|
7
|
+
* DESIGN.md, so shadcn utilities (bg-background, text-foreground,
|
|
8
|
+
* border-border, …) resolve to brand tokens through one generated owner.
|
|
10
9
|
*
|
|
11
|
-
* Standard shadcn roles are generated by @nadicodeai/design-system.
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
* Components consume those roles/aliases and do not carry raw palette utilities
|
|
15
|
-
* or dark: utility classes. DESIGN.md remains the only source of literal values.
|
|
10
|
+
* Standard shadcn roles are generated by @nadicodeai/design-system. Components
|
|
11
|
+
* consume those roles or canonical generated tokens without raw palette values
|
|
12
|
+
* or component-local dark: utilities.
|
|
16
13
|
*/
|
|
17
14
|
@layer tokens, theme, reset, base, foundation, motion, layout, primitives, components, utilities;
|
|
18
15
|
|
|
19
16
|
@import "tailwindcss";
|
|
20
17
|
@import "tw-animate-css";
|
|
21
18
|
@import "./shadcn.tailwind.css";
|
|
22
|
-
@import "@nadicodeai/design-system/
|
|
23
|
-
@import "@nadicodeai/design-system/css/tokens.generated.css" layer(tokens);
|
|
19
|
+
@import "@nadicodeai/design-system/css";
|
|
24
20
|
@import "@xyflow/react/dist/style.css" layer(components);
|
|
25
21
|
|
|
26
22
|
/*
|
|
@@ -43,304 +39,193 @@
|
|
|
43
39
|
body {
|
|
44
40
|
@apply bg-background text-foreground;
|
|
45
41
|
}
|
|
42
|
+
|
|
43
|
+
/*
|
|
44
|
+
* lucide-react supplies glyph geometry; the shared house render owns only
|
|
45
|
+
* presentation. Keep this in the package stylesheet so every React consumer
|
|
46
|
+
* matches the generated static SVG set without per-component stroke props.
|
|
47
|
+
*/
|
|
48
|
+
svg.lucide {
|
|
49
|
+
stroke-width: var(--nc-icon-stroke);
|
|
50
|
+
stroke-linecap: round;
|
|
51
|
+
stroke-linejoin: round;
|
|
52
|
+
}
|
|
46
53
|
}
|
|
47
54
|
|
|
48
55
|
/*
|
|
49
|
-
*
|
|
50
|
-
*
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
* guards the resolved cascade across this file's import order.
|
|
56
|
+
* The canonical design-system module owns raw --nc-* mode aliases, semantic
|
|
57
|
+
* roles, and their Tailwind utility bridge for both root and scoped `.dark`
|
|
58
|
+
* surfaces. This adapter owns only narrow technology integration such as ANSI
|
|
59
|
+
* class translation below.
|
|
54
60
|
*/
|
|
55
61
|
|
|
56
|
-
@theme inline {
|
|
57
|
-
--color-background: var(--background);
|
|
58
|
-
--color-foreground: var(--foreground);
|
|
59
|
-
|
|
60
|
-
--color-card: var(--card);
|
|
61
|
-
--color-card-foreground: var(--card-foreground);
|
|
62
|
-
|
|
63
|
-
--color-popover: var(--popover);
|
|
64
|
-
--color-popover-foreground: var(--popover-foreground);
|
|
65
|
-
|
|
66
|
-
--color-primary: var(--primary);
|
|
67
|
-
--color-primary-foreground: var(--primary-foreground);
|
|
68
|
-
--color-primary-hover: var(--primary-hover);
|
|
69
|
-
--color-primary-active: var(--primary-active);
|
|
70
|
-
|
|
71
|
-
--color-secondary: var(--secondary);
|
|
72
|
-
--color-secondary-foreground: var(--secondary-foreground);
|
|
73
|
-
|
|
74
|
-
--color-muted: var(--muted);
|
|
75
|
-
--color-muted-foreground: var(--muted-foreground);
|
|
76
|
-
|
|
77
|
-
--color-accent: var(--accent);
|
|
78
|
-
--color-accent-foreground: var(--accent-foreground);
|
|
79
|
-
|
|
80
|
-
--color-destructive: var(--destructive);
|
|
81
|
-
--color-destructive-foreground: var(--destructive-foreground);
|
|
82
|
-
|
|
83
|
-
--color-border: var(--border);
|
|
84
|
-
--color-input: var(--input);
|
|
85
|
-
--color-ring: var(--ring);
|
|
86
|
-
--color-scrim: var(--scrim);
|
|
87
|
-
--color-placeholder: var(--nc-muted);
|
|
88
|
-
|
|
89
|
-
--color-chart-1: var(--chart-1);
|
|
90
|
-
--color-chart-2: var(--chart-2);
|
|
91
|
-
--color-chart-3: var(--chart-3);
|
|
92
|
-
--color-chart-4: var(--chart-4);
|
|
93
|
-
--color-chart-5: var(--chart-5);
|
|
94
|
-
|
|
95
|
-
--color-sidebar: var(--sidebar);
|
|
96
|
-
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
97
|
-
--color-sidebar-primary: var(--sidebar-primary);
|
|
98
|
-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
99
|
-
--color-sidebar-accent: var(--sidebar-accent);
|
|
100
|
-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
101
|
-
--color-sidebar-border: var(--sidebar-border);
|
|
102
|
-
--color-sidebar-ring: var(--sidebar-ring);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
:root {
|
|
106
|
-
--nc-app-surface: var(--background);
|
|
107
|
-
--nc-app-surface-chrome: var(--sidebar);
|
|
108
|
-
--nc-app-surface-sidebar: var(--sidebar);
|
|
109
|
-
--nc-app-surface-panel: var(--card);
|
|
110
|
-
--nc-app-surface-panel-hover: var(--accent);
|
|
111
|
-
--nc-app-surface-panel-active: var(--primary);
|
|
112
|
-
--nc-app-surface-elevated: var(--popover);
|
|
113
|
-
--nc-app-surface-overlay: var(--popover);
|
|
114
|
-
--nc-app-border: var(--border);
|
|
115
|
-
--nc-app-border-subtle: var(--nc-seam);
|
|
116
|
-
--nc-app-ring: var(--ring);
|
|
117
|
-
--nc-app-text-primary: var(--foreground);
|
|
118
|
-
--nc-app-text-secondary: var(--nc-body);
|
|
119
|
-
--nc-app-text-tertiary: var(--muted-foreground);
|
|
120
|
-
--nc-app-text-inverse: var(--primary-foreground);
|
|
121
|
-
--nc-app-text-link: var(--nc-link-deep);
|
|
122
|
-
--nc-app-text-code: var(--nc-ink);
|
|
123
|
-
--nc-app-text-placeholder: var(--nc-muted);
|
|
124
|
-
--nc-app-text-disabled: var(--nc-cross);
|
|
125
|
-
|
|
126
|
-
--nc-chat-surface: var(--background);
|
|
127
|
-
--nc-chat-user-surface: var(--primary);
|
|
128
|
-
--nc-chat-assistant-surface: var(--card);
|
|
129
|
-
--nc-chat-system-surface: var(--muted);
|
|
130
|
-
--nc-chat-tool-surface: var(--secondary);
|
|
131
|
-
--nc-chat-reasoning-surface: var(--accent);
|
|
132
|
-
--nc-chat-artifact-surface: var(--popover);
|
|
133
|
-
--nc-chat-inline-ref-surface: var(--nc-link-bg-soft);
|
|
134
|
-
--nc-chat-directive-command: var(--nc-link);
|
|
135
|
-
--nc-chat-directive-skill: var(--nc-info);
|
|
136
|
-
--nc-chat-directive-theme: var(--nc-flag-red);
|
|
137
|
-
--nc-composer-surface: var(--popover);
|
|
138
|
-
--nc-composer-foreground: var(--popover-foreground);
|
|
139
|
-
--nc-composer-border: var(--input);
|
|
140
|
-
--nc-composer-ring: var(--ring);
|
|
141
|
-
|
|
142
|
-
--nc-tool-pending: var(--nc-warning-deep);
|
|
143
|
-
--nc-tool-running: var(--nc-state-running);
|
|
144
|
-
--nc-tool-success: var(--nc-success);
|
|
145
|
-
--nc-tool-warning: var(--nc-warning-deep);
|
|
146
|
-
--nc-tool-error: var(--nc-error);
|
|
147
|
-
--nc-tool-muted: var(--nc-muted);
|
|
148
|
-
--nc-tool-approval-run: var(--nc-state-running);
|
|
149
|
-
--nc-tool-approval-deny: var(--nc-error);
|
|
150
|
-
--nc-tool-approval-session: var(--nc-link);
|
|
151
|
-
--nc-tool-approval-always: var(--nc-success);
|
|
152
|
-
|
|
153
|
-
--nc-status-info: var(--nc-link);
|
|
154
|
-
--nc-status-success: var(--nc-success);
|
|
155
|
-
--nc-status-warning: var(--nc-warning-deep);
|
|
156
|
-
--nc-status-error: var(--nc-error);
|
|
157
|
-
--nc-status-paused: var(--nc-muted);
|
|
158
|
-
--nc-status-running: var(--nc-state-running);
|
|
159
|
-
--nc-status-blocked: var(--nc-state-blocked);
|
|
160
|
-
--nc-status-complete: var(--nc-state-complete);
|
|
161
|
-
--nc-status-offline: var(--nc-muted);
|
|
162
|
-
--nc-status-online: var(--nc-success);
|
|
163
|
-
|
|
164
|
-
--nc-diff-added-line: var(--nc-link-bg-soft);
|
|
165
|
-
--nc-diff-added-word: var(--nc-link);
|
|
166
|
-
--nc-diff-removed-line: var(--nc-error-soft);
|
|
167
|
-
--nc-diff-removed-word: var(--nc-error);
|
|
168
|
-
--nc-diff-hunk: var(--accent);
|
|
169
|
-
--nc-diff-file-header: var(--muted-foreground);
|
|
170
|
-
--nc-code-surface: var(--nc-ink);
|
|
171
|
-
--nc-code-border: var(--nc-body);
|
|
172
|
-
/* cyan family retired per Italia color contract §6 (design-system). keyword
|
|
173
|
-
and terminal cyan roles repoint to info (blue-cobalto-700); function gets
|
|
174
|
-
a deeper blue-cobalto step so it stays visually distinct from keyword. */
|
|
175
|
-
--nc-code-token-keyword: var(--nc-info);
|
|
176
|
-
--nc-code-token-string: var(--nc-success);
|
|
177
|
-
--nc-code-token-comment: var(--nc-cross);
|
|
178
|
-
--nc-code-token-function: var(--nc-blue-cobalto-900);
|
|
179
|
-
|
|
180
|
-
--nc-terminal-bg: var(--nc-ink);
|
|
181
|
-
--nc-terminal-fg: var(--nc-on-primary);
|
|
182
|
-
--nc-terminal-muted: var(--nc-cross);
|
|
183
|
-
--nc-terminal-cursor: var(--nc-info);
|
|
184
|
-
--nc-terminal-selection-bg: var(--nc-link-deep);
|
|
185
|
-
--nc-terminal-ansi-black: var(--nc-ink);
|
|
186
|
-
--nc-terminal-ansi-red: var(--nc-error);
|
|
187
|
-
--nc-terminal-ansi-green: var(--nc-success);
|
|
188
|
-
--nc-terminal-ansi-yellow: var(--nc-warning);
|
|
189
|
-
--nc-terminal-ansi-blue: var(--nc-link);
|
|
190
|
-
--nc-terminal-ansi-magenta: var(--nc-flag-red);
|
|
191
|
-
--nc-terminal-ansi-cyan: var(--nc-info);
|
|
192
|
-
--nc-terminal-ansi-white: var(--nc-on-primary);
|
|
193
|
-
--nc-terminal-ansi-bright-black: var(--nc-body);
|
|
194
|
-
--nc-terminal-ansi-bright-red: var(--nc-error-soft);
|
|
195
|
-
--nc-terminal-ansi-bright-green: var(--nc-green-italia-400);
|
|
196
|
-
--nc-terminal-ansi-bright-yellow: var(--nc-warning-soft);
|
|
197
|
-
--nc-terminal-ansi-bright-blue: var(--nc-info);
|
|
198
|
-
--nc-terminal-ansi-bright-magenta: var(--nc-flag-red);
|
|
199
|
-
--nc-terminal-ansi-bright-cyan: var(--nc-blue-cobalto-200);
|
|
200
|
-
--nc-terminal-ansi-bright-white: var(--nc-on-primary);
|
|
201
|
-
|
|
202
|
-
--nc-model-provider-surface: var(--muted);
|
|
203
|
-
--nc-model-capability-surface: var(--accent);
|
|
204
|
-
--nc-model-capability-border: var(--nc-link);
|
|
205
|
-
--nc-model-context-meter: var(--nc-warning);
|
|
206
|
-
--nc-model-cost-warning: var(--nc-warning-deep);
|
|
207
|
-
--nc-model-rate-limit: var(--nc-error);
|
|
208
|
-
|
|
209
|
-
--nc-plugin-permission-safe: var(--nc-success);
|
|
210
|
-
--nc-plugin-permission-review: var(--nc-warning-deep);
|
|
211
|
-
--nc-plugin-permission-risk: var(--nc-flag-red);
|
|
212
|
-
--nc-plugin-permission-denied: var(--nc-error);
|
|
213
|
-
--nc-plugin-permission-surface: var(--muted);
|
|
214
|
-
--nc-plugin-permission-foreground: var(--foreground);
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
.dark {
|
|
218
|
-
--nc-app-surface: var(--background);
|
|
219
|
-
--nc-app-surface-chrome: var(--sidebar);
|
|
220
|
-
--nc-app-surface-sidebar: var(--sidebar);
|
|
221
|
-
--nc-app-surface-panel: var(--card);
|
|
222
|
-
--nc-app-surface-panel-hover: var(--accent);
|
|
223
|
-
--nc-app-surface-panel-active: var(--primary);
|
|
224
|
-
--nc-app-surface-elevated: var(--popover);
|
|
225
|
-
--nc-app-surface-overlay: var(--popover);
|
|
226
|
-
--nc-app-border: var(--border);
|
|
227
|
-
--nc-app-border-subtle: var(--nc-dark-line);
|
|
228
|
-
--nc-app-ring: var(--ring);
|
|
229
|
-
--nc-app-text-primary: var(--foreground);
|
|
230
|
-
--nc-app-text-secondary: var(--nc-cross);
|
|
231
|
-
--nc-app-text-tertiary: var(--muted-foreground);
|
|
232
|
-
--nc-app-text-inverse: var(--primary-foreground);
|
|
233
|
-
--nc-app-text-link: var(--nc-dark-cyan-soft);
|
|
234
|
-
--nc-app-text-code: var(--nc-on-primary);
|
|
235
|
-
--nc-app-text-placeholder: var(--nc-cross);
|
|
236
|
-
--nc-app-text-disabled: var(--nc-dark-muted);
|
|
237
|
-
|
|
238
|
-
--nc-chat-surface: var(--background);
|
|
239
|
-
--nc-chat-user-surface: var(--primary);
|
|
240
|
-
--nc-chat-assistant-surface: var(--card);
|
|
241
|
-
--nc-chat-system-surface: var(--muted);
|
|
242
|
-
--nc-chat-tool-surface: var(--secondary);
|
|
243
|
-
--nc-chat-reasoning-surface: var(--accent);
|
|
244
|
-
--nc-chat-artifact-surface: var(--popover);
|
|
245
|
-
--nc-chat-inline-ref-surface: var(--nc-dark-link-bg-soft);
|
|
246
|
-
--nc-chat-directive-command: var(--nc-dark-cyan);
|
|
247
|
-
--nc-chat-directive-skill: var(--nc-dark-cyan-soft);
|
|
248
|
-
--nc-chat-directive-theme: var(--nc-warning);
|
|
249
|
-
--nc-composer-surface: var(--popover);
|
|
250
|
-
--nc-composer-foreground: var(--popover-foreground);
|
|
251
|
-
--nc-composer-border: var(--input);
|
|
252
|
-
--nc-composer-ring: var(--ring);
|
|
253
|
-
|
|
254
|
-
--nc-tool-pending: var(--nc-warning);
|
|
255
|
-
--nc-tool-running: var(--nc-dark-cyan);
|
|
256
|
-
--nc-tool-success: var(--nc-dark-cyan-soft);
|
|
257
|
-
--nc-tool-warning: var(--nc-warning);
|
|
258
|
-
--nc-tool-error: var(--nc-error-soft);
|
|
259
|
-
--nc-tool-muted: var(--nc-cross);
|
|
260
|
-
--nc-tool-approval-run: var(--nc-dark-cyan-deep);
|
|
261
|
-
--nc-tool-approval-deny: var(--nc-error-soft);
|
|
262
|
-
--nc-tool-approval-session: var(--nc-dark-cyan);
|
|
263
|
-
--nc-tool-approval-always: var(--nc-dark-cyan-soft);
|
|
264
|
-
|
|
265
|
-
--nc-status-info: var(--nc-dark-cyan);
|
|
266
|
-
--nc-status-success: var(--nc-dark-cyan-soft);
|
|
267
|
-
--nc-status-warning: var(--nc-warning);
|
|
268
|
-
--nc-status-error: var(--nc-error-soft);
|
|
269
|
-
--nc-status-paused: var(--nc-cross);
|
|
270
|
-
--nc-status-running: var(--nc-dark-cyan);
|
|
271
|
-
--nc-status-blocked: var(--nc-error-soft);
|
|
272
|
-
--nc-status-complete: var(--nc-dark-cyan-soft);
|
|
273
|
-
--nc-status-offline: var(--nc-cross);
|
|
274
|
-
--nc-status-online: var(--nc-dark-cyan-soft);
|
|
275
|
-
|
|
276
|
-
--nc-diff-added-line: var(--nc-dark-link-bg-soft);
|
|
277
|
-
--nc-diff-added-word: var(--nc-dark-cyan-soft);
|
|
278
|
-
--nc-diff-removed-line: var(--nc-error-deep);
|
|
279
|
-
--nc-diff-removed-word: var(--nc-error-soft);
|
|
280
|
-
--nc-diff-hunk: var(--muted);
|
|
281
|
-
--nc-diff-file-header: var(--muted-foreground);
|
|
282
|
-
/* Code/terminal chrome must stay near-black in dark mode. --nc-ink flips
|
|
283
|
-
light at :root.dark (generated surface-palette remap), so these ink-as-
|
|
284
|
-
surface aliases re-pin to the dark canvas tokens explicitly. */
|
|
285
|
-
--nc-code-surface: var(--nc-dark-canvas-soft);
|
|
286
|
-
--nc-code-border: var(--nc-body);
|
|
287
|
-
/* cyan family retired per Italia color contract §6. dark-cyan/-soft/-deep
|
|
288
|
-
were kept unchanged in DESIGN.md specifically for this dark-mode "electric"
|
|
289
|
-
accent role, so repoint here rather than to info (which is the light-mode
|
|
290
|
-
replacement) to preserve the existing dark-theme look. */
|
|
291
|
-
--nc-code-token-keyword: var(--nc-dark-cyan);
|
|
292
|
-
--nc-code-token-string: var(--nc-dark-cyan-soft);
|
|
293
|
-
--nc-code-token-comment: var(--nc-cross);
|
|
294
|
-
--nc-code-token-function: var(--nc-dark-cyan-soft);
|
|
295
|
-
|
|
296
|
-
--nc-terminal-bg: var(--nc-dark-canvas-soft);
|
|
297
|
-
--nc-terminal-fg: var(--nc-on-primary);
|
|
298
|
-
--nc-terminal-muted: var(--nc-cross);
|
|
299
|
-
--nc-terminal-cursor: var(--nc-dark-cyan);
|
|
300
|
-
--nc-terminal-selection-bg: var(--nc-dark-link-bg-soft);
|
|
301
|
-
--nc-terminal-ansi-black: var(--nc-dark-line);
|
|
302
|
-
--nc-terminal-ansi-red: var(--nc-error-soft);
|
|
303
|
-
--nc-terminal-ansi-green: var(--nc-dark-cyan-soft);
|
|
304
|
-
--nc-terminal-ansi-yellow: var(--nc-warning);
|
|
305
|
-
--nc-terminal-ansi-blue: var(--nc-dark-cyan);
|
|
306
|
-
--nc-terminal-ansi-magenta: var(--nc-flag-red);
|
|
307
|
-
--nc-terminal-ansi-cyan: var(--nc-dark-cyan-soft);
|
|
308
|
-
--nc-terminal-ansi-white: var(--nc-on-primary);
|
|
309
|
-
--nc-terminal-ansi-bright-black: var(--nc-cross);
|
|
310
|
-
--nc-terminal-ansi-bright-red: var(--nc-error-soft);
|
|
311
|
-
--nc-terminal-ansi-bright-green: var(--nc-dark-cyan-soft);
|
|
312
|
-
--nc-terminal-ansi-bright-yellow: var(--nc-warning);
|
|
313
|
-
--nc-terminal-ansi-bright-blue: var(--nc-dark-cyan);
|
|
314
|
-
--nc-terminal-ansi-bright-magenta: var(--nc-flag-red);
|
|
315
|
-
--nc-terminal-ansi-bright-cyan: var(--nc-dark-cyan-soft);
|
|
316
|
-
--nc-terminal-ansi-bright-white: var(--nc-on-primary);
|
|
317
|
-
|
|
318
|
-
--nc-model-provider-surface: var(--muted);
|
|
319
|
-
--nc-model-capability-surface: var(--accent);
|
|
320
|
-
--nc-model-capability-border: var(--nc-dark-cyan);
|
|
321
|
-
--nc-model-context-meter: var(--nc-warning);
|
|
322
|
-
--nc-model-cost-warning: var(--nc-warning);
|
|
323
|
-
--nc-model-rate-limit: var(--nc-error-soft);
|
|
324
|
-
|
|
325
|
-
--nc-plugin-permission-safe: var(--nc-dark-cyan-soft);
|
|
326
|
-
--nc-plugin-permission-review: var(--nc-warning);
|
|
327
|
-
--nc-plugin-permission-risk: var(--nc-flag-red);
|
|
328
|
-
--nc-plugin-permission-denied: var(--nc-error-soft);
|
|
329
|
-
--nc-plugin-permission-surface: var(--muted);
|
|
330
|
-
--nc-plugin-permission-foreground: var(--foreground);
|
|
331
|
-
}
|
|
332
|
-
|
|
333
62
|
/*
|
|
334
63
|
* The design-system CSS components (.nc-chat-thread, .nc-chat-bubble-*,
|
|
335
64
|
* .nc-artifact-preview, .nc-approval-gate, .nc-tool-call-trace,
|
|
336
65
|
* .nc-usage-meter, .nc-run-timeline, .nc-memory-item, .nc-handoff-banner, …)
|
|
337
66
|
* paint from the raw --nc-canvas/ink/body/line/canvas-soft/muted/warning
|
|
338
|
-
* palette. The generated
|
|
339
|
-
*
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
67
|
+
* palette. The generated mode layer remaps that surface palette alongside every
|
|
68
|
+
* other authored dark pair, so nc-* CSS components need no local mode selectors.
|
|
69
|
+
*/
|
|
70
|
+
|
|
71
|
+
/*
|
|
72
|
+
* ansi-to-react emits stable classes when Terminal enables `useClasses`.
|
|
73
|
+
* Terminal is an intentionally fixed-dark technology surface, so this adapter
|
|
74
|
+
* maps those protocol classes directly to canonical dark design tokens. It does
|
|
75
|
+
* not declare a parallel product-token hierarchy.
|
|
343
76
|
*/
|
|
77
|
+
[data-slot="terminal"] .ansi-black-fg {
|
|
78
|
+
color: var(--nc-dark-muted);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
[data-slot="terminal"] .ansi-red-fg {
|
|
82
|
+
color: var(--nc-dark-error);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
[data-slot="terminal"] .ansi-green-fg {
|
|
86
|
+
color: var(--nc-dark-success);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
[data-slot="terminal"] .ansi-yellow-fg {
|
|
90
|
+
color: var(--nc-dark-warning);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
[data-slot="terminal"] .ansi-blue-fg {
|
|
94
|
+
color: var(--nc-dark-info);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
[data-slot="terminal"] .ansi-magenta-fg {
|
|
98
|
+
color: var(--nc-dark-chart-6);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
[data-slot="terminal"] .ansi-cyan-fg {
|
|
102
|
+
color: var(--nc-dark-cyan);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
[data-slot="terminal"] .ansi-white-fg {
|
|
106
|
+
color: var(--nc-dark-body);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
[data-slot="terminal"] .ansi-bright-black-fg {
|
|
110
|
+
color: var(--nc-dark-body);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
[data-slot="terminal"] .ansi-bright-red-fg {
|
|
114
|
+
color: var(--nc-dark-error-deep);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
[data-slot="terminal"] .ansi-bright-green-fg {
|
|
118
|
+
color: var(--nc-dark-link-deep);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
[data-slot="terminal"] .ansi-bright-yellow-fg {
|
|
122
|
+
color: var(--nc-dark-warning-deep);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
[data-slot="terminal"] .ansi-bright-blue-fg {
|
|
126
|
+
color: var(--nc-dark-info-deep);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
[data-slot="terminal"] .ansi-bright-magenta-fg {
|
|
130
|
+
color: var(--nc-dark-chart-seq-3);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
[data-slot="terminal"] .ansi-bright-cyan-fg {
|
|
134
|
+
color: var(--nc-dark-cyan-soft);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
[data-slot="terminal"] .ansi-bright-white-fg {
|
|
138
|
+
color: var(--nc-dark-ink);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
[data-slot="terminal"] .ansi-black-bg {
|
|
142
|
+
background-color: var(--nc-dark-canvas);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
[data-slot="terminal"] .ansi-red-bg {
|
|
146
|
+
background-color: var(--nc-dark-error);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
[data-slot="terminal"] .ansi-green-bg {
|
|
150
|
+
background-color: var(--nc-dark-success);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
[data-slot="terminal"] .ansi-yellow-bg {
|
|
154
|
+
background-color: var(--nc-dark-warning);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
[data-slot="terminal"] .ansi-blue-bg {
|
|
158
|
+
background-color: var(--nc-dark-info);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
[data-slot="terminal"] .ansi-magenta-bg {
|
|
162
|
+
background-color: var(--nc-dark-chart-6);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
[data-slot="terminal"] .ansi-cyan-bg {
|
|
166
|
+
background-color: var(--nc-dark-cyan);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
[data-slot="terminal"] .ansi-white-bg {
|
|
170
|
+
background-color: var(--nc-dark-body);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
[data-slot="terminal"] .ansi-bright-black-bg {
|
|
174
|
+
background-color: var(--nc-dark-body);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
[data-slot="terminal"] .ansi-bright-red-bg {
|
|
178
|
+
background-color: var(--nc-dark-error-deep);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
[data-slot="terminal"] .ansi-bright-green-bg {
|
|
182
|
+
background-color: var(--nc-dark-link-deep);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
[data-slot="terminal"] .ansi-bright-yellow-bg {
|
|
186
|
+
background-color: var(--nc-dark-warning-deep);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
[data-slot="terminal"] .ansi-bright-blue-bg {
|
|
190
|
+
background-color: var(--nc-dark-info-deep);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
[data-slot="terminal"] .ansi-bright-magenta-bg {
|
|
194
|
+
background-color: var(--nc-dark-chart-seq-3);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
[data-slot="terminal"] .ansi-bright-cyan-bg {
|
|
198
|
+
background-color: var(--nc-dark-cyan-soft);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
[data-slot="terminal"] .ansi-bright-white-bg {
|
|
202
|
+
background-color: var(--nc-dark-ink);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
[data-slot="terminal"] .ansi-black-bg:not([class*="-fg"]) {
|
|
206
|
+
color: var(--nc-dark-ink);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
[data-slot="terminal"]
|
|
210
|
+
:is(
|
|
211
|
+
.ansi-red-bg,
|
|
212
|
+
.ansi-green-bg,
|
|
213
|
+
.ansi-yellow-bg,
|
|
214
|
+
.ansi-blue-bg,
|
|
215
|
+
.ansi-magenta-bg,
|
|
216
|
+
.ansi-cyan-bg,
|
|
217
|
+
.ansi-white-bg,
|
|
218
|
+
.ansi-bright-black-bg,
|
|
219
|
+
.ansi-bright-red-bg,
|
|
220
|
+
.ansi-bright-green-bg,
|
|
221
|
+
.ansi-bright-yellow-bg,
|
|
222
|
+
.ansi-bright-blue-bg,
|
|
223
|
+
.ansi-bright-magenta-bg,
|
|
224
|
+
.ansi-bright-cyan-bg,
|
|
225
|
+
.ansi-bright-white-bg
|
|
226
|
+
):not([class*="-fg"]) {
|
|
227
|
+
color: var(--nc-dark-canvas);
|
|
228
|
+
}
|
|
344
229
|
|
|
345
230
|
[data-nc-code-block-body] {
|
|
346
231
|
background-color: var(--shiki-code-block-light-bg, var(--background));
|
|
@@ -11,8 +11,9 @@ The React agent layer is the React face of the design-system Agentic Work
|
|
|
11
11
|
Surface CSS families (`design-system/DESIGN.md`). Each component consumes its
|
|
12
12
|
`nc-*` family class for identity — surface, border, chrome — and adds Tailwind
|
|
13
13
|
only for layout and spacing; the CSS family owns any value it already sets. The
|
|
14
|
-
families
|
|
15
|
-
|
|
14
|
+
families arrive through the UI package's complete React stylesheet interface.
|
|
15
|
+
Consumer setup lives in [`consuming-cross-repo.md`](consuming-cross-repo.md);
|
|
16
|
+
the component styling invariant lives in [`contract.md`](contract.md).
|
|
16
17
|
|
|
17
18
|
- `AgentThread` -> `nc-chat-thread`.
|
|
18
19
|
- `AgentMessage` text bubbles -> `nc-chat-bubble-user` / `nc-chat-bubble-agent`;
|
|
@@ -34,7 +35,7 @@ imports alongside `@nadicodeai/ui/globals.css`.
|
|
|
34
35
|
- `AgentComposer` renders a controlled or uncontrolled input surface with
|
|
35
36
|
attachments, queue panel, submit or stop control, and slash or mention slots.
|
|
36
37
|
- `AgentToolApproval` renders the approval choices `run`, `deny`, `session`,
|
|
37
|
-
and `always` with stable
|
|
38
|
+
and `always` with stable action meanings.
|
|
38
39
|
- `ArtifactPanel` renders text, code, diff, terminal summary, preview,
|
|
39
40
|
stack-trace, and test-result artifacts.
|
|
40
41
|
- `FilesPreview` and `ProjectFileTree` render a serializable project tree and
|
|
@@ -113,9 +114,9 @@ const redactedTool = {
|
|
|
113
114
|
} as const
|
|
114
115
|
```
|
|
115
116
|
|
|
116
|
-
## Approval
|
|
117
|
+
## Approval Meanings
|
|
117
118
|
|
|
118
|
-
`AgentToolApproval` emits both the user-facing choice and a
|
|
119
|
+
`AgentToolApproval` emits both the user-facing choice and a stable action value:
|
|
119
120
|
|
|
120
121
|
- `run` -> `approve-once`
|
|
121
122
|
- `deny` -> `reject`
|