@fgv/ts-app-shell 5.1.0-2 → 5.1.0-21

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/sidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packlets/sidebar/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,aAAa,EAAE,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE1E,OAAO,EAAE,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAE,KAAK,eAAe,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAElF,OAAO,EAAE,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9D,OAAO,EACL,UAAU,EACV,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACvB,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,iBAAiB,EACjB,KAAK,uBAAuB,EAC5B,KAAK,sBAAsB,EAC5B,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,iBAAiB,EACjB,KAAK,gBAAgB,EACrB,KAAK,uBAAuB,EAC5B,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACpB,MAAM,qBAAqB,CAAC"}

package/lib/packlets/sidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/packlets/sidebar/index.ts"],"names":[],"mappings":";AAAA;;;GAGG;;;AAEH,iDAA0E;AAAjE,8GAAA,aAAa,OAAA;AAEtB,yCAA8D;AAArD,sGAAA,SAAS,OAAA;AAElB,yCAAkF;AAAzE,sGAAA,SAAS,OAAA;AAElB,yCAA8D;AAArD,sGAAA,SAAS,OAAA;AAElB,2CAOsB;AANpB,wGAAA,UAAU,OAAA;AAQZ,yDAI6B;AAH3B,sHAAA,iBAAiB,OAAA;AAKnB,yDAM6B;AAL3B,sHAAA,iBAAiB,OAAA","sourcesContent":["/**\n * Sidebar packlet - layout, search, filter rows, and entity list.\n * @packageDocumentation\n */\n\nexport { SidebarLayout, type ISidebarLayoutProps } from './SidebarLayout';\n\nexport { SearchBar, type ISearchBarProps } from './SearchBar';\n\nexport { FilterRow, type IFilterRowProps, type IFilterOption } from './FilterRow';\n\nexport { FilterBar, type IFilterBarProps } from './FilterBar';\n\nexport {\n  EntityList,\n  type IEntityListProps,\n  type IEntityDescriptor,\n  type IEntityStatus,\n  type IEmptyStateConfig,\n  type IEmptyStateAction\n} from './EntityList';\n\nexport {\n  GroupedEntityList,\n  type IGroupedEntityListProps,\n  type IEntityGroupDescriptor\n} from './GroupedEntityList';\n\nexport {\n  CollectionSection,\n  type ICollectionBadge,\n  type ICollectionSectionProps,\n  type ICollectionRowItem,\n  type SourceColorMap\n} from './CollectionSection';\n"]}

package/lib/packlets/theme/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/packlets/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAA+E,MAAM,OAAO,CAAC;AAEpG;;;;GAIG;AACH,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC;AAE7B;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,oCAAoC;IACpC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB,0DAA0D;IAC1D,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,2BAA2B;IAC3B,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,kCAAkC;IAClC,QAAQ,CAAC,eAAe,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACvD;AAsDD;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,iFAAiF;IACjF,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,sEAAsE;IACtE,QAAQ,CAAC,YAAY,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACpD,8EAA8E;IAC9E,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,eAAe;IACf,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,EAC5B,YAAsB,EACtB,YAAY,EACZ,aAAa,EACb,QAAQ,EACT,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAgEzC;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,IAAI,aAAa,CAMxC"}

package/lib/packlets/theme/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../../src/packlets/theme/ThemeProvider.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) 2026 Erik Fortune\n//\n// Permission is hereby granted, free of charge, to any person obtaining a copy\n// of this software and associated documentation files (the \"Software\"), to deal\n// in the Software without restriction, including without limitation the rights\n// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the Software is\n// furnished to do so, subject to the following conditions:\n//\n// The above copyright notice and this permission notice shall be included in all\n// copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n// SOFTWARE.\n\nimport React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';\n\n/**\n * A theme identifier string. Built-in values are 'light', 'dark', and 'system'.\n * Custom themes use arbitrary strings that map to CSS classes (e.g., 'ocean' maps to '.theme-ocean').\n * @public\n */\nexport type ThemeId = string;\n\n/**\n * Describes an available theme for display in selectors.\n * @public\n */\nexport interface IThemeOption {\n  /** Theme identifier used in settings and CSS class mapping */\n  readonly id: ThemeId;\n  /** Human-readable label for display */\n  readonly label: string;\n}\n\n/**\n * Value exposed by ThemeContext.\n * @public\n */\nexport interface IThemeContext {\n  /** The currently active theme ID */\n  readonly theme: ThemeId;\n  /** Whether the resolved (effective) appearance is dark */\n  readonly isDark: boolean;\n  /** Set the active theme */\n  readonly setTheme: (theme: ThemeId) => void;\n  /** All available theme options */\n  readonly availableThemes: ReadonlyArray<IThemeOption>;\n}\n\n/**\n * Default built-in themes.\n */\nconst BUILT_IN_THEMES: ReadonlyArray<IThemeOption> = [\n  { id: 'light', label: 'Light' },\n  { id: 'dark', label: 'Dark' },\n  { id: 'system', label: 'System' }\n];\n\nconst ThemeContext: React.Context<IThemeContext | undefined> = createContext<IThemeContext | undefined>(\n  undefined\n);\n\n/**\n * Maps a theme ID to the CSS class applied to the document element.\n * - 'light': no class (uses :root defaults)\n * - 'dark': 'dark' class\n * - 'system': 'system-theme' class (uses prefers-color-scheme media query)\n * - custom: 'theme-\\{id\\}' class\n */\nfunction themeIdToCssClass(id: ThemeId): string | undefined {\n  switch (id) {\n    case 'light':\n      return undefined;\n    case 'dark':\n      return 'dark';\n    case 'system':\n      return 'system-theme';\n    default:\n      return `theme-${id}`;\n  }\n}\n\n/**\n * Determines whether the effective appearance is dark.\n */\nfunction resolveIsDark(themeId: ThemeId): boolean {\n  if (themeId === 'dark') {\n    return true;\n  }\n  if (themeId === 'system' && typeof window !== 'undefined') {\n    return window.matchMedia('(prefers-color-scheme: dark)').matches;\n  }\n  return false;\n}\n\n/**\n * All CSS classes that ThemeProvider may apply.\n * Used to cleanly remove the previous theme before applying a new one.\n */\nconst MANAGED_CLASSES: ReadonlyArray<string> = ['dark', 'system-theme'];\n\n/**\n * Props for {@link ThemeProvider}.\n * @public\n */\nexport interface IThemeProviderProps {\n  /** Initial theme ID (typically from persisted settings). Defaults to 'light'. */\n  readonly initialTheme?: ThemeId;\n  /** Additional custom themes beyond the built-in light/dark/system. */\n  readonly customThemes?: ReadonlyArray<IThemeOption>;\n  /** Called when the user changes the theme. Use this to persist the choice. */\n  readonly onThemeChange?: (theme: ThemeId) => void;\n  /** Children */\n  readonly children: React.ReactNode;\n}\n\n/**\n * Provides theme context to the application and manages the CSS class on `<html>`.\n *\n * Wrap your app (or a subtree) with this provider. Components use {@link useTheme}\n * to read or change the active theme.\n *\n * @example\n * ```tsx\n * <ThemeProvider initialTheme={settings.appearance?.theme} onThemeChange={saveTheme}>\n *   <App />\n * </ThemeProvider>\n * ```\n * @public\n */\nexport function ThemeProvider({\n  initialTheme = 'light',\n  customThemes,\n  onThemeChange,\n  children\n}: IThemeProviderProps): React.JSX.Element {\n  const [theme, setThemeState] = useState<ThemeId>(initialTheme);\n  const [isDark, setIsDark] = useState(() => resolveIsDark(initialTheme));\n\n  const availableThemes = useMemo<ReadonlyArray<IThemeOption>>(() => {\n    if (!customThemes || customThemes.length === 0) {\n      return BUILT_IN_THEMES;\n    }\n    return [...BUILT_IN_THEMES, ...customThemes];\n  }, [customThemes]);\n\n  const setTheme = useCallback(\n    (newTheme: ThemeId) => {\n      setThemeState(newTheme);\n      onThemeChange?.(newTheme);\n    },\n    [onThemeChange]\n  );\n\n  // Apply CSS class to document element when theme changes\n  useEffect(() => {\n    const root = document.documentElement;\n\n    // Remove all managed theme classes\n    for (const cls of MANAGED_CLASSES) {\n      root.classList.remove(cls);\n    }\n    // Also remove any custom theme classes\n    for (const cls of Array.from(root.classList)) {\n      if (cls.startsWith('theme-')) {\n        root.classList.remove(cls);\n      }\n    }\n\n    // Apply new theme class\n    const cssClass = themeIdToCssClass(theme);\n    if (cssClass) {\n      root.classList.add(cssClass);\n    }\n\n    setIsDark(resolveIsDark(theme));\n  }, [theme]);\n\n  // Listen for OS preference changes when using 'system' theme\n  useEffect(() => {\n    if (theme !== 'system') {\n      return;\n    }\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n    const handler = (e: MediaQueryListEvent): void => {\n      setIsDark(e.matches);\n    };\n\n    mediaQuery.addEventListener('change', handler);\n    return () => mediaQuery.removeEventListener('change', handler);\n  }, [theme]);\n\n  const value = useMemo<IThemeContext>(\n    () => ({ theme, isDark, setTheme, availableThemes }),\n    [theme, isDark, setTheme, availableThemes]\n  );\n\n  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\n/**\n * Access the current theme and theme-switching controls.\n *\n * Must be called within a {@link ThemeProvider}.\n * @public\n */\nexport function useTheme(): IThemeContext {\n  const context = useContext(ThemeContext);\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider');\n  }\n  return context;\n}\n"]}

package/lib/packlets/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packlets/theme/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,aAAa,EACb,QAAQ,EACR,KAAK,OAAO,EACZ,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,mBAAmB,EACzB,MAAM,iBAAiB,CAAC"}

package/lib/packlets/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/packlets/theme/index.ts"],"names":[],"mappings":";AAAA;;;GAGG;;;AAEH,iDAOyB;AANvB,8GAAA,aAAa,OAAA;AACb,yGAAA,QAAQ,OAAA","sourcesContent":["/**\n * Theme provider and hook for runtime theme switching.\n * @packageDocumentation\n */\n\nexport {\n  ThemeProvider,\n  useTheme,\n  type ThemeId,\n  type IThemeOption,\n  type IThemeContext,\n  type IThemeProviderProps\n} from './ThemeProvider';\n"]}

package/lib/packlets/top-bar/ModeSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModeSelector.d.ts","sourceRoot":"","sources":["../../../src/packlets/top-bar/ModeSelector.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;GAGG;AACH,MAAM,WAAW,WAAW,CAAC,KAAK,SAAS,MAAM;IAC/C,sBAAsB;IACtB,QAAQ,CAAC,EAAE,EAAE,KAAK,CAAC;IACnB,oBAAoB;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,MAAM,WAAW,kBAAkB,CAAC,KAAK,SAAS,MAAM;IACtD,sBAAsB;IACtB,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;IAClD,4BAA4B;IAC5B,QAAQ,CAAC,UAAU,EAAE,KAAK,CAAC;IAC3B,uCAAuC;IACvC,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7C,6DAA6D;IAC7D,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxC,wBAAwB;IACxB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,uFAAuF;IACvF,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,KAAK,SAAS,MAAM,EAAE,KAAK,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,YAAY,CA+CvG"}

package/lib/packlets/top-bar/ModeSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModeSelector.js","sourceRoot":"","sources":["../../../src/packlets/top-bar/ModeSelector.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;;;;;AA0CH,oCA+CC;AAvFD,kDAA0B;AAC1B,8CAA8C;AAgC9C;;;;;;GAMG;AACH,SAAgB,YAAY,CAAuB,KAAgC;IACjF,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IACrF,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,0BAAa,GAAE,CAAC;IACvC,MAAM,QAAQ,GAAG,UAAU,KAAK,QAAQ,CAAC;IAEzC,OAAO,CACL,uCAAK,SAAS,EAAC,yEAAyE;QACtF,uCAAK,SAAS,EAAE,qBAAqB,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE;YAEhE,YAAY,IAAI,CACf,0CACE,OAAO,EAAE,YAAY,EACrB,SAAS,EAAC,6FAA6F,gBAC5F,WAAW;gBAEtB,uCAAK,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,WAAW,EAAE,GAAG,EAAE,MAAM,EAAC,cAAc;oBAC9F,wCACE,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,8CAA8C,GAChD,CACE,CACC,CACV;YACA,CAAC,QAAQ,IAAI,sCAAI,SAAS,EAAC,yCAAyC,IAAE,KAAK,CAAM;YAClF,uCAAK,SAAS,EAAC,YAAY,IACxB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,0CACE,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,OAAO,EAAE,GAAS,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAC1C,SAAS,EAAE,4CACT,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBACnC,IACE,UAAU,KAAK,IAAI,CAAC,EAAE;oBACpB,CAAC,CAAC,wBAAwB;oBAC1B,CAAC,CAAC,kDACN,EAAE,kBACY,UAAU,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IAExD,IAAI,CAAC,KAAK,CACJ,CACV,CAAC,CACE,CACF;QACL,YAAY,IAAI,uCAAK,SAAS,EAAC,yBAAyB,IAAE,YAAY,CAAO,CAC1E,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*\n * Copyright (c) 2026 Erik Fortune\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport React from 'react';\nimport { useResponsive } from '../responsive';\n\n/**\n * Configuration for a single mode in the mode selector.\n * @public\n */\nexport interface IModeConfig<TMode extends string> {\n  /** Mode identifier */\n  readonly id: TMode;\n  /** Display label */\n  readonly label: string;\n}\n\n/**\n * Props for the ModeSelector component.\n * @public\n */\nexport interface IModeSelectorProps<TMode extends string> {\n  /** Available modes */\n  readonly modes: ReadonlyArray<IModeConfig<TMode>>;\n  /** Currently active mode */\n  readonly activeMode: TMode;\n  /** Callback when a mode is selected */\n  readonly onModeChange: (mode: TMode) => void;\n  /** Optional right-side content (e.g., settings gear icon) */\n  readonly rightContent?: React.ReactNode;\n  /** Application title */\n  readonly title: string;\n  /** Optional callback to toggle sidebar drawer (shows hamburger icon when provided). */\n  readonly onMenuToggle?: () => void;\n}\n\n/**\n * Top-level mode selector bar.\n * Renders the application title, mode toggle buttons, and optional right-side content.\n * When {@link IModeSelectorProps.onMenuToggle | onMenuToggle} is provided, a hamburger\n * menu button is shown at the left edge (for compact/mobile layouts).\n * @public\n */\nexport function ModeSelector<TMode extends string>(props: IModeSelectorProps<TMode>): React.ReactElement {\n  const { modes, activeMode, onModeChange, rightContent, title, onMenuToggle } = props;\n  const { layoutMode } = useResponsive();\n  const isMobile = layoutMode === 'mobile';\n\n  return (\n    <div className=\"flex items-center justify-between px-4 py-2 bg-brand-primary text-white\">\n      <div className={`flex items-center ${isMobile ? 'gap-2' : 'gap-6'}`}>\n        {/* Hamburger menu button (compact/mobile only) */}\n        {onMenuToggle && (\n          <button\n            onClick={onMenuToggle}\n            className=\"p-1.5 -ml-1.5 rounded-md text-white/70 hover:text-white hover:bg-white/10 transition-colors\"\n            aria-label=\"Open menu\"\n          >\n            <svg className=\"w-5 h-5\" fill=\"none\" viewBox=\"0 0 24 24\" strokeWidth={1.5} stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\"\n              />\n            </svg>\n          </button>\n        )}\n        {!isMobile && <h1 className=\"text-lg font-semibold whitespace-nowrap\">{title}</h1>}\n        <div className=\"flex gap-1\">\n          {modes.map((mode) => (\n            <button\n              key={mode.id}\n              onClick={(): void => onModeChange(mode.id)}\n              className={`rounded-md font-medium transition-colors ${\n                isMobile ? 'px-2 py-1 text-xs' : 'px-4 py-1.5 text-sm'\n              } ${\n                activeMode === mode.id\n                  ? 'bg-white/20 text-white'\n                  : 'text-white/70 hover:text-white hover:bg-white/10'\n              }`}\n              aria-current={activeMode === mode.id ? 'true' : undefined}\n            >\n              {mode.label}\n            </button>\n          ))}\n        </div>\n      </div>\n      {rightContent && <div className=\"flex items-center gap-2\">{rightContent}</div>}\n    </div>\n  );\n}\n"]}

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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../src/packlets/top-bar/TabBar.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;GAGG;AACH,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,IAAI,EAAE,KAAK,GAAG,OAAO,CAAC;IAC/B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC9C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;GAGG;AACH,MAAM,WAAW,UAAU,CAAC,IAAI,SAAS,MAAM;IAC7C,qBAAqB;IACrB,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC;IAClB,oBAAoB;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,MAAM,WAAW,YAAY,CAAC,IAAI,SAAS,MAAM;IAC/C,qBAAqB;IACrB,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;IAC/C,2BAA2B;IAC3B,QAAQ,CAAC,SAAS,EAAE,IAAI,CAAC;IACzB,sCAAsC;IACtC,QAAQ,CAAC,WAAW,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IAC1C,8DAA8D;IAC9D,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzC;AAED;;;GAGG;AACH,wBAAgB,MAAM,CAAC,IAAI,SAAS,MAAM,EAAE,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,YAAY,CA4BzF"}

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

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabBar = TabBar;
 const react_1 = __importDefault(require("react"));
+const badge_1 = require("../badge");
 /**
  * Second-level tab bar for switching views within a mode.
  * @public
@@ -35,7 +36,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 && (0, badge_1.renderStatusBadge)(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/TabBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.js","sourceRoot":"","sources":["../../../src/packlets/top-bar/TabBar.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;;;;;AAiDH,wBA4BC;AA3ED,kDAA0B;AAE1B,oCAA6C;AAyC7C;;;GAGG;AACH,SAAgB,MAAM,CAAsB,KAAyB;IACnE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAE7D,OAAO,CACL,uCAAK,SAAS,EAAC,0GAA0G;QACtH,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,0CACE,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,OAAO,EAAE,GAAS,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,EACxC,SAAS,EAAE,yEACT,SAAS,KAAK,GAAG,CAAC,EAAE;gBAClB,CAAC,CAAC,wBAAwB;gBAC1B,CAAC,CAAC,kDACN,EAAE,kBACY,SAAS,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YAEvD,4CAAO,GAAG,CAAC,KAAK,CAAQ;YACvB,GAAG,CAAC,KAAK,IAAI,IAAA,yBAAiB,EAAC,GAAG,CAAC,KAAK,CAAC,CACnC,CACV,CAAC;QACD,YAAY,KAAK,SAAS,IAAI,CAC7B;YACE,uCAAK,SAAS,EAAC,QAAQ,GAAG;YACzB,YAAY,CACZ,CACJ,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["/*\n * Copyright (c) 2026 Erik Fortune\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport React from 'react';\n\nimport { renderStatusBadge } from '../badge';\n\n/**\n * Optional badge shown alongside a tab label.\n * @public\n */\nexport interface ITabBadge {\n  readonly kind: 'dot' | 'count';\n  readonly tone?: 'info' | 'warning' | 'danger';\n  readonly count?: number;\n  readonly ariaLabel?: string;\n}\n\n/**\n * Configuration for a single tab.\n * @public\n */\nexport interface ITabConfig<TTab extends string> {\n  /** Tab identifier */\n  readonly id: TTab;\n  /** Display label */\n  readonly label: string;\n  /** Optional badge rendered next to the tab label */\n  readonly badge?: ITabBadge;\n}\n\n/**\n * Props for the TabBar component.\n * @public\n */\nexport interface ITabBarProps<TTab extends string> {\n  /** Available tabs */\n  readonly tabs: ReadonlyArray<ITabConfig<TTab>>;\n  /** Currently active tab */\n  readonly activeTab: TTab;\n  /** Callback when a tab is selected */\n  readonly onTabChange: (tab: TTab) => void;\n  /** Optional content pinned to the far right of the tab bar */\n  readonly rightContent?: React.ReactNode;\n}\n\n/**\n * Second-level tab bar for switching views within a mode.\n * @public\n */\nexport function TabBar<TTab extends string>(props: ITabBarProps<TTab>): React.ReactElement {\n  const { tabs, activeTab, onTabChange, rightContent } = props;\n\n  return (\n    <div className=\"flex items-center gap-1 px-4 py-1 bg-brand-secondary text-white border-t border-white/10 overflow-x-auto\">\n      {tabs.map((tab) => (\n        <button\n          key={tab.id}\n          onClick={(): void => onTabChange(tab.id)}\n          className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors shrink-0 ${\n            activeTab === tab.id\n              ? 'bg-white/20 text-white'\n              : 'text-white/60 hover:text-white hover:bg-white/10'\n          }`}\n          aria-current={activeTab === tab.id ? 'page' : undefined}\n        >\n          <span>{tab.label}</span>\n          {tab.badge && renderStatusBadge(tab.badge)}\n        </button>\n      ))}\n      {rightContent !== undefined && (\n        <>\n          <div className=\"flex-1\" />\n          {rightContent}\n        </>\n      )}\n    </div>\n  );\n}\n"]}

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/lib/packlets/top-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packlets/top-bar/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,YAAY,EAAE,KAAK,WAAW,EAAE,KAAK,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACzF,OAAO,EAAE,MAAM,EAAE,KAAK,SAAS,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC"}

package/lib/packlets/top-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/packlets/top-bar/index.ts"],"names":[],"mappings":";AAAA;;;GAGG;;;AAEH,+CAAyF;AAAhF,4GAAA,YAAY,OAAA;AACrB,mCAAsF;AAA7E,gGAAA,MAAM,OAAA","sourcesContent":["/**\n * Top bar components: mode selector and tab bar.\n * @packageDocumentation\n */\n\nexport { ModeSelector, type IModeConfig, type IModeSelectorProps } from './ModeSelector';\nexport { TabBar, type ITabBadge, type ITabConfig, type ITabBarProps } from './TabBar';\n"]}

package/lib/packlets/url-sync/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packlets/url-sync/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,aAAa,EACb,YAAY,EACZ,UAAU,EACX,MAAM,cAAc,CAAC"}

package/lib/packlets/url-sync/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/packlets/url-sync/index.ts"],"names":[],"mappings":";AAAA;;;GAGG;;;AAEH,2CAQsB;AAHpB,2GAAA,aAAa,OAAA;AACb,0GAAA,YAAY,OAAA;AACZ,wGAAA,UAAU,OAAA","sourcesContent":["/**\n * URL sync packlet - bidirectional URL hash synchronization for mode/tab navigation.\n * @packageDocumentation\n */\n\nexport {\n  type IUrlSyncConfig,\n  type IUrlSyncCallbacks,\n  type IUrlSyncState,\n  type IParsedHash,\n  encodeUrlHash,\n  parseUrlHash,\n  useUrlSync\n} from './useUrlSync';\n"]}

package/lib/packlets/url-sync/useUrlSync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUrlSync.d.ts","sourceRoot":"","sources":["../../../src/packlets/url-sync/useUrlSync.ts"],"names":[],"mappings":"AAsCA;;;;;GAKG;AACH,MAAM,WAAW,cAAc,CAAC,KAAK,SAAS,MAAM,EAAE,IAAI,SAAS,MAAM;IACvE,iCAAiC;IACjC,QAAQ,CAAC,UAAU,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1C,0BAA0B;IAC1B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;IACvD,mFAAmF;IACnF,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;CAC3C;AAED;;;GAGG;AACH,MAAM,WAAW,iBAAiB,CAAC,KAAK,SAAS,MAAM,EAAE,IAAI,SAAS,MAAM;IAC1E,0BAA0B;IAC1B,QAAQ,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IACxC,yBAAyB;IACzB,QAAQ,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;CACtC;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa,CAAC,KAAK,SAAS,MAAM,EAAE,IAAI,SAAS,MAAM;IACtE,mBAAmB;IACnB,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC;IACrB,yBAAyB;IACzB,QAAQ,CAAC,SAAS,EAAE,IAAI,CAAC;CAC1B;AAMD;;;GAGG;AACH,MAAM,WAAW,WAAW,CAAC,KAAK,SAAS,MAAM,EAAE,IAAI,SAAS,MAAM;IACpE,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,SAAS,MAAM,EAAE,IAAI,SAAS,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,GAAG,MAAM,CAEvG;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,SAAS,MAAM,EAAE,IAAI,SAAS,MAAM,EACpE,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,GAClC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,SAAS,CA0BtC;AAMD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,KAAK,SAAS,MAAM,EAAE,IAAI,SAAS,MAAM,EAClE,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,EACnC,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC,EACjC,SAAS,EAAE,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,GACxC,IAAI,CAyEN"}

package/lib/packlets/url-sync/useUrlSync.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUrlSync.js","sourceRoot":"","sources":["../../../src/packlets/url-sync/useUrlSync.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright (c) 2026 Erik Fortune\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n/**\n * Generic URL hash synchronization for two-tier mode/tab navigation.\n *\n * Encodes mode + tab in the URL hash: `#/{mode}/{tab}`\n * Syncs bidirectionally between application state and the URL.\n * Handles browser back/forward via popstate.\n *\n * @packageDocumentation\n */\n\nimport { useEffect, useRef } from 'react';\n\n// ============================================================================\n// Configuration\n// ============================================================================\n\n/**\n * Configuration for the URL sync hook.\n * Provides the validation tables and default values needed to\n * parse and validate URL hash segments.\n * @public\n */\nexport interface IUrlSyncConfig<TMode extends string, TTab extends string> {\n  /** All valid mode identifiers */\n  readonly validModes: ReadonlyArray<TMode>;\n  /** Valid tabs per mode */\n  readonly validTabs: Record<TMode, ReadonlyArray<TTab>>;\n  /** Default tab for each mode (used when hash has a valid mode but no valid tab) */\n  readonly defaultTabs: Record<TMode, TTab>;\n}\n\n/**\n * Callbacks that connect the URL sync hook to the application's state management.\n * @public\n */\nexport interface IUrlSyncCallbacks<TMode extends string, TTab extends string> {\n  /** Set the active mode */\n  readonly setMode: (mode: TMode) => void;\n  /** Set the active tab */\n  readonly setTab: (tab: TTab) => void;\n}\n\n/**\n * Current navigation state to sync to the URL.\n * @public\n */\nexport interface IUrlSyncState<TMode extends string, TTab extends string> {\n  /** Current mode */\n  readonly mode: TMode;\n  /** Current active tab */\n  readonly activeTab: TTab;\n}\n\n// ============================================================================\n// URL Encoding / Decoding\n// ============================================================================\n\n/**\n * Result of parsing a URL hash.\n * @public\n */\nexport interface IParsedHash<TMode extends string, TTab extends string> {\n  readonly mode: TMode;\n  readonly tab: TTab;\n}\n\n/**\n * Encodes mode + tab into a URL hash string.\n * @param mode - The current mode\n * @param tab - The current tab\n * @returns Hash string (e.g., '#/library/ingredients')\n * @public\n */\nexport function encodeUrlHash<TMode extends string, TTab extends string>(mode: TMode, tab: TTab): string {\n  return `#/${mode}/${tab}`;\n}\n\n/**\n * Parses a URL hash string into mode + tab, validated against the config.\n * Returns undefined if the hash is invalid or empty.\n * @param hash - The hash string (with or without leading '#')\n * @param config - Validation configuration\n * @returns Parsed mode and tab, or undefined\n * @public\n */\nexport function parseUrlHash<TMode extends string, TTab extends string>(\n  hash: string,\n  config: IUrlSyncConfig<TMode, TTab>\n): IParsedHash<TMode, TTab> | undefined {\n  const cleaned = hash.replace(/^#\\/?/, '');\n  if (cleaned.length === 0) {\n    return undefined;\n  }\n\n  const parts = cleaned.split('/');\n  if (parts.length < 1) {\n    return undefined;\n  }\n\n  const mode = parts[0] as TMode;\n  if (!config.validModes.includes(mode)) {\n    return undefined;\n  }\n\n  const validTabs = config.validTabs[mode];\n  if (parts.length >= 2) {\n    const tab = parts[1] as TTab;\n    if (validTabs.includes(tab)) {\n      return { mode, tab };\n    }\n  }\n\n  // Valid mode but no valid tab — use default\n  return { mode, tab: config.defaultTabs[mode] };\n}\n\n// ============================================================================\n// URL Sync Hook\n// ============================================================================\n\n/**\n * Hook that synchronizes two-tier mode/tab navigation state with the URL hash.\n *\n * - On mount: reads the URL hash and applies it to the store\n * - On state change: updates the URL hash (pushes history entry)\n * - On popstate (back/forward): reads the URL hash and applies it to the store\n *\n * Should be called once at the app root level.\n *\n * @param config - Validation configuration (modes, tabs, defaults)\n * @param state - Current navigation state\n * @param callbacks - State mutation callbacks\n * @public\n */\nexport function useUrlSync<TMode extends string, TTab extends string>(\n  config: IUrlSyncConfig<TMode, TTab>,\n  state: IUrlSyncState<TMode, TTab>,\n  callbacks: IUrlSyncCallbacks<TMode, TTab>\n): void {\n  const { mode, activeTab } = state;\n  const { setMode, setTab } = callbacks;\n\n  // Track whether we're currently applying a URL change to avoid circular updates\n  const isApplyingUrl = useRef(false);\n  // Track whether we've done the initial load\n  const initialized = useRef(false);\n\n  // Keep refs to the latest values so the mount effect captures them without\n  // needing them in its dependency array (the effect must only run once).\n  const configRef = useRef(config);\n  configRef.current = config;\n  const modeRef = useRef(mode);\n  modeRef.current = mode;\n  const activeTabRef = useRef(activeTab);\n  activeTabRef.current = activeTab;\n  const setModeRef = useRef(setMode);\n  setModeRef.current = setMode;\n  const setTabRef = useRef(setTab);\n  setTabRef.current = setTab;\n\n  // ---- Initial load: URL → store ----\n  useEffect(() => {\n    if (initialized.current) {\n      return;\n    }\n    initialized.current = true;\n\n    const parsed = parseUrlHash(window.location.hash, configRef.current);\n    if (parsed) {\n      isApplyingUrl.current = true;\n      setModeRef.current(parsed.mode);\n      setTabRef.current(parsed.tab);\n      isApplyingUrl.current = false;\n    } else {\n      // No valid hash — write current state to URL\n      const hash = encodeUrlHash(modeRef.current, activeTabRef.current);\n      window.history.replaceState(null, '', hash);\n    }\n    // Intentionally empty: this effect must run exactly once on mount.\n    // All values are accessed via refs to avoid stale closures.\n  }, []);\n\n  // ---- Store → URL: push history on navigation changes ----\n  useEffect(() => {\n    if (isApplyingUrl.current) {\n      return;\n    }\n\n    const hash = encodeUrlHash(mode, activeTab);\n    if (window.location.hash !== hash) {\n      window.history.pushState(null, '', hash);\n    }\n  }, [mode, activeTab]);\n\n  // ---- URL → store: handle popstate (back/forward) ----\n  useEffect(() => {\n    const handlePopState = (): void => {\n      const parsed = parseUrlHash(window.location.hash, config);\n      if (parsed) {\n        isApplyingUrl.current = true;\n        setMode(parsed.mode);\n        setTab(parsed.tab);\n        isApplyingUrl.current = false;\n      }\n    };\n\n    window.addEventListener('popstate', handlePopState);\n    return (): void => {\n      window.removeEventListener('popstate', handlePopState);\n    };\n  }, [config, setMode, setTab]);\n}\n"]}

package/package.json

@@ -1,17 +1,9 @@
 {
   "name": "@fgv/ts-app-shell",
-  "version": "5.1.0-2",
+  "version": "5.1.0-21",
   "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-21",
+    "@fgv/ts-extras": "5.1.0-21"
   },
   "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-21",
+    "@fgv/ts-utils-jest": "5.1.0-21"
   },
   "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"
   }
-}
+}