tosijs-ui 1.7.2 → 1.7.4

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # Changelog
 
+## 1.7.4
+
+- **Configurable header logo.** A new `logo` option lets a doc site set the brand mark shown
+  left of the site title, instead of always inheriting the tosijs-ui logo. Accepts the name of a
+  known icon (from `tosijs-ui`'s `icons`, e.g. `'tosiUi'`), an image URL / path / `data:` URI
+  (rendered as an `<img>`), or a raw inline `<svg>…</svg>` string. Threaded through
+  `SiteConfig.logo` (`tosijs-ui/site`), `createDocBrowser({ logo })`, and an embedded
+  `<tosi-doc-system config='{"logo":"…"}'>`. Omit it to keep the prior behavior: the tosijs-ui
+  logo when `projectLinks.tosijs` is set, otherwise no mark. Previously the header logo was
+  hard-wired to the tosijs-ui mark — the one branding element `SiteConfig` couldn't override.
+
+## 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.d.ts

@@ -61,6 +61,15 @@ export interface DocBrowserOptions {
     context?: Record<string, any>;
     projectName?: string;
     projectLinks?: ProjectLinks;
+    /**
+     * The brand mark shown left of the site title in the header. One of:
+     * - the name of a known icon (from `icons`), e.g. `'tosiUi'`
+     * - an image URL / path / data: URI (rendered as an `<img>`)
+     * - a raw inline `<svg …>…</svg>` string
+     * Omit to fall back to the tosijs-ui logo when `projectLinks.tosijs` is set,
+     * or to no mark at all otherwise.
+     */
+    logo?: string;
     navSize?: number;
     minSize?: number;
     routing?: DocRoutingMode;

package/dist/doc-browser.js

@@ -163,7 +163,7 @@ import { tosiLocalized } from './localize';
 import { popMenu } from './menu';
 import { codeEditor } from './code-editor';
 import { tosiDiff } from './diff';
-const { div, span, a, header, button, template, input, h2, details, summary, ul, li, } = elements;
+const { div, span, a, header, button, template, input, h2, img, details, summary, ul, li, } = elements;
 // Test colors
 const testColor = {
     pass: varDefault.testColorPass('#0a0'),
@@ -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',
@@ -252,11 +254,58 @@ const testIndicatorStyleSpec = {
         borderRadius: vars.roundedRadius,
     },
 };
+// The brand mark shown left of the site title. `logo` (from config) may name a
+// known icon, be an inline `<svg>` string, or be an image URL; when absent we
+// keep the legacy behavior — the tosijs-ui logo iff this is a tosijs project,
+// else nothing. Sized to match the header height so hydration doesn't reflow.
+const LOGO_SIZE = 40;
+const LOGO_GAP = 10;
+// `icons` is a Proxy that returns a factory for ANY string (unknown names get a
+// placeholder glyph), so we can't ask it whether a name is real — we route by the
+// shape of the string instead: an inline `<svg>` renders as-is, a URL/path/data:
+// URI renders as an <img>, and anything else is treated as an icon(-composition)
+// name.
+function looksLikeImageUrl(s) {
+    return (/^(https?:)?\/\//.test(s) ||
+        s.startsWith('data:') ||
+        s.startsWith('/') ||
+        s.startsWith('./') ||
+        s.startsWith('../') ||
+        /\.(png|jpe?g|gif|webp|avif|svg|ico)(\?.*)?$/i.test(s));
+}
+function logoMark(logo, projectLinks) {
+    if (logo) {
+        if (logo.trimStart().startsWith('<')) {
+            const holder = span({
+                style: {
+                    display: 'inline-flex',
+                    height: `${LOGO_SIZE}px`,
+                    marginRight: `${LOGO_GAP}px`,
+                },
+            });
+            holder.innerHTML = logo;
+            return holder;
+        }
+        if (looksLikeImageUrl(logo)) {
+            return img({
+                src: logo,
+                alt: '',
+                style: { height: `${LOGO_SIZE}px`, marginRight: `${LOGO_GAP}px` },
+            });
+        }
+        return icons[logo]({
+            style: { _xinIconSize: LOGO_SIZE, marginRight: LOGO_GAP },
+        });
+    }
+    return projectLinks.tosijs
+        ? icons.tosiUi({ style: { _xinIconSize: LOGO_SIZE, marginRight: LOGO_GAP } })
+        : span();
+}
 // Monotonic per-page counter so each createDocBrowser() call gets a distinct
 // tosi() registry key (see stateKey below) and two browsers can't share state.
 let docBrowserSeq = 0;
 export function createDocBrowser(options) {
-    const { docs, context = {}, projectName = '', projectLinks = {}, navSize = 200, minSize = 600, routing = 'query', initialRoute, onRouteChange, navbarLinks, contentElement, } = options;
+    const { docs, context = {}, projectName = '', projectLinks = {}, logo, navSize = 200, minSize = 600, routing = 'query', initialRoute, onRouteChange, navbarLinks, contentElement, } = options;
     // Memory routing is fully self-contained: it never reads or writes
     // window.history/location, so an embedded or nested browser can't hijack the
     // host page's URL (or recurse into it).
@@ -520,11 +569,7 @@ export function createDocBrowser(options) {
                 alignItems: 'center',
                 borderBottom: 'none',
             },
-        }, projectLinks.tosijs
-            ? icons.tosiUi({
-                style: { _xinIconSize: 40, marginRight: 10 },
-            })
-            : span(), h2(projectName)));
+        }, logoMark(logo, projectLinks), h2(projectName)));
     }
     headerContent.push(span({ class: 'elastic' }));
     // A header link renders as an icon (if `icon` names a known icon) or its label.

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/doc-system.js

@@ -409,6 +409,7 @@ export class TosiDocSystem extends Component {
             },
             projectName: config.projectName,
             projectLinks: config.projectLinks,
+            logo: config.logo,
             navbarLinks: navbarLinks.length ? navbarLinks : undefined,
             contentElement,
         });

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/generate-site.d.ts

@@ -18,6 +18,8 @@ export interface GenerateSiteConfig {
     /** default og:image (per-page overridable via doc metadata) */
     ogImage?: string;
     projectLinks?: ProjectLinks;
+    /** brand mark left of the title: icon name, image URL, or inline <svg> */
+    logo?: string;
     /** header-bar links (rendered as real <a> for no-JS, upgraded on hydration) */
     navbarLinks?: LinkItem[];
     /** translation table (TSV) for the settings menu's language picker */

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

@@ -251,6 +251,7 @@ export async function generateSite(config) {
     const configAttr = escapeAttr(JSON.stringify({
         projectName: config.projectName,
         projectLinks: config.projectLinks,
+        logo: config.logo,
     }));
     // The theme stylesheet (config.stylesUrl) is written separately by
     // ./generate-css.ts; pages here just <link> to it.

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.
@@ -587,6 +600,7 @@ export async function buildSite(config) {
         baseUrl: config.baseUrl,
         lang: config.lang,
         projectLinks: config.projectLinks,
+        logo: config.logo,
         navbarLinks: config.navbarLinks,
         localizedStrings: config.localizedStrings,
         favicon: config.favicon,

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

@@ -30,6 +30,13 @@ export interface SiteConfig {
     headExtra?: string;
     /** logo + view-source links (createDocBrowser projectLinks) */
     projectLinks?: ProjectLinks;
+    /**
+     * Brand mark shown left of the site title in the header. One of: the name of a
+     * known icon (from `tosijs-ui`'s `icons`, e.g. `'tosiUi'`), an image URL / path
+     * / `data:` URI, or a raw inline `<svg …>…</svg>` string. Omit to fall back to
+     * the tosijs-ui logo when `projectLinks.tosijs` is set, or to no mark otherwise.
+     */
+    logo?: string;
     /** header-bar icon links */
     navbarLinks?: LinkItem[];
     /** base theme colors — most of the palette is derived from `accent` */

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);