@veluai/velu 0.2.31 → 0.2.33

package/package.json

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

package/runtime/velu-ui/components/Chatbot.jsx

@@ -179,8 +179,9 @@ function citeTitle(s) {
   return seg.replace(/[-_]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
 }
 
-/* Source click: SPA-navigate same-origin targets via onNavigate (keeps the chat
-   panel open + scrolls to the heading); otherwise let the <a href> navigate. */
+/* Source click: SPA-navigate same-origin targets via onNavigate (host decides
+   whether to keep the panel open — desktop multi-cite hops vs mobile sheet
+   close); otherwise let the <a href> navigate. */
 function onSourceClick(e, s, onNavigate) {
   const href = sourceHref(s);
   if (!href) { e.preventDefault(); return; }
@@ -189,7 +190,15 @@ function onSourceClick(e, s, onNavigate) {
     const u = new URL(href, window.location.origin);
     if (u.origin === window.location.origin) {
       e.preventDefault();
-      onNavigate(u.pathname + u.search + u.hash);
+      // Prefer the docs route path (e.g. "/installation") over the absolute
+      // URL pathname ("/docs/installation"). React Router's basename is
+      // already "/docs" on subpath hosts — passing the full pathname makes
+      // navigate() produce /docs/docs/... and 404.
+      const route =
+        s?.path && s.path.startsWith('/')
+          ? `${s.path}${u.search || ''}${u.hash || ''}`
+          : `${u.pathname}${u.search}${u.hash}`;
+      onNavigate(route);
     }
   } catch { /* malformed — fall back to href */ }
 }

package/src/runtime/App.jsx

@@ -71,6 +71,13 @@ const IS_DEV_PREVIEW = import.meta.env.DEV;
 // root-relative and need this prefix to resolve under a subpath.
 const BASE_PATH = (import.meta.env.BASE_URL || '/').replace(/\/$/, '');
 
+function docsAuthActionUrl(action) {
+  const url = new URL(window.location.href);
+  url.searchParams.set('__velu_auth', action);
+  url.hash = '';
+  return url.toString();
+}
+
 // Flatten a sidebar section's items (which may nest into sub-groups) into the
 // flat endpoint list <ApiSidebar> wants. API tabs are flat in practice; this
 // only guards the rare case of a normal nested group living beside generated
@@ -782,7 +789,10 @@ function DocsPage() {
   // (dev preview, or a site that hasn't enabled the assistant).
   const assistant = React.useMemo(() => {
     if (IS_DEV_PREVIEW) return null;
-    const apiBase = site.assistant?.apiBase;
+    const configuredBase = site.assistant?.apiBase;
+    const apiBase = configuredBase === '__VELU_SAME_ORIGIN__'
+      ? `${window.location.origin}${BASE_PATH}`
+      : configuredBase;
     if (!apiBase) return null;
     return createDocsAssistant({ apiBase, host: site.assistant?.host });
   }, []);
@@ -806,7 +816,10 @@ function DocsPage() {
   // the widget stays purely visual.
   const pageFeedback = React.useMemo(() => {
     if (IS_DEV_PREVIEW) return null;
-    const apiBase = site.assistant?.apiBase;
+    const configuredBase = site.assistant?.apiBase;
+    const apiBase = configuredBase === '__VELU_SAME_ORIGIN__'
+      ? `${window.location.origin}${BASE_PATH}`
+      : configuredBase;
     if (!apiBase) return null;
     return createPageFeedback({ apiBase, host: site.assistant?.host });
   }, []);
@@ -1095,6 +1108,27 @@ function DocsPage() {
   // Header top-right actions, built from velu.json's `navbar`: secondary
   // `links` (plain text links) then the `primary` CTA (a filled button, or an
   // outlined GitHub button). Empty when unconfigured — no placeholder buttons.
+  const [privateAccess, setPrivateAccess] = React.useState(false);
+  React.useEffect(() => {
+    if (IS_DEV_PREVIEW) return undefined;
+    let alive = true;
+    fetch(docsAuthActionUrl('session'), { credentials: 'same-origin' })
+      .then((response) => response.ok ? response.json() : null)
+      .then((value) => { if (alive) setPrivateAccess(value?.private && value?.authenticated); })
+      .catch(() => {});
+    return () => { alive = false; };
+  }, []);
+
+  const logoutPrivateAccess = React.useCallback(async () => {
+    const response = await fetch(docsAuthActionUrl('logout'), {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: { 'content-type': 'application/json' },
+      body: '{}',
+    });
+    if (response.ok) window.location.reload();
+  }, []);
+
   const navActions = [];
   for (const l of site.navbar?.links ?? []) {
     navActions.push({
@@ -1115,6 +1149,13 @@ function DocsPage() {
       external: p.external,
     });
   }
+  if (privateAccess) {
+    navActions.push({
+      label: 'Log out',
+      onClick: logoutPrivateAccess,
+      kind: 'outlined',
+    });
+  }
 
   const footerRef = React.useRef(null);
   const [footerOverlap, setFooterOverlap] = React.useState(0);
@@ -1277,6 +1318,16 @@ function DocsPage() {
              `inset-block-end: 0` override still wins. */
           '--velu-aside-bottom': `calc(${footerOverlap}px + var(--s4))`,
         }}
+        // Close the mobile drawer as soon as a nav link is activated.
+        // The pathname effect below also closes it on route change; this
+        // covers same-route hash jumps and feels snappier on touch devices.
+        onClick={(e) => {
+          if (!drawerOpen) return;
+          const a = e.target.closest?.('a[href]');
+          if (!a) return;
+          setDrawerOpen(false);
+          setNavOpen(false);
+        }}
       >
         {/* Drawer body — Stack with 32px gap composes the slots
             (topbar / tab-dropdown / context / nav). The aside is a flex
@@ -1732,7 +1783,27 @@ function DocsPage() {
         loadConversation={assistant?.loadConversation}
         suggestions={site.assistant?.suggestions}
         onNavigate={(to) => {
-          navigate(to);
+          // Strip the Vite base path so react-router basename is not applied
+          // twice (e.g. "/docs/installation" → "/installation" when
+          // BASE_PATH="/docs"). Absolute Ask-AI citation URLs include /docs.
+          let dest = to || '/';
+          if (BASE_PATH) {
+            if (dest === BASE_PATH || dest === `${BASE_PATH}/`) dest = '/';
+            else if (dest.startsWith(`${BASE_PATH}/`)) {
+              dest = dest.slice(BASE_PATH.length) || '/';
+            }
+          }
+          navigate(dest);
+          // Ask AI becomes a bottom sheet below 1024px (chatbot.css) and covers
+          // the article — close it so the user lands on the linked page, not
+          // behind the sheet. Desktop keeps the panel open so multi-cite hops
+          // stay convenient.
+          if (
+            typeof window !== 'undefined' &&
+            window.matchMedia('(max-width: 1024px)').matches
+          ) {
+            setChatOpen(false);
+          }
           // After the destination page mounts, scroll to the cited section
           // (its heading id) — or the top of the page when there's no anchor.
           const hash = to.includes('#') ? to.slice(to.indexOf('#') + 1) : '';

package/src/runtime/PrivateLoginPage.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { PageHeader, ThemeToggle } from 'velu-ui';
+
+/**
+ * Static private-reader shell. This is rendered by the same Vite SSR bundle as
+ * normal documentation pages, so its header, logo, and theme control stay in
+ * lockstep with velu-ui. Authentication behavior is attached by the generated
+ * page's nonce-bearing script because the protected client bundle is not
+ * available before login.
+ */
+export default function PrivateLoginPage({ site }) {
+  const logo = site.logo
+    ? {
+        light: '?__velu_auth=logo-light',
+        dark: '?__velu_auth=logo-dark',
+        mono: site.logo.mono,
+      }
+    : undefined;
+
+  return (
+    <div className="velu-private-login">
+      <PageHeader
+        brand={{ label: site.name, logo }}
+        trailing={<ThemeToggle id="theme-toggle" />}
+      />
+      <main className="velu-private-login__main">
+        <form className="velu-private-login__form" id="form">
+          <h1>Private documentation</h1>
+          <p>Enter your password to access {site.name}.</p>
+          <label htmlFor="password">Password</label>
+          <input
+            id="password"
+            type="password"
+            autoComplete="current-password"
+            maxLength={256}
+            required
+            autoFocus
+          />
+          <div className="velu-private-login__error" id="error" role="alert" />
+          <button className="velu-private-login__continue" type="submit">
+            Continue
+          </button>
+        </form>
+      </main>
+    </div>
+  );
+}

package/src/runtime/server-entry.jsx

@@ -5,7 +5,9 @@ import { StaticRouter } from 'react-router-dom/server';
 // stylesheet in Vite's SSR module graph so dev-server.js can collect and
 // inline it into <head> (flicker-free SSR).
 import 'velu-ui/styles.css';
+import { site } from 'virtual:velu-site';
 import App from './App.jsx';
+import PrivateLoginPage from './PrivateLoginPage.jsx';
 
 // Subpath hosting: mirror the client's basename (from Vite's BASE_URL). The
 // prerender is driven by root-relative route paths ("/foo"), so the location
@@ -22,3 +24,7 @@ export async function render(url) {
     </StaticRouter>
   );
 }
+
+export function renderPrivateLoginPage() {
+  return renderToString(<PrivateLoginPage site={site} />);
+}