@fgv/ts-app-shell 5.1.0-1

package/README.md

@@ -0,0 +1,26 @@
+# @fgv/ts-app-shell
+
+Shared React UI primitives for application shells in the `@fgv` monorepo.
+
+## Features
+
+- **Column Cascade** — Master-detail drill-down with horizontal scrolling, breadcrumb navigation, and min-width columns
+- **Compact Sidebar** — Filter rows with summary text and flyout selectors that overlay the main pane
+- **Toast Notifications** — Ephemeral notifications with auto-dismiss and actionable links
+- **Log Message Panel** — Collapsible bottom panel with severity-filtered message history
+- **Command Palette** — Cmd+K quick navigation overlay
+- **Keybinding Registry** — Infrastructure for registering and managing keyboard shortcuts
+
+## Usage
+
+```typescript
+import { /* components */ } from '@fgv/ts-app-shell';
+```
+
+## Development
+
+```bash
+rushx build    # Build the library
+rushx test     # Run tests
+rushx coverage # Run tests with coverage
+```

package/dist/index.browser.js

@@ -0,0 +1,3 @@
+// Browser entry point - re-exports everything from main index
+export * from './index';
+//# sourceMappingURL=index.browser.js.map

package/dist/index.js

@@ -0,0 +1,43 @@
+/**
+ * \@fgv/ts-app-shell - Shared React UI primitives for application shells.
+ *
+ * Provides reusable components for:
+ * - Column cascade (master-detail drill-down)
+ * - Compact sidebar with flyout filter selectors
+ * - Toast notifications and log message panel
+ * - Command palette
+ * - Keybinding registry
+ *
+ * @packageDocumentation
+ */
+// Top bar components
+export * from './packlets/top-bar';
+// Messages infrastructure (context, toasts, status bar)
+export * from './packlets/messages';
+// URL hash synchronization for mode/tab navigation
+export * from './packlets/url-sync';
+// Modal dialog
+export * from './packlets/modal';
+// Keyboard shortcut registry
+export * from './packlets/keyboard';
+// Sidebar layout, search, filters, and entity list
+export * from './packlets/sidebar';
+// Column cascade container
+export * from './packlets/cascade';
+// Selectors (PreferredSelector popover)
+export * from './packlets/selectors';
+// JSON drop zone (generic drop/paste target with converter validation)
+export * from './packlets/drop-zone';
+// Generic edit field primitives for entity editors
+export * from './packlets/editing';
+// Generic detail-view primitive components
+export * from './packlets/detail';
+// AI assist hook (generic, context-free)
+export * from './packlets/ai-assist';
+// Print popup window enclosure
+export * from './packlets/print';
+// Theme provider and hook
+export * from './packlets/theme';
+// Responsive layout detection and context
+export * from './packlets/responsive';
+//# sourceMappingURL=index.js.map

package/dist/packlets/ai-assist/index.js

@@ -0,0 +1,6 @@
+/**
+ * AI assist packlet — generic hook for AI-assisted entity generation.
+ * @packageDocumentation
+ */
+export { checkForAiErrorObject, useAiAssist } from './useAiAssist';
+//# sourceMappingURL=index.js.map

package/dist/packlets/ai-assist/useAiAssist.js

@@ -0,0 +1,219 @@
+/*
+ * 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.
+ */
+/**
+ * Generic AI assist hook — parameterized by settings and keystore, no app-specific context.
+ *
+ * Provides a list of available AI assist actions and functions for copy-paste
+ * and direct API generation flows.
+ *
+ * @packageDocumentation
+ */
+import { useCallback, useMemo, useState } from 'react';
+import { AiAssist } from '@fgv/ts-extras';
+import { fail, succeed } from '@fgv/ts-utils';
+// ============================================================================
+// Helpers
+// ============================================================================
+/**
+ * Checks whether a parsed AI response is an error object (with an "error" field)
+ * rather than a valid entity. AI prompts instruct the model to return
+ * `{ "error": "...", "term": "..." }` when it cannot confidently generate the entity.
+ *
+ * @param parsed - The parsed JSON from the AI response
+ * @returns A failure Result with the error message if it's an error object, or undefined if not
+ */
+export function checkForAiErrorObject(parsed) {
+    if (typeof parsed === 'object' &&
+        parsed !== null &&
+        'error' in parsed &&
+        typeof parsed.error === 'string') {
+        const errorObj = parsed;
+        const term = typeof errorObj.term === 'string' ? ` (term: "${errorObj.term}")` : '';
+        return fail(`AI declined to generate${term}: ${errorObj.error}`);
+    }
+    return undefined;
+}
+// ============================================================================
+// Hook
+// ============================================================================
+/**
+ * Generic hook providing AI assist actions based on supplied settings and keystore.
+ * @param params - Settings and keystore to use (typically from a workspace or app context)
+ * @returns Available actions and execution functions
+ * @public
+ */
+export function useAiAssist(params) {
+    const { settings, keyStore, logger } = params;
+    const [isWorking, setIsWorking] = useState(false);
+    const actions = useMemo(() => {
+        var _a, _b, _c;
+        const providers = (_a = settings === null || settings === void 0 ? void 0 : settings.providers) !== null && _a !== void 0 ? _a : [{ provider: 'copy-paste' }];
+        const enabledSet = new Set(providers.map((p) => p.provider));
+        const defaultProvider = (settings === null || settings === void 0 ? void 0 : settings.defaultProvider) && enabledSet.has(settings.defaultProvider)
+            ? settings.defaultProvider
+            : (_c = (_b = providers[0]) === null || _b === void 0 ? void 0 : _b.provider) !== null && _c !== void 0 ? _c : 'copy-paste';
+        return providers.map((config) => {
+            var _a, _b;
+            let isAvailable = true;
+            let unavailableReason;
+            if (config.provider !== 'copy-paste') {
+                // API-based providers need a secret name and unlocked keystore with that secret
+                if (!config.secretName) {
+                    isAvailable = false;
+                    unavailableReason = 'No API key secret configured';
+                }
+                else if (!keyStore) {
+                    isAvailable = false;
+                    unavailableReason = 'No keystore available';
+                }
+                else if (!keyStore.isUnlocked) {
+                    isAvailable = false;
+                    unavailableReason = 'Keystore is locked';
+                }
+                else {
+                    const hasSecret = keyStore.hasSecret(config.secretName);
+                    if (hasSecret.isFailure() || !hasSecret.value) {
+                        isAvailable = false;
+                        unavailableReason = `API key "${config.secretName}" not found in keystore`;
+                    }
+                }
+            }
+            const label = (_b = (_a = AiAssist.getProviderDescriptor(config.provider).orDefault()) === null || _a === void 0 ? void 0 : _a.buttonLabel) !== null && _b !== void 0 ? _b : config.provider;
+            return {
+                provider: config.provider,
+                label,
+                isDefault: config.provider === defaultProvider,
+                isAvailable,
+                unavailableReason
+            };
+        });
+    }, [settings, keyStore]);
+    const copyPrompt = useCallback(async (prompt) => {
+        try {
+            await navigator.clipboard.writeText(prompt.combined);
+            return succeed('copied');
+        }
+        catch (_a) {
+            return fail('Failed to copy prompt to clipboard');
+        }
+    }, []);
+    const generateDirect = useCallback(async (provider, prompt, convert, tools) => {
+        // Find the provider config and descriptor
+        const providerConfig = settings === null || settings === void 0 ? void 0 : settings.providers.find((p) => p.provider === provider);
+        if (!providerConfig) {
+            return fail(`Provider "${provider}" not configured`);
+        }
+        const descriptorResult = AiAssist.getProviderDescriptor(provider);
+        if (descriptorResult.isFailure()) {
+            return fail(descriptorResult.message);
+        }
+        const descriptor = descriptorResult.value;
+        if (!providerConfig.secretName) {
+            return fail(`Provider "${provider}" has no secret name configured`);
+        }
+        if (!keyStore) {
+            return fail('No keystore available');
+        }
+        // Get API key from keystore
+        const apiKeyResult = keyStore.getApiKey(providerConfig.secretName);
+        if (apiKeyResult.isFailure()) {
+            return fail(`Failed to get API key: ${apiKeyResult.message}`);
+        }
+        setIsWorking(true);
+        try {
+            const maxAttempts = 3;
+            const correctionMessages = [];
+            for (let attempt = 0; attempt < maxAttempts; attempt++) {
+                // Resolve effective tools: per-call override > settings defaults > none
+                const effectiveTools = AiAssist.resolveEffectiveTools(descriptor, providerConfig.tools, tools);
+                // Call the API — through proxy if configured, otherwise direct
+                const completionParams = {
+                    descriptor,
+                    apiKey: apiKeyResult.value,
+                    prompt,
+                    additionalMessages: correctionMessages.length > 0 ? correctionMessages : undefined,
+                    modelOverride: providerConfig.model,
+                    logger,
+                    tools: effectiveTools.length > 0 ? effectiveTools : undefined
+                };
+                const useProxy = !!(settings === null || settings === void 0 ? void 0 : settings.proxyUrl) && (settings.proxyAllProviders === true || descriptor.corsRestricted);
+                const responseResult = useProxy
+                    ? await AiAssist.callProxiedCompletion(settings.proxyUrl, completionParams)
+                    : await AiAssist.callProviderCompletion(completionParams);
+                if (responseResult.isFailure()) {
+                    logger === null || logger === void 0 ? void 0 : logger.error(`AI completion failed: ${responseResult.message}`);
+                    return fail(responseResult.message);
+                }
+                const { content: rawResponse, truncated } = responseResult.value;
+                logger === null || logger === void 0 ? void 0 : logger.detail(`AI response received (${rawResponse.length} chars, truncated=${truncated})`);
+                // Truncated responses are almost certainly malformed JSON — fail early
+                if (truncated) {
+                    logger === null || logger === void 0 ? void 0 : logger.warn('AI response truncated due to token limits');
+                    return fail('AI response was truncated due to token limits — try a shorter prompt');
+                }
+                // Strip markdown code fences and parse JSON
+                const stripped = rawResponse
+                    .trim()
+                    .replace(/^```(?:\w+)?\s*\n?([\s\S]*?)\n?\s*```$/, '$1')
+                    .trim();
+                let parsed;
+                try {
+                    parsed = JSON.parse(stripped);
+                }
+                catch (err) {
+                    const detail = err instanceof Error ? err.message : String(err);
+                    // JSON parse failures are not retryable — the model isn't producing valid JSON at all
+                    return fail(`AI returned invalid JSON: ${detail}`);
+                }
+                // Check for AI error object (model declined to generate)
+                const aiError = checkForAiErrorObject(parsed);
+                if (aiError !== undefined) {
+                    return aiError;
+                }
+                // Validate with the provided converter
+                const entityResult = convert(parsed);
+                if (entityResult.isSuccess()) {
+                    return succeed({ entity: entityResult.value, source: 'ai' });
+                }
+                // Validation failed — if we have retries left, send a correction
+                logger === null || logger === void 0 ? void 0 : logger.warn(`AI response validation failed (attempt ${attempt + 1}/${maxAttempts}): ${entityResult.message}`);
+                if (attempt < maxAttempts - 1) {
+                    correctionMessages.push({ role: 'assistant', content: rawResponse }, {
+                        role: 'user',
+                        content: `The JSON you returned failed validation with the following error:\n\n${entityResult.message}\n\nPlease fix the JSON and return ONLY the corrected JSON object, nothing else.`
+                    });
+                }
+                else {
+                    // Out of retries
+                    return fail(`AI response validation failed after ${maxAttempts} attempts: ${entityResult.message}`);
+                }
+            }
+            // Unreachable, but TypeScript needs it
+            return fail('AI generation failed');
+        }
+        finally {
+            setIsWorking(false);
+        }
+    }, [settings, keyStore, logger]);
+    return { actions, isWorking, copyPrompt, generateDirect };
+}
+//# sourceMappingURL=useAiAssist.js.map

package/dist/packlets/cascade/CascadeContainer.js

@@ -0,0 +1,83 @@
+/*
+ * 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.
+ */
+/**
+ * Column cascade container — horizontal scroll of detail columns.
+ * @packageDocumentation
+ */
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useResponsive } from '../responsive';
+import { MobileCascadeStack } from './MobileCascadeStack';
+// ============================================================================
+// CascadeContainer Component
+// ============================================================================
+/**
+ * Horizontal scroll container for the column cascade.
+ *
+ * Renders a breadcrumb trail at the top and horizontally-scrollable
+ * detail columns below. Auto-scrolls to the rightmost column when
+ * a new column is pushed.
+ *
+ * @public
+ */
+export function CascadeContainer(props) {
+    const { columns, onPopTo, minColumnWidth = '400px', onFocus, rootLabel = 'List' } = props;
+    const { layoutMode } = useResponsive();
+    const scrollRef = useRef(null);
+    const handleMouseDown = useCallback(() => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    }, [onFocus]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Escape' || e.key === 'ArrowLeft') {
+            e.preventDefault();
+            e.stopPropagation();
+            if (columns.length > 1) {
+                onPopTo(columns.length - 1);
+            }
+            else {
+                onPopTo(0);
+            }
+        }
+    }, [columns.length, onPopTo]);
+    // Auto-scroll to rightmost column when columns change
+    useEffect(() => {
+        if (scrollRef.current) {
+            scrollRef.current.scrollTo({
+                left: scrollRef.current.scrollWidth,
+                behavior: 'smooth'
+            });
+        }
+    }, [columns.length]);
+    if (layoutMode === 'mobile') {
+        return React.createElement(MobileCascadeStack, Object.assign({}, props));
+    }
+    if (columns.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", { className: "flex flex-col flex-1 overflow-hidden outline-none", tabIndex: -1, onKeyDown: handleKeyDown },
+        React.createElement("div", { className: "flex items-center gap-1 px-3 py-1.5 bg-surface-alt border-b border-border text-xs shrink-0 overflow-x-auto" },
+            React.createElement("button", { onClick: () => onPopTo(0), className: "text-brand-accent hover:text-brand-primary hover:underline shrink-0" }, rootLabel),
+            columns.map((col, idx) => (React.createElement(React.Fragment, { key: col.key },
+                React.createElement("span", { className: "text-muted shrink-0" }, "/"),
+                idx < columns.length - 1 ? (React.createElement("button", { onClick: () => onPopTo(idx + 1), className: "text-brand-accent hover:text-brand-primary hover:underline truncate max-w-[200px] shrink-0" }, col.label)) : (React.createElement("span", { className: "text-secondary font-medium truncate max-w-[200px] shrink-0" }, col.label)))))),
+        React.createElement("div", { ref: scrollRef, className: "flex flex-1 overflow-x-auto overflow-y-hidden", onMouseDown: handleMouseDown }, columns.map((col) => (React.createElement("div", { key: col.key, className: "flex flex-col shrink-0 border-r border-border overflow-y-auto", style: { minWidth: minColumnWidth, width: minColumnWidth } }, col.content))))));
+}
+//# sourceMappingURL=CascadeContainer.js.map

package/dist/packlets/cascade/ComparisonView.js

@@ -0,0 +1,48 @@
+/*
+ * 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.
+ */
+/**
+ * ComparisonView — side-by-side read-only comparison of 2–4 entities.
+ * @packageDocumentation
+ */
+import React from 'react';
+// ============================================================================
+// ComparisonView Component
+// ============================================================================
+/**
+ * Side-by-side comparison view for entities.
+ *
+ * Renders 2–4 entity detail views in equal-width columns with
+ * synchronized scrolling (future) and column headers.
+ *
+ * @public
+ */
+export function ComparisonView(props) {
+    const { columns } = props;
+    if (columns.length < 2) {
+        return (React.createElement("div", { className: "flex flex-1 items-center justify-center text-muted text-sm" }, "Select at least 2 items to compare."));
+    }
+    return (React.createElement("div", { className: "flex flex-1 overflow-hidden" }, columns.map((col) => (React.createElement("div", { key: col.key, className: "flex flex-col flex-1 min-w-0 border-r border-border last:border-r-0 overflow-hidden" },
+        React.createElement("div", { className: "px-3 py-1.5 bg-surface-alt border-b border-border shrink-0" },
+            React.createElement("span", { className: "text-xs font-medium text-secondary truncate block" }, col.label)),
+        React.createElement("div", { className: "flex-1 overflow-y-auto" }, col.content))))));
+}
+//# sourceMappingURL=ComparisonView.js.map

package/dist/packlets/cascade/EntityTabLayout.js

@@ -0,0 +1,104 @@
+/*
+ * 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.
+ */
+/**
+ * EntityTabLayout — shared layout for entity tab content with list + cascade + collapse-on-focus.
+ * @packageDocumentation
+ */
+import React from 'react';
+import { CascadeContainer } from './CascadeContainer';
+import { useResponsive } from '../responsive';
+import { ComparisonView } from './ComparisonView';
+// ============================================================================
+// EntityTabLayout Component
+// ============================================================================
+/**
+ * Shared layout for entity tab content.
+ *
+ * Renders an entity list on the left and a cascade container on the right.
+ * The list stays expanded while browsing (selecting items in the list).
+ * It collapses when the user clicks inside the cascade detail pane,
+ * signaling they are focused on the detail rather than browsing.
+ *
+ * @public
+ */
+export function EntityTabLayout(props) {
+    var _a;
+    const { list, cascadeColumns, onPopTo, listCollapsed, onListCollapse, compareMode, comparisonColumns } = props;
+    const variationCompareColumns = props.variationCompareColumns;
+    const onExitVariationCompare = props.onExitVariationCompare;
+    const showingComparison = (_a = props.showingComparison) !== null && _a !== void 0 ? _a : false;
+    const onExitComparison = props.onExitComparison;
+    const { layoutMode } = useResponsive();
+    const isVariationCompare = variationCompareColumns !== undefined && variationCompareColumns.length >= 2;
+    const showComparison = !isVariationCompare &&
+        showingComparison &&
+        comparisonColumns !== undefined &&
+        comparisonColumns.length >= 2;
+    const showCascade = !compareMode && !isVariationCompare && !showComparison && cascadeColumns.length > 0;
+    const hasCascadeOrCompare = cascadeColumns.length > 0 || showComparison;
+    // Variation compare banner — shared between mobile and desktop
+    const variationCompareBanner = isVariationCompare && onExitVariationCompare && (React.createElement("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-status-warning-bg border-b border-status-warning-border shrink-0" },
+        React.createElement("span", { className: "text-xs text-status-warning-text" },
+            "Comparing ",
+            variationCompareColumns.length,
+            " variations"),
+        React.createElement("button", { onClick: onExitVariationCompare, className: "px-2 py-0.5 text-xs rounded border border-status-warning-border text-status-warning-text hover:bg-status-warning-surface transition-colors" }, "Exit")));
+    // Mobile: show one pane at a time — list or cascade/comparison full-screen
+    if (layoutMode === 'mobile') {
+        const hasCascadeContent = showCascade || showComparison || isVariationCompare;
+        return (React.createElement("div", { className: "flex flex-col flex-1 overflow-hidden" },
+            variationCompareBanner,
+            hasCascadeContent ? (React.createElement(React.Fragment, null,
+                showCascade && React.createElement(CascadeContainer, { columns: cascadeColumns, onPopTo: onPopTo }),
+                showComparison && (React.createElement("div", { className: "flex flex-col flex-1 overflow-hidden" },
+                    React.createElement("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-status-info-bg border-b border-status-info-border shrink-0" },
+                        React.createElement("span", { className: "text-xs text-status-info-text" },
+                            "Comparing ",
+                            comparisonColumns.length,
+                            " items"),
+                        onExitComparison && (React.createElement("button", { onClick: onExitComparison, className: "px-2 py-0.5 text-xs rounded border border-status-info-border text-status-info-text hover:bg-status-info-surface transition-colors" }, "\u2190 Back to list"))),
+                    React.createElement(ComparisonView, { columns: comparisonColumns }))),
+                isVariationCompare && React.createElement(ComparisonView, { columns: variationCompareColumns }))) : (React.createElement("div", { className: "flex flex-col flex-1 overflow-hidden" }, list))));
+    }
+    // Desktop/compact: side-by-side list and cascade
+    return (React.createElement("div", { className: "flex flex-col flex-1 overflow-hidden" },
+        variationCompareBanner,
+        React.createElement("div", { className: "flex flex-1 overflow-hidden" },
+            React.createElement("div", { className: `flex flex-col overflow-hidden transition-all ${isVariationCompare || showComparison
+                    ? 'w-0 min-w-0'
+                    : listCollapsed
+                        ? 'w-0 min-w-0'
+                        : hasCascadeOrCompare
+                            ? 'w-1/4 max-w-xs shrink-0 border-r border-border'
+                            : 'w-full max-w-sm shrink-0 border-r border-border'}` }, list),
+            showCascade && (React.createElement(CascadeContainer, { columns: cascadeColumns, onPopTo: onPopTo, onFocus: onListCollapse })),
+            showComparison && (React.createElement("div", { className: "flex flex-col flex-1 overflow-hidden" },
+                React.createElement("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-status-info-bg border-b border-status-info-border shrink-0" },
+                    React.createElement("span", { className: "text-xs text-status-info-text" },
+                        "Comparing ",
+                        comparisonColumns.length,
+                        " items"),
+                    onExitComparison && (React.createElement("button", { onClick: onExitComparison, className: "px-2 py-0.5 text-xs rounded border border-status-info-border text-status-info-text hover:bg-status-info-surface transition-colors" }, "\u2190 Back to list"))),
+                React.createElement(ComparisonView, { columns: comparisonColumns }))),
+            isVariationCompare && React.createElement(ComparisonView, { columns: variationCompareColumns }))));
+}
+//# sourceMappingURL=EntityTabLayout.js.map

package/dist/packlets/cascade/MobileCascadeStack.js

@@ -0,0 +1,63 @@
+/*
+ * 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.
+ */
+/**
+ * Mobile view-stack cascade — one full-screen column at a time with back navigation.
+ * @packageDocumentation
+ */
+import React, { useCallback } from 'react';
+/**
+ * Mobile replacement for {@link CascadeContainer}.
+ *
+ * Shows the rightmost (deepest) cascade column full-screen with a back button
+ * that pops one level at a time. At the first column, back returns to the list
+ * by calling `onPopTo(0)`.
+ *
+ * Accepts the same props as {@link CascadeContainer} so `CascadeContainer` can
+ * delegate to it transparently on mobile.
+ *
+ * @public
+ */
+export function MobileCascadeStack(props) {
+    const { columns, onPopTo, rootLabel = 'List' } = props;
+    const handleBack = useCallback(() => {
+        if (columns.length > 1) {
+            onPopTo(columns.length - 1);
+        }
+        else {
+            onPopTo(0);
+        }
+    }, [columns.length, onPopTo]);
+    if (columns.length === 0) {
+        return null;
+    }
+    const currentColumn = columns[columns.length - 1];
+    const backLabel = columns.length > 1 ? columns[columns.length - 2].label : rootLabel;
+    return (React.createElement("div", { className: "flex flex-col flex-1 overflow-hidden" },
+        React.createElement("div", { className: "flex items-center gap-2 px-3 py-2 bg-surface-alt border-b border-border shrink-0" },
+            React.createElement("button", { onClick: handleBack, className: "flex items-center gap-1 text-sm text-brand-accent hover:text-brand-primary", "aria-label": `Back to ${backLabel}` },
+                React.createElement("svg", { className: "w-4 h-4 shrink-0", fill: "none", viewBox: "0 0 24 24", strokeWidth: 2, stroke: "currentColor" },
+                    React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5L8.25 12l7.5-7.5" })),
+                backLabel),
+            columns.length > 1 && (React.createElement("span", { className: "ml-auto text-xs text-muted truncate" }, currentColumn.label))),
+        React.createElement("div", { className: "flex flex-col flex-1 overflow-y-auto" }, currentColumn.content)));
+}
+//# sourceMappingURL=MobileCascadeStack.js.map

package/dist/packlets/cascade/index.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+ * Cascade packlet - column cascade container, layout, and semantic operations.
+ * @packageDocumentation
+ */
+// UI components
+export { CascadeContainer } from './CascadeContainer';
+export { MobileCascadeStack } from './MobileCascadeStack';
+export { EntityTabLayout } from './EntityTabLayout';
+export { ComparisonView } from './ComparisonView';
+// Cascade model types
+export { CASCADE_NEW_ENTITY_ID } from './model';
+// Cascade transition hooks
+export { useSquashAt, useCascadeDrillDown } from './useCascadeTransitions';
+// Semantic cascade operations
+export { useCascadeOps } from './useCascadeOps';
+//# sourceMappingURL=index.js.map