@fgv/ts-app-shell 5.1.0-10 → 5.1.0-12

package/dist/packlets/badge/index.js

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+export { renderStatusBadge } from './renderStatusBadge';
+//# sourceMappingURL=index.js.map

package/dist/packlets/badge/renderStatusBadge.js

@@ -0,0 +1,44 @@
+/*
+ * 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';
+const BADGE_COUNT_BASE_CLASSES = 'ml-1.5 min-w-4 px-1.5 py-0.5 text-[0.6875rem] inline-flex shrink-0 items-center justify-center rounded-full font-medium leading-none';
+const BADGE_DOT_BASE_CLASSES = 'ml-1.5 h-2 w-2 inline-block shrink-0 rounded-full';
+const BADGE_COUNT_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'
+};
+const BADGE_DOT_TONE_CLASSES = {
+    info: 'bg-status-info-icon',
+    warning: 'bg-status-warning-icon',
+    danger: 'bg-status-error-icon'
+};
+export function renderStatusBadge(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: `${BADGE_DOT_BASE_CLASSES} ${BADGE_DOT_TONE_CLASSES[tone]}`, "aria-label": ariaLabel }));
+    }
+    return (React.createElement("span", { className: `${BADGE_COUNT_BASE_CLASSES} ${BADGE_COUNT_TONE_CLASSES[tone]}`, "aria-label": ariaLabel }, (_b = badge.count) !== null && _b !== void 0 ? _b : 0));
+}
+//# sourceMappingURL=renderStatusBadge.js.map

package/dist/packlets/sidebar/CollectionSection.js

@@ -30,6 +30,7 @@
 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';
+import { renderStatusBadge } from '../badge';
 // ============================================================================
 // Context Menu (internal)
 // ============================================================================
@@ -121,6 +122,7 @@ function CollectionRow(props) {
                     }, 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 && renderStatusBadge(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) => {

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

@@ -20,21 +20,7 @@
  * 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));
-}
+import { renderStatusBadge } from '../badge';
 /**
  * Second-level tab bar for switching views within a mode.
  * @public
@@ -46,7 +32,7 @@ export function TabBar(props) {
                 ? 'bg-white/20 text-white'
                 : '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)))),
+            tab.badge && renderStatusBadge(tab.badge)))),
         rightContent !== undefined && (React.createElement(React.Fragment, null,
             React.createElement("div", { className: "flex-1" }),
             rightContent))));

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

@@ -0,0 +1,2 @@
+export { renderStatusBadge } from './renderStatusBadge';
+//# sourceMappingURL=index.d.ts.map

package/lib/packlets/badge/index.js

@@ -0,0 +1,27 @@
+"use strict";
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderStatusBadge = void 0;
+var renderStatusBadge_1 = require("./renderStatusBadge");
+Object.defineProperty(exports, "renderStatusBadge", { enumerable: true, get: function () { return renderStatusBadge_1.renderStatusBadge; } });
+//# sourceMappingURL=index.js.map

package/lib/packlets/badge/renderStatusBadge.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type BadgeTone = 'info' | 'warning' | 'danger';
+interface IBadgeLike {
+    readonly kind: 'dot' | 'count';
+    readonly tone?: BadgeTone;
+    readonly count?: number;
+    readonly ariaLabel?: string;
+}
+export declare function renderStatusBadge(badge: IBadgeLike): React.ReactElement;
+export {};
+//# sourceMappingURL=renderStatusBadge.d.ts.map

package/lib/packlets/badge/renderStatusBadge.js

@@ -0,0 +1,50 @@
+"use strict";
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderStatusBadge = renderStatusBadge;
+const react_1 = __importDefault(require("react"));
+const BADGE_COUNT_BASE_CLASSES = 'ml-1.5 min-w-4 px-1.5 py-0.5 text-[0.6875rem] inline-flex shrink-0 items-center justify-center rounded-full font-medium leading-none';
+const BADGE_DOT_BASE_CLASSES = 'ml-1.5 h-2 w-2 inline-block shrink-0 rounded-full';
+const BADGE_COUNT_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'
+};
+const BADGE_DOT_TONE_CLASSES = {
+    info: 'bg-status-info-icon',
+    warning: 'bg-status-warning-icon',
+    danger: 'bg-status-error-icon'
+};
+function renderStatusBadge(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: `${BADGE_DOT_BASE_CLASSES} ${BADGE_DOT_TONE_CLASSES[tone]}`, "aria-label": ariaLabel }));
+    }
+    return (react_1.default.createElement("span", { className: `${BADGE_COUNT_BASE_CLASSES} ${BADGE_COUNT_TONE_CLASSES[tone]}`, "aria-label": ariaLabel }, (_b = badge.count) !== null && _b !== void 0 ? _b : 0));
+}
+//# sourceMappingURL=renderStatusBadge.js.map

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
@@ -37,6 +47,8 @@ export interface ICollectionRowItem {
     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.

package/lib/packlets/sidebar/CollectionSection.js

@@ -66,6 +66,7 @@ exports.CollectionSection = CollectionSection;
 const react_1 = __importStar(require("react"));
 const outline_1 = require("@heroicons/react/24/outline");
 const solid_1 = require("@heroicons/react/20/solid");
+const badge_1 = require("../badge");
 // ============================================================================
 // Context Menu (internal)
 // ============================================================================
@@ -157,6 +158,7 @@ function CollectionRow(props) {
                     }, 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 && (0, badge_1.renderStatusBadge)(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) => {

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, type SourceColorMap } 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.js

@@ -26,21 +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_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));
-}
+const badge_1 = require("../badge");
 /**
  * Second-level tab bar for switching views within a mode.
  * @public
@@ -52,7 +38,7 @@ function TabBar(props) {
                 ? 'bg-white/20 text-white'
                 : '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)))),
+            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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fgv/ts-app-shell",
-  "version": "5.1.0-10",
+  "version": "5.1.0-12",
   "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",
@@ -17,8 +17,8 @@
   "dependencies": {
     "@heroicons/react": "~2.2.0",
     "tslib": "^2.8.1",
-    "@fgv/ts-utils": "5.1.0-10",
-    "@fgv/ts-extras": "5.1.0-10"
+    "@fgv/ts-utils": "5.1.0-12",
+    "@fgv/ts-extras": "5.1.0-12"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -51,8 +51,8 @@
     "@rushstack/heft-jest-plugin": "1.2.6",
     "@testing-library/dom": "^10.4.0",
     "@rushstack/heft-node-rig": "2.11.27",
-    "@fgv/heft-dual-rig": "5.1.0-10",
-    "@fgv/ts-utils-jest": "5.1.0-10"
+    "@fgv/ts-utils-jest": "5.1.0-12",
+    "@fgv/heft-dual-rig": "5.1.0-12"
   },
   "exports": {
     ".": {