@fgv/ts-app-shell 5.1.0-1

package/lib/packlets/messages/MessagesContext.js

@@ -0,0 +1,113 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessagesProvider = MessagesProvider;
+exports.useMessages = useMessages;
+const react_1 = __importStar(require("react"));
+const model_1 = require("./model");
+// ============================================================================
+// Context
+// ============================================================================
+const MessagesContext = react_1.default.createContext(undefined);
+/**
+ * Provides the global message stream to the component tree.
+ * @public
+ */
+function MessagesProvider(props) {
+    const { maxMessages = 200, children } = props;
+    const [messages, setMessages] = (0, react_1.useState)([]);
+    const [dismissedIds, setDismissedIds] = (0, react_1.useState)(new Set());
+    const addMessage = (0, react_1.useCallback)((severity, text, action) => {
+        const msg = (0, model_1.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 = (0, react_1.useCallback)((id) => {
+        setDismissedIds((prev) => new Set(prev).add(id));
+    }, []);
+    const clearMessages = (0, react_1.useCallback)(() => {
+        setMessages([]);
+        setDismissedIds(new Set());
+    }, []);
+    const activeToasts = (0, react_1.useMemo)(() => messages.filter((m) => !dismissedIds.has(m.id)), [messages, dismissedIds]);
+    const value = (0, react_1.useMemo)(() => ({
+        messages,
+        addMessage,
+        dismissMessage,
+        clearMessages,
+        activeToasts
+    }), [messages, addMessage, dismissMessage, clearMessages, activeToasts]);
+    return react_1.default.createElement(MessagesContext.Provider, { value: value }, children);
+}
+// ============================================================================
+// Hook
+// ============================================================================
+/**
+ * Hook to access the messages context.
+ * Must be used within a MessagesProvider.
+ * @public
+ */
+function useMessages() {
+    const ctx = (0, react_1.useContext)(MessagesContext);
+    if (ctx === undefined) {
+        throw new Error('useMessages must be used within a MessagesProvider');
+    }
+    return ctx;
+}
+//# sourceMappingURL=MessagesContext.js.map

package/lib/packlets/messages/MessagesLogger.d.ts

@@ -0,0 +1,50 @@
+/**
+ * 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, type MessageLogLevel, Success } from '@fgv/ts-utils';
+import { type IMessageAction } from './model';
+import { type IMessagesContextValue } from './MessagesContext';
+/**
+ * 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 declare class MessagesLogger extends Logging.LoggerBase {
+    private readonly _addMessage;
+    private readonly _defaultAction;
+    /**
+     * 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: IMessagesContextValue['addMessage'], logLevel?: Logging.ReporterLogLevel, defaultAction?: IMessageAction);
+    /**
+     * 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
+     */
+    protected _log(message: string, level: MessageLogLevel): Success<string | undefined>;
+}
+//# sourceMappingURL=MessagesLogger.d.ts.map

package/lib/packlets/messages/MessagesLogger.js

@@ -0,0 +1,107 @@
+"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.MessagesLogger = void 0;
+/**
+ * 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
+ */
+const ts_utils_1 = require("@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
+ */
+class MessagesLogger extends ts_utils_1.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 (0, ts_utils_1.succeed)(message);
+        }
+        return (0, ts_utils_1.succeed)(undefined);
+    }
+}
+exports.MessagesLogger = MessagesLogger;
+//# sourceMappingURL=MessagesLogger.js.map

package/lib/packlets/messages/StatusBar.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Logging } from '@fgv/ts-utils';
+import { IMessage } from './model';
+/**
+ * Props for the StatusBar component.
+ * @public
+ */
+export interface IStatusBarProps {
+    readonly messages: ReadonlyArray<IMessage>;
+    readonly onClear: () => void;
+    /** Initial filter level for the log panel. Defaults to 'all'. */
+    readonly initialFilterLevel?: Logging.ReporterLogLevel;
+}
+/**
+ * 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 declare function StatusBar(props: IStatusBarProps): React.ReactElement;
+//# sourceMappingURL=StatusBar.d.ts.map

package/lib/packlets/messages/StatusBar.js

@@ -0,0 +1,190 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusBar = StatusBar;
+const react_1 = __importStar(require("react"));
+const ts_utils_1 = require("@fgv/ts-utils");
+const outline_1 = require("@heroicons/react/24/outline");
+const solid_1 = require("@heroicons/react/24/solid");
+const responsive_1 = require("../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
+ */
+function StatusBar(props) {
+    const { messages, onClear, initialFilterLevel } = props;
+    const { layoutMode } = (0, responsive_1.useResponsive)();
+    const isMobile = layoutMode === 'mobile';
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const [showFilters, setShowFilters] = (0, react_1.useState)(false);
+    const [filterLevel, setFilterLevel] = (0, react_1.useState)(initialFilterLevel !== null && initialFilterLevel !== void 0 ? initialFilterLevel : 'all');
+    const [searchTerm, setSearchTerm] = (0, react_1.useState)('');
+    const [copySuccessId, setCopySuccessId] = (0, react_1.useState)(null);
+    const counts = (0, react_1.useMemo)(() => {
+        const result = { info: 0, success: 0, warning: 0, error: 0 };
+        for (const msg of messages) {
+            result[msg.severity]++;
+        }
+        return result;
+    }, [messages]);
+    const filteredMessages = (0, react_1.useMemo)(() => {
+        return messages.filter((msg) => {
+            const passesLevel = ts_utils_1.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 = (0, react_1.useCallback)((timestamp) => {
+        return new Date(timestamp).toLocaleTimeString();
+    }, []);
+    const copyToClipboard = (0, react_1.useCallback)((text, id) => {
+        navigator.clipboard
+            .writeText(text)
+            .then(() => {
+            setCopySuccessId(id);
+            setTimeout(() => setCopySuccessId(null), 2000);
+        })
+            .catch(() => undefined);
+    }, []);
+    const copyAllFiltered = (0, react_1.useCallback)(() => {
+        const text = filteredMessages
+            .map((msg) => `[${msg.severity.toUpperCase()}] ${formatTime(msg.timestamp)} - ${msg.text}`)
+            .join('\n');
+        copyToClipboard(text, '__all__');
+    }, [filteredMessages, formatTime, copyToClipboard]);
+    return (react_1.default.createElement("div", { className: "border-t border-border bg-surface" },
+        react_1.default.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_1.default.createElement("div", { className: "flex items-center gap-4" },
+                Object.keys(counts).map((severity) => counts[severity] > 0 ? (react_1.default.createElement("span", { key: severity, className: `flex items-center gap-1 ${SEVERITY_COLORS[severity]}` },
+                    react_1.default.createElement("span", null, SEVERITY_ICONS[severity]),
+                    react_1.default.createElement("span", null, counts[severity]))) : null),
+                messages.length === 0 && react_1.default.createElement("span", { className: "text-muted" }, "No messages")),
+            react_1.default.createElement("span", { className: "text-muted" }, expanded ? '\u25BC' : '\u25B2')),
+        expanded && (react_1.default.createElement(react_1.default.Fragment, null,
+            isMobile && (react_1.default.createElement("div", { className: "fixed inset-0 z-40 bg-backdrop", onClick: () => setExpanded(false) })),
+            react_1.default.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_1.default.createElement("div", { className: "flex items-center justify-between px-4 py-1 bg-surface-alt border-b border-border-subtle shrink-0" },
+                    react_1.default.createElement("span", { className: "text-xs font-medium text-muted" }, isFiltered
+                        ? `${filteredMessages.length} of ${messages.length} messages`
+                        : `${messages.length} message${messages.length !== 1 ? 's' : ''}`),
+                    react_1.default.createElement("div", { className: "flex items-center gap-1" },
+                        react_1.default.createElement("button", { onClick: () => setShowFilters(!showFilters), className: `p-1 rounded hover:bg-surface-raised ${showFilters ? 'bg-surface-raised' : ''}`, title: "Filter messages" },
+                            react_1.default.createElement(outline_1.FunnelIcon, { className: "h-3.5 w-3.5 text-muted" })),
+                        react_1.default.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_1.default.createElement(solid_1.CheckIcon, { className: "h-3.5 w-3.5 text-status-success-icon" })) : (react_1.default.createElement(outline_1.DocumentDuplicateIcon, { className: "h-3.5 w-3.5 text-muted" }))),
+                        react_1.default.createElement("button", { onClick: onClear, className: "text-xs text-muted hover:text-secondary ml-1" }, "Clear"))),
+                showFilters && (react_1.default.createElement("div", { className: "px-4 py-1.5 bg-surface-raised border-b border-border-subtle flex items-center gap-3 shrink-0" },
+                    react_1.default.createElement("div", { className: "flex items-center gap-1" }, FILTER_LEVELS.map(({ label, level }) => (react_1.default.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_1.default.createElement("div", { className: "relative flex-1" },
+                        react_1.default.createElement(outline_1.MagnifyingGlassIcon, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted" }),
+                        react_1.default.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_1.default.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_1.default.createElement("div", { className: `overflow-y-auto ${isMobile ? 'flex-1' : 'max-h-48'}` }, filteredMessages.length === 0 ? (react_1.default.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_1.default.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_1.default.createElement("span", { className: `shrink-0 ${SEVERITY_COLORS[msg.severity]}` }, SEVERITY_ICONS[msg.severity]),
+                    react_1.default.createElement("span", { className: "flex-1 text-secondary" }, msg.text),
+                    react_1.default.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_1.default.createElement(solid_1.CheckIcon, { className: "h-3 w-3 text-status-success-icon" })) : (react_1.default.createElement(outline_1.DocumentDuplicateIcon, { className: "h-3 w-3 text-muted" }))),
+                    react_1.default.createElement("span", { className: "shrink-0 text-muted" }, formatTime(msg.timestamp))))))))))));
+}
+//# sourceMappingURL=StatusBar.js.map

package/lib/packlets/messages/Toast.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { IMessage } from './model';
+/**
+ * Props for a single Toast item.
+ * @public
+ */
+export interface IToastItemProps {
+    readonly message: IMessage;
+    readonly onDismiss: (id: string) => void;
+}
+/**
+ * A single toast notification.
+ * @public
+ */
+export declare function ToastItem(props: IToastItemProps): React.ReactElement;
+/**
+ * Props for the ToastContainer.
+ * @public
+ */
+export interface IToastContainerProps {
+    readonly toasts: ReadonlyArray<IMessage>;
+    readonly onDismiss: (id: string) => void;
+    /** Maximum number of toasts to show simultaneously */
+    readonly maxVisible?: number;
+}
+/**
+ * Container that renders active toasts in the bottom-right corner.
+ * @public
+ */
+export declare function ToastContainer(props: IToastContainerProps): React.ReactElement | null;
+//# sourceMappingURL=Toast.d.ts.map

package/lib/packlets/messages/Toast.js

@@ -0,0 +1,105 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastItem = ToastItem;
+exports.ToastContainer = ToastContainer;
+const react_1 = __importStar(require("react"));
+const model_1 = require("./model");
+const responsive_1 = require("../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
+ */
+function ToastItem(props) {
+    const { message, onDismiss } = props;
+    const config = model_1.DEFAULT_TOAST_CONFIG[message.severity];
+    const { layoutMode } = (0, responsive_1.useResponsive)();
+    (0, react_1.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_1.default.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_1.default.createElement("div", { className: "flex-1 text-sm line-clamp-4", title: message.text }, message.text),
+        react_1.default.createElement("div", { className: "flex items-center gap-2 shrink-0" },
+            message.action && (react_1.default.createElement("button", { onClick: message.action.onAction, className: "text-sm font-medium underline hover:no-underline" }, message.action.label)),
+            react_1.default.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
+ */
+function ToastContainer(props) {
+    const { toasts, onDismiss, maxVisible = 5 } = props;
+    const { layoutMode } = (0, responsive_1.useResponsive)();
+    const visible = toasts.slice(-maxVisible);
+    if (visible.length === 0) {
+        return null;
+    }
+    return (react_1.default.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_1.default.createElement(ToastItem, { key: toast.id, message: toast, onDismiss: onDismiss })))));
+}
+//# sourceMappingURL=Toast.js.map

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

@@ -0,0 +1,11 @@
+/**
+ * Messages packlet - observability context, toast system, and log panel.
+ * @packageDocumentation
+ */
+export { type MessageSeverity, type IMessage, type IMessageAction, type IToastConfig, DEFAULT_TOAST_CONFIG, createMessage, generateMessageId } from './model';
+export { type IMessagesContextValue, type IMessagesProviderProps, MessagesProvider, useMessages } from './MessagesContext';
+export { ToastItem, ToastContainer, type IToastItemProps, type IToastContainerProps } from './Toast';
+export { StatusBar, type IStatusBarProps } from './StatusBar';
+export { MessagesLogger } from './MessagesLogger';
+export { useLogReporter, type IUseLogReporterOptions } from './useLogReporter';
+//# sourceMappingURL=index.d.ts.map

package/lib/packlets/messages/index.js

@@ -0,0 +1,24 @@
+"use strict";
+/**
+ * Messages packlet - observability context, toast system, and log panel.
+ * @packageDocumentation
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogReporter = exports.MessagesLogger = exports.StatusBar = exports.ToastContainer = exports.ToastItem = exports.useMessages = exports.MessagesProvider = exports.generateMessageId = exports.createMessage = exports.DEFAULT_TOAST_CONFIG = void 0;
+var model_1 = require("./model");
+Object.defineProperty(exports, "DEFAULT_TOAST_CONFIG", { enumerable: true, get: function () { return model_1.DEFAULT_TOAST_CONFIG; } });
+Object.defineProperty(exports, "createMessage", { enumerable: true, get: function () { return model_1.createMessage; } });
+Object.defineProperty(exports, "generateMessageId", { enumerable: true, get: function () { return model_1.generateMessageId; } });
+var MessagesContext_1 = require("./MessagesContext");
+Object.defineProperty(exports, "MessagesProvider", { enumerable: true, get: function () { return MessagesContext_1.MessagesProvider; } });
+Object.defineProperty(exports, "useMessages", { enumerable: true, get: function () { return MessagesContext_1.useMessages; } });
+var Toast_1 = require("./Toast");
+Object.defineProperty(exports, "ToastItem", { enumerable: true, get: function () { return Toast_1.ToastItem; } });
+Object.defineProperty(exports, "ToastContainer", { enumerable: true, get: function () { return Toast_1.ToastContainer; } });
+var StatusBar_1 = require("./StatusBar");
+Object.defineProperty(exports, "StatusBar", { enumerable: true, get: function () { return StatusBar_1.StatusBar; } });
+var MessagesLogger_1 = require("./MessagesLogger");
+Object.defineProperty(exports, "MessagesLogger", { enumerable: true, get: function () { return MessagesLogger_1.MessagesLogger; } });
+var useLogReporter_1 = require("./useLogReporter");
+Object.defineProperty(exports, "useLogReporter", { enumerable: true, get: function () { return useLogReporter_1.useLogReporter; } });
+//# sourceMappingURL=index.js.map