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

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

@@ -29,22 +29,8 @@
  */
 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));
-}
+import { StarIcon as StarIconSolid, ExclamationTriangleIcon, BuildingLibraryIcon, BuildingStorefrontIcon, ShieldCheckIcon, ShieldExclamationIcon, ArrowDownTrayIcon, PencilSquareIcon, ArrowsPointingInIcon, TrashIcon, FolderPlusIcon, ArchiveBoxArrowDownIcon, FolderOpenIcon, ArrowUpTrayIcon, PlusIcon, ChevronRightIcon } from '@heroicons/react/20/solid';
+import { renderStatusBadge } from '../badge';
 // ============================================================================
 // Context Menu (internal)
 // ============================================================================
@@ -96,7 +82,7 @@ function useLongPress(onLongPress) {
 // CollectionRow (internal)
 // ============================================================================
 function CollectionRow(props) {
-    var _a;
+    var _a, _b, _c;
     const { collection, onToggleVisibility, onSetDefault, onDelete, onExport, onUnlock, onRename, onMerge, borderColorClass, onContextMenu, isHiddenRow } = props;
     const displayName = (_a = collection.name) !== null && _a !== void 0 ? _a : collection.id;
     const handleContextMenu = useCallback((e) => {
@@ -127,8 +113,7 @@ function CollectionRow(props) {
                     : 'Set as default collection for new items', "aria-label": collection.isDefault ? `${displayName} is default` : `Set ${displayName} as default`, "aria-pressed": collection.isDefault }, collection.isDefault ? (React.createElement(StarIconSolid, { className: "w-4 h-4" })) : (React.createElement(StarIconOutline, { className: "w-4 h-4" })))),
             collection.hasConflict && (React.createElement("span", { className: "shrink-0 text-status-warning-strong cursor-default", title: "An encrypted copy of this collection from another storage root has the same ID. Go to Settings \u2192 Storage to resolve the conflict.", "aria-label": `Conflict: encrypted shadow for ${displayName}` },
                 React.createElement(ExclamationTriangleIcon, { className: "w-4 h-4" }))),
-            !collection.isMutable && (React.createElement("span", { className: "shrink-0 text-muted", title: "Built-in collection (read-only)" },
-                React.createElement(BuildingLibraryIcon, { className: "w-4 h-4" }))),
+            !collection.isMutable && (React.createElement("span", { className: "shrink-0 text-muted", title: (_b = collection.readOnlyLabel) !== null && _b !== void 0 ? _b : 'Built-in collection (read-only)' }, collection.isDeletable ? (React.createElement(BuildingStorefrontIcon, { className: "w-4 h-4" })) : (React.createElement(BuildingLibraryIcon, { className: "w-4 h-4" })))),
             collection.isProtected &&
                 (collection.isUnlocked || !onUnlock ? (React.createElement("span", { className: `shrink-0 ${collection.isUnlocked ? 'text-status-success-icon' : 'text-muted'}`, title: collection.isUnlocked ? 'Protected (unlocked)' : 'Protected (locked)' }, collection.isUnlocked ? (React.createElement(ShieldCheckIcon, { className: "w-4 h-4" })) : (React.createElement(ShieldExclamationIcon, { className: "w-4 h-4" })))) : (React.createElement("button", { onClick: (e) => {
                         e.stopPropagation();
@@ -136,7 +121,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),
+            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) => {
@@ -154,12 +139,12 @@ function CollectionRow(props) {
                     onMerge(collection.id);
                 }, className: "shrink-0 w-5 h-5 flex items-center justify-center text-faint hover:text-brand-accent transition-colors", title: `Merge ${displayName} into another collection`, "aria-label": `Merge ${displayName}` },
                 React.createElement(ArrowsPointingInIcon, { className: "w-4 h-4" }))),
-            collection.isMutable && onDelete && (React.createElement("button", { onClick: (e) => {
+            (collection.isMutable || collection.isDeletable) && onDelete && (React.createElement("button", { onClick: (e) => {
                     e.stopPropagation();
                     onDelete(collection.id);
                 }, className: "shrink-0 w-5 h-5 flex items-center justify-center text-faint hover:text-status-error-icon transition-colors", title: `Remove ${displayName}`, "aria-label": `Remove ${displayName}` },
                 React.createElement(TrashIcon, { className: "w-4 h-4" }))),
-            !collection.isMutable && React.createElement("span", { className: "text-xs text-muted" }, "(built-in)"))));
+            !collection.isMutable && (React.createElement("span", { className: "text-xs text-muted" }, (_c = collection.readOnlyLabel) !== null && _c !== void 0 ? _c : '(built-in)')))));
 }
 // ============================================================================
 // CollectionSection

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

@@ -49,6 +49,17 @@ export interface ICollectionRowItem {
     readonly sourceName?: string;
     /** Optional badge rendered alongside the collection name */
     readonly badge?: ICollectionBadge;
+    /**
+     * Label shown for immutable collections. Defaults to `"(built-in)"` when
+     * omitted. Set to e.g. `"(trading post)"` for imported read-only content.
+     */
+    readonly readOnlyLabel?: string;
+    /**
+     * When true, the collection can be deleted even though it is not mutable.
+     * Use for user-imported read-only content (e.g., Trading Post collections)
+     * that the user should be able to remove but not edit.
+     */
+    readonly isDeletable?: boolean;
 }
 /**
  * Props for the CollectionSection component.

package/lib/packlets/sidebar/CollectionSection.js

@@ -66,21 +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_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");
 // ============================================================================
 // Context Menu (internal)
 // ============================================================================
@@ -132,7 +118,7 @@ function useLongPress(onLongPress) {
 // CollectionRow (internal)
 // ============================================================================
 function CollectionRow(props) {
-    var _a;
+    var _a, _b, _c;
     const { collection, onToggleVisibility, onSetDefault, onDelete, onExport, onUnlock, onRename, onMerge, borderColorClass, onContextMenu, isHiddenRow } = props;
     const displayName = (_a = collection.name) !== null && _a !== void 0 ? _a : collection.id;
     const handleContextMenu = (0, react_1.useCallback)((e) => {
@@ -163,8 +149,7 @@ function CollectionRow(props) {
                     : 'Set as default collection for new items', "aria-label": collection.isDefault ? `${displayName} is default` : `Set ${displayName} as default`, "aria-pressed": collection.isDefault }, collection.isDefault ? (react_1.default.createElement(solid_1.StarIcon, { className: "w-4 h-4" })) : (react_1.default.createElement(outline_1.StarIcon, { className: "w-4 h-4" })))),
             collection.hasConflict && (react_1.default.createElement("span", { className: "shrink-0 text-status-warning-strong cursor-default", title: "An encrypted copy of this collection from another storage root has the same ID. Go to Settings \u2192 Storage to resolve the conflict.", "aria-label": `Conflict: encrypted shadow for ${displayName}` },
                 react_1.default.createElement(solid_1.ExclamationTriangleIcon, { className: "w-4 h-4" }))),
-            !collection.isMutable && (react_1.default.createElement("span", { className: "shrink-0 text-muted", title: "Built-in collection (read-only)" },
-                react_1.default.createElement(solid_1.BuildingLibraryIcon, { className: "w-4 h-4" }))),
+            !collection.isMutable && (react_1.default.createElement("span", { className: "shrink-0 text-muted", title: (_b = collection.readOnlyLabel) !== null && _b !== void 0 ? _b : 'Built-in collection (read-only)' }, collection.isDeletable ? (react_1.default.createElement(solid_1.BuildingStorefrontIcon, { className: "w-4 h-4" })) : (react_1.default.createElement(solid_1.BuildingLibraryIcon, { className: "w-4 h-4" })))),
             collection.isProtected &&
                 (collection.isUnlocked || !onUnlock ? (react_1.default.createElement("span", { className: `shrink-0 ${collection.isUnlocked ? 'text-status-success-icon' : 'text-muted'}`, title: collection.isUnlocked ? 'Protected (unlocked)' : 'Protected (locked)' }, collection.isUnlocked ? (react_1.default.createElement(solid_1.ShieldCheckIcon, { className: "w-4 h-4" })) : (react_1.default.createElement(solid_1.ShieldExclamationIcon, { className: "w-4 h-4" })))) : (react_1.default.createElement("button", { onClick: (e) => {
                         e.stopPropagation();
@@ -172,7 +157,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),
+            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) => {
@@ -190,12 +175,12 @@ function CollectionRow(props) {
                     onMerge(collection.id);
                 }, className: "shrink-0 w-5 h-5 flex items-center justify-center text-faint hover:text-brand-accent transition-colors", title: `Merge ${displayName} into another collection`, "aria-label": `Merge ${displayName}` },
                 react_1.default.createElement(solid_1.ArrowsPointingInIcon, { className: "w-4 h-4" }))),
-            collection.isMutable && onDelete && (react_1.default.createElement("button", { onClick: (e) => {
+            (collection.isMutable || collection.isDeletable) && onDelete && (react_1.default.createElement("button", { onClick: (e) => {
                     e.stopPropagation();
                     onDelete(collection.id);
                 }, className: "shrink-0 w-5 h-5 flex items-center justify-center text-faint hover:text-status-error-icon transition-colors", title: `Remove ${displayName}`, "aria-label": `Remove ${displayName}` },
                 react_1.default.createElement(solid_1.TrashIcon, { className: "w-4 h-4" }))),
-            !collection.isMutable && react_1.default.createElement("span", { className: "text-xs text-muted" }, "(built-in)"))));
+            !collection.isMutable && (react_1.default.createElement("span", { className: "text-xs text-muted" }, (_c = collection.readOnlyLabel) !== null && _c !== void 0 ? _c : '(built-in)')))));
 }
 // ============================================================================
 // CollectionSection

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