@veluai/velu 0.2.28 → 0.2.29
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/runtime/velu-ui/base.css +87 -0
- package/src/runtime/App.jsx +7 -0
package/package.json
CHANGED
package/runtime/velu-ui/base.css
CHANGED
|
@@ -243,6 +243,93 @@
|
|
|
243
243
|
margin-block-start: var(--s5);
|
|
244
244
|
}
|
|
245
245
|
|
|
246
|
+
/* ── Prose block elements ─────────────────────────────────────────────────
|
|
247
|
+
MDX compiles Markdown tables, lists, blockquotes, inline code, and links to
|
|
248
|
+
bare HTML elements. The rhythm rules above only handle spacing + headings,
|
|
249
|
+
so without these an authored table renders borderless and body links fall
|
|
250
|
+
back to the browser default. Scoped to .velu-prose so component internals
|
|
251
|
+
keep their own styling. */
|
|
252
|
+
|
|
253
|
+
/* Tables — hairline grid with a shaded header. GitHub-style block scroll so a
|
|
254
|
+
wide table scrolls horizontally instead of breaking the reading column. */
|
|
255
|
+
.velu-prose table {
|
|
256
|
+
display: block;
|
|
257
|
+
width: max-content;
|
|
258
|
+
max-width: 100%;
|
|
259
|
+
overflow-x: auto;
|
|
260
|
+
border-collapse: collapse;
|
|
261
|
+
border: var(--border-width) solid var(--border-color);
|
|
262
|
+
font-size: var(--f-body);
|
|
263
|
+
}
|
|
264
|
+
.velu-prose :is(th, td) {
|
|
265
|
+
padding: var(--s-1) var(--s0);
|
|
266
|
+
border: var(--border-width) solid var(--border-color);
|
|
267
|
+
text-align: start;
|
|
268
|
+
vertical-align: top;
|
|
269
|
+
}
|
|
270
|
+
.velu-prose thead th {
|
|
271
|
+
background: var(--surface-color);
|
|
272
|
+
font-weight: var(--weight-semibold);
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
/* Lists — markers + indentation and a comfortable per-item rhythm. */
|
|
276
|
+
.velu-prose :is(ul, ol) {
|
|
277
|
+
padding-inline-start: var(--s3);
|
|
278
|
+
}
|
|
279
|
+
.velu-prose ul {
|
|
280
|
+
list-style: disc;
|
|
281
|
+
}
|
|
282
|
+
.velu-prose ol {
|
|
283
|
+
list-style: decimal;
|
|
284
|
+
}
|
|
285
|
+
.velu-prose li::marker {
|
|
286
|
+
color: var(--muted-color);
|
|
287
|
+
}
|
|
288
|
+
.velu-prose li + li {
|
|
289
|
+
margin-block-start: var(--s-1);
|
|
290
|
+
}
|
|
291
|
+
.velu-prose li > :is(ul, ol) {
|
|
292
|
+
margin-block-start: var(--s-1);
|
|
293
|
+
}
|
|
294
|
+
/* GFM task lists — drop the bullet so the checkbox is the only marker. */
|
|
295
|
+
.velu-prose :is(ul, ol).contains-task-list {
|
|
296
|
+
padding-inline-start: var(--s0);
|
|
297
|
+
}
|
|
298
|
+
.velu-prose .task-list-item {
|
|
299
|
+
list-style: none;
|
|
300
|
+
}
|
|
301
|
+
.velu-prose .task-list-item input[type='checkbox'] {
|
|
302
|
+
margin-inline-end: var(--s-2);
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
/* Inline code — a subtle chip, distinct from fenced <pre> code blocks. */
|
|
306
|
+
.velu-prose :not(pre) > code {
|
|
307
|
+
padding: 0.12em 0.4em;
|
|
308
|
+
border-radius: var(--radius-sm);
|
|
309
|
+
background: var(--surface-color);
|
|
310
|
+
font-size: 0.88em;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
/* Links in body text — accent-coloured. Scoped to text containers so
|
|
314
|
+
component internals (cards, callouts, …) keep their own link styling. */
|
|
315
|
+
.velu-prose :is(p, li, td, th) a {
|
|
316
|
+
color: var(--accent-color);
|
|
317
|
+
text-decoration: underline;
|
|
318
|
+
text-underline-offset: 0.15em;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
/* Blockquotes + horizontal rules. */
|
|
322
|
+
.velu-prose blockquote {
|
|
323
|
+
margin-inline: 0;
|
|
324
|
+
padding-inline-start: var(--s1);
|
|
325
|
+
border-inline-start: 2px solid var(--border-color);
|
|
326
|
+
color: var(--muted-color);
|
|
327
|
+
}
|
|
328
|
+
.velu-prose hr {
|
|
329
|
+
border: none;
|
|
330
|
+
border-block-start: var(--border-width) solid var(--border-color);
|
|
331
|
+
}
|
|
332
|
+
|
|
246
333
|
/* Discreet thin scrollbar with a tokenised colour in every state — applied
|
|
247
334
|
GLOBALLY (the `*` selector) so every scrollable element inherits it by
|
|
248
335
|
default: the chatbot, dialogs, and any future component, with no
|
package/src/runtime/App.jsx
CHANGED
|
@@ -943,6 +943,13 @@ function DocsPage() {
|
|
|
943
943
|
React.useEffect(() => {
|
|
944
944
|
setDrawerOpen(false);
|
|
945
945
|
setNavOpen(false);
|
|
946
|
+
// Reset scroll to the top of the new page. Client-side navigation (sidebar,
|
|
947
|
+
// prev/next, breadcrumbs) otherwise keeps the previous scroll position, so a
|
|
948
|
+
// new page opens part-way down. Skip when the URL carries a hash so a deep
|
|
949
|
+
// link to a section still lands on that heading.
|
|
950
|
+
if (typeof window !== 'undefined' && !window.location.hash) {
|
|
951
|
+
window.scrollTo(0, 0);
|
|
952
|
+
}
|
|
946
953
|
}, [pathname]);
|
|
947
954
|
// Mobile drawer's section picker = the resolved tabs (top-level
|
|
948
955
|
// navigation), so it mirrors the desktop tabs row instead of a
|