@veluai/velu 0.2.28 → 0.2.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veluai/velu",
-  "version": "0.2.28",
+  "version": "0.2.30",
   "type": "module",
   "bin": "./dist/cli.js",
   "publishConfig": {

package/runtime/velu-ui/base.css

@@ -243,6 +243,110 @@
   margin-block-start: var(--s5);
 }
 
+/* ── Prose block elements ─────────────────────────────────────────────────
+   MDX compiles Markdown tables, lists, blockquotes, inline code, and links to
+   bare HTML elements. The rhythm rules above only handle spacing + headings,
+   so without these an authored table renders borderless and body links fall
+   back to the browser default. Scoped to .velu-prose so component internals
+   keep their own styling. */
+
+/* Tables — hairline grid with a shaded header. GitHub-style block scroll so a
+   wide table scrolls horizontally instead of breaking the reading column. */
+.velu-prose table {
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow-x: auto;
+  /* `separate` (not `collapse`): collapsed borders round a 0.5px hairline up
+     to a full device pixel, so the grid would read heavier than the component
+     boxes (cards, code blocks) that use the same --border-width. Separate mode
+     draws each line as a normal element border, matching them exactly. */
+  border-collapse: separate;
+  border-spacing: 0;
+  border: var(--border-width) solid var(--border-color);
+  /* Rounded corners to match the component boxes (code blocks, accordions).
+     `overflow-x: auto` clips the header shading to the radius. */
+  border-radius: var(--radius-sm);
+  font-size: var(--f-body);
+}
+/* Each cell draws only its top + inline-start line; the table's own border
+   closes the outer top/left edges. Shared single lines → no doubling. */
+.velu-prose :is(th, td) {
+  padding: var(--s-1) var(--s0);
+  border-block-start: var(--border-width) solid var(--border-color);
+  border-inline-start: var(--border-width) solid var(--border-color);
+  text-align: start;
+  vertical-align: top;
+}
+.velu-prose tr:first-child > :is(th, td) {
+  border-block-start: 0;
+}
+.velu-prose :is(th, td):first-child {
+  border-inline-start: 0;
+}
+.velu-prose thead th {
+  background: var(--surface-color);
+  font-weight: var(--weight-semibold);
+}
+
+/* Lists — markers + indentation and a comfortable per-item rhythm. */
+.velu-prose :is(ul, ol) {
+  padding-inline-start: var(--s3);
+}
+.velu-prose ul {
+  list-style: disc;
+}
+.velu-prose ol {
+  list-style: decimal;
+}
+.velu-prose li::marker {
+  color: var(--muted-color);
+}
+.velu-prose li + li {
+  margin-block-start: var(--s-1);
+}
+.velu-prose li > :is(ul, ol) {
+  margin-block-start: var(--s-1);
+}
+/* GFM task lists — drop the bullet so the checkbox is the only marker. */
+.velu-prose :is(ul, ol).contains-task-list {
+  padding-inline-start: var(--s0);
+}
+.velu-prose .task-list-item {
+  list-style: none;
+}
+.velu-prose .task-list-item input[type='checkbox'] {
+  margin-inline-end: var(--s-2);
+}
+
+/* Inline code — a subtle chip, distinct from fenced <pre> code blocks. */
+.velu-prose :not(pre) > code {
+  padding: 0.12em 0.4em;
+  border-radius: var(--radius-sm);
+  background: var(--surface-color);
+  font-size: 0.88em;
+}
+
+/* Links in body text — accent-coloured. Scoped to text containers so
+   component internals (cards, callouts, …) keep their own link styling. */
+.velu-prose :is(p, li, td, th) a {
+  color: var(--accent-color);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+/* Blockquotes + horizontal rules. */
+.velu-prose blockquote {
+  margin-inline: 0;
+  padding-inline-start: var(--s1);
+  border-inline-start: 2px solid var(--border-color);
+  color: var(--muted-color);
+}
+.velu-prose hr {
+  border: none;
+  border-block-start: var(--border-width) solid var(--border-color);
+}
+
 /* Discreet thin scrollbar with a tokenised colour in every state — applied
    GLOBALLY (the `*` selector) so every scrollable element inherits it by
    default: the chatbot, dialogs, and any future component, with no

package/src/runtime/App.jsx

@@ -943,6 +943,13 @@ function DocsPage() {
   React.useEffect(() => {
     setDrawerOpen(false);
     setNavOpen(false);
+    // Reset scroll to the top of the new page. Client-side navigation (sidebar,
+    // prev/next, breadcrumbs) otherwise keeps the previous scroll position, so a
+    // new page opens part-way down. Skip when the URL carries a hash so a deep
+    // link to a section still lands on that heading.
+    if (typeof window !== 'undefined' && !window.location.hash) {
+      window.scrollTo(0, 0);
+    }
   }, [pathname]);
   // Mobile drawer's section picker = the resolved tabs (top-level
   // navigation), so it mirrors the desktop tabs row instead of a