@fgv/ts-app-shell 5.1.0-1

package/dist/packlets/keyboard/useKeyboardShortcuts.js

@@ -0,0 +1,117 @@
+/*
+ * 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.
+ */
+/**
+ * React context and hooks for the keyboard shortcut registry.
+ * @packageDocumentation
+ */
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import { KeyboardShortcutRegistry } from './registry';
+// ============================================================================
+// Context
+// ============================================================================
+const KeyboardContext = React.createContext(undefined);
+/**
+ * Provides a KeyboardShortcutRegistry to the component tree.
+ * Should be mounted once at the app root.
+ * @public
+ */
+export function KeyboardShortcutProvider(props) {
+    const registry = useMemo(() => new KeyboardShortcutRegistry(), []);
+    useEffect(() => {
+        return () => registry.dispose();
+    }, [registry]);
+    return React.createElement(KeyboardContext.Provider, { value: registry }, props.children);
+}
+// ============================================================================
+// Hooks
+// ============================================================================
+/**
+ * Returns the keyboard shortcut registry.
+ * Must be used within a KeyboardShortcutProvider.
+ * @public
+ */
+export function useKeyboardRegistry() {
+    const ctx = useContext(KeyboardContext);
+    if (ctx === undefined) {
+        throw new Error('useKeyboardRegistry must be used within a KeyboardShortcutProvider');
+    }
+    return ctx;
+}
+/**
+ * Registers one or more keyboard shortcuts for the lifetime of the component.
+ * Shortcuts are automatically unregistered on unmount.
+ *
+ * @example
+ * ```tsx
+ * useKeyboardShortcuts([
+ *   {
+ *     binding: { key: 'k', meta: true },
+ *     description: 'Open command palette',
+ *     handler: () => { setCommandPaletteOpen(true); }
+ *   },
+ *   {
+ *     binding: { key: 'z', meta: true },
+ *     description: 'Undo',
+ *     handler: () => { workspace.undo(); }
+ *   }
+ * ]);
+ * ```
+ *
+ * @param shortcuts - Array of shortcuts to register
+ * @public
+ */
+export function useKeyboardShortcuts(shortcuts) {
+    const registry = useKeyboardRegistry();
+    const shortcutsRef = useRef(shortcuts);
+    shortcutsRef.current = shortcuts;
+    useEffect(() => {
+        // Register stable wrapper shortcuts that delegate to the current ref entries.
+        // This means the effect only runs when the registry changes or the number of
+        // shortcuts changes — not on every render when the array identity changes.
+        const registrations = shortcutsRef.current.map((__item, index) => registry.register({
+            get binding() {
+                var _a, _b;
+                return (_b = (_a = shortcutsRef.current[index]) === null || _a === void 0 ? void 0 : _a.binding) !== null && _b !== void 0 ? _b : { key: '' };
+            },
+            get description() {
+                var _a, _b;
+                return (_b = (_a = shortcutsRef.current[index]) === null || _a === void 0 ? void 0 : _a.description) !== null && _b !== void 0 ? _b : '';
+            },
+            get priority() {
+                var _a;
+                return (_a = shortcutsRef.current[index]) === null || _a === void 0 ? void 0 : _a.priority;
+            },
+            handler: () => {
+                var _a;
+                return (_a = shortcutsRef.current[index]) === null || _a === void 0 ? void 0 : _a.handler();
+            }
+        }));
+        return () => {
+            for (const reg of registrations) {
+                reg.unregister();
+            }
+        };
+        // Re-register only when the registry instance or the number of shortcuts changes.
+        // Handler/binding updates are picked up via the ref without re-registration.
+    }, [registry, shortcuts.length]);
+}
+//# sourceMappingURL=useKeyboardShortcuts.js.map

package/dist/packlets/messages/MessagesContext.js

@@ -0,0 +1,76 @@
+/*
+ * 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, { useCallback, useContext, useMemo, useState } from 'react';
+import { createMessage } from './model';
+// ============================================================================
+// Context
+// ============================================================================
+const MessagesContext = React.createContext(undefined);
+/**
+ * Provides the global message stream to the component tree.
+ * @public
+ */
+export function MessagesProvider(props) {
+    const { maxMessages = 200, children } = props;
+    const [messages, setMessages] = useState([]);
+    const [dismissedIds, setDismissedIds] = useState(new Set());
+    const addMessage = useCallback((severity, text, action) => {
+        const msg = createMessage(severity, text, action);
+        setMessages((prev) => {
+            const next = [...prev, msg];
+            return next.length > maxMessages ? next.slice(next.length - maxMessages) : next;
+        });
+        return msg;
+    }, [maxMessages]);
+    const dismissMessage = useCallback((id) => {
+        setDismissedIds((prev) => new Set(prev).add(id));
+    }, []);
+    const clearMessages = useCallback(() => {
+        setMessages([]);
+        setDismissedIds(new Set());
+    }, []);
+    const activeToasts = useMemo(() => messages.filter((m) => !dismissedIds.has(m.id)), [messages, dismissedIds]);
+    const value = useMemo(() => ({
+        messages,
+        addMessage,
+        dismissMessage,
+        clearMessages,
+        activeToasts
+    }), [messages, addMessage, dismissMessage, clearMessages, activeToasts]);
+    return React.createElement(MessagesContext.Provider, { value: value }, children);
+}
+// ============================================================================
+// Hook
+// ============================================================================
+/**
+ * Hook to access the messages context.
+ * Must be used within a MessagesProvider.
+ * @public
+ */
+export function useMessages() {
+    const ctx = useContext(MessagesContext);
+    if (ctx === undefined) {
+        throw new Error('useMessages must be used within a MessagesProvider');
+    }
+    return ctx;
+}
+//# sourceMappingURL=MessagesContext.js.map

package/dist/packlets/messages/MessagesLogger.js

@@ -0,0 +1,103 @@
+/*
+ * 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.
+ */
+/**
+ * Bridge between the MessagesContext and the ts-utils ILogger/LogReporter system.
+ *
+ * Provides an ILogger implementation that routes log messages into the
+ * MessagesContext, enabling Result.report() integration in React components.
+ *
+ * @packageDocumentation
+ */
+import { Logging, succeed } from '@fgv/ts-utils';
+// ============================================================================
+// Level Mapping
+// ============================================================================
+/**
+ * Maps ts-utils MessageLogLevel to our MessageSeverity.
+ * `detail` maps to `'info'` (shown when logLevel is 'detail' or 'all').
+ * `quiet` is always suppressed (only shown when reporter level is 'all', handled upstream).
+ * @internal
+ */
+function mapLogLevel(level) {
+    switch (level) {
+        case 'detail':
+        case 'info':
+            return 'info';
+        case 'warning':
+            return 'warning';
+        case 'error':
+            return 'error';
+        case 'quiet':
+            return undefined;
+    }
+}
+// ============================================================================
+// MessagesLogger
+// ============================================================================
+/**
+ * An {@link @fgv/ts-utils#Logging.ILogger | ILogger} implementation that routes
+ * messages into a {@link IMessagesContextValue | MessagesContext}.
+ *
+ * Use this as the `logger` parameter when creating a `LogReporter` to get
+ * full `Result.report()` integration that feeds into the app's toast/log system.
+ *
+ * @example
+ * ```typescript
+ * const { addMessage } = useMessages();
+ * const logger = new MessagesLogger(addMessage);
+ * const reporter = new LogReporter<unknown>({ logger });
+ *
+ * // Now Result.report() flows into toasts + log panel
+ * someResult.report(reporter, { success: 'info', failure: 'error' });
+ * ```
+ *
+ * @public
+ */
+export class MessagesLogger extends Logging.LoggerBase {
+    /**
+     * Creates a new MessagesLogger.
+     * @param addMessage - The addMessage function from MessagesContext
+     * @param logLevel - The minimum log level to display (default: 'info')
+     * @param defaultAction - Optional default action to attach to all messages
+     */
+    constructor(addMessage, logLevel, defaultAction) {
+        super(logLevel);
+        this._addMessage = addMessage;
+        this._defaultAction = defaultAction;
+    }
+    /**
+     * Routes a formatted log message into the MessagesContext.
+     * @param message - The formatted message string
+     * @param level - The log level
+     * @returns Success with the message if it was logged, or Success with undefined if suppressed
+     * @internal
+     */
+    _log(message, level) {
+        const severity = mapLogLevel(level);
+        if (severity !== undefined) {
+            this._addMessage(severity, message, this._defaultAction);
+            return succeed(message);
+        }
+        return succeed(undefined);
+    }
+}
+//# sourceMappingURL=MessagesLogger.js.map

package/dist/packlets/messages/StatusBar.js

@@ -0,0 +1,154 @@
+/*
+ * 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, { useCallback, useMemo, useState } from 'react';
+import { Logging } from '@fgv/ts-utils';
+import { FunnelIcon, DocumentDuplicateIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { CheckIcon } from '@heroicons/react/24/solid';
+import { useResponsive } from '../responsive';
+// ============================================================================
+// Severity display config
+// ============================================================================
+const SEVERITY_ICONS = {
+    info: '\u2139',
+    success: '\u2713',
+    warning: '\u26A0',
+    error: '\u2717'
+};
+const SEVERITY_COLORS = {
+    info: 'text-status-info-icon',
+    success: 'text-status-success-icon',
+    warning: 'text-status-warning-icon',
+    error: 'text-status-error-icon'
+};
+const LOG_ROW_COLORS = {
+    info: '',
+    success: 'bg-status-success-bg',
+    warning: 'bg-status-warning-bg',
+    error: 'bg-status-error-bg'
+};
+// ============================================================================
+// Level filter config
+// ============================================================================
+/**
+ * Maps MessageSeverity to MessageLogLevel for shouldLog filtering.
+ * 'success' is treated as 'info' since it doesn't exist in the log level hierarchy.
+ */
+function severityToLogLevel(severity) {
+    return severity === 'success' ? 'info' : severity;
+}
+/**
+ * Filter choices exposed in the UI, mapping labels to ReporterLogLevel values.
+ */
+const FILTER_LEVELS = [
+    { label: 'All', level: 'all' },
+    { label: 'Info+', level: 'info' },
+    { label: 'Warn+', level: 'warning' },
+    { label: 'Error', level: 'error' }
+];
+/**
+ * Collapsible status bar / log panel at the bottom of the application.
+ *
+ * Collapsed: shows severity counts.
+ * Expanded: filterable, searchable, copyable log of all messages.
+ * @public
+ */
+export function StatusBar(props) {
+    const { messages, onClear, initialFilterLevel } = props;
+    const { layoutMode } = useResponsive();
+    const isMobile = layoutMode === 'mobile';
+    const [expanded, setExpanded] = useState(false);
+    const [showFilters, setShowFilters] = useState(false);
+    const [filterLevel, setFilterLevel] = useState(initialFilterLevel !== null && initialFilterLevel !== void 0 ? initialFilterLevel : 'all');
+    const [searchTerm, setSearchTerm] = useState('');
+    const [copySuccessId, setCopySuccessId] = useState(null);
+    const counts = useMemo(() => {
+        const result = { info: 0, success: 0, warning: 0, error: 0 };
+        for (const msg of messages) {
+            result[msg.severity]++;
+        }
+        return result;
+    }, [messages]);
+    const filteredMessages = useMemo(() => {
+        return messages.filter((msg) => {
+            const passesLevel = Logging.shouldLog(severityToLogLevel(msg.severity), filterLevel);
+            const passesSearch = searchTerm === '' || msg.text.toLowerCase().includes(searchTerm.toLowerCase());
+            return passesLevel && passesSearch;
+        });
+    }, [messages, filterLevel, searchTerm]);
+    const isFiltered = filteredMessages.length !== messages.length;
+    const formatTime = useCallback((timestamp) => {
+        return new Date(timestamp).toLocaleTimeString();
+    }, []);
+    const copyToClipboard = useCallback((text, id) => {
+        navigator.clipboard
+            .writeText(text)
+            .then(() => {
+            setCopySuccessId(id);
+            setTimeout(() => setCopySuccessId(null), 2000);
+        })
+            .catch(() => undefined);
+    }, []);
+    const copyAllFiltered = useCallback(() => {
+        const text = filteredMessages
+            .map((msg) => `[${msg.severity.toUpperCase()}] ${formatTime(msg.timestamp)} - ${msg.text}`)
+            .join('\n');
+        copyToClipboard(text, '__all__');
+    }, [filteredMessages, formatTime, copyToClipboard]);
+    return (React.createElement("div", { className: "border-t border-border bg-surface" },
+        React.createElement("button", { onClick: () => setExpanded(!expanded), className: "flex items-center justify-between w-full px-4 py-1.5 text-xs text-secondary hover:bg-hover" },
+            React.createElement("div", { className: "flex items-center gap-4" },
+                Object.keys(counts).map((severity) => counts[severity] > 0 ? (React.createElement("span", { key: severity, className: `flex items-center gap-1 ${SEVERITY_COLORS[severity]}` },
+                    React.createElement("span", null, SEVERITY_ICONS[severity]),
+                    React.createElement("span", null, counts[severity]))) : null),
+                messages.length === 0 && React.createElement("span", { className: "text-muted" }, "No messages")),
+            React.createElement("span", { className: "text-muted" }, expanded ? '\u25BC' : '\u25B2')),
+        expanded && (React.createElement(React.Fragment, null,
+            isMobile && (React.createElement("div", { className: "fixed inset-0 z-40 bg-backdrop", onClick: () => setExpanded(false) })),
+            React.createElement("div", { className: isMobile
+                    ? 'fixed inset-x-0 bottom-8 z-50 flex flex-col bg-surface border-t border-border shadow-xl rounded-t-lg max-h-[70vh]'
+                    : 'border-t border-border-subtle' },
+                React.createElement("div", { className: "flex items-center justify-between px-4 py-1 bg-surface-alt border-b border-border-subtle shrink-0" },
+                    React.createElement("span", { className: "text-xs font-medium text-muted" }, isFiltered
+                        ? `${filteredMessages.length} of ${messages.length} messages`
+                        : `${messages.length} message${messages.length !== 1 ? 's' : ''}`),
+                    React.createElement("div", { className: "flex items-center gap-1" },
+                        React.createElement("button", { onClick: () => setShowFilters(!showFilters), className: `p-1 rounded hover:bg-surface-raised ${showFilters ? 'bg-surface-raised' : ''}`, title: "Filter messages" },
+                            React.createElement(FunnelIcon, { className: "h-3.5 w-3.5 text-muted" })),
+                        React.createElement("button", { onClick: copyAllFiltered, className: `p-1 rounded transition-colors ${copySuccessId === '__all__' ? 'bg-status-success-bg' : 'hover:bg-surface-raised'}`, title: copySuccessId === '__all__' ? 'Copied!' : 'Copy filtered messages' }, copySuccessId === '__all__' ? (React.createElement(CheckIcon, { className: "h-3.5 w-3.5 text-status-success-icon" })) : (React.createElement(DocumentDuplicateIcon, { className: "h-3.5 w-3.5 text-muted" }))),
+                        React.createElement("button", { onClick: onClear, className: "text-xs text-muted hover:text-secondary ml-1" }, "Clear"))),
+                showFilters && (React.createElement("div", { className: "px-4 py-1.5 bg-surface-raised border-b border-border-subtle flex items-center gap-3 shrink-0" },
+                    React.createElement("div", { className: "flex items-center gap-1" }, FILTER_LEVELS.map(({ label, level }) => (React.createElement("button", { key: level, onClick: () => setFilterLevel(level), className: `text-xs px-2 py-0.5 rounded border ${filterLevel === level
+                            ? 'bg-status-info-bg border-status-info-border text-status-info-text'
+                            : 'bg-surface border-border text-secondary hover:bg-hover'}` }, label)))),
+                    React.createElement("div", { className: "relative flex-1" },
+                        React.createElement(MagnifyingGlassIcon, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted" }),
+                        React.createElement("input", { type: "text", placeholder: "Search messages...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "w-full pl-7 pr-6 py-0.5 text-xs border border-border rounded bg-surface text-primary focus:outline-none focus:ring-1 focus:ring-focus-ring focus:border-focus-ring" }),
+                        searchTerm.length > 0 && (React.createElement("button", { onClick: () => setSearchTerm(''), className: "absolute right-2 top-1/2 -translate-y-1/2 text-muted hover:text-secondary text-xs", "aria-label": "Clear search" }, "\u00D7"))))),
+                React.createElement("div", { className: `overflow-y-auto ${isMobile ? 'flex-1' : 'max-h-48'}` }, filteredMessages.length === 0 ? (React.createElement("div", { className: "px-4 py-3 text-xs text-muted text-center" }, isFiltered ? 'No messages match the current filter' : 'No messages')) : (filteredMessages.map((msg) => (React.createElement("div", { key: msg.id, className: `group flex items-start gap-2 px-4 py-1.5 text-xs border-b border-border-subtle ${LOG_ROW_COLORS[msg.severity]}` },
+                    React.createElement("span", { className: `shrink-0 ${SEVERITY_COLORS[msg.severity]}` }, SEVERITY_ICONS[msg.severity]),
+                    React.createElement("span", { className: "flex-1 text-secondary" }, msg.text),
+                    React.createElement("button", { onClick: () => copyToClipboard(msg.text, msg.id), className: `shrink-0 p-0.5 rounded transition-colors ${copySuccessId === msg.id
+                            ? 'opacity-100 bg-status-success-surface'
+                            : 'opacity-0 group-hover:opacity-100 hover:bg-surface-raised'}`, title: copySuccessId === msg.id ? 'Copied!' : 'Copy message' }, copySuccessId === msg.id ? (React.createElement(CheckIcon, { className: "h-3 w-3 text-status-success-icon" })) : (React.createElement(DocumentDuplicateIcon, { className: "h-3 w-3 text-muted" }))),
+                    React.createElement("span", { className: "shrink-0 text-muted" }, formatTime(msg.timestamp))))))))))));
+}
+//# sourceMappingURL=StatusBar.js.map

package/dist/packlets/messages/Toast.js

@@ -0,0 +1,68 @@
+/*
+ * 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, { useEffect } from 'react';
+import { DEFAULT_TOAST_CONFIG } from './model';
+import { useResponsive } from '../responsive';
+// ============================================================================
+// Severity Styles
+// ============================================================================
+const SEVERITY_STYLES = {
+    info: 'bg-status-info-bg border-status-info-border text-status-info-text',
+    success: 'bg-status-success-bg border-status-success-border text-status-success-text',
+    warning: 'bg-status-warning-bg border-status-warning-border text-status-warning-text',
+    error: 'bg-status-error-bg border-status-error-border text-status-error-text'
+};
+/**
+ * A single toast notification.
+ * @public
+ */
+export function ToastItem(props) {
+    const { message, onDismiss } = props;
+    const config = DEFAULT_TOAST_CONFIG[message.severity];
+    const { layoutMode } = useResponsive();
+    useEffect(() => {
+        if (config.autoDismissMs > 0) {
+            const timer = setTimeout(() => onDismiss(message.id), config.autoDismissMs);
+            return () => clearTimeout(timer);
+        }
+        return undefined;
+    }, [message.id, config.autoDismissMs, onDismiss]);
+    return (React.createElement("div", { className: `flex items-start gap-3 px-4 py-3 rounded-lg border shadow-lg ${layoutMode === 'mobile' ? 'w-full' : 'max-w-sm'} ${SEVERITY_STYLES[message.severity]}`, role: "alert" },
+        React.createElement("div", { className: "flex-1 text-sm line-clamp-4", title: message.text }, message.text),
+        React.createElement("div", { className: "flex items-center gap-2 shrink-0" },
+            message.action && (React.createElement("button", { onClick: message.action.onAction, className: "text-sm font-medium underline hover:no-underline" }, message.action.label)),
+            React.createElement("button", { onClick: () => onDismiss(message.id), className: "text-current opacity-50 hover:opacity-100", "aria-label": "Dismiss" }, "\u00D7"))));
+}
+/**
+ * Container that renders active toasts in the bottom-right corner.
+ * @public
+ */
+export function ToastContainer(props) {
+    const { toasts, onDismiss, maxVisible = 5 } = props;
+    const { layoutMode } = useResponsive();
+    const visible = toasts.slice(-maxVisible);
+    if (visible.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", { className: `fixed bottom-16 z-50 flex flex-col gap-2 ${layoutMode === 'mobile' ? 'left-4 right-4' : 'right-4'}` }, visible.map((toast) => (React.createElement(ToastItem, { key: toast.id, message: toast, onDismiss: onDismiss })))));
+}
+//# sourceMappingURL=Toast.js.map

package/dist/packlets/messages/index.js

@@ -0,0 +1,11 @@
+/**
+ * Messages packlet - observability context, toast system, and log panel.
+ * @packageDocumentation
+ */
+export { DEFAULT_TOAST_CONFIG, createMessage, generateMessageId } from './model';
+export { MessagesProvider, useMessages } from './MessagesContext';
+export { ToastItem, ToastContainer } from './Toast';
+export { StatusBar } from './StatusBar';
+export { MessagesLogger } from './MessagesLogger';
+export { useLogReporter } from './useLogReporter';
+//# sourceMappingURL=index.js.map

package/dist/packlets/messages/model.js

@@ -0,0 +1,56 @@
+/*
+ * 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.
+ */
+/**
+ * Default toast configuration by severity.
+ * @public
+ */
+export const DEFAULT_TOAST_CONFIG = {
+    info: { autoDismissMs: 3000 },
+    success: { autoDismissMs: 3000 },
+    warning: { autoDismissMs: 5000 },
+    error: { autoDismissMs: 0 }
+};
+// ============================================================================
+// Helpers
+// ============================================================================
+let _nextId = 0;
+/**
+ * Generates a unique message ID.
+ * @internal
+ */
+export function generateMessageId() {
+    return `msg-${++_nextId}-${Date.now().toString(36)}`;
+}
+/**
+ * Creates a new message.
+ * @public
+ */
+export function createMessage(severity, text, action) {
+    return {
+        id: generateMessageId(),
+        severity,
+        text,
+        timestamp: Date.now(),
+        action
+    };
+}
+//# sourceMappingURL=model.js.map

package/dist/packlets/messages/useLogReporter.js

@@ -0,0 +1,66 @@
+/*
+ * 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.
+ */
+/**
+ * React hook that provides a LogReporter wired into the MessagesContext.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const reporter = useLogReporter();
+ *
+ *   const handleSave = () => {
+ *     const result = workspace.save(data);
+ *     // Automatically shows success toast or error in log panel
+ *     result.report(reporter, {
+ *       success: { level: 'info', message: () => 'Saved successfully' },
+ *       failure: 'error'
+ *     });
+ *   };
+ * }
+ * ```
+ *
+ * @packageDocumentation
+ */
+import { useMemo } from 'react';
+import { Logging } from '@fgv/ts-utils';
+import { useMessages } from './MessagesContext';
+import { MessagesLogger } from './MessagesLogger';
+/**
+ * React hook that creates a {@link @fgv/ts-utils#Logging.LogReporter | LogReporter}
+ * backed by the MessagesContext.
+ *
+ * The returned reporter implements both `ILogger` and `IResultReporter<unknown>`,
+ * so it can be used with `Result.report()` and direct logging calls.
+ *
+ * @param options - Optional configuration
+ * @returns A LogReporter that routes messages into the toast/log system
+ * @public
+ */
+export function useLogReporter(options) {
+    const { addMessage } = useMessages();
+    const logLevel = options === null || options === void 0 ? void 0 : options.logLevel;
+    return useMemo(() => {
+        const logger = new MessagesLogger(addMessage, logLevel);
+        return new Logging.LogReporter({ logger });
+    }, [addMessage, logLevel]);
+}
+//# sourceMappingURL=useLogReporter.js.map