@fgv/ts-app-shell 5.1.0-1 → 5.1.0-11

package/dist/packlets/editing/EditFieldHelpers.js

@@ -33,18 +33,18 @@ import React from 'react';
  * Horizontal label + field layout for a single edit field.
  * @public
  */
-export function EditField({ label, children }) {
+export function EditField({ label, tooltip, children }) {
     return (React.createElement("div", { className: "flex items-baseline gap-2 py-1" },
-        React.createElement("label", { className: "text-xs text-muted w-32 shrink-0" }, label),
+        React.createElement("label", { className: "text-xs text-muted w-32 shrink-0", title: tooltip }, label),
         React.createElement("div", { className: "flex-1" }, children)));
 }
 /**
  * Titled section wrapper for grouping related edit fields.
  * @public
  */
-export function EditSection({ title, children }) {
+export function EditSection({ title, tooltip, children }) {
     return (React.createElement("div", { className: "mb-4" },
-        React.createElement("h4", { className: "text-xs font-medium text-muted uppercase tracking-wider mb-1.5" }, title),
+        React.createElement("h4", { className: "text-xs font-medium text-muted uppercase tracking-wider mb-1.5", title: tooltip }, title),
         children));
 }
 /**

package/dist/packlets/sidebar/CollectionSection.js

@@ -27,31 +27,139 @@
  *
  * @packageDocumentation
  */
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { StarIcon as StarIconOutline } from '@heroicons/react/24/outline';
+import { StarIcon as StarIconSolid, ExclamationTriangleIcon, BuildingLibraryIcon, ShieldCheckIcon, ShieldExclamationIcon, ArrowDownTrayIcon, PencilSquareIcon, ArrowsPointingInIcon, TrashIcon, FolderPlusIcon, ArchiveBoxArrowDownIcon, FolderOpenIcon, ArrowUpTrayIcon, PlusIcon, ChevronRightIcon } from '@heroicons/react/20/solid';
+const BADGE_BASE_CLASSES = 'inline-flex shrink-0 items-center justify-center rounded-full font-medium leading-none';
+const BADGE_TONE_CLASSES = {
+    info: 'bg-status-info-bg text-status-info-text',
+    warning: 'bg-status-warning-bg text-status-warning-text',
+    danger: 'bg-status-error-bg text-status-error-text'
+};
+function renderBadge(badge) {
+    var _a, _b;
+    const tone = (_a = badge.tone) !== null && _a !== void 0 ? _a : 'info';
+    const ariaLabel = badge.ariaLabel;
+    if (badge.kind === 'dot') {
+        return (React.createElement("span", { className: `ml-1.5 h-2 w-2 ${BADGE_BASE_CLASSES} ${BADGE_TONE_CLASSES[tone]}`, "aria-label": ariaLabel }));
+    }
+    return (React.createElement("span", { className: `ml-1.5 min-w-4 px-1.5 py-0.5 text-[0.6875rem] ${BADGE_BASE_CLASSES} ${BADGE_TONE_CLASSES[tone]}`, "aria-label": ariaLabel }, (_b = badge.count) !== null && _b !== void 0 ? _b : 0));
+}
+// ============================================================================
+// Context Menu (internal)
+// ============================================================================
+const LONG_PRESS_MS = 500;
+function CollectionContextMenu(props) {
+    const { menu, isHidden, onHide, onShow, onClose } = props;
+    const ref = useRef(null);
+    useEffect(() => {
+        function handleClickOutside(e) {
+            if (ref.current && !ref.current.contains(e.target)) {
+                onClose();
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [onClose]);
+    const action = isHidden ? onShow : onHide;
+    if (!action) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement("div", { ref: ref, className: "fixed z-50 bg-surface-raised border border-border rounded shadow-lg py-1 min-w-[140px]", style: { left: menu.x, top: menu.y } },
+        React.createElement("button", { className: "w-full text-left px-3 py-1.5 text-sm text-secondary hover:bg-hover transition-colors", onClick: () => {
+                action(menu.collectionId);
+                onClose();
+            } }, isHidden ? 'Show collection' : 'Hide collection')));
+}
+// ============================================================================
+// Long-press hook (internal)
+// ============================================================================
+function useLongPress(onLongPress) {
+    const timerRef = useRef(undefined);
+    const firedRef = useRef(false);
+    const onTouchStart = useCallback((e) => {
+        firedRef.current = false;
+        timerRef.current = setTimeout(() => {
+            firedRef.current = true;
+            onLongPress(e);
+        }, LONG_PRESS_MS);
+    }, [onLongPress]);
+    const cancel = useCallback(() => {
+        if (timerRef.current !== undefined) {
+            clearTimeout(timerRef.current);
+            timerRef.current = undefined;
+        }
+    }, []);
+    return { onTouchStart, onTouchEnd: cancel, onTouchMove: cancel };
+}
 // ============================================================================
 // CollectionRow (internal)
 // ============================================================================
 function CollectionRow(props) {
-    var _a, _b, _c, _d;
-    const { collection, onToggleVisibility, onSetDefault, onDelete, onExport, onUnlock, onRename, onMerge } = props;
+    var _a;
+    const { collection, onToggleVisibility, onSetDefault, onDelete, onExport, onUnlock, onRename, onMerge, borderColorClass, onContextMenu, isHiddenRow } = 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}` }, '×'))));
+    const handleContextMenu = useCallback((e) => {
+        if (onContextMenu) {
+            e.preventDefault();
+            onContextMenu(collection.id, e.clientX, e.clientY);
+        }
+    }, [onContextMenu, collection.id]);
+    const handleLongPress = useCallback((e) => {
+        if (onContextMenu && e.touches.length > 0) {
+            e.preventDefault();
+            const touch = e.touches[0];
+            onContextMenu(collection.id, touch.clientX, touch.clientY);
+        }
+    }, [onContextMenu, collection.id]);
+    const longPress = useLongPress(handleLongPress);
+    return (React.createElement("div", Object.assign({ onClick: () => onToggleVisibility(collection.id), onContextMenu: handleContextMenu }, longPress, { className: `flex flex-col px-3 py-2.5 text-sm transition-colors hover:bg-hover cursor-pointer ${isHiddenRow
+            ? 'text-muted opacity-30 line-through'
+            : collection.isVisible
+                ? 'text-secondary'
+                : 'text-muted opacity-50'} ${borderColorClass ? `border-l-4 ${borderColorClass}` : ''}`, role: "button", "aria-pressed": collection.isVisible, title: collection.sourceName ? `Source: ${collection.sourceName}` : displayName }),
+        React.createElement("div", { className: "flex items-center gap-1.5" },
+            onSetDefault && collection.isMutable && (React.createElement("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    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 ? `${displayName} is default` : `Set ${displayName} as default`, "aria-pressed": collection.isDefault }, collection.isDefault ? (React.createElement(StarIconSolid, { className: "w-4 h-4" })) : (React.createElement(StarIconOutline, { className: "w-4 h-4" })))),
+            collection.hasConflict && (React.createElement("span", { className: "shrink-0 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}` },
+                React.createElement(ExclamationTriangleIcon, { className: "w-4 h-4" }))),
+            !collection.isMutable && (React.createElement("span", { className: "shrink-0 text-muted", title: "Built-in collection (read-only)" },
+                React.createElement(BuildingLibraryIcon, { className: "w-4 h-4" }))),
+            collection.isProtected &&
+                (collection.isUnlocked || !onUnlock ? (React.createElement("span", { className: `shrink-0 ${collection.isUnlocked ? 'text-status-success-icon' : 'text-muted'}`, title: collection.isUnlocked ? 'Protected (unlocked)' : 'Protected (locked)' }, collection.isUnlocked ? (React.createElement(ShieldCheckIcon, { className: "w-4 h-4" })) : (React.createElement(ShieldExclamationIcon, { className: "w-4 h-4" })))) : (React.createElement("button", { onClick: (e) => {
+                        e.stopPropagation();
+                        onUnlock(collection.id);
+                    }, className: "shrink-0 text-muted hover:text-star transition-colors", title: "Click to unlock", "aria-label": `Unlock ${displayName}` },
+                    React.createElement(ShieldExclamationIcon, { className: "w-4 h-4" })))),
+            React.createElement("span", { className: "flex-1 truncate", title: displayName }, displayName),
+            collection.badge && renderBadge(collection.badge),
+            React.createElement("span", { className: "shrink-0 text-xs text-muted" }, collection.itemCount)),
+        React.createElement("div", { className: "flex items-center gap-1 mt-1 ml-[24px]" },
+            collection.isMutable && onExport && (React.createElement("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onExport(collection.id);
+                }, className: "shrink-0 w-5 h-5 flex items-center justify-center text-faint hover:text-brand-accent transition-colors", title: `Export ${displayName}`, "aria-label": `Export ${displayName}` },
+                React.createElement(ArrowDownTrayIcon, { className: "w-4 h-4" }))),
+            collection.isMutable && onRename && (React.createElement("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onRename(collection.id);
+                }, className: "shrink-0 w-5 h-5 flex items-center justify-center text-faint hover:text-brand-accent transition-colors", title: `Rename ${displayName}`, "aria-label": `Rename ${displayName}` },
+                React.createElement(PencilSquareIcon, { className: "w-4 h-4" }))),
+            collection.isMutable && onMerge && (React.createElement("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onMerge(collection.id);
+                }, className: "shrink-0 w-5 h-5 flex items-center justify-center text-faint hover:text-brand-accent transition-colors", title: `Merge ${displayName} into another collection`, "aria-label": `Merge ${displayName}` },
+                React.createElement(ArrowsPointingInIcon, { className: "w-4 h-4" }))),
+            collection.isMutable && onDelete && (React.createElement("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onDelete(collection.id);
+                }, className: "shrink-0 w-5 h-5 flex items-center justify-center text-faint hover:text-status-error-icon transition-colors", title: `Remove ${displayName}`, "aria-label": `Remove ${displayName}` },
+                React.createElement(TrashIcon, { className: "w-4 h-4" }))),
+            !collection.isMutable && React.createElement("span", { className: "text-xs text-muted" }, "(built-in)"))));
 }
 // ============================================================================
 // CollectionSection
@@ -65,43 +173,65 @@ function CollectionRow(props) {
  * @public
  */
 export function CollectionSection(props) {
-    const { collections, onToggleVisibility, onToggleAllVisibility, onAddDirectory, onCreateCollection, onDeleteCollection, onSetDefaultCollection, onExportCollection, onExportAllAsZip, onImportCollection, onOpenCollectionFromFile, onUnlockCollection, onRenameCollection, onMergeCollection, defaultCollapsed = false } = props;
+    var _a;
+    const { collections, onToggleVisibility, onAddDirectory, onCreateCollection, onDeleteCollection, onSetDefaultCollection, onExportCollection, onExportAllAsZip, onImportCollection, onOpenCollectionFromFile, onUnlockCollection, onRenameCollection, onMergeCollection, onHideCollection, onShowCollection, defaultCollapsed = false, sourceColorMap, sourceColorFallback } = 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 [hiddenExpanded, setHiddenExpanded] = useState(false);
+    const [contextMenu, setContextMenu] = useState(undefined);
+    const visibleCollections = collections.filter((c) => !c.isHidden);
+    const hiddenCollections = collections.filter((c) => c.isHidden);
     const handleToggleCollapse = useCallback(() => {
         setCollapsed((prev) => !prev);
     }, []);
+    const handleToggleHiddenExpanded = useCallback(() => {
+        setHiddenExpanded((prev) => !prev);
+    }, []);
+    const handleOpenContextMenu = useCallback((collectionId, x, y) => {
+        setContextMenu({ collectionId, x, y });
+    }, []);
+    const handleCloseContextMenu = useCallback(() => {
+        setContextMenu(undefined);
+    }, []);
+    const getBorderColor = useCallback((sourceName) => {
+        if (!sourceColorMap)
+            return undefined;
+        if (sourceName && sourceName in sourceColorMap) {
+            return sourceColorMap[sourceName];
+        }
+        return sourceColorFallback;
+    }, [sourceColorMap, sourceColorFallback]);
+    const contextMenuCollection = contextMenu
+        ? collections.find((c) => c.id === contextMenu.collectionId)
+        : undefined;
     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'),
+                React.createElement(ChevronRightIcon, { className: `w-3 h-3 transition-transform ${collapsed ? '' : 'rotate-90'}` }),
                 "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')),
+                    React.createElement(FolderPlusIcon, { className: "w-4 h-4" }))),
                 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 }))))))));
+                    React.createElement(ArchiveBoxArrowDownIcon, { className: "w-4 h-4" }))),
+                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" },
+                    React.createElement(FolderOpenIcon, { className: "w-4 h-4" }))),
+                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" },
+                    React.createElement(ArrowUpTrayIcon, { className: "w-4 h-4" }))),
+                onCreateCollection && (React.createElement("button", { onClick: onCreateCollection, "data-testid": "sidebar-new-collection-button", className: "text-muted hover:text-brand-accent transition-colors px-1", title: "New collection", "aria-label": "New collection" },
+                    React.createElement(PlusIcon, { className: "w-4 h-4" }))))),
+        !collapsed && (React.createElement("div", { className: "flex flex-col" },
+            visibleCollections.length === 0 && hiddenCollections.length === 0 ? (React.createElement("div", { className: "px-3 py-2 text-xs text-muted" }, "No collections")) : (visibleCollections.map((collection) => (React.createElement(CollectionRow, { key: collection.id, collection: collection, onToggleVisibility: onToggleVisibility, onSetDefault: onSetDefaultCollection, onDelete: onDeleteCollection, onExport: onExportCollection, onUnlock: onUnlockCollection, onRename: onRenameCollection, onMerge: onMergeCollection, borderColorClass: getBorderColor(collection.sourceName), onContextMenu: onHideCollection ? handleOpenContextMenu : undefined })))),
+            hiddenCollections.length > 0 && (React.createElement(React.Fragment, null,
+                React.createElement("button", { onClick: handleToggleHiddenExpanded, className: "flex items-center gap-1 px-3 py-1 text-xs text-muted hover:text-secondary transition-colors" },
+                    React.createElement(ChevronRightIcon, { className: `w-3 h-3 transition-transform ${hiddenExpanded ? 'rotate-90' : ''}` }),
+                    hiddenCollections.length,
+                    " hidden"),
+                hiddenExpanded &&
+                    hiddenCollections.map((collection) => (React.createElement(CollectionRow, { key: collection.id, collection: collection, onToggleVisibility: onToggleVisibility, onSetDefault: onSetDefaultCollection, onDelete: onDeleteCollection, onExport: onExportCollection, onUnlock: onUnlockCollection, onRename: onRenameCollection, onMerge: onMergeCollection, borderColorClass: getBorderColor(collection.sourceName), onContextMenu: onShowCollection ? handleOpenContextMenu : undefined, isHiddenRow: true }))))))),
+        contextMenu && contextMenuCollection && (React.createElement(CollectionContextMenu, { menu: contextMenu, isHidden: (_a = contextMenuCollection.isHidden) !== null && _a !== void 0 ? _a : false, onHide: onHideCollection, onShow: onShowCollection, onClose: handleCloseContextMenu }))));
 }
 //# sourceMappingURL=CollectionSection.js.map

package/dist/packlets/top-bar/TabBar.js

@@ -20,6 +20,21 @@
  * SOFTWARE.
  */
 import React from 'react';
+const BADGE_BASE_CLASSES = 'inline-flex shrink-0 items-center justify-center rounded-full font-medium leading-none';
+const BADGE_TONE_CLASSES = {
+    info: 'bg-status-info-bg text-status-info-text',
+    warning: 'bg-status-warning-bg text-status-warning-text',
+    danger: 'bg-status-error-bg text-status-error-text'
+};
+function renderBadge(badge) {
+    var _a, _b;
+    const tone = (_a = badge.tone) !== null && _a !== void 0 ? _a : 'info';
+    const ariaLabel = badge.ariaLabel;
+    if (badge.kind === 'dot') {
+        return (React.createElement("span", { className: `ml-1.5 h-2 w-2 ${BADGE_BASE_CLASSES} ${BADGE_TONE_CLASSES[tone]}`, "aria-label": ariaLabel }));
+    }
+    return (React.createElement("span", { className: `ml-1.5 min-w-4 px-1.5 py-0.5 text-[0.6875rem] ${BADGE_BASE_CLASSES} ${BADGE_TONE_CLASSES[tone]}`, "aria-label": ariaLabel }, (_b = badge.count) !== null && _b !== void 0 ? _b : 0));
+}
 /**
  * Second-level tab bar for switching views within a mode.
  * @public
@@ -29,7 +44,9 @@ export function TabBar(props) {
     return (React.createElement("div", { className: "flex items-center gap-1 px-4 py-1 bg-brand-secondary text-white border-t border-white/10 overflow-x-auto" },
         tabs.map((tab) => (React.createElement("button", { key: tab.id, onClick: () => onTabChange(tab.id), className: `px-3 py-1.5 rounded-md text-sm font-medium transition-colors shrink-0 ${activeTab === tab.id
                 ? 'bg-white/20 text-white'
-                : 'text-white/60 hover:text-white hover:bg-white/10'}`, "aria-current": activeTab === tab.id ? 'page' : undefined }, tab.label))),
+                : 'text-white/60 hover:text-white hover:bg-white/10'}`, "aria-current": activeTab === tab.id ? 'page' : undefined },
+            React.createElement("span", null, tab.label),
+            tab.badge && renderBadge(tab.badge)))),
         rightContent !== undefined && (React.createElement(React.Fragment, null,
             React.createElement("div", { className: "flex-1" }),
             rightContent))));

package/lib/packlets/editing/EditFieldHelpers.d.ts

@@ -15,6 +15,8 @@ import React from 'react';
 export interface IEditFieldProps {
     /** Label text displayed to the left of the field */
     readonly label: string;
+    /** Optional tooltip shown on hover over the label */
+    readonly tooltip?: string;
     /** The input control(s) to render */
     readonly children: React.ReactNode;
 }
@@ -22,7 +24,7 @@ export interface IEditFieldProps {
  * Horizontal label + field layout for a single edit field.
  * @public
  */
-export declare function EditField({ label, children }: IEditFieldProps): React.ReactElement;
+export declare function EditField({ label, tooltip, children }: IEditFieldProps): React.ReactElement;
 /**
  * Props for the EditSection component.
  * @public
@@ -30,6 +32,8 @@ export declare function EditField({ label, children }: IEditFieldProps): React.R
 export interface IEditSectionProps {
     /** Section heading text */
     readonly title: string;
+    /** Optional tooltip shown on hover over the section heading */
+    readonly tooltip?: string;
     /** Section content (typically EditField components) */
     readonly children: React.ReactNode;
 }
@@ -37,7 +41,7 @@ export interface IEditSectionProps {
  * Titled section wrapper for grouping related edit fields.
  * @public
  */
-export declare function EditSection({ title, children }: IEditSectionProps): React.ReactElement;
+export declare function EditSection({ title, tooltip, children }: IEditSectionProps): React.ReactElement;
 /**
  * Props for the TextInput component.
  * @public

package/lib/packlets/editing/EditFieldHelpers.js

@@ -47,18 +47,18 @@ const react_1 = __importDefault(require("react"));
  * Horizontal label + field layout for a single edit field.
  * @public
  */
-function EditField({ label, children }) {
+function EditField({ label, tooltip, children }) {
     return (react_1.default.createElement("div", { className: "flex items-baseline gap-2 py-1" },
-        react_1.default.createElement("label", { className: "text-xs text-muted w-32 shrink-0" }, label),
+        react_1.default.createElement("label", { className: "text-xs text-muted w-32 shrink-0", title: tooltip }, label),
         react_1.default.createElement("div", { className: "flex-1" }, children)));
 }
 /**
  * Titled section wrapper for grouping related edit fields.
  * @public
  */
-function EditSection({ title, children }) {
+function EditSection({ title, tooltip, children }) {
     return (react_1.default.createElement("div", { className: "mb-4" },
-        react_1.default.createElement("h4", { className: "text-xs font-medium text-muted uppercase tracking-wider mb-1.5" }, title),
+        react_1.default.createElement("h4", { className: "text-xs font-medium text-muted uppercase tracking-wider mb-1.5", title: tooltip }, title),
         children));
 }
 /**

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

@@ -7,6 +7,16 @@
  * @packageDocumentation
  */
 import React from 'react';
+/**
+ * Describes a single collection for rendering in the sidebar.
+ * @public
+ */
+export interface ICollectionBadge {
+    readonly kind: 'dot' | 'count';
+    readonly tone?: 'info' | 'warning' | 'danger';
+    readonly count?: number;
+    readonly ariaLabel?: string;
+}
 /**
  * Describes a single collection for rendering in the sidebar.
  * @public
@@ -33,18 +43,27 @@ export interface ICollectionRowItem {
      * in another storage root. When true, a repair action should be offered.
      */
     readonly hasConflict?: boolean;
+    /** Whether this collection is explicitly hidden by the user */
+    readonly isHidden?: boolean;
+    /** The name of the storage source this collection was loaded from */
+    readonly sourceName?: string;
+    /** Optional badge rendered alongside the collection name */
+    readonly badge?: ICollectionBadge;
 }
 /**
  * Props for the CollectionSection component.
  * @public
  */
+/**
+ * Maps source names to Tailwind border color classes for the left-border indicator.
+ * @public
+ */
+export type SourceColorMap = Readonly<Record<string, string>>;
 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 */
@@ -67,8 +86,16 @@ export interface ICollectionSectionProps {
     readonly onRenameCollection?: (collectionId: string) => void;
     /** Callback when merge is clicked for a mutable collection */
     readonly onMergeCollection?: (collectionId: string) => void;
+    /** Callback when hide is selected from the context menu */
+    readonly onHideCollection?: (collectionId: string) => void;
+    /** Callback when show (unhide) is selected from the context menu */
+    readonly onShowCollection?: (collectionId: string) => void;
     /** Whether the section starts collapsed */
     readonly defaultCollapsed?: boolean;
+    /** Maps sourceName values to Tailwind border-l color classes */
+    readonly sourceColorMap?: SourceColorMap;
+    /** Fallback border-l color class when sourceName is not in the map */
+    readonly sourceColorFallback?: string;
 }
 /**
  * Collapsible sidebar section for managing collections.

package/lib/packlets/sidebar/CollectionSection.js

@@ -64,30 +64,138 @@ exports.CollectionSection = CollectionSection;
  * @packageDocumentation
  */
 const react_1 = __importStar(require("react"));
+const outline_1 = require("@heroicons/react/24/outline");
+const solid_1 = require("@heroicons/react/20/solid");
+const BADGE_BASE_CLASSES = 'inline-flex shrink-0 items-center justify-center rounded-full font-medium leading-none';
+const BADGE_TONE_CLASSES = {
+    info: 'bg-status-info-bg text-status-info-text',
+    warning: 'bg-status-warning-bg text-status-warning-text',
+    danger: 'bg-status-error-bg text-status-error-text'
+};
+function renderBadge(badge) {
+    var _a, _b;
+    const tone = (_a = badge.tone) !== null && _a !== void 0 ? _a : 'info';
+    const ariaLabel = badge.ariaLabel;
+    if (badge.kind === 'dot') {
+        return (react_1.default.createElement("span", { className: `ml-1.5 h-2 w-2 ${BADGE_BASE_CLASSES} ${BADGE_TONE_CLASSES[tone]}`, "aria-label": ariaLabel }));
+    }
+    return (react_1.default.createElement("span", { className: `ml-1.5 min-w-4 px-1.5 py-0.5 text-[0.6875rem] ${BADGE_BASE_CLASSES} ${BADGE_TONE_CLASSES[tone]}`, "aria-label": ariaLabel }, (_b = badge.count) !== null && _b !== void 0 ? _b : 0));
+}
+// ============================================================================
+// Context Menu (internal)
+// ============================================================================
+const LONG_PRESS_MS = 500;
+function CollectionContextMenu(props) {
+    const { menu, isHidden, onHide, onShow, onClose } = props;
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        function handleClickOutside(e) {
+            if (ref.current && !ref.current.contains(e.target)) {
+                onClose();
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [onClose]);
+    const action = isHidden ? onShow : onHide;
+    if (!action) {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+    return (react_1.default.createElement("div", { ref: ref, className: "fixed z-50 bg-surface-raised border border-border rounded shadow-lg py-1 min-w-[140px]", style: { left: menu.x, top: menu.y } },
+        react_1.default.createElement("button", { className: "w-full text-left px-3 py-1.5 text-sm text-secondary hover:bg-hover transition-colors", onClick: () => {
+                action(menu.collectionId);
+                onClose();
+            } }, isHidden ? 'Show collection' : 'Hide collection')));
+}
+// ============================================================================
+// Long-press hook (internal)
+// ============================================================================
+function useLongPress(onLongPress) {
+    const timerRef = (0, react_1.useRef)(undefined);
+    const firedRef = (0, react_1.useRef)(false);
+    const onTouchStart = (0, react_1.useCallback)((e) => {
+        firedRef.current = false;
+        timerRef.current = setTimeout(() => {
+            firedRef.current = true;
+            onLongPress(e);
+        }, LONG_PRESS_MS);
+    }, [onLongPress]);
+    const cancel = (0, react_1.useCallback)(() => {
+        if (timerRef.current !== undefined) {
+            clearTimeout(timerRef.current);
+            timerRef.current = undefined;
+        }
+    }, []);
+    return { onTouchStart, onTouchEnd: cancel, onTouchMove: cancel };
+}
 // ============================================================================
 // CollectionRow (internal)
 // ============================================================================
 function CollectionRow(props) {
-    var _a, _b, _c, _d;
-    const { collection, onToggleVisibility, onSetDefault, onDelete, onExport, onUnlock, onRename, onMerge } = props;
+    var _a;
+    const { collection, onToggleVisibility, onSetDefault, onDelete, onExport, onUnlock, onRename, onMerge, borderColorClass, onContextMenu, isHiddenRow } = 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}` }, '×'))));
+    const handleContextMenu = (0, react_1.useCallback)((e) => {
+        if (onContextMenu) {
+            e.preventDefault();
+            onContextMenu(collection.id, e.clientX, e.clientY);
+        }
+    }, [onContextMenu, collection.id]);
+    const handleLongPress = (0, react_1.useCallback)((e) => {
+        if (onContextMenu && e.touches.length > 0) {
+            e.preventDefault();
+            const touch = e.touches[0];
+            onContextMenu(collection.id, touch.clientX, touch.clientY);
+        }
+    }, [onContextMenu, collection.id]);
+    const longPress = useLongPress(handleLongPress);
+    return (react_1.default.createElement("div", Object.assign({ onClick: () => onToggleVisibility(collection.id), onContextMenu: handleContextMenu }, longPress, { className: `flex flex-col px-3 py-2.5 text-sm transition-colors hover:bg-hover cursor-pointer ${isHiddenRow
+            ? 'text-muted opacity-30 line-through'
+            : collection.isVisible
+                ? 'text-secondary'
+                : 'text-muted opacity-50'} ${borderColorClass ? `border-l-4 ${borderColorClass}` : ''}`, role: "button", "aria-pressed": collection.isVisible, title: collection.sourceName ? `Source: ${collection.sourceName}` : displayName }),
+        react_1.default.createElement("div", { className: "flex items-center gap-1.5" },
+            onSetDefault && collection.isMutable && (react_1.default.createElement("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    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 ? `${displayName} is default` : `Set ${displayName} as default`, "aria-pressed": collection.isDefault }, collection.isDefault ? (react_1.default.createElement(solid_1.StarIcon, { className: "w-4 h-4" })) : (react_1.default.createElement(outline_1.StarIcon, { className: "w-4 h-4" })))),
+            collection.hasConflict && (react_1.default.createElement("span", { className: "shrink-0 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}` },
+                react_1.default.createElement(solid_1.ExclamationTriangleIcon, { className: "w-4 h-4" }))),
+            !collection.isMutable && (react_1.default.createElement("span", { className: "shrink-0 text-muted", title: "Built-in collection (read-only)" },
+                react_1.default.createElement(solid_1.BuildingLibraryIcon, { className: "w-4 h-4" }))),
+            collection.isProtected &&
+                (collection.isUnlocked || !onUnlock ? (react_1.default.createElement("span", { className: `shrink-0 ${collection.isUnlocked ? 'text-status-success-icon' : 'text-muted'}`, title: collection.isUnlocked ? 'Protected (unlocked)' : 'Protected (locked)' }, collection.isUnlocked ? (react_1.default.createElement(solid_1.ShieldCheckIcon, { className: "w-4 h-4" })) : (react_1.default.createElement(solid_1.ShieldExclamationIcon, { className: "w-4 h-4" })))) : (react_1.default.createElement("button", { onClick: (e) => {
+                        e.stopPropagation();
+                        onUnlock(collection.id);
+                    }, className: "shrink-0 text-muted hover:text-star transition-colors", title: "Click to unlock", "aria-label": `Unlock ${displayName}` },
+                    react_1.default.createElement(solid_1.ShieldExclamationIcon, { className: "w-4 h-4" })))),
+            react_1.default.createElement("span", { className: "flex-1 truncate", title: displayName }, displayName),
+            collection.badge && renderBadge(collection.badge),
+            react_1.default.createElement("span", { className: "shrink-0 text-xs text-muted" }, collection.itemCount)),
+        react_1.default.createElement("div", { className: "flex items-center gap-1 mt-1 ml-[24px]" },
+            collection.isMutable && onExport && (react_1.default.createElement("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onExport(collection.id);
+                }, className: "shrink-0 w-5 h-5 flex items-center justify-center text-faint hover:text-brand-accent transition-colors", title: `Export ${displayName}`, "aria-label": `Export ${displayName}` },
+                react_1.default.createElement(solid_1.ArrowDownTrayIcon, { className: "w-4 h-4" }))),
+            collection.isMutable && onRename && (react_1.default.createElement("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onRename(collection.id);
+                }, className: "shrink-0 w-5 h-5 flex items-center justify-center text-faint hover:text-brand-accent transition-colors", title: `Rename ${displayName}`, "aria-label": `Rename ${displayName}` },
+                react_1.default.createElement(solid_1.PencilSquareIcon, { className: "w-4 h-4" }))),
+            collection.isMutable && onMerge && (react_1.default.createElement("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onMerge(collection.id);
+                }, className: "shrink-0 w-5 h-5 flex items-center justify-center text-faint hover:text-brand-accent transition-colors", title: `Merge ${displayName} into another collection`, "aria-label": `Merge ${displayName}` },
+                react_1.default.createElement(solid_1.ArrowsPointingInIcon, { className: "w-4 h-4" }))),
+            collection.isMutable && onDelete && (react_1.default.createElement("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onDelete(collection.id);
+                }, className: "shrink-0 w-5 h-5 flex items-center justify-center text-faint hover:text-status-error-icon transition-colors", title: `Remove ${displayName}`, "aria-label": `Remove ${displayName}` },
+                react_1.default.createElement(solid_1.TrashIcon, { className: "w-4 h-4" }))),
+            !collection.isMutable && react_1.default.createElement("span", { className: "text-xs text-muted" }, "(built-in)"))));
 }
 // ============================================================================
 // CollectionSection
@@ -101,43 +209,65 @@ function CollectionRow(props) {
  * @public
  */
 function CollectionSection(props) {
-    const { collections, onToggleVisibility, onToggleAllVisibility, onAddDirectory, onCreateCollection, onDeleteCollection, onSetDefaultCollection, onExportCollection, onExportAllAsZip, onImportCollection, onOpenCollectionFromFile, onUnlockCollection, onRenameCollection, onMergeCollection, defaultCollapsed = false } = props;
+    var _a;
+    const { collections, onToggleVisibility, onAddDirectory, onCreateCollection, onDeleteCollection, onSetDefaultCollection, onExportCollection, onExportAllAsZip, onImportCollection, onOpenCollectionFromFile, onUnlockCollection, onRenameCollection, onMergeCollection, onHideCollection, onShowCollection, defaultCollapsed = false, sourceColorMap, sourceColorFallback } = 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 [hiddenExpanded, setHiddenExpanded] = (0, react_1.useState)(false);
+    const [contextMenu, setContextMenu] = (0, react_1.useState)(undefined);
+    const visibleCollections = collections.filter((c) => !c.isHidden);
+    const hiddenCollections = collections.filter((c) => c.isHidden);
     const handleToggleCollapse = (0, react_1.useCallback)(() => {
         setCollapsed((prev) => !prev);
     }, []);
+    const handleToggleHiddenExpanded = (0, react_1.useCallback)(() => {
+        setHiddenExpanded((prev) => !prev);
+    }, []);
+    const handleOpenContextMenu = (0, react_1.useCallback)((collectionId, x, y) => {
+        setContextMenu({ collectionId, x, y });
+    }, []);
+    const handleCloseContextMenu = (0, react_1.useCallback)(() => {
+        setContextMenu(undefined);
+    }, []);
+    const getBorderColor = (0, react_1.useCallback)((sourceName) => {
+        if (!sourceColorMap)
+            return undefined;
+        if (sourceName && sourceName in sourceColorMap) {
+            return sourceColorMap[sourceName];
+        }
+        return sourceColorFallback;
+    }, [sourceColorMap, sourceColorFallback]);
+    const contextMenuCollection = contextMenu
+        ? collections.find((c) => c.id === contextMenu.collectionId)
+        : undefined;
     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'),
+                react_1.default.createElement(solid_1.ChevronRightIcon, { className: `w-3 h-3 transition-transform ${collapsed ? '' : 'rotate-90'}` }),
                 "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')),
+                    react_1.default.createElement(solid_1.FolderPlusIcon, { className: "w-4 h-4" }))),
                 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 }))))))));
+                    react_1.default.createElement(solid_1.ArchiveBoxArrowDownIcon, { className: "w-4 h-4" }))),
+                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" },
+                    react_1.default.createElement(solid_1.FolderOpenIcon, { className: "w-4 h-4" }))),
+                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" },
+                    react_1.default.createElement(solid_1.ArrowUpTrayIcon, { className: "w-4 h-4" }))),
+                onCreateCollection && (react_1.default.createElement("button", { onClick: onCreateCollection, "data-testid": "sidebar-new-collection-button", className: "text-muted hover:text-brand-accent transition-colors px-1", title: "New collection", "aria-label": "New collection" },
+                    react_1.default.createElement(solid_1.PlusIcon, { className: "w-4 h-4" }))))),
+        !collapsed && (react_1.default.createElement("div", { className: "flex flex-col" },
+            visibleCollections.length === 0 && hiddenCollections.length === 0 ? (react_1.default.createElement("div", { className: "px-3 py-2 text-xs text-muted" }, "No collections")) : (visibleCollections.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, borderColorClass: getBorderColor(collection.sourceName), onContextMenu: onHideCollection ? handleOpenContextMenu : undefined })))),
+            hiddenCollections.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("button", { onClick: handleToggleHiddenExpanded, className: "flex items-center gap-1 px-3 py-1 text-xs text-muted hover:text-secondary transition-colors" },
+                    react_1.default.createElement(solid_1.ChevronRightIcon, { className: `w-3 h-3 transition-transform ${hiddenExpanded ? 'rotate-90' : ''}` }),
+                    hiddenCollections.length,
+                    " hidden"),
+                hiddenExpanded &&
+                    hiddenCollections.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, borderColorClass: getBorderColor(collection.sourceName), onContextMenu: onShowCollection ? handleOpenContextMenu : undefined, isHiddenRow: true }))))))),
+        contextMenu && contextMenuCollection && (react_1.default.createElement(CollectionContextMenu, { menu: contextMenu, isHidden: (_a = contextMenuCollection.isHidden) !== null && _a !== void 0 ? _a : false, onHide: onHideCollection, onShow: onShowCollection, onClose: handleCloseContextMenu }))));
 }
 //# sourceMappingURL=CollectionSection.js.map

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

@@ -8,5 +8,5 @@ export { FilterRow, type IFilterRowProps, type IFilterOption } from './FilterRow
 export { FilterBar, type IFilterBarProps } from './FilterBar';
 export { EntityList, type IEntityListProps, type IEntityDescriptor, type IEntityStatus, type IEmptyStateConfig, type IEmptyStateAction } from './EntityList';
 export { GroupedEntityList, type IGroupedEntityListProps, type IEntityGroupDescriptor } from './GroupedEntityList';
-export { CollectionSection, type ICollectionSectionProps, type ICollectionRowItem } from './CollectionSection';
+export { CollectionSection, type ICollectionBadge, type ICollectionSectionProps, type ICollectionRowItem, type SourceColorMap } from './CollectionSection';
 //# sourceMappingURL=index.d.ts.map

package/lib/packlets/top-bar/TabBar.d.ts

@@ -1,4 +1,14 @@
 import React from 'react';
+/**
+ * Optional badge shown alongside a tab label.
+ * @public
+ */
+export interface ITabBadge {
+    readonly kind: 'dot' | 'count';
+    readonly tone?: 'info' | 'warning' | 'danger';
+    readonly count?: number;
+    readonly ariaLabel?: string;
+}
 /**
  * Configuration for a single tab.
  * @public
@@ -8,6 +18,8 @@ export interface ITabConfig<TTab extends string> {
     readonly id: TTab;
     /** Display label */
     readonly label: string;
+    /** Optional badge rendered next to the tab label */
+    readonly badge?: ITabBadge;
 }
 /**
  * Props for the TabBar component.

package/lib/packlets/top-bar/TabBar.js

@@ -26,6 +26,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabBar = TabBar;
 const react_1 = __importDefault(require("react"));
+const BADGE_BASE_CLASSES = 'inline-flex shrink-0 items-center justify-center rounded-full font-medium leading-none';
+const BADGE_TONE_CLASSES = {
+    info: 'bg-status-info-bg text-status-info-text',
+    warning: 'bg-status-warning-bg text-status-warning-text',
+    danger: 'bg-status-error-bg text-status-error-text'
+};
+function renderBadge(badge) {
+    var _a, _b;
+    const tone = (_a = badge.tone) !== null && _a !== void 0 ? _a : 'info';
+    const ariaLabel = badge.ariaLabel;
+    if (badge.kind === 'dot') {
+        return (react_1.default.createElement("span", { className: `ml-1.5 h-2 w-2 ${BADGE_BASE_CLASSES} ${BADGE_TONE_CLASSES[tone]}`, "aria-label": ariaLabel }));
+    }
+    return (react_1.default.createElement("span", { className: `ml-1.5 min-w-4 px-1.5 py-0.5 text-[0.6875rem] ${BADGE_BASE_CLASSES} ${BADGE_TONE_CLASSES[tone]}`, "aria-label": ariaLabel }, (_b = badge.count) !== null && _b !== void 0 ? _b : 0));
+}
 /**
  * Second-level tab bar for switching views within a mode.
  * @public
@@ -35,7 +50,9 @@ function TabBar(props) {
     return (react_1.default.createElement("div", { className: "flex items-center gap-1 px-4 py-1 bg-brand-secondary text-white border-t border-white/10 overflow-x-auto" },
         tabs.map((tab) => (react_1.default.createElement("button", { key: tab.id, onClick: () => onTabChange(tab.id), className: `px-3 py-1.5 rounded-md text-sm font-medium transition-colors shrink-0 ${activeTab === tab.id
                 ? 'bg-white/20 text-white'
-                : 'text-white/60 hover:text-white hover:bg-white/10'}`, "aria-current": activeTab === tab.id ? 'page' : undefined }, tab.label))),
+                : 'text-white/60 hover:text-white hover:bg-white/10'}`, "aria-current": activeTab === tab.id ? 'page' : undefined },
+            react_1.default.createElement("span", null, tab.label),
+            tab.badge && renderBadge(tab.badge)))),
         rightContent !== undefined && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: "flex-1" }),
             rightContent))));

package/lib/packlets/top-bar/index.d.ts

@@ -3,5 +3,5 @@
  * @packageDocumentation
  */
 export { ModeSelector, type IModeConfig, type IModeSelectorProps } from './ModeSelector';
-export { TabBar, type ITabConfig, type ITabBarProps } from './TabBar';
+export { TabBar, type ITabBadge, type ITabConfig, type ITabBarProps } from './TabBar';
 //# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,17 +1,9 @@
 {
   "name": "@fgv/ts-app-shell",
-  "version": "5.1.0-1",
+  "version": "5.1.0-11",
   "description": "Shared React UI primitives for application shells: column cascade, sidebar, toast/log messages, command palette, keybinding registry",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
-  "scripts": {
-    "build": "heft build --clean",
-    "clean": "heft clean",
-    "test": "heft test --clean",
-    "lint": "eslint src --ext .ts,.tsx",
-    "fixlint": "eslint src --ext .ts,.tsx --fix",
-    "coverage": "jest --coverage"
-  },
   "sideEffects": false,
   "keywords": [
     "typescript",
@@ -23,18 +15,16 @@
   "author": "Erik Fortune",
   "license": "MIT",
   "dependencies": {
-    "@fgv/ts-utils": "workspace:*",
     "@heroicons/react": "~2.2.0",
     "tslib": "^2.8.1",
-    "@fgv/ts-extras": "workspace:*"
+    "@fgv/ts-utils": "5.1.0-11",
+    "@fgv/ts-extras": "5.1.0-11"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@fgv/heft-dual-rig": "workspace:*",
-    "@fgv/ts-utils-jest": "workspace:*",
     "@types/react": "~19.2.8",
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.3",
@@ -56,11 +46,13 @@
     "rimraf": "^6.1.2",
     "ts-jest": "^29.4.6",
     "typescript": "5.9.3",
-    "@rushstack/heft": "1.2.6",
+    "@rushstack/heft": "1.2.7",
     "@rushstack/eslint-config": "4.6.4",
     "@rushstack/heft-jest-plugin": "1.2.6",
     "@testing-library/dom": "^10.4.0",
-    "@rushstack/heft-node-rig": "2.11.26"
+    "@rushstack/heft-node-rig": "2.11.27",
+    "@fgv/heft-dual-rig": "5.1.0-11",
+    "@fgv/ts-utils-jest": "5.1.0-11"
   },
   "exports": {
     ".": {
@@ -78,5 +70,13 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/ErikFortune/fgv.git"
+  },
+  "scripts": {
+    "build": "heft build --clean",
+    "clean": "heft clean",
+    "test": "heft test --clean",
+    "lint": "eslint src --ext .ts,.tsx",
+    "fixlint": "eslint src --ext .ts,.tsx --fix",
+    "coverage": "jest --coverage"
   }
-}
+}