@fgv/ts-app-shell 5.1.0-1

package/lib/packlets/selectors/EntityRow.js

@@ -0,0 +1,315 @@
+"use strict";
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityRow = EntityRow;
+/**
+ * EntityRow — clickable text row with optional discrete swap-icon for alternates.
+ *
+ * Renders a uniform row regardless of whether alternates exist:
+ * - Left slot: swap icon (when alternates exist) or empty spacer
+ * - Name text: clickable for drill-down
+ * - Optional right-side content (amount, sublabel, etc.)
+ * - Drill-down chevron ›
+ *
+ * @packageDocumentation
+ */
+const react_1 = __importStar(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+// ============================================================================
+// EntityRow Component
+// ============================================================================
+/**
+ * A clickable text row with an optional discrete swap-icon popover for
+ * switching between alternates. Clicking the row itself always triggers
+ * drill-down navigation. The swap icon opens a small picker to change
+ * which alternate is displayed.
+ *
+ * @public
+ */
+function EntityRow(props) {
+    var _a, _b, _c, _d;
+    const { items, preferredId, onClick, onSelect, onCompare, rightContent, label } = props;
+    const hasAlternates = items.length > 1;
+    const [internalId, setInternalId] = (0, react_1.useState)((_b = preferredId !== null && preferredId !== void 0 ? preferredId : (_a = items[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '');
+    const displayedId = (_c = props.selectedId) !== null && _c !== void 0 ? _c : internalId;
+    const [pickerOpen, setPickerOpen] = (0, react_1.useState)(false);
+    const [compareMode, setCompareMode] = (0, react_1.useState)(false);
+    const [checkedIds, setCheckedIds] = (0, react_1.useState)(new Set());
+    const [focusIndex, setFocusIndex] = (0, react_1.useState)(-1);
+    const pickerRef = (0, react_1.useRef)(null);
+    const pickerBtnRef = (0, react_1.useRef)(null);
+    const itemRefs = (0, react_1.useRef)([]);
+    const [pickerPos, setPickerPos] = (0, react_1.useState)({ top: 0, left: 0 });
+    // Reset displayed item when items or preferred change (e.g. variation switch)
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        setInternalId((_b = preferredId !== null && preferredId !== void 0 ? preferredId : (_a = items[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '');
+    }, [preferredId, items]);
+    // Reset compare mode when picker closes; set initial focus when it opens
+    (0, react_1.useEffect)(() => {
+        if (!pickerOpen) {
+            setCompareMode(false);
+            setCheckedIds(new Set());
+            setFocusIndex(-1);
+        }
+        else {
+            const idx = items.findIndex((i) => i.id === displayedId);
+            setFocusIndex(idx >= 0 ? idx : 0);
+        }
+    }, [pickerOpen, items, displayedId]);
+    const displayedItem = (0, react_1.useMemo)(() => { var _a; return (_a = items.find((i) => i.id === displayedId)) !== null && _a !== void 0 ? _a : items[0]; }, [items, displayedId]);
+    const isPreferred = displayedId === preferredId;
+    // Position the portal popover relative to the swap button
+    (0, react_1.useEffect)(() => {
+        if (pickerOpen && pickerBtnRef.current) {
+            const rect = pickerBtnRef.current.getBoundingClientRect();
+            setPickerPos({ top: rect.bottom + 2, left: rect.left });
+        }
+    }, [pickerOpen]);
+    // Close picker on outside click or scroll
+    (0, react_1.useEffect)(() => {
+        if (!pickerOpen) {
+            return;
+        }
+        const handleClickOutside = (e) => {
+            if (pickerRef.current &&
+                !pickerRef.current.contains(e.target) &&
+                pickerBtnRef.current &&
+                !pickerBtnRef.current.contains(e.target)) {
+                setPickerOpen(false);
+            }
+        };
+        const handleScroll = () => {
+            setPickerOpen(false);
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        // Close on any scroll so the popover doesn't float away from the button
+        document.addEventListener('scroll', handleScroll, true);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('scroll', handleScroll, true);
+        };
+    }, [pickerOpen]);
+    const handleRowClick = (0, react_1.useCallback)(() => {
+        if (onClick) {
+            onClick(displayedId);
+        }
+    }, [onClick, displayedId]);
+    const handleRowKeyDown = (0, react_1.useCallback)((e) => {
+        if (onClick && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            onClick(displayedId);
+        }
+    }, [onClick, displayedId]);
+    const handlePickerToggle = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        setPickerOpen((prev) => !prev);
+    }, []);
+    const handlePickItem = (0, react_1.useCallback)((id) => {
+        setInternalId(id);
+        if (onSelect) {
+            onSelect(id);
+        }
+        setPickerOpen(false);
+    }, [onSelect]);
+    const handleCompareAll = (0, react_1.useCallback)(() => {
+        if (onCompare) {
+            onCompare(items.map((i) => i.id));
+        }
+        setPickerOpen(false);
+    }, [onCompare, items]);
+    const toggleChecked = (0, react_1.useCallback)((id) => {
+        setCheckedIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else if (next.size < 4) {
+                next.add(id);
+            }
+            return next;
+        });
+    }, []);
+    const handleCompareSelected = (0, react_1.useCallback)(() => {
+        if (onCompare && checkedIds.size >= 2) {
+            onCompare(Array.from(checkedIds));
+            setPickerOpen(false);
+        }
+    }, [onCompare, checkedIds]);
+    const handlePickerKeyDown = (0, react_1.useCallback)((e) => {
+        switch (e.key) {
+            case 'Escape': {
+                e.preventDefault();
+                e.stopPropagation();
+                if (compareMode) {
+                    setCompareMode(false);
+                    setCheckedIds(new Set());
+                }
+                else {
+                    setPickerOpen(false);
+                }
+                break;
+            }
+            case 'ArrowDown': {
+                e.preventDefault();
+                setFocusIndex((prev) => (prev < items.length - 1 ? prev + 1 : 0));
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                setFocusIndex((prev) => (prev > 0 ? prev - 1 : items.length - 1));
+                break;
+            }
+            case 'Enter': {
+                e.preventDefault();
+                if (focusIndex >= 0 && focusIndex < items.length) {
+                    if (compareMode) {
+                        toggleChecked(items[focusIndex].id);
+                    }
+                    else {
+                        handlePickItem(items[focusIndex].id);
+                    }
+                }
+                break;
+            }
+            case ' ': {
+                if (compareMode && focusIndex >= 0 && focusIndex < items.length) {
+                    e.preventDefault();
+                    toggleChecked(items[focusIndex].id);
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    }, [items, focusIndex, compareMode, toggleChecked, handlePickItem]);
+    // Render the picker popover via portal so it escapes ancestor overflow clipping
+    const pickerPopover = pickerOpen
+        ? react_dom_1.default.createPortal(react_1.default.createElement("div", { ref: pickerRef, style: { position: 'fixed', top: pickerPos.top, left: pickerPos.left }, className: "z-50 min-w-[180px] max-h-[200px] bg-surface border border-border rounded-lg shadow-lg flex flex-col overflow-hidden", onKeyDown: handlePickerKeyDown },
+            react_1.default.createElement("div", { className: "flex items-center justify-between px-2.5 py-1 border-b border-border-subtle shrink-0" }, onCompare && items.length >= 2 ? (compareMode ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: "flex items-center gap-1.5" },
+                    checkedIds.size >= 2 && (react_1.default.createElement("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            handleCompareSelected();
+                        }, className: "text-[10px] text-white bg-brand-primary rounded px-1.5 py-0.5 hover:bg-brand-primary/90 transition-colors font-medium" },
+                        "Compare ",
+                        checkedIds.size)),
+                    react_1.default.createElement("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            handleCompareAll();
+                        }, className: "text-[10px] text-brand-accent hover:text-brand-primary transition-colors font-medium" }, "All")),
+                react_1.default.createElement("button", { onClick: (e) => {
+                        e.stopPropagation();
+                        setCompareMode(false);
+                        setCheckedIds(new Set());
+                    }, className: "text-muted hover:text-secondary transition-colors", "aria-label": "Exit compare" },
+                    react_1.default.createElement("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 },
+                        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }))))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("span", { className: "text-[10px] font-medium text-muted uppercase tracking-wider" }, "Options"),
+                react_1.default.createElement("button", { onClick: (e) => {
+                        e.stopPropagation();
+                        setCompareMode(true);
+                    }, className: "text-[10px] text-brand-accent hover:text-brand-primary transition-colors font-medium" }, "Compare\u2026")))) : (react_1.default.createElement("span", { className: "text-[10px] font-medium text-muted uppercase tracking-wider" }, "Alternates"))),
+            react_1.default.createElement("div", { className: "overflow-y-auto flex-1" }, items.map((item, index) => {
+                const isCurrent = item.id === displayedId;
+                const isPref = item.id === preferredId;
+                const isFocused = index === focusIndex;
+                const isChecked = compareMode && checkedIds.has(item.id);
+                return (react_1.default.createElement("button", { key: item.id, ref: (el) => {
+                        itemRefs.current[index] = el;
+                    }, onClick: (e) => {
+                        e.stopPropagation();
+                        if (compareMode) {
+                            toggleChecked(item.id);
+                        }
+                        else {
+                            handlePickItem(item.id);
+                        }
+                    }, className: `flex items-center gap-2 w-full px-2.5 py-1.5 text-left text-sm transition-colors ${isChecked
+                        ? 'bg-selected text-brand-primary'
+                        : isCurrent && !compareMode
+                            ? 'bg-selected text-brand-primary font-medium'
+                            : isFocused
+                                ? 'bg-surface-alt text-primary'
+                                : 'text-secondary hover:bg-hover'}` },
+                    compareMode ? (react_1.default.createElement("span", { className: `flex items-center justify-center w-3.5 h-3.5 rounded border shrink-0 transition-colors ${isChecked
+                            ? 'bg-brand-accent border-brand-accent text-white'
+                            : 'border-border bg-surface'}` }, isChecked && (react_1.default.createElement("svg", { className: "w-2.5 h-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3 },
+                        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }))))) : (react_1.default.createElement("span", { className: "w-3 shrink-0 text-center text-xs" }, isPref ? react_1.default.createElement("span", { className: "text-star" }, "\u2605") : '')),
+                    react_1.default.createElement("span", { className: "flex-1 min-w-0 truncate" },
+                        item.label,
+                        item.sublabel && react_1.default.createElement("span", { className: "ml-1.5 text-xs text-muted" }, item.sublabel)),
+                    !compareMode && isCurrent && (react_1.default.createElement("svg", { className: "w-3.5 h-3.5 text-brand-accent shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3 },
+                        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })))));
+            }))), document.body)
+        : null;
+    return (react_1.default.createElement("div", null,
+        label && react_1.default.createElement("div", { className: "text-xs font-semibold text-muted uppercase tracking-wider mb-1" }, label),
+        react_1.default.createElement("div", { className: `flex items-center gap-1.5 py-1.5 pl-0 pr-2 rounded-md ${onClick ? 'cursor-pointer hover:bg-hover transition-colors' : ''}`, onClick: handleRowClick, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: handleRowKeyDown },
+            react_1.default.createElement("span", { className: "w-4 shrink-0 flex items-center justify-center" }, hasAlternates ? (react_1.default.createElement("button", { ref: pickerBtnRef, onClick: handlePickerToggle, className: "text-muted hover:text-brand-accent p-0 transition-colors", "aria-label": "Switch alternate", tabIndex: -1 },
+                react_1.default.createElement("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 },
+                    react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" })))) : null),
+            react_1.default.createElement("span", { className: "text-sm text-primary flex-1 truncate" }, (_d = displayedItem === null || displayedItem === void 0 ? void 0 : displayedItem.label) !== null && _d !== void 0 ? _d : '',
+                hasAlternates && isPreferred && react_1.default.createElement("span", { className: "ml-1 text-xs text-star" }, "\u2605"),
+                (displayedItem === null || displayedItem === void 0 ? void 0 : displayedItem.sublabel) && (react_1.default.createElement("span", { className: "ml-1.5 text-xs text-muted" }, displayedItem.sublabel))),
+            rightContent,
+            onClick && react_1.default.createElement("span", { className: "text-faint text-xs shrink-0" }, "\u203A")),
+        pickerPopover));
+}
+//# sourceMappingURL=EntityRow.js.map

package/lib/packlets/selectors/PreferredSelector.d.ts

@@ -0,0 +1,50 @@
+/**
+ * PreferredSelector — compact popover for choosing one item from a set of options.
+ * @packageDocumentation
+ */
+import React from 'react';
+/**
+ * A single selectable item in the PreferredSelector.
+ * @public
+ */
+export interface ISelectableItem<TId extends string = string> {
+    /** Unique identifier */
+    readonly id: TId;
+    /** Primary display label */
+    readonly label: string;
+    /** Optional secondary label */
+    readonly sublabel?: string;
+}
+/**
+ * Props for the PreferredSelector component.
+ * @public
+ */
+export interface IPreferredSelectorProps<TId extends string = string> {
+    /** Available items to choose from */
+    readonly items: ReadonlyArray<ISelectableItem<TId>>;
+    /** Currently selected item ID */
+    readonly selectedId: TId;
+    /** ID of the preferred/default item (shows ★ marker) */
+    readonly preferredId?: TId;
+    /** Callback when an item is selected */
+    readonly onSelect: (id: TId) => void;
+    /** Callback to compare selected items side-by-side. Receives the IDs to compare. */
+    readonly onCompare?: (ids: ReadonlyArray<TId>) => void;
+    /** Callback for drill-down navigation on an item (shows › chevron per row) */
+    readonly onDrillDown?: (id: TId) => void;
+    /** Section title displayed above the trigger */
+    readonly label?: string;
+}
+/**
+ * Compact inline selector with popover for choosing one item from a set.
+ *
+ * When there is only one item, renders as a static label.
+ * When there are multiple items, renders a clickable trigger that opens
+ * a popover with all options. If `onCompare` is provided, the popover
+ * includes a compare toggle that enables checkboxes for multi-select,
+ * with "Compare All" and "Compare Selected" actions.
+ *
+ * @public
+ */
+export declare function PreferredSelector<TId extends string = string>(props: IPreferredSelectorProps<TId>): React.ReactElement;
+//# sourceMappingURL=PreferredSelector.d.ts.map

package/lib/packlets/selectors/PreferredSelector.js

@@ -0,0 +1,287 @@
+"use strict";
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreferredSelector = PreferredSelector;
+/**
+ * PreferredSelector — compact popover for choosing one item from a set of options.
+ * @packageDocumentation
+ */
+const react_1 = __importStar(require("react"));
+// ============================================================================
+// PreferredSelector Component
+// ============================================================================
+/**
+ * Compact inline selector with popover for choosing one item from a set.
+ *
+ * When there is only one item, renders as a static label.
+ * When there are multiple items, renders a clickable trigger that opens
+ * a popover with all options. If `onCompare` is provided, the popover
+ * includes a compare toggle that enables checkboxes for multi-select,
+ * with "Compare All" and "Compare Selected" actions.
+ *
+ * @public
+ */
+function PreferredSelector(props) {
+    var _a;
+    const { items, selectedId, preferredId, onSelect, onCompare, onDrillDown, label } = props;
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [focusIndex, setFocusIndex] = (0, react_1.useState)(-1);
+    const [compareMode, setCompareMode] = (0, react_1.useState)(false);
+    const [checkedIds, setCheckedIds] = (0, react_1.useState)(new Set());
+    const triggerRef = (0, react_1.useRef)(null);
+    const popoverRef = (0, react_1.useRef)(null);
+    const itemRefs = (0, react_1.useRef)([]);
+    const selectedItem = items.find((item) => item.id === selectedId);
+    const hasMultiple = items.length > 1;
+    const canCompare = onCompare !== undefined && items.length >= 2;
+    // Reset compare mode when popover closes
+    (0, react_1.useEffect)(() => {
+        if (!open) {
+            setCompareMode(false);
+            setCheckedIds(new Set());
+        }
+    }, [open]);
+    // Close popover when clicking outside
+    (0, react_1.useEffect)(() => {
+        if (!open) {
+            return;
+        }
+        const handleClickOutside = (e) => {
+            if (popoverRef.current &&
+                !popoverRef.current.contains(e.target) &&
+                triggerRef.current &&
+                !triggerRef.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [open]);
+    // Focus first item when popover opens
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            const selectedIdx = items.findIndex((item) => item.id === selectedId);
+            setFocusIndex(selectedIdx >= 0 ? selectedIdx : 0);
+        }
+    }, [open, items, selectedId]);
+    // Scroll focused item into view
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (open && focusIndex >= 0 && itemRefs.current[focusIndex]) {
+            (_a = itemRefs.current[focusIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
+        }
+    }, [open, focusIndex]);
+    const handleToggle = (0, react_1.useCallback)(() => {
+        if (hasMultiple) {
+            setOpen((prev) => !prev);
+        }
+    }, [hasMultiple]);
+    const handleSelect = (0, react_1.useCallback)((id) => {
+        onSelect(id);
+        setOpen(false);
+    }, [onSelect]);
+    const handleDrillDown = (0, react_1.useCallback)((id, e) => {
+        e.stopPropagation();
+        onDrillDown === null || onDrillDown === void 0 ? void 0 : onDrillDown(id);
+        setOpen(false);
+    }, [onDrillDown]);
+    const toggleChecked = (0, react_1.useCallback)((id) => {
+        setCheckedIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else if (next.size < 4) {
+                next.add(id);
+            }
+            return next;
+        });
+    }, []);
+    const handleCompareAll = (0, react_1.useCallback)(() => {
+        if (onCompare) {
+            onCompare(items.map((item) => item.id));
+            setOpen(false);
+        }
+    }, [onCompare, items]);
+    const handleCompareSelected = (0, react_1.useCallback)(() => {
+        if (onCompare && checkedIds.size >= 2) {
+            onCompare(Array.from(checkedIds));
+            setOpen(false);
+        }
+    }, [onCompare, checkedIds]);
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        var _a;
+        if (!open) {
+            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                setOpen(true);
+            }
+            return;
+        }
+        switch (e.key) {
+            case 'Escape': {
+                e.preventDefault();
+                e.stopPropagation();
+                if (compareMode) {
+                    setCompareMode(false);
+                    setCheckedIds(new Set());
+                }
+                else {
+                    setOpen(false);
+                    (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+                break;
+            }
+            case 'ArrowDown': {
+                e.preventDefault();
+                setFocusIndex((prev) => (prev < items.length - 1 ? prev + 1 : 0));
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                setFocusIndex((prev) => (prev > 0 ? prev - 1 : items.length - 1));
+                break;
+            }
+            case 'Enter': {
+                e.preventDefault();
+                if (focusIndex >= 0 && focusIndex < items.length) {
+                    if (compareMode) {
+                        toggleChecked(items[focusIndex].id);
+                    }
+                    else {
+                        handleSelect(items[focusIndex].id);
+                    }
+                }
+                break;
+            }
+            case ' ': {
+                if (compareMode && focusIndex >= 0 && focusIndex < items.length) {
+                    e.preventDefault();
+                    toggleChecked(items[focusIndex].id);
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    }, [open, items, focusIndex, handleSelect, compareMode, toggleChecked]);
+    return (react_1.default.createElement("div", { className: "relative" },
+        label && react_1.default.createElement("div", { className: "text-xs font-medium text-muted mb-1" }, label),
+        react_1.default.createElement("button", { ref: triggerRef, onClick: handleToggle, onKeyDown: handleKeyDown, className: `flex items-center gap-1.5 px-2 py-1 text-sm rounded-md border transition-colors w-full text-left ${hasMultiple
+                ? 'border-border hover:border-brand-primary cursor-pointer bg-surface'
+                : 'border-transparent cursor-default bg-transparent'} ${open ? 'border-brand-primary ring-1 ring-focus-ring/20' : ''}`, "aria-expanded": open, "aria-haspopup": "listbox" },
+            react_1.default.createElement("span", { className: "flex-1 min-w-0 truncate text-primary" }, (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) !== null && _a !== void 0 ? _a : selectedId,
+                preferredId !== undefined && selectedId === preferredId && (react_1.default.createElement("span", { className: "ml-1 text-xs text-star" }, "\u2605"))),
+            hasMultiple && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("span", { className: "text-[10px] text-muted shrink-0 tabular-nums" }, items.length),
+                react_1.default.createElement("svg", { className: `w-3 h-3 text-muted shrink-0 transition-transform ${open ? 'rotate-180' : ''}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 },
+                    react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }))))),
+        open && (react_1.default.createElement("div", { ref: popoverRef, className: "absolute z-50 mt-1 w-full min-w-[200px] max-h-[280px] bg-surface border border-border rounded-lg shadow-lg flex flex-col overflow-hidden", role: "listbox", onKeyDown: handleKeyDown },
+            canCompare && (react_1.default.createElement("div", { className: "flex items-center justify-between px-2.5 py-1.5 border-b border-border-subtle shrink-0" },
+                compareMode ? (react_1.default.createElement("div", { className: "flex items-center gap-1.5" },
+                    checkedIds.size >= 2 && (react_1.default.createElement("button", { onClick: handleCompareSelected, className: "text-xs text-white bg-brand-primary rounded px-1.5 py-0.5 hover:bg-brand-primary/90 transition-colors font-medium" },
+                        "Compare ",
+                        checkedIds.size)),
+                    react_1.default.createElement("button", { onClick: handleCompareAll, className: "text-xs text-brand-accent hover:text-brand-primary transition-colors font-medium" }, "All"))) : (react_1.default.createElement("button", { onClick: () => setCompareMode(true), className: "text-xs text-brand-accent hover:text-brand-primary transition-colors font-medium" }, "Compare\u2026")),
+                react_1.default.createElement("button", { onClick: () => {
+                        if (compareMode) {
+                            setCompareMode(false);
+                            setCheckedIds(new Set());
+                        }
+                        else {
+                            setOpen(false);
+                        }
+                    }, className: "text-muted hover:text-secondary transition-colors", "aria-label": compareMode ? 'Exit compare' : 'Close' },
+                    react_1.default.createElement("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 },
+                        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }))))),
+            react_1.default.createElement("div", { className: "overflow-y-auto flex-1" }, items.map((item, index) => {
+                const isSelected = item.id === selectedId;
+                const isPreferred = preferredId !== undefined && item.id === preferredId;
+                const isFocused = index === focusIndex;
+                const isChecked = compareMode && checkedIds.has(item.id);
+                return (react_1.default.createElement("button", { key: item.id, ref: (el) => {
+                        itemRefs.current[index] = el;
+                    }, role: "option", "aria-selected": isSelected, onClick: () => {
+                        if (compareMode) {
+                            toggleChecked(item.id);
+                        }
+                        else {
+                            handleSelect(item.id);
+                        }
+                    }, className: `flex items-center gap-2 w-full px-2.5 py-1.5 text-left text-sm transition-colors ${isChecked
+                        ? 'bg-selected text-brand-primary'
+                        : isSelected && !compareMode
+                            ? 'bg-selected text-brand-primary font-medium'
+                            : isFocused
+                                ? 'bg-surface-alt text-primary'
+                                : 'text-secondary hover:bg-hover'}` },
+                    compareMode ? (react_1.default.createElement("span", { className: `flex items-center justify-center w-3.5 h-3.5 rounded border shrink-0 transition-colors ${isChecked
+                            ? 'bg-brand-accent border-brand-accent text-white'
+                            : 'border-border bg-surface'}` }, isChecked && (react_1.default.createElement("svg", { className: "w-2.5 h-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3 },
+                        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }))))) : (react_1.default.createElement("span", { className: "w-3 shrink-0 text-center text-xs" }, isPreferred ? react_1.default.createElement("span", { className: "text-star" }, "\u2605") : '')),
+                    react_1.default.createElement("span", { className: "flex-1 min-w-0" },
+                        react_1.default.createElement("span", { className: "truncate block" }, item.label),
+                        item.sublabel && (react_1.default.createElement("span", { className: "text-xs text-muted truncate block" }, item.sublabel))),
+                    !compareMode && isSelected && (react_1.default.createElement("svg", { className: "w-3.5 h-3.5 text-brand-accent shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3 },
+                        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }))),
+                    !compareMode && onDrillDown && (react_1.default.createElement("button", { onClick: (e) => handleDrillDown(item.id, e), className: "text-faint hover:text-brand-accent shrink-0 p-0.5 -mr-1", "aria-label": `Open ${item.label}` },
+                        react_1.default.createElement("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 },
+                            react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }))))));
+            }))))));
+}
+//# sourceMappingURL=PreferredSelector.js.map

package/lib/packlets/selectors/index.d.ts

@@ -0,0 +1,5 @@
+export { EntityRow } from './EntityRow';
+export type { IEntityRowProps } from './EntityRow';
+export { PreferredSelector } from './PreferredSelector';
+export type { IPreferredSelectorProps, ISelectableItem } from './PreferredSelector';
+//# sourceMappingURL=index.d.ts.map