@fgv/ts-app-shell 5.1.0-1

package/dist/packlets/sidebar/CollectionSection.js

@@ -0,0 +1,107 @@
+/*
+ * 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.
+ */
+/**
+ * Generic collection management section for the sidebar.
+ *
+ * Renders a collapsible list of collections with visibility toggles,
+ * status indicators, and action buttons.
+ *
+ * @packageDocumentation
+ */
+import React, { useCallback, useState } from 'react';
+// ============================================================================
+// CollectionRow (internal)
+// ============================================================================
+function CollectionRow(props) {
+    var _a, _b, _c, _d;
+    const { collection, onToggleVisibility, onSetDefault, onDelete, onExport, onUnlock, onRename, onMerge } = props;
+    const displayName = (_a = collection.name) !== null && _a !== void 0 ? _a : collection.id;
+    return (React.createElement("div", { className: `flex items-center gap-1.5 px-3 py-1.5 text-sm transition-colors hover:bg-hover ${collection.isVisible ? 'text-secondary' : 'text-muted'}` },
+        React.createElement("button", { onClick: () => onToggleVisibility(collection.id), className: "shrink-0 w-5 h-5 flex items-center justify-center text-xs hover:text-brand-accent transition-colors", title: collection.isVisible ? 'Hide collection' : 'Show collection', "aria-label": `${collection.isVisible ? 'Hide' : 'Show'} ${displayName}` }, collection.isVisible ? '\u{1F441}' : '\u{1F441}\u{FE0F}\u{200D}\u{1F5E8}\u{FE0F}'),
+        onSetDefault && collection.isMutable && (React.createElement("button", { onClick: () => onSetDefault(collection.id), className: `shrink-0 w-5 h-5 flex items-center justify-center transition-colors ${collection.isDefault ? 'text-star hover:text-star' : 'text-faint hover:text-star'}`, title: collection.isDefault
+                ? 'Default collection for new items'
+                : 'Set as default collection for new items', "aria-label": collection.isDefault
+                ? `${(_b = collection.name) !== null && _b !== void 0 ? _b : collection.id} is default`
+                : `Set ${(_c = collection.name) !== null && _c !== void 0 ? _c : collection.id} as default`, "aria-pressed": collection.isDefault }, collection.isDefault ? '★' : '☆')),
+        collection.hasConflict && (React.createElement("span", { className: "shrink-0 text-xs text-status-warning-strong cursor-default", title: "An encrypted copy of this collection from another storage root has the same ID. Go to Settings \u2192 Storage to resolve the conflict.", "aria-label": `Conflict: encrypted shadow for ${displayName}` }, '⚠')),
+        !collection.isMutable && (React.createElement("span", { className: "shrink-0 text-xs text-muted", title: "Built-in collection (read-only)" }, '\uD83D\uDD12')),
+        collection.isProtected &&
+            (collection.isUnlocked || !onUnlock ? (React.createElement("span", { className: `shrink-0 text-xs ${collection.isUnlocked ? 'text-status-success-icon' : 'text-muted'}`, title: collection.isUnlocked ? 'Protected (unlocked)' : 'Protected (locked)' }, '\uD83D\uDEE1')) : (React.createElement("button", { onClick: () => onUnlock(collection.id), className: "shrink-0 text-xs text-muted hover:text-star transition-colors", title: "Click to unlock", "aria-label": `Unlock ${(_d = collection.name) !== null && _d !== void 0 ? _d : collection.id}` }, '\uD83D\uDEE1'))),
+        React.createElement("span", { className: "flex-1 truncate", title: displayName }, displayName),
+        React.createElement("span", { className: "shrink-0 text-xs text-muted" }, collection.itemCount),
+        collection.isMutable && onExport && (React.createElement("button", { onClick: () => onExport(collection.id), className: "shrink-0 w-5 h-5 flex items-center justify-center text-xs text-faint hover:text-brand-accent transition-colors", title: `Export ${displayName}`, "aria-label": `Export ${displayName}` }, "\u2193")),
+        collection.isMutable && onRename && (React.createElement("button", { onClick: () => onRename(collection.id), className: "shrink-0 w-5 h-5 flex items-center justify-center text-xs text-faint hover:text-brand-accent transition-colors", title: `Rename ${displayName}`, "aria-label": `Rename ${displayName}` }, '✎')),
+        collection.isMutable && onMerge && (React.createElement("button", { onClick: () => onMerge(collection.id), className: "shrink-0 w-5 h-5 flex items-center justify-center text-xs text-faint hover:text-brand-accent transition-colors", title: `Merge ${displayName} into another collection`, "aria-label": `Merge ${displayName}` }, '⤵')),
+        collection.isMutable && onDelete && (React.createElement("button", { onClick: () => onDelete(collection.id), className: "shrink-0 w-5 h-5 flex items-center justify-center text-xs text-faint hover:text-status-error-icon transition-colors", title: `Remove ${displayName}`, "aria-label": `Remove ${displayName}` }, '×'))));
+}
+// ============================================================================
+// CollectionSection
+// ============================================================================
+/**
+ * Collapsible sidebar section for managing collections.
+ *
+ * Renders a header with action buttons and a list of collection rows
+ * with visibility toggles, status indicators, and delete actions.
+ *
+ * @public
+ */
+export function CollectionSection(props) {
+    const { collections, onToggleVisibility, onToggleAllVisibility, onAddDirectory, onCreateCollection, onDeleteCollection, onSetDefaultCollection, onExportCollection, onExportAllAsZip, onImportCollection, onOpenCollectionFromFile, onUnlockCollection, onRenameCollection, onMergeCollection, defaultCollapsed = false } = props;
+    const [collapsed, setCollapsed] = useState(defaultCollapsed);
+    const allVisible = collections.length > 0 && collections.every((c) => c.isVisible);
+    const handleToggleAllVisibility = useCallback(() => {
+        if (onToggleAllVisibility) {
+            onToggleAllVisibility(!allVisible);
+        }
+        else {
+            const ids = allVisible
+                ? collections.map((c) => c.id)
+                : collections.filter((c) => !c.isVisible).map((c) => c.id);
+            ids.forEach((id) => onToggleVisibility(id));
+        }
+    }, [onToggleAllVisibility, onToggleVisibility, allVisible, collections]);
+    const handleToggleCollapse = useCallback(() => {
+        setCollapsed((prev) => !prev);
+    }, []);
+    return (React.createElement("div", { className: "flex flex-col border-t border-border mt-1" },
+        React.createElement("div", { className: "flex items-center justify-between px-3 py-1.5" },
+            React.createElement("button", { onClick: handleToggleCollapse, className: "flex items-center gap-1 text-xs font-medium text-muted uppercase tracking-wider hover:text-secondary transition-colors" },
+                React.createElement("span", { className: `text-[10px] transition-transform ${collapsed ? '' : 'rotate-90'}` }, '\u203A'),
+                "Collections",
+                React.createElement("span", { className: "text-muted normal-case font-normal" },
+                    "(",
+                    collections.length,
+                    ")")),
+            collections.length > 1 && (React.createElement("button", { onClick: handleToggleAllVisibility, className: "text-xs text-muted hover:text-brand-accent transition-colors px-1", title: allVisible ? 'Hide all collections' : 'Show all collections', "aria-label": allVisible ? 'Hide all collections' : 'Show all collections' }, allVisible ? '\u{1F441}\u{FE0F}\u{200D}\u{1F5E8}\u{FE0F}' : '\u{1F441}')),
+            React.createElement("div", { className: "flex items-center gap-1" },
+                onAddDirectory && (React.createElement("button", { onClick: onAddDirectory, className: "text-xs text-muted hover:text-brand-accent transition-colors px-1", title: "Add directory", "aria-label": "Add directory" },
+                    "+",
+                    '\uD83D\uDCC1')),
+                onExportAllAsZip && (React.createElement("button", { onClick: onExportAllAsZip, className: "text-xs text-muted hover:text-brand-accent transition-colors px-1", title: "Export all mutable collections as zip", "aria-label": "Export all as zip" },
+                    "\u2193",
+                    '🗂')),
+                onOpenCollectionFromFile && (React.createElement("button", { onClick: onOpenCollectionFromFile, className: "text-xs text-muted hover:text-brand-accent transition-colors px-1", title: "Open collection file for in-place editing", "aria-label": "Open collection from file" }, '📂')),
+                onImportCollection && (React.createElement("button", { onClick: onImportCollection, className: "text-xs text-muted hover:text-brand-accent transition-colors px-1", title: "Import collection from file (in-memory)", "aria-label": "Import collection from file" }, "\u2191")),
+                onCreateCollection && (React.createElement("button", { onClick: onCreateCollection, "data-testid": "sidebar-new-collection-button", className: "text-xs text-muted hover:text-brand-accent transition-colors px-1", title: "New collection", "aria-label": "New collection" }, "+")))),
+        !collapsed && (React.createElement("div", { className: "flex flex-col" }, collections.length === 0 ? (React.createElement("div", { className: "px-3 py-2 text-xs text-muted" }, "No collections")) : (collections.map((collection) => (React.createElement(CollectionRow, { key: collection.id, collection: collection, onToggleVisibility: onToggleVisibility, onSetDefault: onSetDefaultCollection, onDelete: onDeleteCollection, onExport: onExportCollection, onUnlock: onUnlockCollection, onRename: onRenameCollection, onMerge: onMergeCollection }))))))));
+}
+//# sourceMappingURL=CollectionSection.js.map

package/dist/packlets/sidebar/EntityList.js

@@ -0,0 +1,164 @@
+/*
+ * 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.
+ */
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useResponsive } from '../responsive';
+// ============================================================================
+// EntityList Component
+// ============================================================================
+/**
+ * Generic entity list component for the sidebar.
+ *
+ * Renders a scrollable list of entities with:
+ * - Primary label + optional sublabel
+ * - Optional status indicator
+ * - Selection highlighting
+ * - Empty state with optional CTA
+ *
+ * @public
+ */
+export function EntityList(props) {
+    const { entities, descriptor, selectedId, onSelect, onDrill, compareMode, checkedIds, onCheckedChange, emptyState, header, onDelete, canDelete } = props;
+    const listRef = useRef(null);
+    const { layoutMode } = useResponsive();
+    const isMobile = layoutMode === 'mobile';
+    // Scroll the selected item into view when selection changes
+    useEffect(() => {
+        if (selectedId && listRef.current) {
+            const selectedButton = listRef.current.querySelector(`[data-entity-id="${selectedId}"]`);
+            if (selectedButton) {
+                selectedButton.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    }, [selectedId]);
+    // Find the index of the currently selected entity
+    const selectedIndex = entities.findIndex((e) => descriptor.getId(e) === selectedId);
+    const handleKeyDown = useCallback((e) => {
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                const nextIndex = selectedIndex < entities.length - 1 ? selectedIndex + 1 : 0;
+                onSelect(descriptor.getId(entities[nextIndex]));
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                const prevIndex = selectedIndex > 0 ? selectedIndex - 1 : entities.length - 1;
+                onSelect(descriptor.getId(entities[prevIndex]));
+                break;
+            }
+            case 'Enter':
+            case 'ArrowRight': {
+                if (selectedId !== undefined && onDrill) {
+                    e.preventDefault();
+                    onDrill();
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    }, [entities, descriptor, selectedId, selectedIndex, onSelect, onDrill]);
+    if (entities.length === 0 && emptyState) {
+        return React.createElement(EmptyState, { config: emptyState });
+    }
+    return (React.createElement("div", { className: "flex flex-col flex-1 overflow-hidden", onKeyDown: handleKeyDown },
+        header !== undefined ? (React.createElement("div", { className: "px-3 py-1.5 text-xs text-muted border-b border-border-subtle" }, header)) : entities.length > 0 ? (React.createElement("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-border-subtle" },
+            React.createElement("span", { className: "text-xs text-muted" },
+                entities.length,
+                " item",
+                entities.length !== 1 ? 's' : '',
+                compareMode && props.compareCount !== undefined && props.compareCount > 0 && (React.createElement("span", { className: "ml-1.5 text-brand-accent" },
+                    "\u00B7 ",
+                    props.compareCount,
+                    " selected"))),
+            React.createElement("div", { className: "flex items-center gap-1" },
+                compareMode &&
+                    props.onStartComparison &&
+                    props.compareCount !== undefined &&
+                    props.compareCount >= 2 && (React.createElement("button", { onClick: (e) => {
+                        var _a;
+                        e.stopPropagation();
+                        (_a = props.onStartComparison) === null || _a === void 0 ? void 0 : _a.call(props);
+                    }, className: "px-2 py-0.5 text-[11px] rounded border transition-colors bg-brand-primary text-white border-brand-primary hover:bg-brand-primary/90" }, "Compare Now")),
+                props.onToggleCompare && (React.createElement("button", { onClick: (e) => {
+                        var _a;
+                        e.stopPropagation();
+                        (_a = props.onToggleCompare) === null || _a === void 0 ? void 0 : _a.call(props);
+                    }, className: `px-2 py-0.5 text-[11px] rounded border transition-colors ${compareMode
+                        ? 'bg-brand-accent text-white border-brand-accent'
+                        : 'bg-surface text-muted border-border hover:border-brand-accent hover:text-brand-accent'}` }, compareMode ? 'Cancel' : 'Compare'))))) : null,
+        React.createElement("div", { ref: listRef, className: "flex-1 overflow-y-auto" }, entities.map((entity) => {
+            var _a, _b;
+            const id = descriptor.getId(entity);
+            const label = descriptor.getLabel(entity);
+            const sublabel = (_a = descriptor.getSublabel) === null || _a === void 0 ? void 0 : _a.call(descriptor, entity);
+            const status = (_b = descriptor.getStatus) === null || _b === void 0 ? void 0 : _b.call(descriptor, entity);
+            const isSelected = id === selectedId;
+            const isChecked = compareMode === true && checkedIds !== undefined && checkedIds.has(id);
+            return (React.createElement("div", { key: id, className: `group flex items-center gap-2 w-full border-b border-border-subtle transition-colors ${isChecked
+                    ? 'bg-selected border-l-2 border-l-selected-border'
+                    : isSelected && !compareMode
+                        ? 'bg-selected border-l-2 border-l-selected-border'
+                        : 'hover:bg-hover border-l-2 border-l-transparent'}` },
+                React.createElement("button", { "data-entity-id": id, onClick: () => {
+                        if (compareMode && onCheckedChange) {
+                            onCheckedChange(id);
+                        }
+                        else if (isSelected && onDrill) {
+                            onDrill();
+                        }
+                        else {
+                            onSelect(id);
+                        }
+                    }, className: `flex items-center gap-2 flex-1 min-w-0 px-3 text-left ${isMobile ? 'py-3' : 'py-2'}` },
+                    compareMode && (React.createElement("span", { className: `flex items-center justify-center w-4 h-4 rounded border shrink-0 transition-colors ${isChecked
+                            ? 'bg-brand-accent border-brand-accent text-white'
+                            : 'border-border bg-surface'}` }, isChecked && (React.createElement("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3 },
+                        React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }))))),
+                    React.createElement("div", { className: "flex-1 min-w-0" },
+                        React.createElement("div", { className: `text-sm truncate ${(isSelected && !compareMode) || isChecked
+                                ? 'font-medium text-brand-primary'
+                                : 'text-primary'}` }, label),
+                        sublabel && React.createElement("div", { className: "text-xs text-muted truncate mt-0.5" }, sublabel)),
+                    status && (React.createElement("span", { className: "flex items-center gap-1 shrink-0 mt-0.5" },
+                        React.createElement("span", { className: `w-2 h-2 rounded-full ${status.colorClass}` }),
+                        React.createElement("span", { className: "text-xs text-muted" }, status.label)))),
+                onDelete && !compareMode && (!canDelete || canDelete(id)) && (React.createElement("button", { onClick: (e) => {
+                        e.stopPropagation();
+                        onDelete(id);
+                    }, className: `shrink-0 mr-1 flex items-center justify-center text-muted hover:text-status-error-text transition-opacity rounded ${isMobile
+                        ? 'w-11 h-11 opacity-100'
+                        : 'w-6 h-6 opacity-0 group-hover:opacity-100 focus:opacity-100'}`, title: `Delete ${label}`, "aria-label": `Delete ${label}` },
+                    React.createElement("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 },
+                        React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }))))));
+        }))));
+}
+// ============================================================================
+// Empty State
+// ============================================================================
+function EmptyState({ config }) {
+    return (React.createElement("div", { className: "flex flex-col items-center justify-center flex-1 p-6 text-center" },
+        React.createElement("h3", { className: "text-sm font-medium text-secondary mb-1" }, config.title),
+        React.createElement("p", { className: "text-xs text-muted mb-4" }, config.description),
+        config.action && (React.createElement("button", { onClick: config.action.onClick, className: "px-3 py-1.5 text-xs font-medium text-white bg-brand-accent rounded-md hover:bg-brand-primary transition-colors" }, config.action.label))));
+}
+//# sourceMappingURL=EntityList.js.map

package/dist/packlets/sidebar/FilterBar.js

@@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+import React from 'react';
+import { SearchBar } from './SearchBar';
+/**
+ * Composite sidebar filter bar: search input + filter rows + clear-all.
+ *
+ * Renders the search bar at the top, filter rows in the middle,
+ * and a "Clear all" button when any filters are active.
+ *
+ * @public
+ */
+export function FilterBar(props) {
+    const { search, activeFilterCount, onClearAll, children } = props;
+    const hasActiveFilters = activeFilterCount > 0 || search.value.length > 0;
+    return (React.createElement("div", { className: "flex flex-col" },
+        React.createElement(SearchBar, Object.assign({}, search)),
+        React.createElement("div", { className: "flex items-center justify-between px-3 py-1" },
+            React.createElement("span", { className: "text-xs font-medium text-muted uppercase tracking-wider" }, "Filters"),
+            hasActiveFilters && (React.createElement("button", { onClick: onClearAll, className: "text-xs text-brand-accent hover:text-brand-primary" }, "Clear all"))),
+        React.createElement("div", { className: "flex flex-col" }, children)));
+}
+//# sourceMappingURL=FilterBar.js.map

package/dist/packlets/sidebar/FilterRow.js

@@ -0,0 +1,182 @@
+/*
+ * 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.
+ */
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useResponsive } from '../responsive';
+// ============================================================================
+// FilterRow Component
+// ============================================================================
+/** Minimum number of options before showing the search-within-filter input */
+const SEARCH_THRESHOLD = 8;
+/**
+ * A compact filter row with a right-side flyout overlay for selecting filter values.
+ *
+ * Collapsed: shows the label, status summary text, and a `\u203A` chevron.
+ * Expanded: a flyout panel slides out to the right of the sidebar, overlaying the main pane.
+ *
+ * @public
+ */
+export function FilterRow(props) {
+    const { label, options, selected, onSelectionChange, multiple = true, isEqual = defaultIsEqual } = props;
+    const { layoutMode } = useResponsive();
+    const isMobile = layoutMode === 'mobile';
+    const [open, setOpen] = useState(false);
+    const [flyoutSearch, setFlyoutSearch] = useState('');
+    const rowRef = useRef(null);
+    const flyoutRef = useRef(null);
+    // Close flyout on outside click (check both row and flyout)
+    useEffect(() => {
+        if (!open) {
+            return undefined;
+        }
+        const handleClick = (e) => {
+            const target = e.target;
+            if (rowRef.current &&
+                !rowRef.current.contains(target) &&
+                flyoutRef.current &&
+                !flyoutRef.current.contains(target)) {
+                setOpen(false);
+                setFlyoutSearch('');
+            }
+        };
+        document.addEventListener('mousedown', handleClick);
+        return () => document.removeEventListener('mousedown', handleClick);
+    }, [open]);
+    // Close flyout on Escape
+    useEffect(() => {
+        if (!open) {
+            return undefined;
+        }
+        const handleKey = (e) => {
+            if (e.key === 'Escape') {
+                setOpen(false);
+                setFlyoutSearch('');
+            }
+        };
+        document.addEventListener('keydown', handleKey);
+        return () => document.removeEventListener('keydown', handleKey);
+    }, [open]);
+    const isSelected = useCallback((value) => selected.some((s) => isEqual(s, value)), [selected, isEqual]);
+    const toggleValue = useCallback((value) => {
+        if (multiple) {
+            if (isSelected(value)) {
+                onSelectionChange(selected.filter((s) => !isEqual(s, value)));
+            }
+            else {
+                onSelectionChange([...selected, value]);
+            }
+        }
+        else {
+            // Single-select: toggle off if already selected, otherwise select
+            if (isSelected(value)) {
+                onSelectionChange([]);
+            }
+            else {
+                onSelectionChange([value]);
+            }
+        }
+    }, [multiple, selected, onSelectionChange, isSelected, isEqual]);
+    const clearSelection = useCallback((e) => {
+        e.stopPropagation();
+        onSelectionChange([]);
+    }, [onSelectionChange]);
+    const activeCount = selected.length;
+    // Status summary text for the collapsed row
+    const statusText = useMemo(() => {
+        if (activeCount === 0) {
+            return 'All';
+        }
+        if (activeCount === 1) {
+            // Show the label of the single selected option
+            const sel = selected[0];
+            const match = options.find((o) => isEqual(o.value, sel));
+            return match ? match.label : '1 selected';
+        }
+        return `${activeCount} selected`;
+    }, [activeCount, selected, options, isEqual]);
+    // Filter options by flyout search
+    const filteredOptions = useMemo(() => {
+        const q = flyoutSearch.trim().toLowerCase();
+        if (q.length === 0) {
+            return options;
+        }
+        return options.filter((o) => o.label.toLowerCase().includes(q));
+    }, [options, flyoutSearch]);
+    // Compute flyout position: anchored to the right edge of the sidebar row, aligned vertically
+    const [flyoutStyle, setFlyoutStyle] = useState({});
+    useEffect(() => {
+        if (!open || !rowRef.current) {
+            return;
+        }
+        const rect = rowRef.current.getBoundingClientRect();
+        // Find the sidebar container (the <aside> ancestor)
+        let sidebar = rowRef.current;
+        while (sidebar && sidebar.tagName !== 'ASIDE') {
+            sidebar = sidebar.parentElement;
+        }
+        const rightEdge = sidebar ? sidebar.getBoundingClientRect().right : rect.right;
+        // Flyout appears at the right edge of the sidebar, vertically aligned with the row
+        const maxHeight = Math.min(400, window.innerHeight - rect.top - 8);
+        setFlyoutStyle({
+            position: 'fixed',
+            top: rect.top,
+            left: rightEdge,
+            width: 280,
+            maxHeight,
+            zIndex: 50
+        });
+    }, [open]);
+    const handleToggle = useCallback(() => {
+        setOpen((prev) => {
+            if (prev) {
+                setFlyoutSearch('');
+            }
+            return !prev;
+        });
+    }, []);
+    return (React.createElement("div", { ref: rowRef },
+        React.createElement("button", { onClick: handleToggle, className: `flex items-center justify-between w-full px-3 text-sm hover:bg-hover transition-colors ${isMobile ? 'py-3' : 'py-1.5'} ${activeCount > 0 ? 'text-brand-primary font-medium' : 'text-secondary'}` },
+            React.createElement("span", { className: "truncate" }, label),
+            React.createElement("span", { className: "flex items-center gap-1.5 shrink-0 ml-2" },
+                activeCount > 0 && (React.createElement("span", { onClick: clearSelection, className: "text-muted hover:text-secondary cursor-pointer text-xs", role: "button", "aria-label": `Clear ${label} filter` }, '\u00D7')),
+                React.createElement("span", { className: `text-xs ${activeCount > 0 ? 'text-brand-accent' : 'text-muted'}` }, statusText),
+                React.createElement("span", { className: "text-muted text-xs" }, '\u203A'))),
+        open && (React.createElement("div", { ref: flyoutRef, className: "bg-surface border border-border rounded-r-lg shadow-xl overflow-hidden flex flex-col", style: flyoutStyle },
+            React.createElement("div", { className: "flex items-center justify-between px-3 py-2 border-b border-border-subtle bg-surface-alt" },
+                React.createElement("span", { className: "text-xs font-medium text-secondary" }, label),
+                activeCount > 0 && (React.createElement("button", { onClick: () => onSelectionChange([]), className: "text-xs text-brand-accent hover:text-brand-primary" }, "Clear"))),
+            options.length >= SEARCH_THRESHOLD && (React.createElement("div", { className: "px-3 py-1.5 border-b border-border-subtle" },
+                React.createElement("input", { type: "text", value: flyoutSearch, onChange: (e) => setFlyoutSearch(e.target.value), placeholder: `Search ${label.toLowerCase()}...`, className: "w-full px-2 py-1 text-xs border border-border rounded bg-surface text-primary focus:outline-none focus:border-focus-ring", autoFocus: true }))),
+            React.createElement("div", { className: "flex-1 overflow-y-auto" }, filteredOptions.length === 0 ? (React.createElement("div", { className: "px-3 py-2 text-xs text-muted" }, options.length === 0 ? 'No options available' : 'No matches')) : (filteredOptions.map((option, idx) => {
+                const checked = isSelected(option.value);
+                return (React.createElement("button", { key: idx, onClick: () => toggleValue(option.value), className: `flex items-center gap-2 w-full px-3 text-sm text-left hover:bg-hover transition-colors ${isMobile ? 'py-2.5' : 'py-1.5'} ${checked ? 'text-brand-primary font-medium' : 'text-secondary'}` },
+                    React.createElement("span", { className: `inline-flex items-center justify-center w-4 h-4 border rounded ${multiple ? 'rounded' : 'rounded-full'} ${checked ? 'bg-brand-accent border-brand-accent text-white' : 'border-border'}` }, checked && React.createElement("span", { className: "text-[10px]" }, '\u2713')),
+                    React.createElement("span", { className: "flex-1 truncate" }, option.label),
+                    option.count !== undefined && React.createElement("span", { className: "text-xs text-muted" }, option.count)));
+            })))))));
+}
+// ============================================================================
+// Helpers
+// ============================================================================
+function defaultIsEqual(a, b) {
+    return a === b;
+}
+//# sourceMappingURL=FilterRow.js.map