tosijs-ui 1.7.2 → 1.7.3

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## 1.7.3
+
+- **New `<tosi-pocket-bar>` component.** A "pocket buttonbar": a single translucent icon at
+  rest that expands into a bar of slotted icon-button controls on hover/tap, then collapses
+  again. `direction` (the full `FloatPosition` vocabulary, `auto` by default) determines both
+  layout and growth direction; the handle stays put and toggles the bar; touch counts as hover.
+  Built as a thin wrapper around `positionFloat`.
+- **The live-example toolbar is now a pocket bar**, pinned to the top-right of the preview (so
+  it never sits over the code editors in side-by-side mode). The collapsed handle carries the
+  example's pass/fail color, "run tests" is a checkbox that greys when off, and the bar stays
+  visible when the example is maximized.
+- **Build system is fragility-tolerant.** An *unsupported import* in a live example (a bare
+  specifier the runtime can't resolve) now downgrades that block to display-only with a warning
+  instead of failing the whole build; genuine syntax errors still fail the build.
+- **Removed a render-skip anti-pattern** from `<tosi-segmented>`, `<tosi-color>`, and
+  `<tosi-form>`. They previously depended on `render()` being *skipped* after interaction via a
+  `valueChanged` flag — fragile timing that broke under tosijs's parts changes. Renders are now
+  idempotent: they skip only *provably-redundant* writes by comparing values (colors compared
+  **parsed**, so a `#rrggbb ↔ rgba()` round-trip no longer clobbers the caret/selection in the
+  field being edited).
+- **Code editor background is now a neutral off-white** (off-black in dark mode) instead of a
+  brand-tinted color — both the default `<tosi-code>` and live examples.
+- **Fix: nav flickered on refresh / reflowed on hydration.** The static no-JS nav relied on the
+  browser's native `<details>` collapse (`::details-content { content-visibility: hidden }`),
+  which Chromium applies lazily and non-deterministically on first paint — a closed section
+  could render at full height for a frame before snapping shut. Closed sections now collapse
+  synchronously via `display: none` (still opening on a no-JS `<summary>` toggle). Enforced by
+  `tests/hydration.pw.ts`.
+- **Moved the doc-browser test-counter widget to the bottom-left** so it no longer sits under
+  the haltija dev overlay.
+- **tosijs bumped to `^1.7.8`**, which fixes the `this.parts` proxy crossing into nested
+  component instances (tosijs#20 — surfaced by the self-hosting doc demo, where clicking "edit"
+  on one example opened the editor in the wrong one) and change-handler value staleness
+  (tosijs#21).
+
 ## 1.7.2
 
 - **Fix: doc sites are now mount-point-agnostic** (issue #25). The build baked `basePath` into

package/dist/color-input.d.ts

@@ -33,7 +33,6 @@ declare class ColorInput extends Component<ColorParts> {
         };
     };
     content: HTMLInputElement[];
-    private valueChanged;
     update: (event: Event) => void;
     connectedCallback(): void;
     render(): void;

package/dist/color-input.js

@@ -71,7 +71,6 @@ class ColorInput extends Component {
         }),
         input({ title: 'css color spec', part: 'css' }),
     ];
-    valueChanged = false;
     update = (event) => {
         const { rgb, alpha, css } = this.parts;
         if (event.type === 'input') {
@@ -86,7 +85,6 @@ class ColorInput extends Component {
         }
         rgb.style.opacity = String(this.color.a);
         this.value = this.color.rgba;
-        this.valueChanged = true;
     };
     connectedCallback() {
         super.connectedCallback();
@@ -96,16 +94,32 @@ class ColorInput extends Component {
         css.addEventListener('change', this.update);
     }
     render() {
-        if (this.valueChanged) {
-            this.valueChanged = false;
-            return;
-        }
         const { rgb, alpha, css } = this.parts;
         this.color = Color.fromCss(this.value);
-        rgb.value = this.color.html.substring(0, 7);
-        rgb.style.opacity = String(this.color.a);
-        alpha.value = String(this.color.a);
-        css.value = this.color.html;
+        const rgba = this.color.rgba;
+        const alphaStr = String(this.color.a);
+        // Idempotent: only WRITE an input whose value doesn't already represent this
+        // colour. Compare the PARSED colour, not the string — `#rrggbb` and `rgba(...)`
+        // are the same colour, so a string compare (or a blind write) would clobber the
+        // caret / selection and re-round-trip the user's format on the field they're
+        // editing, every render. Skipping provably-redundant work is right; a `valueChanged`
+        // timing flag to decide it was the fragile part (broke under tosijs 1.7.7).
+        const sameColor = (v) => {
+            try {
+                return Color.fromCss(v).rgba === rgba;
+            }
+            catch {
+                return false;
+            }
+        };
+        if (!sameColor(rgb.value))
+            rgb.value = this.color.html.substring(0, 7);
+        if (rgb.style.opacity !== alphaStr)
+            rgb.style.opacity = alphaStr;
+        if (alpha.value !== alphaStr)
+            alpha.value = alphaStr;
+        if (!sameColor(css.value))
+            css.value = this.color.html;
     }
 }
 export const colorInput = ColorInput.elementCreator();

package/dist/doc-browser.js

@@ -206,12 +206,14 @@ const testIndicatorStyleSpec = {
         background: testColor.fail,
         animation: 'test-pulse 2s ease-in-out infinite',
     },
-    // Floating widget - position and colors only, inherits button structure
+    // Floating widget - position and colors only, inherits button structure.
+    // Bottom-LEFT: bottom-right is where the injected haltija dev widget sits, and it
+    // was overlaying this.
     '.test-widget': {
         _testBg: testColor.running,
         position: 'fixed',
         bottom: vars.spacing,
-        right: vars.spacing,
+        left: vars.spacing,
         zIndex: '1000',
         background: vars.testBg,
         color: 'white',

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

@@ -8,6 +8,8 @@ export interface DocSystemTheme {
     text?: string;
     buttonBg?: string;
     inputBg?: string;
+    /** code-editor surface (`--code-bg`); neutral off-white by default, not brand-tinted. */
+    codeBg?: string;
 }
 /** Compute the full set of `:root` color variables from a few base colors. */
 export declare function docSystemColors(theme?: DocSystemTheme): XinStyleRule;

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

@@ -34,7 +34,9 @@ export function docSystemColors(theme = {}) {
         _placeholderColor: brandColor.opacity(0.4),
         _brandTextColor: brandColor.rotate(30).brighten(0.9),
         _insetBg: brandColor.rotate(45).brighten(0.8),
-        _codeBg: brandColor.rotate(-15).desaturate(0.5).brighten(0.9),
+        // 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.
+        _codeBg: theme.codeBg ?? '#fdfdfd',
         _linkColor: brandColor.rotate(-30).darken(0.5),
         _shadowColor: '#0004',
         _menuBg: '#fafafa',
@@ -476,6 +478,18 @@ export function docSystemStyleSpec(theme = {}) {
         '.doc-nav details > ul': {
             paddingLeft: vars.spacing,
         },
+        // Collapse a closed section's list SYNCHRONOUSLY. The UA collapses <details>
+        // via `::details-content { content-visibility: hidden }`, which is applied
+        // lazily and — for this static tree — non-deterministically on first paint:
+        // sometimes the closed section is still laid out at full height for a frame
+        // before it snaps shut. That frame is a visible flicker on refresh, and it made
+        // the "nav does not move on hydration" test measure a 36px row that hydration
+        // then collapses to 0. An explicit display:none collapses it in the first layout
+        // pass with no content-visibility race, and still opens on a no-JS <summary>
+        // toggle (the UA adds [open], so this rule stops matching).
+        '.doc-nav details:not([open]) > ul': {
+            display: 'none',
+        },
         // <summary> is the section header (its triangle toggles; the link navigates).
         '.doc-nav summary': {
             cursor: 'pointer',

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

@@ -20,8 +20,9 @@ the bundle step, the ePub step, and generate-css; see the Bun.build note in
 orchestrator.ts.
 
   bun check-examples-cli.ts <docs.json> [contextKey ...]
-  → writes ExampleProblem[] as JSON to stdout; exit 0 whether or not problems were
-    found (a problem is data, not a crash — only a real failure exits non-zero).
+  → writes { problems, warnings, bakes } as JSON to stdout; exit 0 whether or not
+    problems were found (a problem is data, not a crash — only a real failure exits
+    non-zero). The parent fails the build on `problems`, warns on `warnings`.
 
 Build-time only. Never import this from browser code.
 */
@@ -36,7 +37,7 @@ const contextKeys = process.argv.slice(3);
 // non-context imports validate as dynamic `<prefix><spec>` imports rather than failing.
 const importPrefix = process.env.TOSI_IMPORT_PREFIX || undefined;
 const corpus = JSON.parse(await Bun.file(docsJson).text());
-const { problems, bakes } = await checkExamples(corpus, {
+const { problems, warnings, bakes } = await checkExamples(corpus, {
     ...(contextKeys.length ? { contextKeys } : {}),
     ...(importPrefix ? { importPrefix } : {}),
 });
@@ -45,6 +46,7 @@ const { problems, bakes } = await checkExamples(corpus, {
 // Maps can't JSON-roundtrip, so bakes go over as [filename, [source, {dialect,js}][]][].
 process.stdout.write(JSON.stringify({
     problems,
+    warnings,
     bakes: Array.from(bakes.entries()).map(([filename, docBakes]) => [
         filename,
         Array.from(docBakes.entries()),

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

@@ -8,7 +8,20 @@ export interface ExampleProblem {
     snippet: string;
 }
 export interface ExampleCheck {
+    /**
+     * Blocks that failed to build for a real reason (a tjs/TS syntax error, a
+     * transpile failure). These FAIL the build — broken code shouldn't ship.
+     */
     problems: ExampleProblem[];
+    /**
+     * Blocks that reference a package the environment can't provide (a non-context
+     * import, no import-resolver). The code isn't broken, it just can't run here —
+     * almost always illustrative code that should be tagged `typescript` (display-
+     * only) rather than `ts`. These WARN and are treated as display-only; they do
+     * NOT fail the build. (Enable `importResolver`, or tag the block display-only,
+     * to silence the warning.)
+     */
+    warnings: ExampleProblem[];
     /**
      * Build-time transpiled JS for `tjs` blocks, grouped by doc filename, each keyed
      * by exact source text. The renderer embeds a doc's bakes as hidden scripts (so

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

@@ -4,17 +4,25 @@ Build-time transpile check for live examples.
 Every executable code block in the corpus (`js` / `tjs` / `ts` / `test`) is put
 through the SAME front half of the runtime pipeline the live-example component
 uses — `rewriteImports` → the tjs-lang transform → `new AsyncFunction(...)` — so a
-block that can't build (a tjs/TS syntax error, an unsupported import, or
-illustrative config mistakenly tagged with an executable language like `ts`
-instead of the display-only `typescript`) fails the build *at authoring time*,
-on every page, instead of silently rendering an error only when someone opens
-that page. `html` / `css` and display-only languages (`typescript`, `json`, …)
-are not executed, so they're skipped.
+block that can't build is caught *at authoring time*, on every page, instead of
+silently rendering an error only when someone opens that page. The two outcomes
+are graded differently (this is the point):
+
+  - a real **syntax / transpile error** is broken code → a `problem` that FAILS
+    the build;
+  - an **unsupported import** (a non-context package, no import-resolver) is fine
+    code the doc environment just can't run → a `warning`: the block is treated as
+    display-only and the build survives. It's almost always illustrative code that
+    should have been tagged `typescript` instead of `ts` — a mistagging shouldn't
+    take the whole build down with it.
+
+`html` / `css` and display-only languages (`typescript`, `json`, …) are not
+executed, so they're skipped.
 
 Build-time only (bun). Never import from browser code.
 */
 import { marked } from 'marked';
-import { rewriteImports, AsyncFunction, loadTransform, } from '../../live-example/code-transform';
+import { rewriteImports, AsyncFunction, loadTransform, UnsupportedImportError, } from '../../live-example/code-transform';
 // 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.
@@ -58,6 +66,7 @@ function collectCodeTokens(text) {
 export async function checkExamples(docs, opts = {}) {
     const contextKeys = opts.contextKeys ?? DEFAULT_CONTEXT_KEYS;
     const problems = [];
+    const warnings = [];
     const bakes = new Map();
     for (const doc of docs) {
         for (const block of collectCodeTokens(doc.text)) {
@@ -97,17 +106,24 @@ export async function checkExamples(docs, opts = {}) {
                 }
             }
             catch (err) {
-                problems.push({
+                const entry = {
                     filename: doc.filename,
                     title: doc.title,
                     lang: block.lang,
                     error: err.message || String(err),
                     snippet: block.text.split('\n').slice(0, 3).join('\n'),
-                });
+                };
+                // An unsupported import means the block references deps the environment
+                // can't provide — not broken code. Warn (display-only), don't fail the
+                // build. A real syntax/transpile error is a genuine problem.
+                if (err instanceof UnsupportedImportError)
+                    warnings.push(entry);
+                else
+                    problems.push(entry);
             }
         }
     }
-    return { problems, bakes };
+    return { problems, warnings, bakes };
 }
 /** Format problems for a build log. */
 export function formatExampleProblems(problems) {

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

@@ -132,6 +132,7 @@ async function checkExamplesInChild(docsJson, importPrefix) {
         const payload = JSON.parse(out);
         return {
             problems: payload.problems,
+            warnings: payload.warnings ?? [],
             bakes: new Map(payload.bakes.map(([file, e]) => [file, new Map(e)])),
         };
     }
@@ -239,14 +240,26 @@ export async function buildSite(config) {
         : undefined;
     let exampleBakes;
     if (config.checkExamples !== false) {
-        const { problems, bakes } = await checkExamplesInChild(DOCS_JSON, resolverPrefix);
+        const { problems, warnings, bakes } = await checkExamplesInChild(DOCS_JSON, resolverPrefix);
         exampleBakes = bakes;
+        // Unsupported imports don't fail the build — the code isn't broken, it just
+        // can't run in the doc environment (almost always illustrative code that
+        // should be tagged `typescript`). Warn loudly, treat the block as display-only,
+        // and keep going. Only real syntax/transpile errors below are fatal.
+        if (warnings.length) {
+            console.warn(`⚠️  doc-site build: ${warnings.length} live example block(s) can't run ` +
+                `here and were left as display-only:\n\n` +
+                formatExampleProblems(warnings) +
+                `\n\nTag each with a display-only language like \`typescript\` (instead of` +
+                ` \`js\`/\`ts\`) to silence this, or enable \`importResolver\` to import` +
+                ` other packages.\n`);
+        }
         if (problems.length) {
             throw new Error(`doc-site build: ${problems.length} live example(s) failed to build:\n\n` +
                 formatExampleProblems(problems) +
                 `\n\nFix the code, or — if a block is illustrative and not meant to run —` +
                 ` tag it with a display-only language like \`typescript\` instead of` +
-                ` \`js\`/\`ts\`. (Disable with checkExamples: false.)`);
+                ` \`js\`/\`ts\`. (Disable all checking with checkExamples: false.)`);
         }
     }
     // Copy static-asset dirs into the web root.

package/dist/form.d.ts

@@ -45,7 +45,6 @@ export declare class TosiField extends XinComponent {
     };
     value: any;
     content: HTMLLabelElement;
-    private valueChanged;
     handleChange: () => void;
     connectedCallback(): void;
     render(): void;

package/dist/form.js

@@ -430,6 +430,10 @@ function getInputValue(input) {
                 : input.value;
     }
 }
+// Idempotent: write only when the value actually differs. Blindly re-assigning
+// `input.value` (even the same string) moves the caret / drops the selection of a
+// field being edited, so render must not do it as redundant work — and it lets
+// render run any number of times without side-effects.
 function setElementValue(input, value) {
     if (!(input instanceof HTMLElement)) {
         // do nothing
@@ -437,20 +441,26 @@ function setElementValue(input, value) {
     else if (input instanceof HTMLInputElement) {
         switch (input.type) {
             case 'checkbox':
-                input.checked = value;
+                if (input.checked !== Boolean(value))
+                    input.checked = value;
                 break;
-            case 'radio':
-                input.checked = value === input.value;
+            case 'radio': {
+                const checked = value === input.value;
+                if (input.checked !== checked)
+                    input.checked = checked;
                 break;
-            default:
-                input.value = String(value || '');
+            }
+            default: {
+                const v = String(value || '');
+                if (input.value !== v)
+                    input.value = v;
+            }
         }
     }
-    else {
-        if (value != null || input.value != null) {
-            ;
-            input.value = String(value || '');
-        }
+    else if (value != null || input.value != null) {
+        const v = String(value || '');
+        if (input.value !== v)
+            input.value = v;
     }
 }
 export class TosiField extends XinComponent {
@@ -499,7 +509,6 @@ export class TosiField extends XinComponent {
     };
     value = null;
     content = label(tosiSlot({ part: 'caption' }), span({ part: 'field' }, tosiSlot({ part: 'input', name: 'input' }), input({ part: 'valueHolder' })));
-    valueChanged = false;
     handleChange = () => {
         const { input, valueHolder } = this.parts;
         const inputElement = (input.children[0] || valueHolder);
@@ -507,7 +516,6 @@ export class TosiField extends XinComponent {
             valueHolder.value = inputElement.value;
         }
         this.value = getInputValue(inputElement);
-        this.valueChanged = true;
         const form = this.closest('tosi-form');
         if (form && this.key !== '') {
             switch (this.type) {
@@ -537,25 +545,31 @@ export class TosiField extends XinComponent {
         input.addEventListener('change', this.handleChange, true);
     }
     render() {
-        if (this.valueChanged) {
-            this.valueChanged = false;
-            return;
-        }
         const { input, caption, valueHolder, field } = this.parts;
         if (caption.textContent?.trim() === '') {
             caption.append(this.caption !== '' ? this.caption : this.key);
         }
+        // Build the type-specific child ONCE and reuse it. Re-creating the <textarea> /
+        // <tosi-color> every render (the old behavior, only avoided by a `valueChanged`
+        // timing flag) destroyed focus, caret and selection mid-edit — provably redundant
+        // when the child of the right kind already exists. The value is reconciled
+        // idempotently by setElementValue below.
         if (this.type === 'text') {
-            input.textContent = '';
-            const textarea = elements.textarea({ value: this.value });
+            let textarea = input.children[0];
+            if (!(textarea instanceof HTMLTextAreaElement)) {
+                input.textContent = '';
+                textarea = elements.textarea({ value: this.value });
+                input.append(textarea);
+            }
             if (this.placeholder) {
                 textarea.setAttribute('placeholder', this.placeholder);
             }
-            input.append(textarea);
         }
         else if (this.type === 'color') {
-            input.textContent = '';
-            input.append(colorInput({ value: this.value }));
+            if (!input.children[0]?.matches('tosi-color')) {
+                input.textContent = '';
+                input.append(colorInput({ value: this.value }));
+            }
         }
         else if (input.children.length === 0) {
             attr(valueHolder, 'placeholder', this.placeholder);