tosijs-ui 1.9.0 → 1.9.2

package/CHANGELOG.md

@@ -1,5 +1,88 @@
 # Changelog
 
+## 1.9.2
+
+**Accessibility: every default color pair now meets WCAG AA.** Found by running
+`hj map` (haltija 1.11) over the doc site, which reports a measured contrast ratio per
+node — none of these were visible as wrong to the eye.
+
+| pair | was | now |
+| --- | --- | --- |
+| test widget, running | white on `#fa0` — **1.9:1** | `#2b1a00` on `#fa0` — 8.8:1 |
+| test widget, passed | white on `#0a0` — **3.1:1** | white on `#008a00` — 4.5:1 |
+| `--tosi-accent` as text | `#EE257B` — **4.05:1** on white, 4.3:1 on the page | `#d92270` — 4.6:1 |
+| `--tosi-accent` as a fill | white on `#EE257B` — **4.05:1** | white on `#d92270` — 4.8:1 |
+
+**The brand pink is 9% darker** (`#EE257B` → `#d92270`). It is imperceptible side by side
+and it was the only value that clears AA in *both* directions — as text on the page, and
+as a fill carrying white text. Override `--tosi-accent` if you want the original.
+
+Two more, found by sweeping wider — both in **example code we publish**, which matters
+more than a component default because people copy it: the `.-negative { color: #e44 }` we
+document for negative numbers in tables sat at **3.63:1** (now `#d32f2f`, 4.77:1), and
+`#007AFF` — the accent in every theming example in our docs — was **4.02:1** under white
+text (now `#0064d2`, 5.59:1).
+
+Also fixed: the doc-site brand bar's text was a hand-tuned warm off-white
+(`brandColor.rotate(30).brighten(0.9)` → `#fbeae9`) sitting at **4.09:1** on the brand —
+under AA for the normal-size nav links in it. Every brighten value short of pure white
+also misses, so it now uses `contrasting()`, which picks the readable extreme for whatever
+the brand currently is and cannot drift when the brand moves. Three stale `#EE257B` /
+`#007AFF` fallbacks were still live in `header.ts` and `doc-browser.ts` and now match.
+
+Verified across 8 pages in both themes on haltija 1.11.2: **0 failures, 0 uncertain**.
+
+**The browser-test lane now runs its own private haltija.** It used to reuse any running
+instance and otherwise spawn with `-f`, which reclaims haltija's shared default port and
+kills whatever held it. Both halves were wrong: adopting meant inheriting the *desktop
+app's* window, whose visibility depends on whatever else is on screen — and `hj` rightly
+refuses to drive a hidden tab, since a backgrounded tab throttles `requestAnimationFrame`
+and would produce plausible-but-wrong results. The lane failed roughly two runs in three
+with no programmatic way out. It now takes an isolated instance on an ephemeral port:
+**4/4 runs green**, and a concurrent haltija belonging to someone else survives untouched
+(verified both). Closes #18 and #21.
+
+The test widget's text color is now **paired** with its background rather than hardcoded
+to white. Amber is a genuinely light color: darkening it enough for white text turns it
+brown and stops reading as "in progress", so it keeps its hue and takes dark text, which
+is the conventional warning-badge treatment. New `--tosi-test-text-color-{pass,fail,running}`
+variables if you theme these.
+
+In dark mode the brand color is **brightened** rather than reused: `invertLuminance` flips
+the neutrals but leaves a saturated hue roughly where it was, so a pink dark enough for a
+near-white page landed at 4.4:1 on a near-black one. The hue is the brand; the luminance
+belongs to whatever it sits on.
+
+## 1.9.1
+
+**`tosijs-ui` did not import under Node.** Shipped `dist/` used extensionless relative
+imports (`from './site-config'`), which bun resolves and Node ESM does not — so a Node
+consumer got `Cannot find module` on entry points that had nothing to do with bun. Every
+entry point is affected, and this goes back well before 1.8.0.
+
+Everything shipped now uses explicit `.js` specifiers, which Node requires and every
+bundler accepts. **If you are on Node, upgrade; 1.9.0 and earlier will not resolve.**
+
+Two runtime requirements are unchanged, and are now documented rather than implied — they
+are honest constraints, not bugs, but the failure messages named symptoms rather than
+causes:
+
+| entry point | runtime |
+| --- | --- |
+| `tosijs-ui/site` | **bun** — it shells out, builds and spawns |
+| `tosijs-ui`, `tosijs-ui/<component>` | a **browser** or a bundler targeting one |
+| `tosijs-ui/icon-svg` | anything — deliberately DOM-free |
+
+`engines` now declares bun, and `doc-site-system.md` has a "Runtimes — what runs where"
+section.
+
+**Why four test lanes missed it:** all four run under bun. `test-consumer` packs the real
+tarball, installs it and builds from a foreign cwd — but with bun, so it proved the
+package works for people exactly like us. It now imports every entry point through **Node**
+and asserts the absence of module-resolution errors specifically, separating "packaging is
+broken" from "this needs a DOM / needs bun". Verified against the published 1.9.0: all
+three checks fail on it.
+
 ## 1.9.0
 
 Consumer repairs, remote access, and **authoring: many books from one corpus**.

package/dist/babylon-3d.js

@@ -207,8 +207,8 @@ be used to load `.glb` files. Setting `src` calls this for you on connect.
 */
 /*{ "parent": "Components" }*/
 import { Component as WebComponent, elements } from 'tosijs';
-import { scriptTag } from './via-tag';
-import { icons, svg2DataUrl } from './icons';
+import { scriptTag } from './via-tag.js';
+import { icons, svg2DataUrl } from './icons.js';
 const noop = () => {
     /* do not care */
 };

package/dist/bodymovin-player.js

@@ -103,7 +103,7 @@ Also see the [documentation for advanced interactions](https://lottiefiles.githu
 */
 /*{ "parent": "Components" }*/
 import { Component as WebComponent } from 'tosijs';
-import { scriptTag } from './via-tag';
+import { scriptTag } from './via-tag.js';
 export class BodymovinPlayer extends WebComponent {
     static preferredTagName = 'tosi-lottie';
     static initAttributes = {

package/dist/carousel.js

@@ -57,7 +57,7 @@ This is a minimalist carousel component that supports the usual stuff.
 */
 /*{ "parent": "Components" }*/
 import { Component as WebComponent, elements, vars, } from 'tosijs';
-import { icons } from './icons';
+import { icons } from './icons.js';
 const { button, slot, div } = elements;
 export class TosiCarousel extends WebComponent {
     static preferredTagName = 'tosi-carousel';

package/dist/code-editor.d.ts

@@ -1,6 +1,6 @@
 import { Component as WebComponent, ElementCreator, PartsMap } from 'tosijs';
-import type { CmHandle, TjsAutocompleteConfig } from './code-editor-cm';
-export type { TjsAutocompleteConfig } from './code-editor-cm';
+import type { CmHandle, TjsAutocompleteConfig } from './code-editor-cm.js';
+export type { TjsAutocompleteConfig } from './code-editor-cm.js';
 interface CodeEditorParts extends PartsMap {
     host: HTMLDivElement;
     diffHost: HTMLDivElement;

package/dist/code-editor.js

@@ -65,7 +65,7 @@ won't catch this one.
 */
 /*{ "parent": "Components" }*/
 import { Component as WebComponent, elements, varDefault, } from 'tosijs';
-import { tosiDiff } from './diff';
+import { tosiDiff } from './diff.js';
 const { div } = elements;
 // Warn once per removed member, not once per access — a live-example page holds
 // dozens of editors and a render-loop read would otherwise flood the console.
@@ -286,7 +286,7 @@ export class CodeEditor extends WebComponent {
         if (this._loadPromise === undefined) {
             // Lazy chunk — CodeMirror only enters the bundle here, on first editor use.
             const generation = ++this._loadGeneration;
-            this._loadPromise = import('./code-editor-cm').then(({ createCmEditor }) => {
+            this._loadPromise = import('./code-editor-cm.js').then(({ createCmEditor }) => {
                 // The chunk fetch is async, and the pre-load window is WIDE on a cold fetch —
                 // doc-browser navigation and closeEditor() both remove editors mid-flight. If we
                 // mounted regardless:
@@ -346,7 +346,7 @@ export class CodeEditor extends WebComponent {
         const handle = this._handle;
         if (!handle || !this.isTjsMode())
             return;
-        import('./code-editor-cm')
+        import('./code-editor-cm.js')
             .then(({ loadTjsExtension }) => loadTjsExtension(this._tjsAutocomplete ?? {}))
             .then((ext) => {
             if (ext && this._handle === handle && this.isTjsMode()) {

package/dist/data-table.d.ts

@@ -1,6 +1,6 @@
 import { Component as WebComponent, ElementCreator } from 'tosijs';
-import { SortCallback } from './make-sorter';
-import { ValueRendererType } from './value-renderer';
+import { SortCallback } from './make-sorter.js';
+import { ValueRendererType } from './value-renderer.js';
 export interface ColumnOptions {
     name?: string;
     prop: string;

package/dist/data-table.js

@@ -221,7 +221,7 @@ Numeric types (`number`, `currency`, `fixed`, `percent`, `sci`, `eng`, `bytes`)
 by default; `boolean` centers and renders icons. An explicit `align` — or a `dataCell` —
 always wins. Formatting follows the app locale (`setLocale()`). Numeric cells also get a
 `-negative` or `-zero` state class by value sign, so the red "Change" values above come from
-one CSS rule (`.-negative { color: #e44 }`), no cell renderer.
+one CSS rule (`.-negative { color: #d32f2f }`), no cell renderer.
 
 ```js
 import { tosiTable } from 'tosijs-ui'
@@ -251,7 +251,7 @@ table.value = {
 preview.append(table)
 ```
 ```css
-.preview .-negative { color: #e44; }
+.preview .-negative { color: #d32f2f; }
 .preview .-zero { opacity: 0.45; }
 ```
 
@@ -565,12 +565,12 @@ As well as any column names you want localized.
 */
 /*{ "parent": "Components" }*/
 import { Component as WebComponent, elements, vars, varDefault, tosiValue, getListItem, getListBinding, tosi, } from 'tosijs';
-import { trackDrag } from './track-drag';
-import { icons } from './icons';
-import { valueRenderer } from './value-renderer';
-import { popMenu } from './menu';
-import * as dragAndDrop from './drag-and-drop';
-import { tosiLocalized, localize } from './localize';
+import { trackDrag } from './track-drag.js';
+import { icons } from './icons.js';
+import { valueRenderer } from './value-renderer.js';
+import { popMenu } from './menu.js';
+import * as dragAndDrop from './drag-and-drop.js';
+import { tosiLocalized, localize } from './localize.js';
 function defaultWidth(array, prop, charWidth) {
     const example = array.find((item) => item[prop] !== undefined && item[prop] !== null);
     if (example !== undefined) {
@@ -687,10 +687,10 @@ export class TosiTable extends WebComponent {
             background: varDefault.tosiTableHeaderBg(varDefault.tosiTableBg('var(--tosi-bg, #fff)')),
         },
         ':host .tr[aria-selected] .td': {
-            background: varDefault.tosiTableSelectedBg('var(--tosi-accent, #007AFF22)'),
+            background: varDefault.tosiTableSelectedBg('var(--tosi-accent, #0064d222)'),
         },
         ':host .td:focus, :host .th:focus': {
-            outline: '2px solid var(--tosi-accent, #007AFF)',
+            outline: '2px solid var(--tosi-accent, #0064d2)',
             outlineOffset: '-2px',
             zIndex: '1',
         },

package/dist/dialog.js

@@ -119,7 +119,7 @@ preview.append(
 */
 /*{ "parent": "Components" }*/
 import { Component, elements, on, vars, varDefault } from 'tosijs';
-import { findHighestZ } from './track-drag';
+import { findHighestZ } from './track-drag.js';
 const { dialog, button, header, footer, tosiSlot, h3, p, label, input, div } = elements;
 export class TosiDialog extends Component {
     static preferredTagName = 'tosi-dialog';

package/dist/doc-browser.d.ts

@@ -1,4 +1,4 @@
-import { TestResults } from './live-example/test-harness';
+import { TestResults } from './live-example/test-harness.js';
 export interface PageTestResults {
     passed: boolean;
     tests: TestResults['tests'];

package/dist/doc-browser.js

@@ -152,24 +152,41 @@ The `tosijs-ui` demo is a complete working example. See:
 */
 /*{"pin":"bottom","parent":"Appendices"}*/
 import { elements, vars, varDefault, bindings, touch, getListItem, debounce, tosi, StyleSheet, } from 'tosijs';
-import { buildSlugMap, pathForSlug, filenameForPath, } from './doc-system/routing';
-import { buildNavTree } from './doc-system/nav-tree';
-import { renderDocMarkdown } from './doc-system/render';
-import { pageTitle } from './doc-system/doc-title';
-import { LiveExample, testManager } from './live-example';
-import { tosiSidenav, TosiSidenav } from './side-nav';
-import { icons } from './icons';
-import { tosiLocalized } from './localize';
-import { popMenu } from './menu';
-import { codeEditor } from './code-editor';
-import { tosiDiff } from './diff';
+import { buildSlugMap, pathForSlug, filenameForPath, } from './doc-system/routing.js';
+import { buildNavTree } from './doc-system/nav-tree.js';
+import { renderDocMarkdown } from './doc-system/render.js';
+import { pageTitle } from './doc-system/doc-title.js';
+import { LiveExample, testManager } from './live-example.js';
+import { tosiSidenav, TosiSidenav } from './side-nav.js';
+import { icons } from './icons.js';
+import { tosiLocalized } from './localize.js';
+import { popMenu } from './menu.js';
+import { codeEditor } from './code-editor.js';
+import { tosiDiff } from './diff.js';
 const { div, span, a, header, button, template, input, h2, img, details, summary, ul, li, } = elements;
-// Test colors
+/*
+Test colors, and the text color that goes ON each — because contrast is a PAIR.
+
+The widget used one hardcoded `color: white` and swapped only the background, so the
+amber running state rendered white-on-#fa0 at **1.9:1** and the green pass state at
+**3.1:1**, both well under WCAG AA's 4.5:1. (Found by `hj map`, which reports a
+`contrast` ratio per node — invisible to the eye until measured.)
+
+Amber is a genuinely light color: darkening it far enough for white text turns it brown
+(63% brightness) and stops reading as "in progress". So it keeps its hue and takes dark
+text at 11:1, which is the conventional warning-badge treatment. Green only needed a
+nudge (81% brightness) to carry white.
+*/
 const testColor = {
-    pass: varDefault.testColorPass('#0a0'),
+    pass: varDefault.testColorPass('#008a00'),
     fail: varDefault.testColorFail('#c00'),
     running: varDefault.testColorRunning('#fa0'),
 };
+const testTextColor = {
+    pass: varDefault.testTextColorPass('#fff'),
+    fail: varDefault.testTextColorFail('#fff'),
+    running: varDefault.testTextColorRunning('#2b1a00'),
+};
 // Test indicator styles - widget inherits button styles from base stylesheet
 const testIndicatorStyleSpec = {
     '.view-source': { opacity: '0.9' },
@@ -215,25 +232,30 @@ const testIndicatorStyleSpec = {
     // was overlaying this.
     '.test-widget': {
         _testBg: testColor.running,
+        _testFg: testTextColor.running,
         position: 'fixed',
         bottom: vars.spacing,
         left: vars.spacing,
         zIndex: '1000',
         background: vars.testBg,
-        color: 'white',
+        // Paired with the background, not fixed to white — see testTextColor above.
+        color: vars.testFg,
         gap: vars.spacing50,
     },
     '.test-widget[hidden]': { display: 'none' },
     '.test-widget.-running': {
         _testBg: testColor.running,
+        _testFg: testTextColor.running,
         animation: 'test-appear 0.3s ease-out, test-pulse 2s ease-in-out 0.3s infinite',
     },
     '.test-widget.-passed': {
         _testBg: testColor.pass,
+        _testFg: testTextColor.pass,
         animation: 'test-fade 3s ease-out forwards',
     },
     '.test-widget.-failed': {
         _testBg: testColor.fail,
+        _testFg: testTextColor.fail,
         animation: 'test-pulse 2s ease-in-out infinite',
     },
     // Count badge
@@ -250,7 +272,7 @@ const testIndicatorStyleSpec = {
     },
     // Deep-linked example (e.g. arriving at /slug/#example-2): brief highlight pulse
     '@keyframes example-target-pulse': {
-        from: { boxShadow: `0 0 0 3px ${varDefault.accent('#007aff')}` },
+        from: { boxShadow: `0 0 0 3px ${varDefault.accent('#0064d2')}` },
         to: { boxShadow: '0 0 0 3px transparent' },
     },
     '.example-target': {

package/dist/doc-system/book-html.d.ts

@@ -1,4 +1,4 @@
-import { NavNode, NavDoc } from './nav-tree';
+import { NavNode, NavDoc } from './nav-tree.js';
 export interface BookDoc {
     filename: string;
     title: string;

package/dist/doc-system/book-html.js

@@ -6,9 +6,9 @@ doc-browser (the user's browser prints it to PDF). Pure rendering — no fs, no
 Node-only APIs — so it bundles into the iife. Live examples are pretty-printed,
 force-wrapped code listings, not executed.
 */
-import { renderDocMarkdown } from './render';
-import { buildSlugMap } from './routing';
-import { buildNavTree } from './nav-tree';
+import { renderDocMarkdown } from './render.js';
+import { buildSlugMap } from './routing.js';
+import { buildNavTree } from './nav-tree.js';
 // Clean book typography; force-wraps code so listings never overflow a page.
 export const DEFAULT_BOOK_CSS = `/* doc-system book stylesheet */
 html { font-size: 100%; }

package/dist/doc-system/book-target.js

@@ -19,7 +19,7 @@ exactly what it means everywhere else (filename, slug, or slugified title).
 Cycles are survivable by construction: `parent` is author-written and nav-tree already
 guards against loops, so this walks with a seen-set rather than trusting the data.
 */
-import { resolveParent } from './routing';
+import { resolveParent } from './routing.js';
 /** The main book's internal key — what a doc with no `book` lands in. */
 export const DEFAULT_BOOK = '';
 /** `book: "none"` — on the site, in no book. */

package/dist/doc-system/css-var-editor.d.ts

@@ -1,5 +1,5 @@
 import { Component as WebComponent, ElementCreator } from 'tosijs';
-import { TosiForm } from '../form';
+import { TosiForm } from '../form.js';
 declare class TosiCssVarEditor extends WebComponent {
     static preferredTagName: string;
     static initAttributes: {

package/dist/doc-system/css-var-editor.js

@@ -7,7 +7,7 @@ can drop `<tosi-css-var-editor element-selector="tosi-widget">` under an example
 deliberately not exported from `tosijs-ui`.
 */
 import { Component as WebComponent, elements, Color, } from 'tosijs';
-import { tosiForm, tosiField } from '../form';
+import { tosiForm, tosiField } from '../form.js';
 const { h2, code } = elements;
 // A value is a color if it's a hex literal or an rgb()/hsl() (with or without alpha)
 // functional notation — the forms getComputedStyle / getPropertyValue return. The old

package/dist/doc-system/doc-system-styles.js

@@ -11,7 +11,7 @@ palette can eventually be driven entirely by a few attributes on the element
 (accent/background/text) — most of the palette is derived from `accent`.
 */
 import { vars, Color, invertLuminance, } from 'tosijs';
-import { icons, svg2DataUrl } from '../icons';
+import { icons, svg2DataUrl } from '../icons.js';
 // The sidebar's geometry, shared by the hydrated layout and the pre-hydration one.
 // These mirror what <tosi-sidenav> is given by doc-browser (navSize / minSize): the
 // sidebar is `SIDEBAR_WIDTH` wide and collapses behind a toggle below
@@ -20,7 +20,7 @@ export const SIDEBAR_WIDTH = 200;
 export const SIDEBAR_BREAKPOINT = 600;
 /** Compute the full set of `:root` color variables from a few base colors. */
 export function docSystemColors(theme = {}) {
-    const brandColor = Color.fromCss(theme.accent ?? '#EE257B');
+    const brandColor = Color.fromCss(theme.accent ?? '#d92270');
     return {
         _textColor: theme.text ?? '#222',
         _brandColor: brandColor,
@@ -32,7 +32,18 @@ export function docSystemColors(theme = {}) {
         _barColor: brandColor.opacity(0.4),
         _focusColor: brandColor.opacity(0.7),
         _placeholderColor: brandColor.opacity(0.4),
-        _brandTextColor: brandColor.rotate(30).brighten(0.9),
+        /*
+        `contrasting()` rather than a hand-tuned tint.
+    
+        `brandColor.rotate(30).brighten(0.9)` produced a warm off-white (#fbeae9) that sat at
+        **4.09:1** on the brand bar — under AA for the normal-size nav links in it. Every
+        brighten value short of pure white also misses (0.96 lands at 4.49), so the tint had
+        to go; it was imperceptible anyway. `contrasting()` picks the readable extreme for
+        whatever the brand currently is, so this cannot drift the next time the brand moves.
+        Dark mode is unaffected: invertLuminance flips this to near-black on the brightened
+        bar, which is already high-contrast.
+        */
+        _brandTextColor: brandColor.contrasting(),
         _insetBg: brandColor.rotate(45).brighten(0.8),
         // Neutral off-white (not brand-tinted); dark mode inverts its luminance to
         // off-black, so the editor surface stays a clean neutral in both themes.
@@ -55,7 +66,7 @@ export function docSystemColors(theme = {}) {
 /** Build the full doc-system stylesheet for a given base theme. */
 export function docSystemStyleSpec(theme = {}) {
     const colors = docSystemColors(theme);
-    const brandColor = Color.fromCss(theme.accent ?? '#EE257B');
+    const brandColor = Color.fromCss(theme.accent ?? '#d92270');
     return {
         '@import': 'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&famiSpline+Sans+Mono:ital,wght@0,300..700;1,300..700&display=swap',
         ':root': {
@@ -89,6 +100,16 @@ export function docSystemStyleSpec(theme = {}) {
         },
         '.darkmode': {
             ...invertLuminance(colors),
+            /*
+            Lift the brand color for dark backgrounds.
+      
+            `invertLuminance` flips the neutrals but leaves a saturated brand hue roughly where
+            it was, so one accent has to serve both a near-white and a near-black page — and a
+            pink dark enough to clear AA on `#fafafa` (4.56:1) lands at 4.4:1 on `#050505`,
+            just under. Brightening it in dark mode is the standard resolution: the hue is the
+            brand, the luminance belongs to the background it sits on.
+            */
+            _brandColor: brandColor.brighten(0.18),
             _shadowColor: brandColor.opacity(0.5),
             _menuShadow: `0 0 0 2px ${brandColor.opacity(0.75)}`,
             _menuSeparatorColor: brandColor.opacity(0.5),

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

@@ -1,5 +1,5 @@
 import { Component, ElementCreator } from 'tosijs';
-import './css-var-editor';
+import './css-var-editor.js';
 export declare class TosiDocSystem extends Component {
     static preferredTagName: string;
     static initAttributes: {

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

@@ -57,16 +57,16 @@ A self-contained, controllable embed (e.g. docs in a floating panel):
 */
 /*{ "parent": "Appendices" }*/
 import { Component, StyleSheet, elements, tosi, vars, } from 'tosijs';
-import { createDocBrowser } from '../doc-browser';
-import { buildSlugMap, legacyQueryPath } from './routing';
-import { buildBookHtml, slugify } from './book-html';
-import { docSystemStyleSpec } from './doc-system-styles';
-import { icons } from '../icons';
-import { popMenu } from '../menu';
-import { i18n, setLocale, initLocalization } from '../localize';
+import { createDocBrowser } from '../doc-browser.js';
+import { buildSlugMap, legacyQueryPath } from './routing.js';
+import { buildBookHtml, slugify } from './book-html.js';
+import { docSystemStyleSpec } from './doc-system-styles.js';
+import { icons } from '../icons.js';
+import { popMenu } from '../menu.js';
+import { i18n, setLocale, initLocalization } from '../localize.js';
 // Side-effect: register <tosi-css-var-editor> so doc pages can drop the live CSS-var
 // tweaker under an example. Part of the doc-system, NOT re-exported from tosijs-ui.
-import './css-var-editor';
+import './css-var-editor.js';
 const { button, div } = elements;
 const PREFS_KEY = 'tosi-doc-system-prefs';
 export class TosiDocSystem extends Component {

package/dist/doc-system/nav-tree.js

@@ -11,7 +11,7 @@ parent form a nav section, nested arbitrarily deep. Parents are expected to
 exist as real docs by the time the tree is built (the build auto-creates any
 missing section docs first), so this module never synthesizes.
 */
-import { resolveParent } from './routing';
+import { resolveParent } from './routing.js';
 /** Pin buckets sort top < none < bottom. */
 function pinRank(doc) {
     return doc.pin === 'top' ? 0 : doc.pin === 'bottom' ? 2 : 1;

package/dist/doc-system/site/check-examples-cli.js

@@ -26,7 +26,7 @@ orchestrator.ts.
 
 Build-time only. Never import this from browser code.
 */
-import { checkExamples } from './check-examples';
+import { checkExamples } from './check-examples.js';
 const docsJson = process.argv[2];
 if (!docsJson) {
     console.error('check-examples-cli: expected a docs.json path');

package/dist/doc-system/site/check-examples.d.ts

@@ -1,5 +1,5 @@
-import type { Doc } from './docs';
-import type { ExampleBakes } from '../render';
+import type { Doc } from './docs.js';
+import type { ExampleBakes } from '../render.js';
 export interface ExampleProblem {
     filename: string;
     title: string;

package/dist/doc-system/site/check-examples.js

@@ -22,7 +22,7 @@ executed, so they're skipped.
 Build-time only (bun). Never import from browser code.
 */
 import { marked } from 'marked';
-import { rewriteImports, AsyncFunction, loadTransform, UnsupportedImportError, } from '../../live-example/code-transform';
+import { rewriteImports, AsyncFunction, loadTransform, UnsupportedImportError, } from '../../live-example/code-transform.js';
 // The default live-example context (matches the IIFE globals the pages provide).
 // A project that sets a custom `context` on its <tosi-doc-system> can pass its
 // own keys; these are the tosijs-ui defaults.

package/dist/doc-system/site/dev-server.d.ts

@@ -1,5 +1,5 @@
-import type { SiteConfig } from './site-config';
-import { isLoopbackAddressForAuth as isLoopbackAddress } from './dev-auth';
+import type { SiteConfig } from './site-config.js';
+import { isLoopbackAddressForAuth as isLoopbackAddress } from './dev-auth.js';
 declare global {
     var Bun: any;
 }