@fgv/ts-app-shell 5.1.0-1

package/dist/packlets/sidebar/GroupedEntityList.js

@@ -0,0 +1,183 @@
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+function GroupedEntityRowInner(props) {
+    var _a, _b;
+    const { entity, descriptor, selectedId, compareMode, checkedIds, onSelect, onDrill, onCheckedChange, onDelete, canDelete } = props;
+    const id = descriptor.getId(entity);
+    const label = descriptor.getLabel(entity);
+    const sublabel = (_a = descriptor.getSublabel) === null || _a === void 0 ? void 0 : _a.call(descriptor, entity);
+    const status = (_b = descriptor.getStatus) === null || _b === void 0 ? void 0 : _b.call(descriptor, entity);
+    const isSelected = id === selectedId;
+    const isChecked = compareMode === true && checkedIds !== undefined && checkedIds.has(id);
+    return (React.createElement("div", { className: `group flex items-center gap-2 w-full border-b border-border-subtle transition-colors ${isChecked
+            ? 'bg-selected border-l-2 border-l-selected-border'
+            : isSelected && !compareMode
+                ? 'bg-selected border-l-2 border-l-selected-border'
+                : 'hover:bg-hover border-l-2 border-l-transparent'}` },
+        React.createElement("button", { "data-entity-id": id, onClick: () => {
+                if (compareMode && onCheckedChange) {
+                    onCheckedChange(id);
+                }
+                else if (isSelected && onDrill) {
+                    onDrill();
+                }
+                else {
+                    onSelect(id);
+                }
+            }, className: "flex items-center gap-2 flex-1 min-w-0 px-3 py-2 text-left" },
+            compareMode && (React.createElement("span", { className: `flex items-center justify-center w-4 h-4 rounded border shrink-0 transition-colors ${isChecked ? 'bg-brand-accent border-brand-accent text-white' : 'border-border bg-surface'}` }, isChecked && (React.createElement("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3 },
+                React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }))))),
+            React.createElement("div", { className: "flex-1 min-w-0" },
+                React.createElement("div", { className: `text-sm truncate ${(isSelected && !compareMode) || isChecked ? 'font-medium text-brand-primary' : 'text-primary'}` }, label),
+                sublabel && React.createElement("div", { className: "text-xs text-muted truncate mt-0.5" }, sublabel)),
+            status && (React.createElement("span", { className: "flex items-center gap-1 shrink-0 mt-0.5" },
+                React.createElement("span", { className: `w-2 h-2 rounded-full ${status.colorClass}` }),
+                React.createElement("span", { className: "text-xs text-muted" }, status.label)))),
+        onDelete && !compareMode && (!canDelete || canDelete(id)) && (React.createElement("button", { onClick: (e) => {
+                e.stopPropagation();
+                onDelete(id);
+            }, className: "shrink-0 mr-1 w-6 h-6 flex items-center justify-center text-faint hover:text-status-error-icon opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity rounded", title: `Delete ${label}`, "aria-label": `Delete ${label}` },
+            React.createElement("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 },
+                React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }))))));
+}
+const GroupedEntityRow = React.memo(GroupedEntityRowInner);
+// ============================================================================
+// GroupedEntityList Component
+// ============================================================================
+/**
+ * Entity list with sticky group headers.
+ *
+ * Groups entities by a key extracted via the descriptor, renders a sticky
+ * header per group, and delegates item rendering to the same visual pattern
+ * as {@link EntityList}.
+ *
+ * @public
+ */
+export function GroupedEntityList(props) {
+    const { entities, descriptor, selectedId, onSelect, onDrill, compareMode, checkedIds, onCheckedChange, emptyState, onDelete, canDelete } = props;
+    const listRef = useRef(null);
+    // Build groups and flat entity list for keyboard navigation
+    const { groups, flatEntities } = useMemo(() => {
+        const groupMap = new Map();
+        for (const entity of entities) {
+            const key = descriptor.getGroupKey(entity);
+            let group = groupMap.get(key);
+            if (!group) {
+                group = { label: descriptor.getGroupLabel(entity), items: [] };
+                groupMap.set(key, group);
+            }
+            group.items.push(entity);
+        }
+        const sortedKeys = Array.from(groupMap.keys());
+        if (descriptor.compareGroups) {
+            const cmp = descriptor.compareGroups;
+            sortedKeys.sort((a, b) => cmp(a, b));
+        }
+        const builtGroups = [];
+        const flat = [];
+        for (const key of sortedKeys) {
+            const group = groupMap.get(key);
+            builtGroups.push({ key, label: group.label, items: group.items });
+            flat.push(...group.items);
+        }
+        return { groups: builtGroups, flatEntities: flat };
+    }, [entities, descriptor]);
+    // Scroll selected item into view
+    useEffect(() => {
+        if (selectedId && listRef.current) {
+            const selectedButton = listRef.current.querySelector(`[data-entity-id="${selectedId}"]`);
+            if (selectedButton) {
+                selectedButton.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    }, [selectedId]);
+    const selectedIndex = flatEntities.findIndex((e) => descriptor.getId(e) === selectedId);
+    const handleKeyDown = useCallback((e) => {
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                const nextIndex = selectedIndex < flatEntities.length - 1 ? selectedIndex + 1 : 0;
+                onSelect(descriptor.getId(flatEntities[nextIndex]));
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                const prevIndex = selectedIndex > 0 ? selectedIndex - 1 : flatEntities.length - 1;
+                onSelect(descriptor.getId(flatEntities[prevIndex]));
+                break;
+            }
+            case 'Enter':
+            case 'ArrowRight': {
+                if (selectedId !== undefined && onDrill) {
+                    e.preventDefault();
+                    onDrill();
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    }, [flatEntities, descriptor, selectedId, selectedIndex, onSelect, onDrill]);
+    // Empty state
+    if (entities.length === 0 && emptyState) {
+        return (React.createElement("div", { className: "flex flex-col items-center justify-center flex-1 p-6 text-center" },
+            React.createElement("h3", { className: "text-sm font-medium text-secondary mb-1" }, emptyState.title),
+            React.createElement("p", { className: "text-xs text-muted mb-4" }, emptyState.description),
+            emptyState.action && (React.createElement("button", { onClick: emptyState.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" }, emptyState.action.label))));
+    }
+    return (React.createElement("div", { className: "flex flex-col flex-1 overflow-hidden", onKeyDown: handleKeyDown },
+        flatEntities.length > 0 && (React.createElement("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-border-subtle" },
+            React.createElement("span", { className: "text-xs text-muted" },
+                flatEntities.length,
+                " item",
+                flatEntities.length !== 1 ? 's' : '',
+                compareMode && props.compareCount !== undefined && props.compareCount > 0 && (React.createElement("span", { className: "ml-1.5 text-brand-accent" },
+                    "\u00B7 ",
+                    props.compareCount,
+                    " selected"))),
+            React.createElement("div", { className: "flex items-center gap-1" },
+                compareMode &&
+                    props.onStartComparison &&
+                    props.compareCount !== undefined &&
+                    props.compareCount >= 2 && (React.createElement("button", { onClick: (e) => {
+                        var _a;
+                        e.stopPropagation();
+                        (_a = props.onStartComparison) === null || _a === void 0 ? void 0 : _a.call(props);
+                    }, className: "px-2 py-0.5 text-[11px] rounded border transition-colors bg-brand-primary text-white border-brand-primary hover:bg-brand-primary/90" }, "Compare Now")),
+                props.onToggleCompare && (React.createElement("button", { onClick: (e) => {
+                        var _a;
+                        e.stopPropagation();
+                        (_a = props.onToggleCompare) === null || _a === void 0 ? void 0 : _a.call(props);
+                    }, className: `px-2 py-0.5 text-[11px] rounded border transition-colors ${compareMode
+                        ? 'bg-brand-accent text-white border-brand-accent'
+                        : 'bg-surface text-muted border-border hover:border-brand-accent hover:text-brand-accent'}` }, compareMode ? 'Cancel' : 'Compare'))))),
+        React.createElement("div", { ref: listRef, className: "flex-1 overflow-y-auto" }, groups.map((group) => (React.createElement("div", { key: group.key },
+            React.createElement("div", { className: "px-3 py-1.5 text-xs font-medium text-muted uppercase tracking-wider bg-surface-alt border-b border-border-subtle sticky top-0 z-10" },
+                group.label,
+                React.createElement("span", { className: "text-muted normal-case font-normal ml-1" },
+                    "(",
+                    group.items.length,
+                    ")")),
+            group.items.map((entity) => (React.createElement(GroupedEntityRow, { key: descriptor.getId(entity), entity: entity, descriptor: descriptor, selectedId: selectedId, compareMode: compareMode, checkedIds: checkedIds, onSelect: onSelect, onDrill: onDrill, onCheckedChange: onCheckedChange, onDelete: onDelete, canDelete: canDelete })))))))));
+}
+//# sourceMappingURL=GroupedEntityList.js.map

package/dist/packlets/sidebar/SearchBar.js

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react';
+/**
+ * Search input bar for the sidebar.
+ * @public
+ */
+export function SearchBar(props) {
+    const { value, onChange, placeholder = 'Search...' } = props;
+    return (React.createElement("div", { className: "px-3 py-2" },
+        React.createElement("div", { className: "relative" },
+            React.createElement("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: "w-full pl-3 pr-8 py-1.5 text-sm border border-border rounded-md bg-surface text-primary focus:outline-none focus:ring-1 focus:ring-focus-ring focus:border-focus-ring" }),
+            value.length > 0 && (React.createElement("button", { onClick: () => onChange(''), className: "absolute right-2 top-1/2 -translate-y-1/2 text-muted hover:text-secondary text-xs", "aria-label": "Clear search" }, "\u00D7")))));
+}
+//# sourceMappingURL=SearchBar.js.map

package/dist/packlets/sidebar/SidebarLayout.js

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { useEffect } from 'react';
+import { useResponsive } from '../responsive';
+/**
+ * Layout component that renders a persistent left sidebar alongside a main content area.
+ *
+ * On `full` layout mode, the sidebar is a fixed-width panel.
+ * On `compact` and `mobile` layout modes, the sidebar becomes a slide-out drawer
+ * controlled by {@link ISidebarLayoutProps.isSidebarOpen | isSidebarOpen} and
+ * {@link ISidebarLayoutProps.onSidebarClose | onSidebarClose}.
+ * @public
+ */
+export function SidebarLayout(props) {
+    const { sidebar, children, sidebarWidth = '280px', isSidebarOpen = false, onSidebarClose } = props;
+    const { layoutMode } = useResponsive();
+    const isDrawer = layoutMode !== 'full';
+    // Close drawer on Escape key
+    useEffect(() => {
+        if (!isDrawer || !isSidebarOpen) {
+            return;
+        }
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                onSidebarClose === null || onSidebarClose === void 0 ? void 0 : onSidebarClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isDrawer, isSidebarOpen, onSidebarClose]);
+    // Full mode: static sidebar
+    if (!isDrawer) {
+        return (React.createElement("div", { className: "flex flex-1 overflow-hidden" },
+            React.createElement("aside", { className: "flex flex-col border-r border-border bg-surface overflow-y-auto shrink-0", style: { width: sidebarWidth } }, sidebar),
+            React.createElement("div", { className: "flex flex-col flex-1 overflow-hidden" }, children)));
+    }
+    // Compact/mobile: drawer overlay
+    return (React.createElement("div", { className: "flex flex-col flex-1 overflow-hidden relative" },
+        React.createElement("div", { className: "flex flex-col flex-1 overflow-hidden" }, children),
+        isSidebarOpen && (React.createElement("div", { className: "fixed inset-0 bg-backdrop z-40 transition-opacity", onClick: onSidebarClose, "aria-hidden": "true" })),
+        React.createElement("aside", { className: `fixed inset-y-0 left-0 z-50 flex flex-col bg-surface border-r border-border overflow-y-auto shadow-lg transition-transform duration-200 ease-in-out ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}`, style: { width: sidebarWidth } }, sidebar)));
+}
+//# sourceMappingURL=SidebarLayout.js.map

package/dist/packlets/sidebar/index.js

@@ -0,0 +1,12 @@
+/**
+ * Sidebar packlet - layout, search, filter rows, and entity list.
+ * @packageDocumentation
+ */
+export { SidebarLayout } from './SidebarLayout';
+export { SearchBar } from './SearchBar';
+export { FilterRow } from './FilterRow';
+export { FilterBar } from './FilterBar';
+export { EntityList } from './EntityList';
+export { GroupedEntityList } from './GroupedEntityList';
+export { CollectionSection } from './CollectionSection';
+//# sourceMappingURL=index.js.map

package/dist/packlets/theme/ThemeProvider.js

@@ -0,0 +1,141 @@
+// Copyright (c) 2026 Erik Fortune
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+/**
+ * Default built-in themes.
+ */
+const BUILT_IN_THEMES = [
+    { id: 'light', label: 'Light' },
+    { id: 'dark', label: 'Dark' },
+    { id: 'system', label: 'System' }
+];
+const ThemeContext = createContext(undefined);
+/**
+ * Maps a theme ID to the CSS class applied to the document element.
+ * - 'light': no class (uses :root defaults)
+ * - 'dark': 'dark' class
+ * - 'system': 'system-theme' class (uses prefers-color-scheme media query)
+ * - custom: 'theme-\{id\}' class
+ */
+function themeIdToCssClass(id) {
+    switch (id) {
+        case 'light':
+            return undefined;
+        case 'dark':
+            return 'dark';
+        case 'system':
+            return 'system-theme';
+        default:
+            return `theme-${id}`;
+    }
+}
+/**
+ * Determines whether the effective appearance is dark.
+ */
+function resolveIsDark(themeId) {
+    if (themeId === 'dark') {
+        return true;
+    }
+    if (themeId === 'system' && typeof window !== 'undefined') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    return false;
+}
+/**
+ * All CSS classes that ThemeProvider may apply.
+ * Used to cleanly remove the previous theme before applying a new one.
+ */
+const MANAGED_CLASSES = ['dark', 'system-theme'];
+/**
+ * Provides theme context to the application and manages the CSS class on `<html>`.
+ *
+ * Wrap your app (or a subtree) with this provider. Components use {@link useTheme}
+ * to read or change the active theme.
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider initialTheme={settings.appearance?.theme} onThemeChange={saveTheme}>
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ * @public
+ */
+export function ThemeProvider({ initialTheme = 'light', customThemes, onThemeChange, children }) {
+    const [theme, setThemeState] = useState(initialTheme);
+    const [isDark, setIsDark] = useState(() => resolveIsDark(initialTheme));
+    const availableThemes = useMemo(() => {
+        if (!customThemes || customThemes.length === 0) {
+            return BUILT_IN_THEMES;
+        }
+        return [...BUILT_IN_THEMES, ...customThemes];
+    }, [customThemes]);
+    const setTheme = useCallback((newTheme) => {
+        setThemeState(newTheme);
+        onThemeChange === null || onThemeChange === void 0 ? void 0 : onThemeChange(newTheme);
+    }, [onThemeChange]);
+    // Apply CSS class to document element when theme changes
+    useEffect(() => {
+        const root = document.documentElement;
+        // Remove all managed theme classes
+        for (const cls of MANAGED_CLASSES) {
+            root.classList.remove(cls);
+        }
+        // Also remove any custom theme classes
+        for (const cls of Array.from(root.classList)) {
+            if (cls.startsWith('theme-')) {
+                root.classList.remove(cls);
+            }
+        }
+        // Apply new theme class
+        const cssClass = themeIdToCssClass(theme);
+        if (cssClass) {
+            root.classList.add(cssClass);
+        }
+        setIsDark(resolveIsDark(theme));
+    }, [theme]);
+    // Listen for OS preference changes when using 'system' theme
+    useEffect(() => {
+        if (theme !== 'system') {
+            return;
+        }
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handler = (e) => {
+            setIsDark(e.matches);
+        };
+        mediaQuery.addEventListener('change', handler);
+        return () => mediaQuery.removeEventListener('change', handler);
+    }, [theme]);
+    const value = useMemo(() => ({ theme, isDark, setTheme, availableThemes }), [theme, isDark, setTheme, availableThemes]);
+    return React.createElement(ThemeContext.Provider, { value: value }, children);
+}
+/**
+ * Access the current theme and theme-switching controls.
+ *
+ * Must be called within a {@link ThemeProvider}.
+ * @public
+ */
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+}
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/packlets/theme/index.js

@@ -0,0 +1,6 @@
+/**
+ * Theme provider and hook for runtime theme switching.
+ * @packageDocumentation
+ */
+export { ThemeProvider, useTheme } from './ThemeProvider';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react';
+import { useResponsive } from '../responsive';
+/**
+ * Top-level mode selector bar.
+ * Renders the application title, mode toggle buttons, and optional right-side content.
+ * When {@link IModeSelectorProps.onMenuToggle | onMenuToggle} is provided, a hamburger
+ * menu button is shown at the left edge (for compact/mobile layouts).
+ * @public
+ */
+export function ModeSelector(props) {
+    const { modes, activeMode, onModeChange, rightContent, title, onMenuToggle } = props;
+    const { layoutMode } = useResponsive();
+    const isMobile = layoutMode === 'mobile';
+    return (React.createElement("div", { className: "flex items-center justify-between px-4 py-2 bg-brand-primary text-white" },
+        React.createElement("div", { className: `flex items-center ${isMobile ? 'gap-2' : 'gap-6'}` },
+            onMenuToggle && (React.createElement("button", { onClick: onMenuToggle, className: "p-1.5 -ml-1.5 rounded-md text-white/70 hover:text-white hover:bg-white/10 transition-colors", "aria-label": "Open menu" },
+                React.createElement("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor" },
+                    React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" })))),
+            !isMobile && React.createElement("h1", { className: "text-lg font-semibold whitespace-nowrap" }, title),
+            React.createElement("div", { className: "flex gap-1" }, modes.map((mode) => (React.createElement("button", { key: mode.id, onClick: () => onModeChange(mode.id), className: `rounded-md font-medium transition-colors ${isMobile ? 'px-2 py-1 text-xs' : 'px-4 py-1.5 text-sm'} ${activeMode === mode.id
+                    ? 'bg-white/20 text-white'
+                    : 'text-white/70 hover:text-white hover:bg-white/10'}`, "aria-current": activeMode === mode.id ? 'true' : undefined }, mode.label))))),
+        rightContent && React.createElement("div", { className: "flex items-center gap-2" }, rightContent)));
+}
+//# sourceMappingURL=ModeSelector.js.map

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

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react';
+/**
+ * Second-level tab bar for switching views within a mode.
+ * @public
+ */
+export function TabBar(props) {
+    const { tabs, activeTab, onTabChange, rightContent } = 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))),
+        rightContent !== undefined && (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "flex-1" }),
+            rightContent))));
+}
+//# sourceMappingURL=TabBar.js.map

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

@@ -0,0 +1,7 @@
+/**
+ * Top bar components: mode selector and tab bar.
+ * @packageDocumentation
+ */
+export { ModeSelector } from './ModeSelector';
+export { TabBar } from './TabBar';
+//# sourceMappingURL=index.js.map

package/dist/packlets/url-sync/index.js

@@ -0,0 +1,6 @@
+/**
+ * URL sync packlet - bidirectional URL hash synchronization for mode/tab navigation.
+ * @packageDocumentation
+ */
+export { encodeUrlHash, parseUrlHash, useUrlSync } from './useUrlSync';
+//# sourceMappingURL=index.js.map