@rezi-ui/core 0.1.0-alpha.9 → 0.1.0-beta.2

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

@@ -0,0 +1,193 @@
+import { accordionRecipe, breadcrumbRecipe, paginationRecipe, tabsRecipe, } from "../../../ui/recipes.js";
+import { getAccordionHeadersZoneId } from "../../../widgets/accordion.js";
+import { getPaginationZoneId } from "../../../widgets/pagination.js";
+import { getTabsBarZoneId } from "../../../widgets/tabs.js";
+import { isVisibleRect } from "../indices.js";
+import { mergeTextStyle } from "../textStyle.js";
+import { getColorTokens, readWidgetSize, readWidgetTone, readWidgetVariant, } from "../themeTokens.js";
+function readString(raw) {
+    return typeof raw === "string" ? raw : undefined;
+}
+function readNavigationDsProps(raw) {
+    if (typeof raw !== "object" || raw === null)
+        return {};
+    const props = raw;
+    const variant = readWidgetVariant(props.dsVariant);
+    const tone = readWidgetTone(props.dsTone);
+    const size = readWidgetSize(props.dsSize);
+    return {
+        ...(variant !== undefined ? { variant } : {}),
+        ...(tone !== undefined ? { tone } : {}),
+        ...(size !== undefined ? { size } : {}),
+    };
+}
+function hasNavigationDsProps(dsProps) {
+    return dsProps.variant !== undefined || dsProps.tone !== undefined || dsProps.size !== undefined;
+}
+function findChildById(children, expectedId) {
+    for (const child of children) {
+        if (!child)
+            continue;
+        const childId = readString(child.vnode.props?.id);
+        if (childId === expectedId)
+            return child;
+    }
+    return undefined;
+}
+function cloneWithNavigationDsProps(node, dsProps) {
+    let nextVNode = node.vnode;
+    let changed = false;
+    if (node.vnode.kind === "button") {
+        const prevProps = (node.vnode.props ?? {});
+        const nextProps = {
+            ...prevProps,
+            ...(dsProps.variant !== undefined ? { dsVariant: dsProps.variant } : {}),
+            ...(dsProps.tone !== undefined ? { dsTone: dsProps.tone } : {}),
+            ...(dsProps.size !== undefined ? { dsSize: dsProps.size } : {}),
+        };
+        if (nextProps.dsVariant !== prevProps.dsVariant ||
+            nextProps.dsTone !== prevProps.dsTone ||
+            nextProps.dsSize !== prevProps.dsSize) {
+            nextVNode = { ...node.vnode, props: nextProps };
+            changed = true;
+        }
+    }
+    let nextChildren = node.children;
+    for (let i = 0; i < node.children.length; i++) {
+        const child = node.children[i];
+        if (!child)
+            continue;
+        const nextChild = cloneWithNavigationDsProps(child, dsProps);
+        if (nextChild === child)
+            continue;
+        if (nextChildren === node.children) {
+            nextChildren = node.children.slice();
+        }
+        nextChildren[i] = nextChild;
+        changed = true;
+    }
+    if (!changed)
+        return node;
+    return { ...node, vnode: nextVNode, children: nextChildren };
+}
+function resolveNavigationControlZoneId(node) {
+    const id = readString(node.vnode.props?.id);
+    if (id === undefined)
+        return undefined;
+    switch (node.vnode.kind) {
+        case "tabs": {
+            return getTabsBarZoneId(id);
+        }
+        case "accordion": {
+            return getAccordionHeadersZoneId(id);
+        }
+        case "pagination": {
+            return getPaginationZoneId(id);
+        }
+        default:
+            return undefined;
+    }
+}
+function buildNavigationControlOverrides(node, dsProps) {
+    if (!hasNavigationDsProps(dsProps))
+        return null;
+    if (node.vnode.kind === "breadcrumb") {
+        const overrides = [];
+        for (const child of node.children) {
+            if (!child)
+                continue;
+            const patchedChild = cloneWithNavigationDsProps(child, dsProps);
+            if (patchedChild === child)
+                continue;
+            overrides.push([child.instanceId, patchedChild]);
+        }
+        return overrides.length === 0 ? null : new Map(overrides);
+    }
+    const controlZoneId = resolveNavigationControlZoneId(node);
+    if (controlZoneId === undefined)
+        return null;
+    const controlZone = findChildById(node.children, controlZoneId);
+    if (!controlZone)
+        return null;
+    const patchedZone = cloneWithNavigationDsProps(controlZone, dsProps);
+    if (patchedZone === controlZone)
+        return null;
+    return new Map([[controlZone.instanceId, patchedZone]]);
+}
+function resolveNavigationRenderStyle(builder, rect, parentStyle, node, dsProps, theme) {
+    const colorTokens = getColorTokens(theme);
+    if (colorTokens === null)
+        return parentStyle;
+    switch (node.vnode.kind) {
+        case "tabs": {
+            const styles = tabsRecipe(colorTokens, {
+                variant: dsProps.variant ?? "soft",
+                tone: dsProps.tone ?? "primary",
+                size: dsProps.size ?? "md",
+                state: "default",
+            });
+            if (styles.bg.bg !== undefined) {
+                builder.fillRect(rect.x, rect.y, rect.w, rect.h, { bg: styles.bg.bg });
+            }
+            return mergeTextStyle(parentStyle, styles.item);
+        }
+        case "accordion": {
+            const styles = accordionRecipe(colorTokens, {
+                variant: dsProps.variant ?? "soft",
+                tone: dsProps.tone ?? "default",
+                size: dsProps.size ?? "md",
+                state: "default",
+            });
+            if (styles.bg.bg !== undefined) {
+                builder.fillRect(rect.x, rect.y, rect.w, rect.h, { bg: styles.bg.bg });
+            }
+            return mergeTextStyle(parentStyle, styles.header);
+        }
+        case "breadcrumb": {
+            const styles = breadcrumbRecipe(colorTokens, {
+                variant: dsProps.variant ?? "ghost",
+                tone: dsProps.tone ?? "primary",
+                size: dsProps.size ?? "md",
+                state: "default",
+            });
+            if (styles.bg.bg !== undefined) {
+                builder.fillRect(rect.x, rect.y, rect.w, rect.h, { bg: styles.bg.bg });
+            }
+            return mergeTextStyle(parentStyle, styles.item);
+        }
+        case "pagination": {
+            const styles = paginationRecipe(colorTokens, {
+                variant: dsProps.variant ?? "soft",
+                tone: dsProps.tone ?? "primary",
+                size: dsProps.size ?? "md",
+                state: "default",
+            });
+            if (styles.bg.bg !== undefined) {
+                builder.fillRect(rect.x, rect.y, rect.w, rect.h, { bg: styles.bg.bg });
+            }
+            return mergeTextStyle(parentStyle, styles.control);
+        }
+        default:
+            return parentStyle;
+    }
+}
+export function renderNavigationWidget(builder, rect, theme, parentStyle, node, layoutNode, nodeStack, styleStack, layoutStack, clipStack, currentClip) {
+    if (!isVisibleRect(rect))
+        return;
+    const dsProps = readNavigationDsProps(node.vnode.props);
+    const resolvedParentStyle = resolveNavigationRenderStyle(builder, rect, parentStyle, node, dsProps, theme);
+    const navigationControlOverrides = buildNavigationControlOverrides(node, dsProps);
+    const childCount = Math.min(node.children.length, layoutNode.children.length);
+    for (let i = childCount - 1; i >= 0; i--) {
+        const child = node.children[i];
+        const childLayout = layoutNode.children[i];
+        if (!child || !childLayout)
+            continue;
+        const renderedChild = navigationControlOverrides?.get(child.instanceId) ?? child;
+        nodeStack.push(renderedChild);
+        styleStack.push(resolvedParentStyle);
+        layoutStack.push(childLayout);
+        clipStack.push(currentClip);
+    }
+}
+//# sourceMappingURL=navigation.js.map

package/dist/renderer/renderToDrawlist/widgets/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../../../../src/renderer/renderToDrawlist/widgets/navigation.ts"],"names":[],"mappings":"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"}

package/dist/renderer/renderToDrawlist/widgets/overlays.d.ts

@@ -1,4 +1,4 @@
-import type { DrawlistBuilderV1 } from "../../../index.js";
+import type { DrawlistBuilder } from "../../../drawlist/types.js";
 import type { Rect } from "../../../layout/types.js";
 import type { RuntimeInstance } from "../../../runtime/commit.js";
 import type { FocusState } from "../../../runtime/focus.js";
@@ -13,9 +13,9 @@ type ResolvedCursor = Readonly<{
     shape: CursorInfo["shape"];
     blink: boolean;
 }>;
-export declare function renderOverlayWidget(builder: DrawlistBuilderV1, focusState: FocusState, rect: Rect, viewport: Readonly<{
+export declare function renderOverlayWidget(builder: DrawlistBuilder, focusState: FocusState, rect: Rect, viewport: Readonly<{
     cols: number;
     rows: number;
-}>, theme: Theme, parentStyle: ResolvedTextStyle, node: RuntimeInstance, nodeStack: (RuntimeInstance | null)[], styleStack: ResolvedTextStyle[], idRectIndex: IdRectIndex, cursorInfo: CursorInfo | undefined, commandPaletteItemsById: ReadonlyMap<string, readonly CommandItem[]> | undefined, commandPaletteLoadingById: ReadonlyMap<string, boolean> | undefined, toolApprovalFocusedActionById: ReadonlyMap<string, "allow" | "deny" | "allowSession"> | undefined, dropdownSelectedIndexById: ReadonlyMap<string, number> | undefined): ResolvedCursor | null;
+}>, theme: Theme, parentStyle: ResolvedTextStyle, node: RuntimeInstance, nodeStack: (RuntimeInstance | null)[], styleStack: ResolvedTextStyle[], idRectIndex: IdRectIndex, cursorInfo: CursorInfo | undefined, commandPaletteItemsById: ReadonlyMap<string, readonly CommandItem[]> | undefined, commandPaletteLoadingById: ReadonlyMap<string, boolean> | undefined, toolApprovalFocusedActionById: ReadonlyMap<string, "allow" | "deny" | "allowSession"> | undefined, dropdownSelectedIndexById: ReadonlyMap<string, number> | undefined, dropdownWindowStartById: ReadonlyMap<string, number> | undefined): ResolvedCursor | null;
 export {};
 //# sourceMappingURL=overlays.d.ts.map

package/dist/renderer/renderToDrawlist/widgets/overlays.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlays.d.ts","sourceRoot":"","sources":["../../../../src/renderer/renderToDrawlist/widgets/overlays.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAG3D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGrD,OAAO,KAAK,EACV,WAAW,EAIZ,MAAM,2BAA2B,CAAC;AAEnC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,KAAK,cAAc,GAAG,QAAQ,CAAC;IAC7B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC3B,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC,CAAC;AAmIH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,iBAAiB,EAC1B,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,EAClD,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,iBAAiB,EAC9B,IAAI,EAAE,eAAe,EACrB,SAAS,EAAE,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,EACrC,UAAU,EAAE,iBAAiB,EAAE,EAC/B,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,GAAG,SAAS,EAClC,uBAAuB,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,WAAW,EAAE,CAAC,GAAG,SAAS,EAChF,yBAAyB,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,EACnE,6BAA6B,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,cAAc,CAAC,GAAG,SAAS,EACjG,yBAAyB,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,GACjE,cAAc,GAAG,IAAI,CAoavB"}
+{"version":3,"file":"overlays.d.ts","sourceRoot":"","sources":["../../../../src/renderer/renderToDrawlist/widgets/overlays.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAMlE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAIrD,OAAO,KAAK,EACV,WAAW,EAIZ,MAAM,2BAA2B,CAAC;AAKnC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAGjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAQzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAQ9C,KAAK,cAAc,GAAG,QAAQ,CAAC;IAC7B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC3B,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC,CAAC;AAuJH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,eAAe,EACxB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,EAClD,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,iBAAiB,EAC9B,IAAI,EAAE,eAAe,EACrB,SAAS,EAAE,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,EACrC,UAAU,EAAE,iBAAiB,EAAE,EAC/B,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,GAAG,SAAS,EAClC,uBAAuB,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,WAAW,EAAE,CAAC,GAAG,SAAS,EAChF,yBAAyB,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,EACnE,6BAA6B,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,cAAc,CAAC,GAAG,SAAS,EACjG,yBAAyB,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,EAClE,uBAAuB,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,GAC/D,cAAc,GAAG,IAAI,CAokBvB"}

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

@@ -1,34 +1,34 @@
-import { calculateAnchorPosition } from "../../../layout/positioning.js";
+import { computeDropdownGeometry, computeDropdownWindow, } from "../../../layout/dropdownGeometry.js";
 import { measureTextCells, truncateWithEllipsis } from "../../../layout/textMeasure.js";
+import { dropdownRecipe } from "../../../ui/recipes.js";
 import { computeCommandPaletteWindow } from "../../../widgets/commandPalette.js";
 import { TOAST_HEIGHT, TOAST_ICONS, getToastActionFocusId } from "../../../widgets/toast.js";
+import { SCROLLBAR_CONFIGS, renderVerticalScrollbar } from "../../scrollbar.js";
+import { createShadowConfig, renderShadow } from "../../shadow.js";
+import { asTextStyle } from "../../styles.js";
 import { renderBoxBorder } from "../boxBorder.js";
 import { isVisibleRect } from "../indices.js";
 import { clampNonNegative } from "../spacing.js";
 import { mergeTextStyle } from "../textStyle.js";
+import { getColorTokens, readWidgetSize, readWidgetTone, readWidgetVariant, } from "../themeTokens.js";
+import { focusIndicatorEnabled, readFocusConfig, resolveFocusIndicatorStyle, resolveFocusedContentStyle, } from "./focusConfig.js";
 const EMPTY_TOASTS = Object.freeze([]);
 const I32_MAX = 2147483647;
+const WARNED_MISSING_DROPDOWN_ANCHORS = new Set();
+const DEV_MODE = (globalThis.process?.env?.NODE_ENV ??
+    "development") !== "production";
+function warnDev(message) {
+    const c = globalThis.console;
+    c?.warn?.(message);
+}
 function readString(raw, fallback = "") {
     return typeof raw === "string" ? raw : fallback;
 }
-function readRgbChannel(raw) {
-    if (typeof raw !== "number" || !Number.isFinite(raw)) {
-        return null;
-    }
-    return Math.max(0, Math.min(255, Math.trunc(raw)));
-}
 function readRgbColor(raw) {
-    if (typeof raw !== "object" || raw === null) {
-        return undefined;
-    }
-    const color = raw;
-    const r = readRgbChannel(color.r);
-    const g = readRgbChannel(color.g);
-    const b = readRgbChannel(color.b);
-    if (r === null || g === null || b === null) {
+    if (typeof raw !== "number" || !Number.isFinite(raw)) {
         return undefined;
     }
-    return { r, g, b };
+    return (Math.round(raw) >>> 0) & 0x00ff_ffff;
 }
 function readOverlayFrameColors(raw) {
     if (typeof raw !== "object" || raw === null) {
@@ -82,6 +82,19 @@ function readToastPosition(raw) {
 function readRiskLevel(raw) {
     return raw === "low" || raw === "medium" || raw === "high" ? raw : "medium";
 }
+function resolveOverlayShadow(shadow, theme) {
+    if (!shadow)
+        return null;
+    const offsetX = shadow.offsetX === undefined ? undefined : readNonNegativeInt(shadow.offsetX, 0);
+    const offsetY = shadow.offsetY === undefined ? undefined : readNonNegativeInt(shadow.offsetY, 0);
+    const shadowConfig = {
+        color: theme.colors.border,
+        density: shadow.density,
+        ...(offsetX !== undefined ? { offsetX } : {}),
+        ...(offsetY !== undefined ? { offsetY } : {}),
+    };
+    return createShadowConfig(shadowConfig);
+}
 function riskLevelToThemeColor(theme, riskLevel) {
     switch (riskLevel) {
         case "low":
@@ -95,72 +108,114 @@ function riskLevelToThemeColor(theme, riskLevel) {
 function toastTypeToThemeColor(theme, type) {
     switch (type) {
         case "success":
-            return theme.colors.success;
+            return theme.colors["widget.toast.success"] ?? theme.colors.success;
         case "warning":
-            return theme.colors.warning;
+            return theme.colors["widget.toast.warning"] ?? theme.colors.warning;
         case "error":
-            return theme.colors.danger;
+            return theme.colors["widget.toast.error"] ?? theme.colors.danger;
         default:
-            return theme.colors.info;
+            return theme.colors["widget.toast.info"] ?? theme.colors.info;
     }
 }
-export function renderOverlayWidget(builder, focusState, rect, viewport, theme, parentStyle, node, nodeStack, styleStack, idRectIndex, cursorInfo, commandPaletteItemsById, commandPaletteLoadingById, toolApprovalFocusedActionById, dropdownSelectedIndexById) {
+export function renderOverlayWidget(builder, focusState, rect, viewport, theme, parentStyle, node, nodeStack, styleStack, idRectIndex, cursorInfo, commandPaletteItemsById, commandPaletteLoadingById, toolApprovalFocusedActionById, dropdownSelectedIndexById, dropdownWindowStartById) {
     const vnode = node.vnode;
     let resolvedCursor = null;
     switch (vnode.kind) {
         case "dropdown": {
             const props = vnode.props;
             const anchor = idRectIndex.get(props.anchorId) ?? null;
-            if (!anchor)
-                break;
+            if (DEV_MODE &&
+                anchor === null &&
+                typeof props.anchorId === "string" &&
+                props.anchorId.length > 0) {
+                const dropdownIdValue = props.id;
+                const dropdownId = typeof dropdownIdValue === "string" && dropdownIdValue.length > 0
+                    ? dropdownIdValue
+                    : String(dropdownIdValue);
+                const warnKey = `${dropdownId}\u0000${props.anchorId}`;
+                if (!WARNED_MISSING_DROPDOWN_ANCHORS.has(warnKey)) {
+                    WARNED_MISSING_DROPDOWN_ANCHORS.add(warnKey);
+                    warnDev(`[rezi][overlay] dropdown "${dropdownId}" anchor not found: "${props.anchorId}"`);
+                }
+            }
+            const colorTokens = getColorTokens(theme);
+            const dsVariant = readWidgetVariant(props.dsVariant) ?? "soft";
+            const dsTone = readWidgetTone(props.dsTone) ?? "default";
+            const dsSize = readWidgetSize(props.dsSize) ?? "md";
+            const dropdownBaseRecipe = colorTokens !== null
+                ? dropdownRecipe(colorTokens, {
+                    variant: dsVariant,
+                    tone: dsTone,
+                    size: dsSize,
+                    state: "default",
+                })
+                : null;
+            const dropdownActiveRecipe = colorTokens !== null
+                ? dropdownRecipe(colorTokens, {
+                    variant: dsVariant,
+                    tone: dsTone,
+                    size: dsSize,
+                    state: "active-item",
+                })
+                : null;
+            const dropdownDisabledRecipe = colorTokens !== null
+                ? dropdownRecipe(colorTokens, {
+                    variant: dsVariant,
+                    tone: dsTone,
+                    size: dsSize,
+                    state: "disabled",
+                })
+                : null;
             const frame = readOverlayFrameColors(props.frameStyle);
-            const dropdownStyle = mergeTextStyle(parentStyle, toOverlaySurfaceStyle(frame));
-            const borderStyle = frame.border !== undefined
-                ? mergeTextStyle(dropdownStyle, { fg: frame.border })
-                : dropdownStyle;
+            const dropdownStyle = mergeTextStyle(mergeTextStyle(parentStyle, dropdownBaseRecipe?.bg), toOverlaySurfaceStyle(frame));
+            const borderVariant = dropdownBaseRecipe?.border ?? "single";
+            const borderStyle = mergeTextStyle(mergeTextStyle(dropdownStyle, dropdownBaseRecipe?.borderStyle), frame.border !== undefined ? { fg: frame.border } : undefined);
+            const recipePx = dropdownBaseRecipe?.px ?? 0;
+            const itemPx = Math.max(0, Math.trunc(Number.isFinite(recipePx) ? recipePx : 0));
             const items = Array.isArray(props.items) ? props.items : [];
             const selectedIndex = dropdownSelectedIndexById?.get(props.id) ?? 0;
-            let maxLabelW = 0;
-            let maxShortcutW = 0;
-            for (const item of items) {
-                if (!item || item.divider)
-                    continue;
-                const labelW = measureTextCells(readString(item.label));
-                if (labelW > maxLabelW)
-                    maxLabelW = labelW;
-                const shortcut = readString(item.shortcut);
-                if (shortcut.length > 0) {
-                    const shortcutW = measureTextCells(shortcut);
-                    if (shortcutW > maxShortcutW)
-                        maxShortcutW = shortcutW;
-                }
-            }
-            const gapW = maxShortcutW > 0 ? 1 : 0;
-            const contentW = Math.max(1, maxLabelW + gapW + maxShortcutW);
-            const totalW = Math.max(2, contentW + 2); // +2 for border
-            const totalH = Math.max(2, items.length + 2); // +2 for border
-            const pos = calculateAnchorPosition({
-                anchor,
-                overlaySize: { w: totalW, h: totalH },
-                position: props.position ?? "below-start",
-                viewport: { x: 0, y: 0, width: viewport.cols, height: viewport.rows },
-                gap: 0,
-                flip: true,
-            });
-            const dropdownRect = pos.rect;
-            if (!isVisibleRect(dropdownRect))
+            const dropdownRect = computeDropdownGeometry(props, anchor, viewport);
+            if (!dropdownRect || !isVisibleRect(dropdownRect))
                 break;
-            if (frame.background !== undefined) {
+            const dropdownShadow = resolveOverlayShadow(dropdownBaseRecipe?.shadow, theme);
+            if (dropdownShadow) {
+                renderShadow(builder, dropdownRect, dropdownShadow, borderStyle);
+            }
+            if (dropdownStyle.bg !== undefined) {
                 builder.fillRect(dropdownRect.x, dropdownRect.y, dropdownRect.w, dropdownRect.h, dropdownStyle);
             }
             // Render dropdown border
-            renderBoxBorder(builder, dropdownRect, "single", undefined, "left", borderStyle);
+            if (borderVariant !== "none") {
+                renderBoxBorder(builder, dropdownRect, borderVariant, undefined, "left", borderStyle);
+            }
             // Render items
             const cx = dropdownRect.x + 1;
             let cy = dropdownRect.y + 1;
             const cw = clampNonNegative(dropdownRect.w - 2);
-            builder.pushClip(cx, dropdownRect.y + 1, cw, clampNonNegative(dropdownRect.h - 2));
-            for (let index = 0; index < items.length; index++) {
+            let maxLabelW = 0;
+            let maxShortcutW = 0;
+            for (const item of items) {
+                if (!item || item.divider)
+                    continue;
+                const itemLabelW = measureTextCells(readString(item.label));
+                if (itemLabelW > maxLabelW)
+                    maxLabelW = itemLabelW;
+                const itemShortcutW = measureTextCells(readString(item.shortcut));
+                if (itemShortcutW > maxShortcutW)
+                    maxShortcutW = itemShortcutW;
+            }
+            const maxShortcutSlotW = maxShortcutW > 0 ? maxShortcutW + 1 : 0;
+            const widestItemW = maxLabelW + maxShortcutSlotW;
+            const contentPx = Math.min(itemPx, Math.max(0, Math.floor((Math.max(0, cw) - widestItemW) / 2)));
+            const visibleRows = clampNonNegative(dropdownRect.h - 2);
+            const window = computeDropdownWindow(items.length, selectedIndex, visibleRows, dropdownWindowStartById?.get(props.id) ?? 0);
+            const scrollbarW = window.overflow ? 1 : 0;
+            const textAreaW = clampNonNegative(cw - scrollbarW);
+            const contentX = cx + contentPx;
+            const contentW = clampNonNegative(textAreaW - contentPx * 2);
+            const scrollbarX = cx + textAreaW;
+            builder.pushClip(cx, dropdownRect.y + 1, textAreaW, visibleRows);
+            for (let index = window.startIndex; index < window.endIndex; index++) {
                 const item = items[index];
                 if (!item) {
                     cy++;
@@ -168,41 +223,77 @@ export function renderOverlayWidget(builder, focusState, rect, viewport, theme,
                 }
                 if (item.divider) {
                     // Render divider
-                    builder.drawText(cx, cy, "\u2500".repeat(cw), borderStyle);
+                    builder.drawText(contentX, cy, "\u2500".repeat(contentW), borderStyle);
                 }
                 else {
-                    const isSelected = index === selectedIndex;
+                    const isSelected = index === window.selectedIndex;
                     const disabled = item.disabled === true;
                     const label = readString(item.label);
                     const shortcut = readString(item.shortcut);
                     const shortcutW = shortcut.length > 0 ? measureTextCells(shortcut) : 0;
                     const shortcutSlotW = shortcutW > 0 ? shortcutW + 1 : 0;
-                    const labelW = Math.max(0, cw - shortcutSlotW);
-                    if (isSelected) {
-                        builder.fillRect(cx, cy, cw, 1, { bg: theme.colors.secondary });
+                    const labelW = Math.max(0, contentW - shortcutSlotW);
+                    if (colorTokens !== null) {
+                        const itemRecipe = disabled
+                            ? dropdownDisabledRecipe
+                            : isSelected
+                                ? dropdownActiveRecipe
+                                : dropdownBaseRecipe;
+                        const itemBg = itemRecipe?.bg.bg;
+                        if (itemBg !== undefined) {
+                            builder.fillRect(cx, cy, cw, 1, { bg: itemBg });
+                        }
+                        const itemStyle = mergeTextStyle(dropdownStyle, itemRecipe?.item);
+                        builder.drawText(contentX, cy, truncateWithEllipsis(label, labelW > 0 ? labelW : contentW), itemStyle);
+                        if (shortcutW > 0 && contentW > shortcutW) {
+                            const shortcutX = contentX + contentW - shortcutW;
+                            if (shortcutX > contentX) {
+                                const shortcutStyle = mergeTextStyle(itemStyle, itemRecipe?.shortcut);
+                                builder.drawText(shortcutX, cy, shortcut, shortcutStyle);
+                            }
+                        }
                     }
-                    const style = disabled
-                        ? mergeTextStyle(dropdownStyle, { fg: theme.colors.muted })
-                        : isSelected
-                            ? mergeTextStyle(dropdownStyle, {
-                                fg: frame.background ?? theme.colors.bg,
-                                bold: true,
-                            })
-                            : dropdownStyle;
-                    builder.drawText(cx, cy, truncateWithEllipsis(label, labelW > 0 ? labelW : cw), style);
-                    if (shortcutW > 0 && cw > shortcutW) {
-                        const shortcutX = cx + cw - shortcutW;
-                        if (shortcutX > cx) {
-                            const shortcutStyle = isSelected && !disabled
-                                ? mergeTextStyle(dropdownStyle, { fg: theme.colors.info })
-                                : mergeTextStyle(style, { dim: true });
-                            builder.drawText(shortcutX, cy, shortcut, shortcutStyle);
+                    else {
+                        if (isSelected) {
+                            builder.fillRect(cx, cy, cw, 1, { bg: theme.colors.secondary });
+                        }
+                        const style = disabled
+                            ? mergeTextStyle(dropdownStyle, { fg: theme.colors.muted })
+                            : isSelected
+                                ? mergeTextStyle(dropdownStyle, {
+                                    fg: frame.background ?? theme.colors.bg,
+                                    bold: true,
+                                })
+                                : dropdownStyle;
+                        builder.drawText(contentX, cy, truncateWithEllipsis(label, labelW > 0 ? labelW : contentW), style);
+                        if (shortcutW > 0 && contentW > shortcutW) {
+                            const shortcutX = contentX + contentW - shortcutW;
+                            if (shortcutX > contentX) {
+                                const shortcutStyle = isSelected && !disabled
+                                    ? mergeTextStyle(dropdownStyle, { fg: theme.colors.info })
+                                    : mergeTextStyle(style, { dim: true });
+                                builder.drawText(shortcutX, cy, shortcut, shortcutStyle);
+                            }
                         }
                     }
                 }
                 cy++;
             }
             builder.popClip();
+            if (window.overflow && visibleRows > 0 && scrollbarX < dropdownRect.x + dropdownRect.w - 1) {
+                const viewportRatio = visibleRows / items.length;
+                const position = items.length <= visibleRows
+                    ? 0
+                    : window.startIndex / Math.max(1, items.length - visibleRows);
+                const glyphs = renderVerticalScrollbar(visibleRows, { position, viewportRatio }, SCROLLBAR_CONFIGS.minimal);
+                const scrollbarStyle = mergeTextStyle(dropdownStyle, { fg: theme.colors.border });
+                for (let row = 0; row < glyphs.length; row++) {
+                    const glyph = glyphs[row];
+                    if (!glyph)
+                        continue;
+                    builder.drawText(scrollbarX, dropdownRect.y + 1 + row, glyph, scrollbarStyle);
+                }
+            }
             break;
         }
         case "commandPalette": {
@@ -212,6 +303,9 @@ export function renderOverlayWidget(builder, focusState, rect, viewport, theme,
             const paletteId = readString(props.id);
             if (!open || !isVisibleRect(rect))
                 break;
+            const focusConfig = readFocusConfig(props.focusConfig);
+            const showFocusIndicator = focusIndicatorEnabled(focusConfig);
+            const selectionStyle = asTextStyle(props.selectionStyle, theme);
             const focused = paletteId.length > 0 && focusState.focusedId === paletteId;
             const maxVisible = readNonNegativeInt(props.maxVisible, 10);
             const items = paletteId.length > 0 ? (commandPaletteItemsById?.get(paletteId) ?? []) : [];
@@ -224,7 +318,9 @@ export function renderOverlayWidget(builder, focusState, rect, viewport, theme,
             const paletteAccent = theme.colors.primary;
             const paletteText = frame.foreground ?? theme.colors.fg;
             const paletteMuted = theme.colors.muted;
-            const paletteSelectedBg = theme.colors.secondary;
+            const paletteSelectedBg = selectionStyle?.bg ??
+                resolveFocusIndicatorStyle(mergeTextStyle(parentStyle, { fg: paletteText, bg: paletteBg }), theme, focusConfig, mergeTextStyle(parentStyle, { fg: paletteText, bg: theme.colors.secondary })).bg ??
+                theme.colors.secondary;
             const paletteStyle = mergeTextStyle(parentStyle, {
                 fg: paletteText,
                 bg: paletteBg,
@@ -232,6 +328,12 @@ export function renderOverlayWidget(builder, focusState, rect, viewport, theme,
             const paletteBorderStyle = mergeTextStyle(paletteStyle, { fg: paletteBorder });
             const paletteMutedStyle = mergeTextStyle(paletteStyle, { fg: paletteMuted });
             const paletteAccentStyle = mergeTextStyle(paletteStyle, { fg: paletteAccent });
+            renderShadow(builder, rect, createShadowConfig({
+                color: theme.colors.border,
+                density: "medium",
+                offsetX: 1,
+                offsetY: 1,
+            }), paletteBorderStyle);
             // Draw background
             builder.fillRect(rect.x, rect.y, rect.w, rect.h, { bg: paletteBg });
             renderBoxBorder(builder, rect, "single", undefined, "left", paletteBorderStyle);
@@ -244,7 +346,7 @@ export function renderOverlayWidget(builder, focusState, rect, viewport, theme,
             const textStyle = query.length > 0 ? paletteStyle : paletteMutedStyle;
             const inputW = clampNonNegative(rect.w - 6);
             builder.drawText(rect.x + 4, inputY, truncateWithEllipsis(displayText, inputW), textStyle);
-            // v2 cursor: show cursor within query input when focused
+            // Cursor protocol: show cursor within query input when focused
             if (focused && cursorInfo) {
                 const qx = clampNonNegative(measureTextCells(query));
                 const maxCursorDx = Math.max(0, inputW - 1);
@@ -302,10 +404,19 @@ export function renderOverlayWidget(builder, focusState, rect, viewport, theme,
                 // Draw label
                 const iconText = readString(item.icon);
                 const icon = iconText.length > 0 ? `${iconText} ` : "";
+                const selectedBaseStyle = mergeTextStyle(paletteStyle, {
+                    fg: frame.background ?? theme.colors.bg,
+                    bold: true,
+                });
+                const focusedSelectedStyle = showFocusIndicator && focused
+                    ? resolveFocusedContentStyle(resolveFocusIndicatorStyle(selectedBaseStyle, theme, focusConfig, selectedBaseStyle), theme, focusConfig)
+                    : selectedBaseStyle;
                 const labelStyle = disabled
                     ? paletteMutedStyle
                     : isSelected
-                        ? mergeTextStyle(paletteStyle, { fg: frame.background ?? theme.colors.bg, bold: true })
+                        ? selectionStyle
+                            ? mergeTextStyle(focusedSelectedStyle, selectionStyle)
+                            : focusedSelectedStyle
                         : paletteStyle;
                 const label = `${icon}${readString(item.label)}`;
                 const truncatedLabel = truncateWithEllipsis(label, labelMaxWidth);
@@ -316,7 +427,7 @@ export function renderOverlayWidget(builder, focusState, rect, viewport, theme,
                     const sx = listX + listW - sw;
                     if (sx > listX + measureTextCells(truncatedLabel) + 1) {
                         const shortcutStyle = isSelected
-                            ? mergeTextStyle(paletteStyle, { fg: theme.colors.info })
+                            ? resolveFocusedContentStyle(resolveFocusIndicatorStyle(mergeTextStyle(paletteStyle, { fg: theme.colors.info }), theme, focusConfig, mergeTextStyle(paletteStyle, { fg: theme.colors.info })), theme, focusConfig)
                             : paletteMutedStyle;
                         builder.drawText(sx, y, shortcut, shortcutStyle);
                     }