@fgv/ts-app-shell 5.1.0-1

package/lib/packlets/selectors/index.js

@@ -0,0 +1,29 @@
+"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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreferredSelector = exports.EntityRow = void 0;
+var EntityRow_1 = require("./EntityRow");
+Object.defineProperty(exports, "EntityRow", { enumerable: true, get: function () { return EntityRow_1.EntityRow; } });
+var PreferredSelector_1 = require("./PreferredSelector");
+Object.defineProperty(exports, "PreferredSelector", { enumerable: true, get: function () { return PreferredSelector_1.PreferredSelector; } });
+//# sourceMappingURL=index.js.map

package/lib/packlets/sidebar/CollectionSection.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Generic collection management section for the sidebar.
+ *
+ * Renders a collapsible list of collections with visibility toggles,
+ * status indicators, and action buttons.
+ *
+ * @packageDocumentation
+ */
+import React from 'react';
+/**
+ * Describes a single collection for rendering in the sidebar.
+ * @public
+ */
+export interface ICollectionRowItem {
+    /** Collection identifier */
+    readonly id: string;
+    /** Display name (falls back to id if undefined) */
+    readonly name: string | undefined;
+    /** Number of items in this collection */
+    readonly itemCount: number;
+    /** Whether this collection can be modified */
+    readonly isMutable: boolean;
+    /** Whether this collection is encrypted/protected */
+    readonly isProtected: boolean;
+    /** Whether the protected collection has been unlocked */
+    readonly isUnlocked: boolean;
+    /** Whether this collection is currently visible */
+    readonly isVisible: boolean;
+    /** Whether this collection is the default target for new entities */
+    readonly isDefault: boolean;
+    /**
+     * Whether this loaded collection has an orphaned encrypted shadow with the same ID
+     * in another storage root. When true, a repair action should be offered.
+     */
+    readonly hasConflict?: boolean;
+}
+/**
+ * Props for the CollectionSection component.
+ * @public
+ */
+export interface ICollectionSectionProps {
+    /** Collection items to display */
+    readonly collections: ReadonlyArray<ICollectionRowItem>;
+    /** Callback when visibility is toggled for a collection */
+    readonly onToggleVisibility: (collectionId: string) => void;
+    /** Callback when all-visible toggle is clicked; receives true to show all, false to hide all */
+    readonly onToggleAllVisibility?: (showAll: boolean) => void;
+    /** Callback when "Add Directory" is clicked */
+    readonly onAddDirectory?: () => void;
+    /** Callback when "New Collection" is clicked */
+    readonly onCreateCollection?: () => void;
+    /** Callback when delete is clicked for a mutable collection */
+    readonly onDeleteCollection?: (collectionId: string) => void;
+    /** Callback when the star/default is clicked for a collection */
+    readonly onSetDefaultCollection?: (collectionId: string) => void;
+    /** Callback when export is clicked for a mutable collection */
+    readonly onExportCollection?: (collectionId: string) => void;
+    /** Callback when "Export All as Zip" is clicked (header-level) */
+    readonly onExportAllAsZip?: () => void;
+    /** Callback when "Import Collection" is clicked (header-level) */
+    readonly onImportCollection?: () => void;
+    /** Callback when "Open from File" is clicked (header-level, File System Access API) */
+    readonly onOpenCollectionFromFile?: () => void;
+    /** Callback when the unlock button is clicked for a locked protected collection */
+    readonly onUnlockCollection?: (collectionId: string) => void;
+    /** Callback when rename is clicked for a mutable collection */
+    readonly onRenameCollection?: (collectionId: string) => void;
+    /** Callback when merge is clicked for a mutable collection */
+    readonly onMergeCollection?: (collectionId: string) => void;
+    /** Whether the section starts collapsed */
+    readonly defaultCollapsed?: boolean;
+}
+/**
+ * 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 declare function CollectionSection(props: ICollectionSectionProps): React.ReactElement;
+//# sourceMappingURL=CollectionSection.d.ts.map

package/lib/packlets/sidebar/CollectionSection.js

@@ -0,0 +1,143 @@
+"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.CollectionSection = CollectionSection;
+/**
+ * Generic collection management section for the sidebar.
+ *
+ * Renders a collapsible list of collections with visibility toggles,
+ * status indicators, and action buttons.
+ *
+ * @packageDocumentation
+ */
+const react_1 = __importStar(require("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_1.default.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_1.default.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_1.default.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_1.default.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_1.default.createElement("span", { className: "shrink-0 text-xs text-muted", title: "Built-in collection (read-only)" }, '\uD83D\uDD12')),
+        collection.isProtected &&
+            (collection.isUnlocked || !onUnlock ? (react_1.default.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_1.default.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_1.default.createElement("span", { className: "flex-1 truncate", title: displayName }, displayName),
+        react_1.default.createElement("span", { className: "shrink-0 text-xs text-muted" }, collection.itemCount),
+        collection.isMutable && onExport && (react_1.default.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_1.default.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_1.default.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_1.default.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
+ */
+function CollectionSection(props) {
+    const { collections, onToggleVisibility, onToggleAllVisibility, onAddDirectory, onCreateCollection, onDeleteCollection, onSetDefaultCollection, onExportCollection, onExportAllAsZip, onImportCollection, onOpenCollectionFromFile, onUnlockCollection, onRenameCollection, onMergeCollection, defaultCollapsed = false } = props;
+    const [collapsed, setCollapsed] = (0, react_1.useState)(defaultCollapsed);
+    const allVisible = collections.length > 0 && collections.every((c) => c.isVisible);
+    const handleToggleAllVisibility = (0, react_1.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 = (0, react_1.useCallback)(() => {
+        setCollapsed((prev) => !prev);
+    }, []);
+    return (react_1.default.createElement("div", { className: "flex flex-col border-t border-border mt-1" },
+        react_1.default.createElement("div", { className: "flex items-center justify-between px-3 py-1.5" },
+            react_1.default.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_1.default.createElement("span", { className: `text-[10px] transition-transform ${collapsed ? '' : 'rotate-90'}` }, '\u203A'),
+                "Collections",
+                react_1.default.createElement("span", { className: "text-muted normal-case font-normal" },
+                    "(",
+                    collections.length,
+                    ")")),
+            collections.length > 1 && (react_1.default.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_1.default.createElement("div", { className: "flex items-center gap-1" },
+                onAddDirectory && (react_1.default.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_1.default.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_1.default.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_1.default.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_1.default.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_1.default.createElement("div", { className: "flex flex-col" }, collections.length === 0 ? (react_1.default.createElement("div", { className: "px-3 py-2 text-xs text-muted" }, "No collections")) : (collections.map((collection) => (react_1.default.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/lib/packlets/sidebar/EntityList.d.ts

@@ -0,0 +1,105 @@
+import React from 'react';
+/**
+ * Describes how to extract display properties from an entity.
+ * Consuming apps provide this to configure the list for their entity types.
+ * @public
+ */
+export interface IEntityDescriptor<TEntity, TId extends string = string> {
+    /** Extract the unique ID from an entity */
+    readonly getId: (entity: TEntity) => TId;
+    /** Extract the primary display label */
+    readonly getLabel: (entity: TEntity) => string;
+    /** Extract an optional secondary line (subtitle, description) */
+    readonly getSublabel?: (entity: TEntity) => string | undefined;
+    /** Extract an optional status badge or indicator */
+    readonly getStatus?: (entity: TEntity) => IEntityStatus | undefined;
+}
+/**
+ * Status indicator for an entity list item.
+ * @public
+ */
+export interface IEntityStatus {
+    /** Status label */
+    readonly label: string;
+    /** CSS color class for the status dot */
+    readonly colorClass: string;
+}
+/**
+ * Props for the EntityList component.
+ * @public
+ */
+export interface IEntityListProps<TEntity, TId extends string = string> {
+    /** The entities to display */
+    readonly entities: ReadonlyArray<TEntity>;
+    /** Descriptor for extracting display properties */
+    readonly descriptor: IEntityDescriptor<TEntity, TId>;
+    /** Currently selected entity ID (if any) */
+    readonly selectedId?: TId;
+    /** Callback when an entity is selected (browse — list stays open) */
+    readonly onSelect: (id: TId) => void;
+    /** Callback when the user drills into the selected entity (Enter/→ — collapses list) */
+    readonly onDrill?: () => void;
+    /** Whether compare mode is active (shows checkboxes for multi-select) */
+    readonly compareMode?: boolean;
+    /** Entity IDs currently checked for comparison */
+    readonly checkedIds?: ReadonlySet<string>;
+    /** Callback to toggle an entity ID in/out of the compare selection */
+    readonly onCheckedChange?: (id: TId) => void;
+    /** Empty state configuration */
+    readonly emptyState?: IEmptyStateConfig;
+    /** Optional header content (e.g., result count) */
+    readonly header?: React.ReactNode;
+    /** Callback to toggle compare mode on/off (shows compare button in header) */
+    readonly onToggleCompare?: () => void;
+    /** Number of items currently selected for comparison */
+    readonly compareCount?: number;
+    /** Callback to start the comparison view (user clicks 'Compare Now') */
+    readonly onStartComparison?: () => void;
+    /**
+     * Optional callback to delete an entity.
+     * When provided, a delete button appears on each row (visible on hover/selection).
+     * The consumer is responsible for showing a confirmation dialog before calling this.
+     */
+    readonly onDelete?: (id: TId) => void;
+    /**
+     * Optional predicate to control per-entity delete button visibility.
+     * When `onDelete` is provided but `canDelete` is not, all rows show the delete button.
+     * When both are provided, only rows where `canDelete(id)` returns true show the button.
+     */
+    readonly canDelete?: (id: TId) => boolean;
+}
+/**
+ * Configuration for the empty state display.
+ * @public
+ */
+export interface IEmptyStateConfig {
+    /** Title for the empty state */
+    readonly title: string;
+    /** Description text */
+    readonly description: string;
+    /** Optional CTA button */
+    readonly action?: IEmptyStateAction;
+}
+/**
+ * Call-to-action for the empty state.
+ * @public
+ */
+export interface IEmptyStateAction {
+    /** Button label */
+    readonly label: string;
+    /** Callback when clicked */
+    readonly onClick: () => void;
+}
+/**
+ * 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 declare function EntityList<TEntity, TId extends string = string>(props: IEntityListProps<TEntity, TId>): React.ReactElement;
+//# sourceMappingURL=EntityList.d.ts.map

package/lib/packlets/sidebar/EntityList.js

@@ -0,0 +1,200 @@
+"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.EntityList = EntityList;
+const react_1 = __importStar(require("react"));
+const responsive_1 = require("../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
+ */
+function EntityList(props) {
+    const { entities, descriptor, selectedId, onSelect, onDrill, compareMode, checkedIds, onCheckedChange, emptyState, header, onDelete, canDelete } = props;
+    const listRef = (0, react_1.useRef)(null);
+    const { layoutMode } = (0, responsive_1.useResponsive)();
+    const isMobile = layoutMode === 'mobile';
+    // Scroll the selected item into view when selection changes
+    (0, react_1.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 = (0, react_1.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_1.default.createElement(EmptyState, { config: emptyState });
+    }
+    return (react_1.default.createElement("div", { className: "flex flex-col flex-1 overflow-hidden", onKeyDown: handleKeyDown },
+        header !== undefined ? (react_1.default.createElement("div", { className: "px-3 py-1.5 text-xs text-muted border-b border-border-subtle" }, header)) : entities.length > 0 ? (react_1.default.createElement("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-border-subtle" },
+            react_1.default.createElement("span", { className: "text-xs text-muted" },
+                entities.length,
+                " item",
+                entities.length !== 1 ? 's' : '',
+                compareMode && props.compareCount !== undefined && props.compareCount > 0 && (react_1.default.createElement("span", { className: "ml-1.5 text-brand-accent" },
+                    "\u00B7 ",
+                    props.compareCount,
+                    " selected"))),
+            react_1.default.createElement("div", { className: "flex items-center gap-1" },
+                compareMode &&
+                    props.onStartComparison &&
+                    props.compareCount !== undefined &&
+                    props.compareCount >= 2 && (react_1.default.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_1.default.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_1.default.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_1.default.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_1.default.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_1.default.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_1.default.createElement("svg", { className: "w-3 h-3", 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("div", { className: "flex-1 min-w-0" },
+                        react_1.default.createElement("div", { className: `text-sm truncate ${(isSelected && !compareMode) || isChecked
+                                ? 'font-medium text-brand-primary'
+                                : 'text-primary'}` }, label),
+                        sublabel && react_1.default.createElement("div", { className: "text-xs text-muted truncate mt-0.5" }, sublabel)),
+                    status && (react_1.default.createElement("span", { className: "flex items-center gap-1 shrink-0 mt-0.5" },
+                        react_1.default.createElement("span", { className: `w-2 h-2 rounded-full ${status.colorClass}` }),
+                        react_1.default.createElement("span", { className: "text-xs text-muted" }, status.label)))),
+                onDelete && !compareMode && (!canDelete || canDelete(id)) && (react_1.default.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_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: "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_1.default.createElement("div", { className: "flex flex-col items-center justify-center flex-1 p-6 text-center" },
+        react_1.default.createElement("h3", { className: "text-sm font-medium text-secondary mb-1" }, config.title),
+        react_1.default.createElement("p", { className: "text-xs text-muted mb-4" }, config.description),
+        config.action && (react_1.default.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/lib/packlets/sidebar/FilterBar.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { type ISearchBarProps } from './SearchBar';
+/**
+ * Props for the FilterBar component.
+ * @public
+ */
+export interface IFilterBarProps {
+    /** Search bar props */
+    readonly search: ISearchBarProps;
+    /** Total number of active filters across all filter rows */
+    readonly activeFilterCount: number;
+    /** Callback to clear all filters (search + all filter rows) */
+    readonly onClearAll: () => void;
+    /** Filter row children (FilterRow components) */
+    readonly children: React.ReactNode;
+}
+/**
+ * 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 declare function FilterBar(props: IFilterBarProps): React.ReactElement;
+//# sourceMappingURL=FilterBar.d.ts.map

package/lib/packlets/sidebar/FilterBar.js

@@ -0,0 +1,48 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterBar = FilterBar;
+const react_1 = __importDefault(require("react"));
+const SearchBar_1 = require("./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
+ */
+function FilterBar(props) {
+    const { search, activeFilterCount, onClearAll, children } = props;
+    const hasActiveFilters = activeFilterCount > 0 || search.value.length > 0;
+    return (react_1.default.createElement("div", { className: "flex flex-col" },
+        react_1.default.createElement(SearchBar_1.SearchBar, Object.assign({}, search)),
+        react_1.default.createElement("div", { className: "flex items-center justify-between px-3 py-1" },
+            react_1.default.createElement("span", { className: "text-xs font-medium text-muted uppercase tracking-wider" }, "Filters"),
+            hasActiveFilters && (react_1.default.createElement("button", { onClick: onClearAll, className: "text-xs text-brand-accent hover:text-brand-primary" }, "Clear all"))),
+        react_1.default.createElement("div", { className: "flex flex-col" }, children)));
+}
+//# sourceMappingURL=FilterBar.js.map