tosijs-ui 1.6.9 → 1.6.10

package/README.md

@@ -67,7 +67,7 @@ npm add tosijs-ui
 Then import the component `elementCreator` and create elements. A `tosijs`
 `elementCreator` is syntax sugar around `document.createElement()`.
 
-```ts
+```typescript
 import { tosiTable } from 'tosijs-ui'
 
 document.body.append(tosiTable())

package/dist/doc-browser.js

@@ -274,6 +274,40 @@ export function createDocBrowser(options) {
                 ? document.location.search.substring(1).split('&')[0]
                 : '';
     };
+    // Resolve a content-link anchor to one of our docs' filenames, in either the
+    // legacy `?filename` form or a clean `/slug/` path — or null for external
+    // links, in-page anchors, mailto:, downloads, etc. Used to navigate internal
+    // doc links client-side (via go()) instead of triggering a full page reload,
+    // and to canonicalize their hrefs for the current routing mode.
+    const docFilenameForHref = (anchor) => {
+        const raw = anchor.getAttribute('href') || '';
+        if (raw === '' || raw.startsWith('#'))
+            return null;
+        let url;
+        try {
+            url = new URL(raw, document.location.href);
+        }
+        catch {
+            return null;
+        }
+        if (url.origin !== document.location.origin)
+            return null; // external
+        const known = (filename) => docs.some((doc) => doc.filename === filename) ? filename : null;
+        // Legacy `?filename` form: a single bare filename, not a real query string.
+        const query = url.search.replace(/^\?/, '');
+        if (query !== '' && !query.includes('=') && !query.includes('&')) {
+            const filename = known(decodeURIComponent(query));
+            if (filename)
+                return filename;
+        }
+        // Clean `/slug/` path form (only meaningful when slugs are in play).
+        if (!memoryRouting && routing !== 'query') {
+            const filename = known(filenameForPath(url.pathname, slugMap));
+            if (filename)
+                return filename;
+        }
+        return null;
+    };
     const docName = filenameFromLocation() || docs[0]?.filename || 'README.md';
     const currentDoc = docs.find((doc) => doc.filename === docName) || docs[0];
     const { app } = tosi({
@@ -512,6 +546,20 @@ export function createDocBrowser(options) {
     // matches the initial doc. A memory-routed embed's initial doc
     // (initialRoute/docs[0]) has no relation to whatever happens to sit inside the
     // host element (often an empty placeholder), so always render it fresh.
+    // Canonicalize internal content links to the current routing mode's href and
+    // tag them — so copy-link / right-click / no-JS land on the right page, and a
+    // left-click can be short-circuited to client-side nav. Authored docs use the
+    // routing-agnostic `?filename` form (the only one resolvable in every mode);
+    // this rewrites them to `/slug/` on the static path-routed site, etc.
+    const rewriteContentLinks = () => {
+        for (const anchor of docContent.querySelectorAll('a')) {
+            const filename = docFilenameForHref(anchor);
+            if (filename !== null) {
+                anchor.setAttribute('href', hrefFor(filename));
+                anchor.dataset.docLink = filename;
+            }
+        }
+    };
     let adoptInitialContent = contentElement !== undefined && !memoryRouting;
     const showDoc = (doc) => {
         if (adoptInitialContent) {
@@ -520,6 +568,7 @@ export function createDocBrowser(options) {
         else {
             docContent.innerHTML = renderDocMarkdown(doc.text);
         }
+        rewriteContentLinks();
         // Stamp each example with its source file (for the source↔doc map). doc.path
         // is the extracted file (.md, or a source file with doc comments).
         LiveExample.insertExamples(docContent, context, doc.path || undefined);
@@ -554,6 +603,28 @@ export function createDocBrowser(options) {
         }
         navigateTo(filename);
     };
+    // Intercept clicks on internal doc links anywhere in the rendered content so
+    // they navigate client-side instead of reloading the page. Plain left-clicks
+    // only — modified clicks / middle-clicks / new-tab / download links fall
+    // through to the browser. Works for both freshly-rendered and statically
+    // pre-rendered (adopted) content, resolving the href at click time.
+    docContent.addEventListener('click', (event) => {
+        if (event.defaultPrevented ||
+            event.button !== 0 ||
+            event.metaKey ||
+            event.ctrlKey ||
+            event.shiftKey ||
+            event.altKey)
+            return;
+        const anchor = event.target.closest('a');
+        if (!anchor || anchor.target === '_blank' || anchor.hasAttribute('download'))
+            return;
+        const filename = docFilenameForHref(anchor);
+        if (filename === null)
+            return;
+        event.preventDefault();
+        go(filename);
+    });
     // ── Edit page source (Foundation B / #4) ──────────────────────────────────
     // The "view source" affordance opens a menu: edit the whole source file in a
     // code editor that fills the content area, preview the result in-browser, and
@@ -656,6 +727,7 @@ export function createDocBrowser(options) {
         editUI.view = view;
         if (view === 'preview') {
             docContent.innerHTML = renderDocMarkdown(docMarkdownFromSource(editUI.editor.value, editUI.doc.path));
+            rewriteContentLinks();
             LiveExample.insertExamples(docContent, context, editUI.doc.path || undefined);
         }
         else if (view === 'diff') {

package/dist/doc-system/routing.d.ts

@@ -12,6 +12,14 @@ export interface DocLike {
 export declare function buildSlugMap(docs: DocLike[]): Record<string, string>;
 /** site-root-relative path for a slug: '' -> '/', 'button' -> '/button/' */
 export declare function pathForSlug(slug: string): string;
+/**
+ * Rewrite legacy `?<filename>` (and `/?<filename>`) doc links in an HTML string
+ * to resolved hrefs. Used by the static generator so the pre-rendered pages have
+ * clean links for no-JS readers, crawlers, and the brief window before the
+ * doc-browser hydrates. `hrefFor` returns the target href for a known filename,
+ * or null to leave the link untouched (unknown filename / a real query string).
+ */
+export declare function rewriteDocLinks(html: string, hrefFor: (filename: string) => string | null): string;
 /**
  * Map a legacy `?<filename>` query (the old doc-browser's query-param routing,
  * e.g. `?button.ts`, `?README.md`) to the new slug path (`/button/`, `/`).

package/dist/doc-system/routing.js

@@ -46,6 +46,19 @@ export function buildSlugMap(docs) {
 export function pathForSlug(slug) {
     return slug === '' ? '/' : `/${slug}/`;
 }
+/**
+ * Rewrite legacy `?<filename>` (and `/?<filename>`) doc links in an HTML string
+ * to resolved hrefs. Used by the static generator so the pre-rendered pages have
+ * clean links for no-JS readers, crawlers, and the brief window before the
+ * doc-browser hydrates. `hrefFor` returns the target href for a known filename,
+ * or null to leave the link untouched (unknown filename / a real query string).
+ */
+export function rewriteDocLinks(html, hrefFor) {
+    return html.replace(/href="\/?\?([^"&=]+)"/g, (match, query) => {
+        const href = hrefFor(decodeURIComponent(query));
+        return href === null ? match : `href="${href}"`;
+    });
+}
 /**
  * Map a legacy `?<filename>` query (the old doc-browser's query-param routing,
  * e.g. `?button.ts`, `?README.md`) to the new slug path (`/button/`, `/`).

package/dist/doc-system/site/generate-site.js

@@ -10,7 +10,7 @@ the IIFE bundle loads.
 Build-time only (uses Bun.write). Shares slug + markdown rendering with the runtime
 component (src/doc-system/*) so static and hydrated output agree.
 */
-import { buildSlugMap, pathForSlug } from '../routing';
+import { buildSlugMap, pathForSlug, rewriteDocLinks } from '../routing';
 import { buildNavTree, navOpenPath } from '../nav-tree';
 import { renderDocMarkdown, docDescription } from '../render';
 const escapeAttr = (s) => s
@@ -93,7 +93,12 @@ function pageHtml(doc, config, slugMap, configAttr) {
         : doc.keywords || '';
     const canonical = baseUrl + withBase(basePath, pathForSlug(slugMap[doc.filename]));
     const imageAbs = absUrl(baseUrl, withBase(basePath, doc.image || config.ogImage || ''));
-    const body = renderDocMarkdown(doc.text);
+    // Rewrite legacy `?filename` content links to clean `/slug/` paths so the
+    // static HTML is correct for no-JS readers and crawlers (the doc-browser also
+    // does this client-side after hydration).
+    const body = rewriteDocLinks(renderDocMarkdown(doc.text), (filename) => slugMap[filename] !== undefined
+        ? withBase(basePath, pathForSlug(slugMap[filename]))
+        : null);
     const nav = navHtml(config.docs, slugMap, doc.filename, basePath);
     const navbar = linkListHtml('doc-navbar', config.navbarLinks);
     const jsonLd = baseUrl