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

package/dist/packlets/sidebar/CollectionSection.js

@@ -30,6 +30,21 @@
 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)
 // ============================================================================
@@ -121,6 +136,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 && 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) => {

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,21 @@ 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_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)
 // ============================================================================
@@ -157,6 +172,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 && 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) => {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fgv/ts-app-shell",
-  "version": "5.1.0-10",
+  "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",
@@ -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-11",
+    "@fgv/ts-extras": "5.1.0-11"
   },
   "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/heft-dual-rig": "5.1.0-11",
+    "@fgv/ts-utils-jest": "5.1.0-11"
   },
   "exports": {
     ".": {