@slowclap/rezi-core 0.1.0-fork.1

package/dist/renderer/renderToDrawlist/widgets/renderFormWidgets.js

@@ -0,0 +1,939 @@
+import { getDefaultFocusConfig } from "../../../focus/styles.js";
+import { measureTextCells, truncateWithEllipsis } from "../../../layout/textMeasure.js";
+import { buttonRecipe, checkboxRecipe, inputRecipe, selectRecipe, sliderRecipe, } from "../../../ui/recipes.js";
+import { FIELD_ERROR_STYLE, FIELD_HINT_STYLE, FIELD_LABEL_STYLE, buildFieldLabel, getFieldFooterText, shouldShowError, } from "../../../widgets/field.js";
+import { DEFAULT_PLACEHOLDER, getSelectDisplayText } from "../../../widgets/select.js";
+import { DEFAULT_SLIDER_TRACK_WIDTH, formatSliderValue, normalizeSliderState, } from "../../../widgets/slider.js";
+import { asTextStyle, getButtonLabelStyle } from "../../styles.js";
+import { renderBoxBorder } from "../boxBorder.js";
+import { isVisibleRect } from "../indices.js";
+import { mergeTextStyle } from "../textStyle.js";
+import { getColorTokens, readWidgetSize, readWidgetTone, readWidgetVariant, resolveWidgetFocusStyle, } from "../themeTokens.js";
+import { focusIndicatorEnabled, readFocusConfig, resolveFocusIndicatorDecoration, resolveFocusedContentStyle, } from "./focusConfig.js";
+import { drawSegments, truncateToWidth } from "./renderTextWidgets.js";
+const REPEAT_CACHE_MAX_ENTRIES = 2048;
+const repeatCache = new Map();
+function repeatCached(glyph, count) {
+    if (count <= 0)
+        return "";
+    if (count === 1)
+        return glyph;
+    if (count > 256)
+        return glyph.repeat(count);
+    const key = `${glyph}\u0000${String(count)}`;
+    const cached = repeatCache.get(key);
+    if (cached !== undefined)
+        return cached;
+    const value = glyph.repeat(count);
+    if (repeatCache.size >= REPEAT_CACHE_MAX_ENTRIES) {
+        const oldest = repeatCache.keys().next();
+        if (!oldest.done)
+            repeatCache.delete(oldest.value);
+    }
+    repeatCache.set(key, value);
+    return value;
+}
+function clamp01(value) {
+    if (!Number.isFinite(value))
+        return 0;
+    if (value <= 0)
+        return 0;
+    if (value >= 1)
+        return 1;
+    return value;
+}
+function clampInt(value, min, max) {
+    const n = Number.isFinite(value) ? Math.trunc(value) : min;
+    if (n <= min)
+        return min;
+    if (n >= max)
+        return max;
+    return n;
+}
+function readNumber(v) {
+    if (typeof v !== "number" || !Number.isFinite(v))
+        return undefined;
+    return v;
+}
+function readNonNegativeInt(v) {
+    const n = readNumber(v);
+    if (n === undefined || n < 0)
+        return undefined;
+    return Math.trunc(n);
+}
+function readPositiveInt(v) {
+    const n = readNonNegativeInt(v);
+    if (n === undefined || n <= 0)
+        return undefined;
+    return n;
+}
+function readString(v) {
+    return typeof v === "string" ? v : undefined;
+}
+function wrapLineByCells(line, width) {
+    if (width <= 0)
+        return Object.freeze([""]);
+    if (line.length === 0)
+        return Object.freeze([""]);
+    const cps = Array.from(line);
+    const out = [];
+    let chunk = "";
+    let chunkWidth = 0;
+    for (const cp of cps) {
+        const cpWidth = Math.max(0, measureTextCells(cp));
+        if (chunk.length > 0 && chunkWidth + cpWidth > width) {
+            out.push(chunk);
+            chunk = cp;
+            chunkWidth = cpWidth;
+            continue;
+        }
+        chunk += cp;
+        chunkWidth += cpWidth;
+    }
+    if (chunk.length > 0)
+        out.push(chunk);
+    return Object.freeze(out.length > 0 ? out : [""]);
+}
+function sliceTextToCellWindow(text, startCell, width) {
+    const safeStart = Math.max(0, Math.trunc(startCell));
+    if (width <= 0 || text.length === 0) {
+        return Object.freeze({ text: "", startCell: safeStart });
+    }
+    const codepoints = Array.from(text);
+    let actualStart = 0;
+    let index = 0;
+    while (index < codepoints.length) {
+        const cp = codepoints[index] ?? "";
+        const cpWidth = Math.max(0, measureTextCells(cp));
+        if (actualStart + cpWidth > safeStart)
+            break;
+        actualStart += cpWidth;
+        index++;
+    }
+    let visibleText = "";
+    let visibleWidth = 0;
+    while (index < codepoints.length) {
+        const cp = codepoints[index] ?? "";
+        const cpWidth = Math.max(0, measureTextCells(cp));
+        if (cpWidth > 0 && visibleWidth + cpWidth > width)
+            break;
+        visibleText += cp;
+        visibleWidth += cpWidth;
+        index++;
+    }
+    return Object.freeze({ text: visibleText, startCell: actualStart });
+}
+function buildInputLineMeta(value) {
+    const starts = [];
+    const ends = [];
+    const lines = [];
+    let lineStart = 0;
+    for (let i = 0; i < value.length; i++) {
+        if (value.charCodeAt(i) === 0x0a) {
+            starts.push(lineStart);
+            ends.push(i);
+            lines.push(value.slice(lineStart, i));
+            lineStart = i + 1;
+        }
+    }
+    starts.push(lineStart);
+    ends.push(value.length);
+    lines.push(value.slice(lineStart));
+    return Object.freeze({
+        lines: Object.freeze(lines),
+        starts: Object.freeze(starts),
+        ends: Object.freeze(ends),
+    });
+}
+function findInputLineIndex(meta, cursor) {
+    const c = Math.max(0, cursor);
+    for (let i = 0; i < meta.ends.length; i++) {
+        const end = meta.ends[i] ?? 0;
+        if (c <= end)
+            return i;
+    }
+    return Math.max(0, meta.ends.length - 1);
+}
+function resolveMultilineCursorPosition(value, cursor, contentWidth, wordWrap) {
+    const width = Math.max(1, contentWidth);
+    const meta = buildInputLineMeta(value);
+    const visualLines = [];
+    const wrappedCountByLine = [];
+    for (const line of meta.lines) {
+        const wrapped = wordWrap ? wrapLineByCells(line, width) : Object.freeze([line]);
+        wrappedCountByLine.push(wrapped.length);
+        for (const segment of wrapped) {
+            visualLines.push(segment);
+        }
+    }
+    const lineIndex = findInputLineIndex(meta, cursor);
+    const lineStart = meta.starts[lineIndex] ?? 0;
+    const lineEnd = meta.ends[lineIndex] ?? value.length;
+    const col = Math.max(0, Math.min(Math.max(0, lineEnd - lineStart), cursor - lineStart));
+    const lineText = meta.lines[lineIndex] ?? "";
+    let visualLine = 0;
+    for (let i = 0; i < lineIndex; i++) {
+        visualLine += wrappedCountByLine[i] ?? 1;
+    }
+    if (!wordWrap) {
+        return Object.freeze({
+            visualLine,
+            visualX: measureTextCells(lineText.slice(0, col)),
+            visualLines: Object.freeze(visualLines.length > 0 ? visualLines : [""]),
+        });
+    }
+    const wrappedPrefix = wrapLineByCells(lineText.slice(0, col), width);
+    const wrappedLineOffset = Math.max(0, wrappedPrefix.length - 1);
+    const visualX = measureTextCells(wrappedPrefix[wrappedLineOffset] ?? "");
+    return Object.freeze({
+        visualLine: visualLine + wrappedLineOffset,
+        visualX,
+        visualLines: Object.freeze(visualLines.length > 0 ? visualLines : [""]),
+    });
+}
+function resolveFocusFlags(focusState, id, focusConfigRaw, widgetKind, focusEnabled = true) {
+    const focusConfig = readFocusConfig(focusConfigRaw) ?? getDefaultFocusConfig(widgetKind);
+    const focused = id !== null && focusState.focusedId === id;
+    const focusVisible = focused && focusEnabled && focusIndicatorEnabled(focusConfig);
+    return { focused, focusVisible, focusConfig };
+}
+export function renderFormWidgets(builder, focusState, pressedId, rect, theme, parentStyle, node, layoutNode, nodeStack, styleStack, layoutStack, clipStack, currentClip, cursorInfo, maybeFillOwnBackground) {
+    const vnode = node.vnode;
+    let resolvedCursor = null;
+    switch (vnode.kind) {
+        case "button": {
+            if (!isVisibleRect(rect))
+                break;
+            const props = vnode.props;
+            const id = typeof props.id === "string" ? props.id : null;
+            const label = typeof props.label === "string" ? props.label : "";
+            const disabled = props.disabled === true;
+            const { focused, focusVisible: effectiveFocused, focusConfig, } = resolveFocusFlags(focusState, id, props.focusConfig, "button", !disabled);
+            const pressed = !disabled && id !== null && pressedId === id;
+            // Design system recipe path
+            const colorTokens = getColorTokens(theme);
+            const dsVariant = readWidgetVariant(props.dsVariant) ?? "soft";
+            if (colorTokens !== null) {
+                // Use design system recipe
+                const dsTone = readWidgetTone(props.dsTone) ?? "default";
+                const dsSize = readWidgetSize(props.dsSize) ?? "md";
+                const state = disabled
+                    ? "disabled"
+                    : pressed
+                        ? "pressed"
+                        : effectiveFocused
+                            ? "focus"
+                            : "default";
+                const recipeResult = buttonRecipe(colorTokens, {
+                    variant: dsVariant,
+                    tone: dsTone,
+                    size: dsSize,
+                    state,
+                    spacing: theme.spacing,
+                });
+                const hasBorder = recipeResult.border !== "none" && rect.w >= 2 && rect.h >= 2;
+                const insetContent = hasBorder && rect.w >= 3 && rect.h >= 3;
+                const contentX = insetContent ? rect.x + 1 : rect.x;
+                const contentW = insetContent ? Math.max(0, rect.w - 2) : rect.w;
+                const contentY = insetContent ? rect.y + Math.floor((rect.h - 1) / 2) : rect.y;
+                const requestedPx = typeof props.px === "number" && Number.isFinite(props.px) && props.px >= 0
+                    ? Math.trunc(props.px)
+                    : undefined;
+                const recipePx = requestedPx ?? recipeResult.px;
+                const focusDecoration = effectiveFocused
+                    ? resolveFocusIndicatorDecoration(parentStyle, theme, focusConfig)
+                    : undefined;
+                const decorationPrefixW = focusDecoration ? measureTextCells(focusDecoration.prefix) : 0;
+                const decorationSuffixW = focusDecoration ? measureTextCells(focusDecoration.suffix) : 0;
+                const labelW = measureTextCells(label);
+                const maxPxForAtLeastOneCell = contentW <= 0 ? 0 : Math.max(0, Math.floor((contentW - 1) / 2));
+                let px = Math.min(recipePx, maxPxForAtLeastOneCell);
+                // If the label would fit without padding but is truncated by recipe padding, reduce px so it fits.
+                if (labelW > 0 && labelW <= contentW) {
+                    const maxPxToFitFullLabel = Math.max(0, Math.floor((contentW - labelW - decorationPrefixW - decorationSuffixW) / 2));
+                    px = Math.min(px, maxPxToFitFullLabel);
+                }
+                const availableRunW = Math.max(0, contentW - px * 2);
+                const availableLabelW = Math.max(0, availableRunW - decorationPrefixW - decorationSuffixW);
+                const displayLabel = availableLabelW <= 0
+                    ? ""
+                    : measureTextCells(label) > availableLabelW
+                        ? truncateWithEllipsis(label, availableLabelW)
+                        : label;
+                // Fill background if solid/soft variant provides bg color
+                if (recipeResult.bg.bg) {
+                    const bgStyle = mergeTextStyle(parentStyle, recipeResult.bg);
+                    builder.fillRect(rect.x, rect.y, rect.w, rect.h, bgStyle);
+                }
+                if (hasBorder) {
+                    let borderStyle = mergeTextStyle(parentStyle, recipeResult.borderStyle);
+                    if (recipeResult.bg.bg) {
+                        borderStyle = mergeTextStyle(borderStyle, { bg: recipeResult.bg.bg });
+                    }
+                    renderBoxBorder(builder, rect, recipeResult.border, undefined, "left", borderStyle);
+                }
+                // Draw label
+                if (displayLabel.length > 0 || focusDecoration) {
+                    // Keep text cells on the same background as the filled button surface.
+                    // Without this, inherited parent bg would repaint label cells and leave
+                    // only side padding visibly filled.
+                    let labelStyle = mergeTextStyle(parentStyle, recipeResult.bg.bg
+                        ? { ...recipeResult.label, bg: recipeResult.bg.bg }
+                        : recipeResult.label);
+                    // Allow label overrides (merged on top of the recipe result).
+                    const ownStyle = asTextStyle(props.style, theme);
+                    if (ownStyle)
+                        labelStyle = mergeTextStyle(labelStyle, ownStyle);
+                    const pressedStyle = asTextStyle(props.pressedStyle, theme);
+                    if (pressedStyle && pressed)
+                        labelStyle = mergeTextStyle(labelStyle, pressedStyle);
+                    const drawX = contentX + px;
+                    if (focusDecoration) {
+                        drawSegments(builder, drawX, contentY, availableRunW, [
+                            { text: focusDecoration.prefix, style: focusDecoration.style },
+                            { text: displayLabel, style: labelStyle },
+                            { text: focusDecoration.suffix, style: focusDecoration.style },
+                        ]);
+                    }
+                    else if (displayLabel.length > 0) {
+                        builder.drawText(drawX, contentY, displayLabel, labelStyle);
+                    }
+                }
+            }
+            else {
+                // Legacy path: original ad-hoc styling
+                const requestedPx = typeof props.px === "number" && Number.isFinite(props.px) && props.px >= 0
+                    ? Math.trunc(props.px)
+                    : undefined;
+                const focusDecoration = effectiveFocused
+                    ? resolveFocusIndicatorDecoration(parentStyle, theme, focusConfig)
+                    : undefined;
+                const decorationPrefixW = focusDecoration ? measureTextCells(focusDecoration.prefix) : 0;
+                const decorationSuffixW = focusDecoration ? measureTextCells(focusDecoration.suffix) : 0;
+                const labelW = measureTextCells(label);
+                const maxPxForAtLeastOneCell = rect.w <= 0 ? 0 : Math.max(0, Math.floor((rect.w - 1) / 2));
+                let px = Math.min(requestedPx ?? 1, maxPxForAtLeastOneCell);
+                if (labelW > 0 && labelW <= rect.w) {
+                    const maxPxToFitFullLabel = Math.max(0, Math.floor((rect.w - labelW - decorationPrefixW - decorationSuffixW) / 2));
+                    px = Math.min(px, maxPxToFitFullLabel);
+                }
+                const availableRunW = Math.max(0, rect.w - px * 2);
+                const availableLabelW = Math.max(0, availableRunW - decorationPrefixW - decorationSuffixW);
+                const displayLabel = availableLabelW <= 0
+                    ? ""
+                    : measureTextCells(label) > availableLabelW
+                        ? truncateWithEllipsis(label, availableLabelW)
+                        : label;
+                const ownStyle = asTextStyle(props.style, theme);
+                const baseLabelStyle = mergeTextStyle(mergeTextStyle(parentStyle, ownStyle), getButtonLabelStyle({ focused: effectiveFocused, disabled }));
+                let labelStyle = effectiveFocused
+                    ? resolveFocusedContentStyle(baseLabelStyle, theme, focusConfig)
+                    : baseLabelStyle;
+                const pressedStyle = asTextStyle(props.pressedStyle, theme);
+                if (pressedStyle && pressed) {
+                    labelStyle = mergeTextStyle(labelStyle, pressedStyle);
+                }
+                if (displayLabel.length > 0 || focusDecoration) {
+                    if (focusState.focusedId !== null) {
+                        const clearRun = repeatCached(" ", rect.w);
+                        if (clearRun.length > 0) {
+                            const clearStyle = ownStyle ? mergeTextStyle(parentStyle, ownStyle) : parentStyle;
+                            builder.drawText(rect.x, rect.y, clearRun, clearStyle);
+                        }
+                    }
+                    const drawX = rect.x + px;
+                    if (focusDecoration) {
+                        drawSegments(builder, drawX, rect.y, availableRunW, [
+                            { text: focusDecoration.prefix, style: focusDecoration.style },
+                            { text: displayLabel, style: labelStyle },
+                            { text: focusDecoration.suffix, style: focusDecoration.style },
+                        ]);
+                    }
+                    else if (displayLabel.length > 0) {
+                        builder.drawText(drawX, rect.y, displayLabel, labelStyle);
+                    }
+                }
+            }
+            break;
+        }
+        case "input": {
+            if (!isVisibleRect(rect))
+                break;
+            const props = vnode.props;
+            const id = typeof props.id === "string" ? props.id : null;
+            const value = typeof props.value === "string" ? props.value : "";
+            const placeholder = typeof props.placeholder === "string" ? props.placeholder : "";
+            const disabled = props.disabled === true;
+            const multiline = props.multiline === true;
+            const wordWrap = props.wordWrap !== false;
+            const { focused, focusVisible, focusConfig } = resolveFocusFlags(focusState, id, props.focusConfig, "input", !disabled);
+            const showPlaceholder = value.length === 0 && placeholder.length > 0;
+            const colorTokens = getColorTokens(theme);
+            const dsSize = readWidgetSize(props.dsSize) ?? "md";
+            let textX = rect.x + 1;
+            let textY = rect.y;
+            let contentW = Math.max(1, rect.w - 2);
+            let contentH = Math.max(1, rect.h);
+            let style;
+            let placeholderStyle;
+            if (colorTokens !== null) {
+                const state = disabled
+                    ? "disabled"
+                    : focusVisible
+                        ? "focus"
+                        : "default";
+                const recipeResult = inputRecipe(colorTokens, {
+                    state,
+                    size: dsSize,
+                    spacing: theme.spacing,
+                });
+                // Only draw a border when there's at least a 1x1 interior (avoid overwriting border with content).
+                const hasBorder = recipeResult.border !== "none" && rect.w >= 3 && rect.h >= 3;
+                const borderInset = hasBorder ? 1 : 0;
+                const innerW = Math.max(0, rect.w - borderInset * 2);
+                const maxPxForAtLeastOneCell = innerW <= 0 ? 0 : Math.max(0, Math.floor((innerW - 1) / 2));
+                let px = Math.min(recipeResult.px, maxPxForAtLeastOneCell);
+                // For single-line inputs, try to keep the full value/placeholder visible by reducing px when possible.
+                if (!multiline) {
+                    const displayText = showPlaceholder ? placeholder : value;
+                    const displayW = measureTextCells(displayText);
+                    if (displayW > 0 && displayW <= innerW) {
+                        const maxPxToFitFullText = Math.max(0, Math.floor((innerW - displayW) / 2));
+                        px = Math.min(px, maxPxToFitFullText);
+                    }
+                }
+                const startXInset = borderInset + px;
+                const endXInset = borderInset + px;
+                textX = rect.x + startXInset;
+                textY = rect.y + borderInset;
+                contentW = Math.max(0, rect.w - startXInset - endXInset);
+                contentH = Math.max(0, rect.h - borderInset * 2);
+                if (recipeResult.bg.bg) {
+                    const bgStyle = mergeTextStyle(parentStyle, recipeResult.bg);
+                    builder.fillRect(rect.x, rect.y, rect.w, rect.h, bgStyle);
+                }
+                if (hasBorder) {
+                    let borderStyle = mergeTextStyle(parentStyle, recipeResult.borderStyle);
+                    if (recipeResult.bg.bg) {
+                        borderStyle = mergeTextStyle(borderStyle, { bg: recipeResult.bg.bg });
+                    }
+                    renderBoxBorder(builder, rect, recipeResult.border, undefined, "left", borderStyle);
+                }
+                const recipeTextStyle = recipeResult.bg.bg
+                    ? { ...recipeResult.text, bg: recipeResult.bg.bg }
+                    : recipeResult.text;
+                const recipePlaceholderStyle = recipeResult.bg.bg
+                    ? { ...recipeResult.placeholder, bg: recipeResult.bg.bg, dim: true }
+                    : { ...recipeResult.placeholder, dim: true };
+                const compactFocusStyle = focusVisible && !hasBorder
+                    ? resolveWidgetFocusStyle(colorTokens, true, false, theme.focusIndicator)
+                    : undefined;
+                const ownStyle = asTextStyle(props.style, theme);
+                const baseStyle = mergeTextStyle(mergeTextStyle(parentStyle, recipeTextStyle), compactFocusStyle);
+                const basePlaceholderStyle = mergeTextStyle(mergeTextStyle(parentStyle, recipePlaceholderStyle), compactFocusStyle);
+                style = ownStyle ? mergeTextStyle(baseStyle, ownStyle) : baseStyle;
+                placeholderStyle = ownStyle
+                    ? mergeTextStyle(basePlaceholderStyle, ownStyle)
+                    : basePlaceholderStyle;
+            }
+            else {
+                const ownStyle = asTextStyle(props.style, theme);
+                const baseInputStyle = mergeTextStyle(mergeTextStyle(parentStyle, ownStyle), getButtonLabelStyle({ focused: focusVisible, disabled }));
+                style = focusVisible
+                    ? resolveFocusedContentStyle(baseInputStyle, theme, focusConfig)
+                    : baseInputStyle;
+                placeholderStyle = mergeTextStyle(style, { fg: theme.colors.muted, dim: true });
+            }
+            if (contentW <= 0 || contentH <= 0)
+                break;
+            if (multiline) {
+                const graphemeOffset = cursorInfo?.cursorByInstanceId.get(node.instanceId) ?? value.length;
+                const wrapped = resolveMultilineCursorPosition(value, graphemeOffset, contentW, wordWrap);
+                const maxStartVisual = Math.max(0, wrapped.visualLines.length - contentH);
+                const startVisual = focused && !disabled
+                    ? Math.max(0, Math.min(maxStartVisual, wrapped.visualLine - contentH + 1))
+                    : 0;
+                const horizontalScroll = focused && !disabled && !wordWrap ? Math.max(0, wrapped.visualX - contentW + 1) : 0;
+                builder.pushClip(textX, textY, contentW, contentH);
+                for (let row = 0; row < contentH; row++) {
+                    const rawLine = showPlaceholder
+                        ? row === 0
+                            ? placeholder
+                            : ""
+                        : (wrapped.visualLines[startVisual + row] ?? "");
+                    const line = wordWrap
+                        ? rawLine
+                        : sliceTextToCellWindow(rawLine, horizontalScroll, contentW).text;
+                    if (line.length === 0)
+                        continue;
+                    builder.drawText(textX, textY + row, line, showPlaceholder ? placeholderStyle : style);
+                }
+                builder.popClip();
+                if (focused && !disabled && cursorInfo && contentW > 0) {
+                    const localY = wrapped.visualLine - startVisual;
+                    if (localY >= 0 && localY < contentH) {
+                        const maxCursorX = Math.max(0, contentW - 1);
+                        const localX = wordWrap ? wrapped.visualX : wrapped.visualX - horizontalScroll;
+                        resolvedCursor = {
+                            x: textX + clampInt(localX, 0, maxCursorX),
+                            y: textY + localY,
+                            shape: cursorInfo.shape,
+                            blink: cursorInfo.blink,
+                        };
+                    }
+                }
+            }
+            else {
+                const text = showPlaceholder ? placeholder : value;
+                builder.pushClip(textX, textY, contentW, contentH);
+                builder.drawText(textX, textY, text, showPlaceholder ? placeholderStyle : style);
+                builder.popClip();
+                // Cursor protocol: resolve cursor position for focused enabled input
+                if (focused && !disabled && cursorInfo && contentW > 0) {
+                    // Cursor offset is stored as grapheme index; convert to cell position
+                    const graphemeOffset = cursorInfo.cursorByInstanceId.get(node.instanceId);
+                    const cursorX = graphemeOffset !== undefined
+                        ? measureTextCells(value.slice(0, graphemeOffset))
+                        : measureTextCells(value);
+                    const maxCursorX = Math.max(0, contentW - 1);
+                    resolvedCursor = {
+                        x: textX + clampInt(cursorX, 0, maxCursorX),
+                        y: textY,
+                        shape: cursorInfo.shape,
+                        blink: cursorInfo.blink,
+                    };
+                }
+            }
+            break;
+        }
+        case "slider": {
+            if (!isVisibleRect(rect))
+                break;
+            const props = vnode.props;
+            const id = readString(props.id);
+            const disabled = props.disabled === true;
+            const { focused, focusVisible, focusConfig } = resolveFocusFlags(focusState, id ?? null, props.focusConfig, "slider", !disabled);
+            const readOnly = props.readOnly === true;
+            const label = readString(props.label) ?? "";
+            const showValue = props.showValue !== false;
+            const value = readNumber(props.value) ?? Number.NaN;
+            const colorTokens = getColorTokens(theme);
+            const min = readNumber(props.min);
+            const max = readNumber(props.max);
+            const step = readNumber(props.step);
+            const normalized = normalizeSliderState({ value, min, max, step });
+            const recipeResult = colorTokens !== null
+                ? sliderRecipe(colorTokens, {
+                    state: disabled
+                        ? "disabled"
+                        : readOnly
+                            ? "readonly"
+                            : focusVisible
+                                ? "focus"
+                                : "default",
+                })
+                : null;
+            const ownStyle = asTextStyle(props.style, theme);
+            const style = mergeTextStyle(parentStyle, ownStyle);
+            maybeFillOwnBackground(builder, rect, ownStyle, style);
+            const focusStyle = resolveWidgetFocusStyle(colorTokens, focusVisible, disabled, theme.focusIndicator);
+            let stateStyle;
+            if (disabled) {
+                stateStyle = { fg: theme.colors.muted };
+            }
+            else if (readOnly) {
+                stateStyle = focusStyle ? { ...focusStyle, dim: true } : { dim: true };
+            }
+            else {
+                stateStyle = focusStyle ?? {};
+            }
+            const baseTextStyle = mergeTextStyle(style, stateStyle);
+            const textStyle = focusVisible
+                ? resolveFocusedContentStyle(baseTextStyle, theme, focusConfig)
+                : baseTextStyle;
+            const labelText = label.length > 0 ? `${label} ` : "";
+            const valueText = showValue === true ? ` ${formatSliderValue(normalized.value, normalized.step)}` : "";
+            const dynamicTrack = rect.w - measureTextCells(labelText) - measureTextCells(valueText) - 2; // '[' + ']'
+            const explicitTrack = readPositiveInt(props.width);
+            const trackCells = Math.max(1, explicitTrack ?? Math.max(1, dynamicTrack > 0 ? dynamicTrack : DEFAULT_SLIDER_TRACK_WIDTH));
+            const span = normalized.max - normalized.min;
+            const ratio = span <= 0 ? 0 : clamp01((normalized.value - normalized.min) / span);
+            const thumbIndex = trackCells <= 1
+                ? 0
+                : Math.max(0, Math.min(trackCells - 1, Math.round(ratio * (trackCells - 1))));
+            const fillCells = trackCells <= 1 ? 0 : thumbIndex;
+            const emptyCells = Math.max(0, trackCells - fillCells - 1);
+            const filledText = repeatCached("█", fillCells);
+            const emptyText = repeatCached("░", emptyCells);
+            const filledStyle = recipeResult !== null
+                ? mergeTextStyle(textStyle, recipeResult.filled)
+                : mergeTextStyle(textStyle, disabled
+                    ? { fg: theme.colors.muted }
+                    : readOnly
+                        ? { fg: theme.colors.info, dim: true }
+                        : { fg: theme.colors.primary, bold: true });
+            const thumbStyle = recipeResult !== null
+                ? mergeTextStyle(textStyle, recipeResult.thumb)
+                : mergeTextStyle(textStyle, disabled
+                    ? { fg: theme.colors.muted }
+                    : readOnly
+                        ? { fg: theme.colors.info, dim: true }
+                        : { fg: theme.colors.primary, bold: true });
+            const emptyStyle = recipeResult !== null
+                ? mergeTextStyle(textStyle, recipeResult.track)
+                : mergeTextStyle(textStyle, disabled
+                    ? { fg: theme.colors.muted }
+                    : readOnly
+                        ? { fg: theme.colors.info, dim: true }
+                        : { fg: theme.colors.primary, bold: true });
+            const valueStyle = mergeTextStyle(textStyle, !disabled && readOnly ? { fg: theme.colors.muted } : undefined);
+            const segments = [];
+            if (labelText.length > 0)
+                segments.push({ text: labelText, style: textStyle });
+            segments.push({ text: "[", style: textStyle });
+            if (filledText.length > 0)
+                segments.push({ text: filledText, style: filledStyle });
+            segments.push({ text: "●", style: thumbStyle });
+            if (emptyText.length > 0)
+                segments.push({ text: emptyText, style: emptyStyle });
+            segments.push({ text: "]", style: textStyle });
+            if (valueText.length > 0)
+                segments.push({ text: valueText, style: valueStyle });
+            builder.pushClip(rect.x, rect.y, rect.w, rect.h);
+            drawSegments(builder, rect.x, rect.y, rect.w, segments);
+            builder.popClip();
+            break;
+        }
+        case "spacer":
+            break;
+        case "field": {
+            if (!isVisibleRect(rect))
+                break;
+            const props = vnode.props;
+            const label = typeof props.label === "string" ? props.label : "";
+            const required = props.required === true;
+            const error = typeof props.error === "string" ? props.error : undefined;
+            const hint = typeof props.hint === "string" ? props.hint : undefined;
+            const labelText = buildFieldLabel(label, required);
+            const showError = shouldShowError(error);
+            const footer = getFieldFooterText(error, hint);
+            const labelStyle = mergeTextStyle(parentStyle, FIELD_LABEL_STYLE);
+            builder.pushClip(rect.x, rect.y, rect.w, rect.h);
+            builder.drawText(rect.x, rect.y, truncateToWidth(labelText, rect.w), labelStyle);
+            if (rect.h >= 2) {
+                const footerY = rect.y + rect.h - 1;
+                if (footer) {
+                    const footerBaseStyle = showError ? FIELD_ERROR_STYLE : FIELD_HINT_STYLE;
+                    const footerColorStyle = showError
+                        ? { fg: theme.colors.danger }
+                        : { fg: theme.colors.muted };
+                    const footerStyle = mergeTextStyle(mergeTextStyle(parentStyle, footerBaseStyle), footerColorStyle);
+                    builder.drawText(rect.x, footerY, truncateToWidth(footer, rect.w), footerStyle);
+                }
+            }
+            builder.popClip();
+            const childCount = Math.min(node.children.length, layoutNode.children.length);
+            for (let i = childCount - 1; i >= 0; i--) {
+                const c = node.children[i];
+                const lc = layoutNode.children[i];
+                if (c && lc) {
+                    nodeStack.push(c);
+                    styleStack.push(parentStyle);
+                    layoutStack.push(lc);
+                    clipStack.push(currentClip);
+                }
+            }
+            break;
+        }
+        case "select": {
+            if (!isVisibleRect(rect))
+                break;
+            const props = vnode.props;
+            const id = typeof props.id === "string" ? props.id : null;
+            const disabled = props.disabled === true;
+            const { focusVisible, focusConfig } = resolveFocusFlags(focusState, id, props.focusConfig, "select", !disabled);
+            const value = typeof props.value === "string" ? props.value : "";
+            const placeholder = typeof props.placeholder === "string" ? props.placeholder : DEFAULT_PLACEHOLDER;
+            const options = Array.isArray(props.options)
+                ? props.options
+                : [];
+            const label = getSelectDisplayText(value, options, placeholder);
+            const colorTokens = getColorTokens(theme);
+            const dsSize = readWidgetSize(props.dsSize) ?? "md";
+            const focusDecoration = focusVisible
+                ? resolveFocusIndicatorDecoration(parentStyle, theme, focusConfig)
+                : undefined;
+            const decorationPrefixW = focusDecoration ? measureTextCells(focusDecoration.prefix) : 0;
+            const decorationSuffixW = focusDecoration ? measureTextCells(focusDecoration.suffix) : 0;
+            if (colorTokens !== null) {
+                const state = disabled
+                    ? "disabled"
+                    : focusVisible
+                        ? "focus"
+                        : "default";
+                const recipeResult = selectRecipe(colorTokens, {
+                    state,
+                    size: dsSize,
+                    spacing: theme.spacing,
+                });
+                const hasBorder = recipeResult.border !== "none" && rect.w >= 3 && rect.h >= 3;
+                const borderInset = hasBorder ? 1 : 0;
+                const innerW = Math.max(0, rect.w - borderInset * 2);
+                const innerH = Math.max(0, rect.h - borderInset * 2);
+                const indicator = "▼";
+                const indicatorWidth = measureTextCells(indicator);
+                // Ensure at least the indicator fits; reduce px when possible to fit full label.
+                const minContentW = Math.max(0, indicatorWidth);
+                const maxPxForMinContent = innerW <= minContentW ? 0 : Math.max(0, Math.floor((innerW - minContentW) / 2));
+                let px = Math.min(recipeResult.px, maxPxForMinContent);
+                const labelW = measureTextCells(label);
+                const requiredWToFitLabel = labelW + decorationPrefixW + decorationSuffixW + indicatorWidth + (labelW > 0 ? 1 : 0);
+                if (labelW > 0 && requiredWToFitLabel <= innerW) {
+                    const maxPxToFitFullLabel = Math.max(0, Math.floor((innerW - requiredWToFitLabel) / 2));
+                    px = Math.min(px, maxPxToFitFullLabel);
+                }
+                const contentX = rect.x + borderInset + px;
+                const contentW = Math.max(0, innerW - px * 2);
+                const contentY = rect.y + borderInset + Math.max(0, Math.floor((Math.max(1, innerH) - 1) / 2));
+                if (recipeResult.triggerBg.bg) {
+                    const bgStyle = mergeTextStyle(parentStyle, recipeResult.triggerBg);
+                    builder.fillRect(rect.x, rect.y, rect.w, rect.h, bgStyle);
+                }
+                if (hasBorder) {
+                    let borderStyle = mergeTextStyle(parentStyle, recipeResult.borderStyle);
+                    if (recipeResult.triggerBg.bg) {
+                        borderStyle = mergeTextStyle(borderStyle, { bg: recipeResult.triggerBg.bg });
+                    }
+                    renderBoxBorder(builder, rect, recipeResult.border, undefined, "left", borderStyle);
+                }
+                const triggerStyle = mergeTextStyle(parentStyle, recipeResult.triggerBg.bg
+                    ? { ...recipeResult.trigger, bg: recipeResult.triggerBg.bg }
+                    : recipeResult.trigger);
+                const availableLabelW = contentW <= 0
+                    ? 0
+                    : Math.max(0, contentW -
+                        indicatorWidth -
+                        (contentW > indicatorWidth ? 1 : 0) -
+                        decorationPrefixW -
+                        decorationSuffixW);
+                const displayLabel = availableLabelW <= 0
+                    ? ""
+                    : measureTextCells(label) > availableLabelW
+                        ? truncateWithEllipsis(label, availableLabelW)
+                        : label;
+                if (innerW > 0 && innerH > 0) {
+                    builder.pushClip(rect.x + borderInset, rect.y + borderInset, innerW, innerH);
+                    const segments = [];
+                    if (focusDecoration) {
+                        segments.push({ text: focusDecoration.prefix, style: focusDecoration.style });
+                    }
+                    if (displayLabel.length > 0) {
+                        segments.push({ text: displayLabel, style: triggerStyle });
+                    }
+                    if (focusDecoration) {
+                        segments.push({ text: focusDecoration.suffix, style: focusDecoration.style });
+                    }
+                    if (displayLabel.length > 0 && contentW > indicatorWidth) {
+                        segments.push({ text: " ", style: triggerStyle });
+                    }
+                    segments.push({ text: indicator, style: triggerStyle });
+                    drawSegments(builder, contentX, contentY, contentW, segments);
+                    builder.popClip();
+                }
+            }
+            else {
+                const baseStyle = mergeTextStyle(parentStyle, disabled
+                    ? { fg: theme.colors.muted }
+                    : resolveWidgetFocusStyle(colorTokens, focusVisible, false, theme.focusIndicator));
+                const style = focusVisible
+                    ? resolveFocusedContentStyle(baseStyle, theme, focusConfig)
+                    : baseStyle;
+                builder.pushClip(rect.x, rect.y, rect.w, rect.h);
+                const segments = [{ text: " ", style }];
+                if (focusDecoration) {
+                    segments.push({ text: focusDecoration.prefix, style: focusDecoration.style });
+                }
+                if (label.length > 0) {
+                    segments.push({ text: label, style });
+                }
+                if (focusDecoration) {
+                    segments.push({ text: focusDecoration.suffix, style: focusDecoration.style });
+                }
+                segments.push({ text: " ▼", style });
+                drawSegments(builder, rect.x, rect.y, rect.w, segments);
+                builder.popClip();
+            }
+            break;
+        }
+        case "checkbox": {
+            if (!isVisibleRect(rect))
+                break;
+            const props = vnode.props;
+            const id = typeof props.id === "string" ? props.id : null;
+            const disabled = props.disabled === true;
+            const { focusVisible, focusConfig } = resolveFocusFlags(focusState, id, props.focusConfig, "checkbox", !disabled);
+            const checked = props.checked === true;
+            const label = typeof props.label === "string" ? props.label : "";
+            const indicator = checked ? "[x]" : "[ ]";
+            const focusDecoration = focusVisible
+                ? resolveFocusIndicatorDecoration(parentStyle, theme, focusConfig)
+                : undefined;
+            const colorTokens = getColorTokens(theme);
+            const dsTone = readWidgetTone(props.dsTone);
+            const dsSize = readWidgetSize(props.dsSize) ?? "md";
+            builder.pushClip(rect.x, rect.y, rect.w, rect.h);
+            if (colorTokens !== null) {
+                const state = disabled
+                    ? "disabled"
+                    : focusVisible
+                        ? "focus"
+                        : checked
+                            ? "selected"
+                            : "default";
+                const recipeResult = checkboxRecipe(colorTokens, dsTone === undefined
+                    ? { state, checked, size: dsSize }
+                    : { state, checked, tone: dsTone, size: dsSize });
+                const indicatorBaseStyle = mergeTextStyle(parentStyle, recipeResult.indicator);
+                const labelBaseStyle = mergeTextStyle(parentStyle, recipeResult.label);
+                const indicatorStyle = focusVisible
+                    ? resolveFocusedContentStyle(indicatorBaseStyle, theme, focusConfig)
+                    : indicatorBaseStyle;
+                const labelStyle = focusVisible
+                    ? resolveFocusedContentStyle(labelBaseStyle, theme, focusConfig)
+                    : labelBaseStyle;
+                const segments = [];
+                if (focusDecoration) {
+                    segments.push({ text: focusDecoration.prefix, style: focusDecoration.style });
+                }
+                segments.push({ text: indicator, style: indicatorStyle });
+                if (label.length > 0) {
+                    segments.push({ text: " ", style: labelStyle });
+                    segments.push({ text: label, style: labelStyle });
+                }
+                if (focusDecoration) {
+                    segments.push({ text: focusDecoration.suffix, style: focusDecoration.style });
+                }
+                drawSegments(builder, rect.x, rect.y, rect.w, segments);
+            }
+            else {
+                const text = label.length > 0 ? `${indicator} ${label}` : indicator;
+                const baseStyle = mergeTextStyle(parentStyle, disabled
+                    ? { fg: theme.colors.muted }
+                    : resolveWidgetFocusStyle(colorTokens, focusVisible, false, theme.focusIndicator));
+                const style = focusVisible
+                    ? resolveFocusedContentStyle(baseStyle, theme, focusConfig)
+                    : baseStyle;
+                const segments = [];
+                if (focusDecoration) {
+                    segments.push({ text: focusDecoration.prefix, style: focusDecoration.style });
+                }
+                segments.push({ text, style });
+                if (focusDecoration) {
+                    segments.push({ text: focusDecoration.suffix, style: focusDecoration.style });
+                }
+                drawSegments(builder, rect.x, rect.y, rect.w, segments);
+            }
+            builder.popClip();
+            break;
+        }
+        case "radioGroup": {
+            if (!isVisibleRect(rect))
+                break;
+            const props = vnode.props;
+            const id = typeof props.id === "string" ? props.id : null;
+            const disabled = props.disabled === true;
+            const { focusVisible, focusConfig } = resolveFocusFlags(focusState, id, props.focusConfig, "radioGroup", !disabled);
+            const value = typeof props.value === "string" ? props.value : "";
+            const direction = props.direction === "horizontal" ? "horizontal" : "vertical";
+            const options = Array.isArray(props.options) ? props.options : [];
+            const colorTokens = getColorTokens(theme);
+            const dsTone = readWidgetTone(props.dsTone);
+            const dsSize = readWidgetSize(props.dsSize) ?? "md";
+            const focusDecoration = focusVisible
+                ? resolveFocusIndicatorDecoration(parentStyle, theme, focusConfig)
+                : undefined;
+            builder.pushClip(rect.x, rect.y, rect.w, rect.h);
+            let cx = rect.x;
+            let cy = rect.y;
+            for (const opt of options) {
+                if (typeof opt !== "object" || opt === null)
+                    continue;
+                const optionValue = opt.value;
+                const optionLabel = opt.label;
+                if (typeof optionValue !== "string" || typeof optionLabel !== "string")
+                    continue;
+                const selected = optionValue === value;
+                const optionDisabled = disabled || opt.disabled === true;
+                const mark = selected ? "(o)" : "( )";
+                if (colorTokens !== null) {
+                    const state = optionDisabled
+                        ? "disabled"
+                        : focusVisible && selected
+                            ? "focus"
+                            : selected
+                                ? "selected"
+                                : "default";
+                    const recipeResult = checkboxRecipe(colorTokens, dsTone === undefined
+                        ? { state, checked: selected, size: dsSize }
+                        : { state, checked: selected, tone: dsTone, size: dsSize });
+                    const indicatorBaseStyle = mergeTextStyle(parentStyle, recipeResult.indicator);
+                    const labelBaseStyle = mergeTextStyle(parentStyle, recipeResult.label);
+                    const indicatorStyle = focusVisible
+                        ? resolveFocusedContentStyle(indicatorBaseStyle, theme, focusConfig)
+                        : indicatorBaseStyle;
+                    const labelStyle = focusVisible
+                        ? resolveFocusedContentStyle(labelBaseStyle, theme, focusConfig)
+                        : labelBaseStyle;
+                    const segments = [];
+                    if (selected && focusDecoration) {
+                        segments.push({ text: focusDecoration.prefix, style: focusDecoration.style });
+                    }
+                    segments.push({ text: mark, style: indicatorStyle });
+                    if (optionLabel.length > 0) {
+                        segments.push({ text: " ", style: labelStyle });
+                        segments.push({ text: optionLabel, style: labelStyle });
+                    }
+                    if (selected && focusDecoration) {
+                        segments.push({ text: focusDecoration.suffix, style: focusDecoration.style });
+                    }
+                    drawSegments(builder, cx, cy, rect.w - (cx - rect.x), segments);
+                }
+                else {
+                    const focusStyle = focusVisible ? { underline: true, bold: true } : undefined;
+                    const baseStyle = mergeTextStyle(parentStyle, optionDisabled ? { fg: theme.colors.muted, ...focusStyle } : focusStyle);
+                    const style = focusVisible
+                        ? resolveFocusedContentStyle(baseStyle, theme, focusConfig)
+                        : baseStyle;
+                    const chunk = `${mark} ${optionLabel}`;
+                    const segments = [];
+                    if (selected && focusDecoration) {
+                        segments.push({ text: focusDecoration.prefix, style: focusDecoration.style });
+                    }
+                    segments.push({ text: chunk, style });
+                    if (selected && focusDecoration) {
+                        segments.push({ text: focusDecoration.suffix, style: focusDecoration.style });
+                    }
+                    drawSegments(builder, cx, cy, rect.w - (cx - rect.x), segments);
+                }
+                const chunk = `${mark} ${optionLabel}`;
+                const decoratedChunk = selected && focusDecoration
+                    ? `${focusDecoration.prefix}${chunk}${focusDecoration.suffix}`
+                    : chunk;
+                if (direction === "horizontal") {
+                    cx += measureTextCells(decoratedChunk) + 2;
+                }
+                else {
+                    cy += 1;
+                }
+                if (cy >= rect.y + rect.h)
+                    break;
+            }
+            builder.popClip();
+            break;
+        }
+        default:
+            return undefined;
+    }
+    return resolvedCursor;
+}
+//# sourceMappingURL=renderFormWidgets.js.map