@fgv/ts-app-shell 5.1.0-4 → 5.1.0-40

package/dist/packlets/messages/MessagesContext.js

@@ -19,22 +19,64 @@
  * 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 React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { createMessage } from './model';
 // ============================================================================
 // Context
 // ============================================================================
 const MessagesContext = React.createContext(undefined);
+/**
+ * Sentinel Tailwind class used by the probe in {@link MessagesProvider}.
+ *
+ * This is an arbitrary-value height utility (`h-[7.3215px]`) chosen to be
+ * vanishingly unlikely to appear in any consumer's source code: a common
+ * utility like `h-3.5` could be generated by Tailwind scanning the consumer's
+ * own files, which would mask the missing `@fgv/ts-app-shell` content path.
+ * Tailwind JIT regex-scans the package's built JS, finds this literal string,
+ * and generates the rule — only when the consumer's `content` array includes
+ * the `@fgv/ts-app-shell/lib` glob (see the README "Setup" section).
+ * @internal
+ */
+export const TAILWIND_PROBE_CLASS = 'h-[7.3215px]';
+/**
+ * Expected probe height in pixels (matches {@link TAILWIND_PROBE_CLASS}).
+ * @internal
+ */
+export const TAILWIND_PROBE_HEIGHT_PX = 7.3215;
+/**
+ * URL of the setup-instructions anchor surfaced by the Tailwind-content-path
+ * diagnostic message when the probe detects that ts-app-shell's geometry utilities
+ * are not being generated.
+ * @internal
+ */
+export const TAILWIND_SETUP_DOCS_URL = 'https://github.com/ErikFortune/fgv/tree/release/libraries/ts-app-shell#setup';
+/**
+ * Text of the diagnostic message emitted by the Tailwind-content-path probe.
+ * @internal
+ */
+export const TAILWIND_PROBE_MESSAGE_TEXT = '@fgv/ts-app-shell styles are not fully loaded. Some icons may not render correctly. ' +
+    'See setup docs for the required Tailwind content-path entry.';
 /**
  * Provides the global message stream to the component tree.
+ *
+ * On mount, runs a one-shot probe that detects whether the consuming app's Tailwind
+ * configuration is missing the `@fgv/ts-app-shell` content path. The probe applies a
+ * sentinel arbitrary-value class ({@link TAILWIND_PROBE_CLASS}) that is vanishingly
+ * unlikely to appear in any consumer's source — Tailwind will only generate the rule
+ * when it scans the package's built JS via the content path. If the probe finds the
+ * element unsized, a `'warning'` message is appended to the stream with a link to the
+ * setup documentation. The probe runs exactly once per provider lifecycle (idempotent
+ * under React.StrictMode double-render and HMR) and uses inline styles so it is not
+ * affected by the failure mode it detects.
  * @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);
+    const probeHasRun = useRef(false);
+    const addMessage = useCallback((level, text, options) => {
+        const msg = createMessage(level, text, options);
         setMessages((prev) => {
             const next = [...prev, msg];
             return next.length > maxMessages ? next.slice(next.length - maxMessages) : next;
@@ -49,6 +91,40 @@ export function MessagesProvider(props) {
         setDismissedIds(new Set());
     }, []);
     const activeToasts = useMemo(() => messages.filter((m) => !dismissedIds.has(m.id)), [messages, dismissedIds]);
+    useEffect(() => {
+        if (probeHasRun.current) {
+            return;
+        }
+        const probe = document.createElement('div');
+        probe.className = TAILWIND_PROBE_CLASS;
+        probe.setAttribute('aria-hidden', 'true');
+        probe.style.position = 'absolute';
+        probe.style.visibility = 'hidden';
+        probe.style.pointerEvents = 'none';
+        document.body.appendChild(probe);
+        const frameId = requestAnimationFrame(() => {
+            // Mark the guard only once the measurement has actually run; otherwise a
+            // StrictMode cleanup-before-rAF would leave `probeHasRun = true` and the
+            // second setup would short-circuit, suppressing the diagnostic entirely.
+            probeHasRun.current = true;
+            const height = probe.getBoundingClientRect().height;
+            probe.remove();
+            if (height === 0) {
+                addMessage('warning', TAILWIND_PROBE_MESSAGE_TEXT, {
+                    action: {
+                        label: 'Open setup docs',
+                        href: TAILWIND_SETUP_DOCS_URL
+                    }
+                });
+            }
+        });
+        return () => {
+            cancelAnimationFrame(frameId);
+            if (probe.parentNode !== null) {
+                probe.remove();
+            }
+        };
+    }, [addMessage]);
     const value = useMemo(() => ({
         messages,
         addMessage,

package/dist/packlets/messages/MessagesContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessagesContext.js","sourceRoot":"","sources":["../../../src/packlets/messages/MessagesContext.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright (c) 2026 Erik Fortune\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { type MessageLogLevel } from '@fgv/ts-utils';\n\nimport { createMessage, ICreateMessageOptions, IMessage } from './model';\n\n// ============================================================================\n// Context Value\n// ============================================================================\n\n/**\n * Value provided by the MessagesContext.\n * @public\n */\nexport interface IMessagesContextValue {\n  /** All messages in the stream (newest last) */\n  readonly messages: ReadonlyArray<IMessage>;\n  /**\n   * Add a message to the stream. The `level` drives filtering; pass `options.severity`\n   * only to override display styling (e.g. `'success'`).\n   */\n  readonly addMessage: (level: MessageLogLevel, text: string, options?: ICreateMessageOptions) => IMessage;\n  /** Dismiss a specific message (removes from toast display, keeps in log) */\n  readonly dismissMessage: (id: string) => void;\n  /** Clear all messages */\n  readonly clearMessages: () => void;\n  /** Messages currently visible as toasts (not yet dismissed) */\n  readonly activeToasts: ReadonlyArray<IMessage>;\n}\n\n// ============================================================================\n// Context\n// ============================================================================\n\nconst MessagesContext: React.Context<IMessagesContextValue | undefined> = React.createContext<\n  IMessagesContextValue | undefined\n>(undefined);\n\n// ============================================================================\n// Provider\n// ============================================================================\n\n/**\n * Props for the MessagesProvider.\n * @public\n */\nexport interface IMessagesProviderProps {\n  /** Maximum number of messages to retain in the log */\n  readonly maxMessages?: number;\n  /** Children */\n  readonly children: React.ReactNode;\n}\n\n/**\n * Sentinel Tailwind class used by the probe in {@link MessagesProvider}.\n *\n * This is an arbitrary-value height utility (`h-[7.3215px]`) chosen to be\n * vanishingly unlikely to appear in any consumer's source code: a common\n * utility like `h-3.5` could be generated by Tailwind scanning the consumer's\n * own files, which would mask the missing `@fgv/ts-app-shell` content path.\n * Tailwind JIT regex-scans the package's built JS, finds this literal string,\n * and generates the rule — only when the consumer's `content` array includes\n * the `@fgv/ts-app-shell/lib` glob (see the README \"Setup\" section).\n * @internal\n */\nexport const TAILWIND_PROBE_CLASS: string = 'h-[7.3215px]';\n\n/**\n * Expected probe height in pixels (matches {@link TAILWIND_PROBE_CLASS}).\n * @internal\n */\nexport const TAILWIND_PROBE_HEIGHT_PX: number = 7.3215;\n\n/**\n * URL of the setup-instructions anchor surfaced by the Tailwind-content-path\n * diagnostic message when the probe detects that ts-app-shell's geometry utilities\n * are not being generated.\n * @internal\n */\nexport const TAILWIND_SETUP_DOCS_URL: string =\n  'https://github.com/ErikFortune/fgv/tree/release/libraries/ts-app-shell#setup';\n\n/**\n * Text of the diagnostic message emitted by the Tailwind-content-path probe.\n * @internal\n */\nexport const TAILWIND_PROBE_MESSAGE_TEXT: string =\n  '@fgv/ts-app-shell styles are not fully loaded. Some icons may not render correctly. ' +\n  'See setup docs for the required Tailwind content-path entry.';\n\n/**\n * Provides the global message stream to the component tree.\n *\n * On mount, runs a one-shot probe that detects whether the consuming app's Tailwind\n * configuration is missing the `@fgv/ts-app-shell` content path. The probe applies a\n * sentinel arbitrary-value class ({@link TAILWIND_PROBE_CLASS}) that is vanishingly\n * unlikely to appear in any consumer's source — Tailwind will only generate the rule\n * when it scans the package's built JS via the content path. If the probe finds the\n * element unsized, a `'warning'` message is appended to the stream with a link to the\n * setup documentation. The probe runs exactly once per provider lifecycle (idempotent\n * under React.StrictMode double-render and HMR) and uses inline styles so it is not\n * affected by the failure mode it detects.\n * @public\n */\nexport function MessagesProvider(props: IMessagesProviderProps): React.ReactElement {\n  const { maxMessages = 200, children } = props;\n  const [messages, setMessages] = useState<IMessage[]>([]);\n  const [dismissedIds, setDismissedIds] = useState<Set<string>>(new Set());\n  const probeHasRun: React.MutableRefObject<boolean> = useRef<boolean>(false);\n\n  const addMessage = useCallback(\n    (level: MessageLogLevel, text: string, options?: ICreateMessageOptions): IMessage => {\n      const msg = createMessage(level, text, options);\n      setMessages((prev) => {\n        const next = [...prev, msg];\n        return next.length > maxMessages ? next.slice(next.length - maxMessages) : next;\n      });\n      return msg;\n    },\n    [maxMessages]\n  );\n\n  const dismissMessage = useCallback((id: string): void => {\n    setDismissedIds((prev) => new Set(prev).add(id));\n  }, []);\n\n  const clearMessages = useCallback((): void => {\n    setMessages([]);\n    setDismissedIds(new Set());\n  }, []);\n\n  const activeToasts = useMemo(\n    () => messages.filter((m) => !dismissedIds.has(m.id)),\n    [messages, dismissedIds]\n  );\n\n  useEffect(() => {\n    if (probeHasRun.current) {\n      return;\n    }\n\n    const probe: HTMLDivElement = document.createElement('div');\n    probe.className = TAILWIND_PROBE_CLASS;\n    probe.setAttribute('aria-hidden', 'true');\n    probe.style.position = 'absolute';\n    probe.style.visibility = 'hidden';\n    probe.style.pointerEvents = 'none';\n    document.body.appendChild(probe);\n\n    const frameId: number = requestAnimationFrame(() => {\n      // Mark the guard only once the measurement has actually run; otherwise a\n      // StrictMode cleanup-before-rAF would leave `probeHasRun = true` and the\n      // second setup would short-circuit, suppressing the diagnostic entirely.\n      probeHasRun.current = true;\n      const height: number = probe.getBoundingClientRect().height;\n      probe.remove();\n      if (height === 0) {\n        addMessage('warning', TAILWIND_PROBE_MESSAGE_TEXT, {\n          action: {\n            label: 'Open setup docs',\n            href: TAILWIND_SETUP_DOCS_URL\n          }\n        });\n      }\n    });\n\n    return (): void => {\n      cancelAnimationFrame(frameId);\n      if (probe.parentNode !== null) {\n        probe.remove();\n      }\n    };\n  }, [addMessage]);\n\n  const value = useMemo<IMessagesContextValue>(\n    () => ({\n      messages,\n      addMessage,\n      dismissMessage,\n      clearMessages,\n      activeToasts\n    }),\n    [messages, addMessage, dismissMessage, clearMessages, activeToasts]\n  );\n\n  return <MessagesContext.Provider value={value}>{children}</MessagesContext.Provider>;\n}\n\n// ============================================================================\n// Hook\n// ============================================================================\n\n/**\n * Hook to access the messages context.\n * Must be used within a MessagesProvider.\n * @public\n */\nexport function useMessages(): IMessagesContextValue {\n  const ctx = useContext(MessagesContext);\n  if (ctx === undefined) {\n    throw new Error('useMessages must be used within a MessagesProvider');\n  }\n  return ctx;\n}\n"]}

package/dist/packlets/messages/MessagesLogger.js

@@ -29,28 +29,6 @@
  */
 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
 // ============================================================================
 /**
@@ -85,19 +63,20 @@ export class MessagesLogger extends Logging.LoggerBase {
         this._defaultAction = defaultAction;
     }
     /**
-     * Routes a formatted log message into the MessagesContext.
+     * Routes a formatted log message into the MessagesContext, setting the message `level`
+     * straight through from the log call (lossless). Display styling `severity` is left
+     * undefined so it is derived from the level for display.
+     *
+     * Suppression by threshold is handled upstream by {@link @fgv/ts-utils#Logging.LoggerBase | LoggerBase}
+     * (`shouldLog` against `logLevel`) before this method is invoked.
      * @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
+     * @param level - The {@link @fgv/ts-utils#MessageLogLevel | log level}
+     * @returns Success with the message that was logged
      * @internal
      */
     _log(message, level) {
-        const severity = mapLogLevel(level);
-        if (severity !== undefined) {
-            this._addMessage(severity, message, this._defaultAction);
-            return succeed(message);
-        }
-        return succeed(undefined);
+        this._addMessage(level, message, { action: this._defaultAction });
+        return succeed(message);
     }
 }
 //# sourceMappingURL=MessagesLogger.js.map

package/dist/packlets/messages/MessagesLogger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessagesLogger.js","sourceRoot":"","sources":["../../../src/packlets/messages/MessagesLogger.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH;;;;;;;GAOG;AAEH,OAAO,EAAE,OAAO,EAAiC,OAAO,EAAE,MAAM,eAAe,CAAC;AAKhF,+EAA+E;AAC/E,iBAAiB;AACjB,+EAA+E;AAE/E;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,OAAO,cAAe,SAAQ,OAAO,CAAC,UAAU;IAIpD;;;;;OAKG;IACH,YACE,UAA+C,EAC/C,QAAmC,EACnC,aAA8B;QAE9B,KAAK,CAAC,QAAQ,CAAC,CAAC;QAChB,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;QAC9B,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;IACtC,CAAC;IAED;;;;;;;;;;;OAWG;IACO,IAAI,CAAC,OAAe,EAAE,KAAsB;QACpD,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QAClE,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1B,CAAC;CACF","sourcesContent":["/*\n * Copyright (c) 2026 Erik Fortune\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n/**\n * Bridge between the MessagesContext and the ts-utils ILogger/LogReporter system.\n *\n * Provides an ILogger implementation that routes log messages into the\n * MessagesContext, enabling Result.report() integration in React components.\n *\n * @packageDocumentation\n */\n\nimport { Logging, type MessageLogLevel, Success, succeed } from '@fgv/ts-utils';\n\nimport { type IMessageAction } from './model';\nimport { type IMessagesContextValue } from './MessagesContext';\n\n// ============================================================================\n// MessagesLogger\n// ============================================================================\n\n/**\n * An {@link @fgv/ts-utils#Logging.ILogger | ILogger} implementation that routes\n * messages into a {@link IMessagesContextValue | MessagesContext}.\n *\n * Use this as the `logger` parameter when creating a `LogReporter` to get\n * full `Result.report()` integration that feeds into the app's toast/log system.\n *\n * @example\n * ```typescript\n * const { addMessage } = useMessages();\n * const logger = new MessagesLogger(addMessage);\n * const reporter = new LogReporter<unknown>({ logger });\n *\n * // Now Result.report() flows into toasts + log panel\n * someResult.report(reporter, { success: 'info', failure: 'error' });\n * ```\n *\n * @public\n */\nexport class MessagesLogger extends Logging.LoggerBase {\n  private readonly _addMessage: IMessagesContextValue['addMessage'];\n  private readonly _defaultAction: IMessageAction | undefined;\n\n  /**\n   * Creates a new MessagesLogger.\n   * @param addMessage - The addMessage function from MessagesContext\n   * @param logLevel - The minimum log level to display (default: 'info')\n   * @param defaultAction - Optional default action to attach to all messages\n   */\n  public constructor(\n    addMessage: IMessagesContextValue['addMessage'],\n    logLevel?: Logging.ReporterLogLevel,\n    defaultAction?: IMessageAction\n  ) {\n    super(logLevel);\n    this._addMessage = addMessage;\n    this._defaultAction = defaultAction;\n  }\n\n  /**\n   * Routes a formatted log message into the MessagesContext, setting the message `level`\n   * straight through from the log call (lossless). Display styling `severity` is left\n   * undefined so it is derived from the level for display.\n   *\n   * Suppression by threshold is handled upstream by {@link @fgv/ts-utils#Logging.LoggerBase | LoggerBase}\n   * (`shouldLog` against `logLevel`) before this method is invoked.\n   * @param message - The formatted message string\n   * @param level - The {@link @fgv/ts-utils#MessageLogLevel | log level}\n   * @returns Success with the message that was logged\n   * @internal\n   */\n  protected _log(message: string, level: MessageLogLevel): Success<string | undefined> {\n    this._addMessage(level, message, { action: this._defaultAction });\n    return succeed(message);\n  }\n}\n"]}

package/dist/packlets/messages/StatusBar.js

@@ -21,8 +21,9 @@
  */
 import React, { useCallback, useMemo, useState } from 'react';
 import { Logging } from '@fgv/ts-utils';
-import { FunnelIcon, DocumentDuplicateIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { FunnelIcon, DocumentDuplicateIcon, MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import { CheckIcon } from '@heroicons/react/24/solid';
+import { deriveSeverityFromLevel } from './model';
 import { useResponsive } from '../responsive';
 // ============================================================================
 // Severity display config
@@ -49,17 +50,25 @@ const LOG_ROW_COLORS = {
 // 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.
+ * Effective display severity for a message: its explicit `severity` styling override,
+ * or the severity derived from its canonical log level.
  */
-function severityToLogLevel(severity) {
-    return severity === 'success' ? 'info' : severity;
+function effectiveSeverity(message) {
+    var _a;
+    return (_a = message.severity) !== null && _a !== void 0 ? _a : deriveSeverityFromLevel(message.level);
 }
 /**
  * Filter choices exposed in the UI, mapping labels to ReporterLogLevel values.
+ *
+ * The full log-level granularity is exposed (the core gap fix): `Detail+` lets the panel
+ * filter at the same granularity a ts-utils logger records, including `detail` messages
+ * that the previous severity-based filter could not represent. `All` additionally surfaces
+ * `quiet`-level messages (per {@link @fgv/ts-utils#Logging.shouldLog | shouldLog} semantics,
+ * `quiet` is only visible under the `all` threshold).
  */
 const FILTER_LEVELS = [
     { label: 'All', level: 'all' },
+    { label: 'Detail+', level: 'detail' },
     { label: 'Info+', level: 'info' },
     { label: 'Warn+', level: 'warning' },
     { label: 'Error', level: 'error' }
@@ -68,14 +77,15 @@ const FILTER_LEVELS = [
  * Collapsible status bar / log panel at the bottom of the application.
  *
  * Collapsed: shows severity counts.
- * Expanded: filterable, searchable, copyable log of all messages.
+ * Expanded: filterable, searchable, copyable log of all messages, bounded to
+ * {@link IStatusBarProps.maxExpandedHeight} with the list scrolling within the bound.
  * @public
  */
 export function StatusBar(props) {
-    const { messages, onClear, initialFilterLevel } = props;
+    const { messages, onClear, initialFilterLevel, maxExpandedHeight = '40vh', defaultExpanded = false } = props;
     const { layoutMode } = useResponsive();
     const isMobile = layoutMode === 'mobile';
-    const [expanded, setExpanded] = useState(false);
+    const [expanded, setExpanded] = useState(defaultExpanded);
     const [showFilters, setShowFilters] = useState(false);
     const [filterLevel, setFilterLevel] = useState(initialFilterLevel !== null && initialFilterLevel !== void 0 ? initialFilterLevel : 'all');
     const [searchTerm, setSearchTerm] = useState('');
@@ -83,13 +93,13 @@ export function StatusBar(props) {
     const counts = useMemo(() => {
         const result = { info: 0, success: 0, warning: 0, error: 0 };
         for (const msg of messages) {
-            result[msg.severity]++;
+            result[effectiveSeverity(msg)]++;
         }
         return result;
     }, [messages]);
     const filteredMessages = useMemo(() => {
         return messages.filter((msg) => {
-            const passesLevel = Logging.shouldLog(severityToLogLevel(msg.severity), filterLevel);
+            const passesLevel = Logging.shouldLog(msg.level, filterLevel);
             const passesSearch = searchTerm === '' || msg.text.toLowerCase().includes(searchTerm.toLowerCase());
             return passesLevel && passesSearch;
         });
@@ -109,7 +119,7 @@ export function StatusBar(props) {
     }, []);
     const copyAllFiltered = useCallback(() => {
         const text = filteredMessages
-            .map((msg) => `[${msg.severity.toUpperCase()}] ${formatTime(msg.timestamp)} - ${msg.text}`)
+            .map((msg) => `[${msg.level.toUpperCase()}] ${formatTime(msg.timestamp)} - ${msg.text}`)
             .join('\n');
         copyToClipboard(text, '__all__');
     }, [filteredMessages, formatTime, copyToClipboard]);
@@ -122,33 +132,48 @@ export function StatusBar(props) {
                 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' },
+            isMobile && (React.createElement("div", { className: "fixed inset-0 z-40 bg-backdrop", onClick: () => setExpanded(false), "aria-hidden": "true" })),
+            React.createElement("div", { className: `flex flex-col border-t border-border-subtle ${isMobile ? 'relative z-50 bg-surface shadow-xl rounded-t-lg' : ''}`, style: { maxHeight: maxExpandedHeight } },
                 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"))),
+                            React.createElement(FunnelIcon, { className: "h-3.5 w-3.5 text-muted", style: { width: 14, height: 14 } })),
+                        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", style: { width: 14, height: 14 } })) : (React.createElement(DocumentDuplicateIcon, { className: "h-3.5 w-3.5 text-muted", style: { width: 14, height: 14 } }))),
+                        React.createElement("button", { onClick: onClear, className: "text-xs text-muted hover:text-secondary ml-1" }, "Clear"),
+                        React.createElement("button", { onClick: () => setExpanded(false), className: "p-1 rounded hover:bg-surface-raised ml-1", title: "Collapse log panel", "aria-label": "Collapse log panel" },
+                            React.createElement(XMarkIcon, { className: "h-3.5 w-3.5 text-muted", style: { width: 14, height: 14 } })))),
                 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("div", { className: "relative flex-1", style: { position: 'relative' } },
+                        React.createElement(MagnifyingGlassIcon, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted", style: {
+                                position: 'absolute',
+                                left: 8,
+                                top: '50%',
+                                transform: 'translateY(-50%)',
+                                width: 14,
+                                height: 14
+                            } }),
                         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))))))))))));
+                        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", style: {
+                                position: 'absolute',
+                                right: 8,
+                                top: '50%',
+                                transform: 'translateY(-50%)'
+                            }, "aria-label": "Clear search" }, "\u00D7"))))),
+                React.createElement("div", { className: "flex-1 min-h-0 overflow-y-auto" }, 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) => {
+                    const severity = effectiveSeverity(msg);
+                    return (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[severity]}` },
+                        React.createElement("span", { className: `shrink-0 ${SEVERITY_COLORS[severity]}` }, SEVERITY_ICONS[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", style: { width: 12, height: 12 } })) : (React.createElement(DocumentDuplicateIcon, { className: "h-3 w-3 text-muted", style: { width: 12, height: 12 } }))),
+                        React.createElement("span", { className: "shrink-0 text-muted" }, formatTime(msg.timestamp))));
+                }))))))));
 }
 //# sourceMappingURL=StatusBar.js.map

package/dist/packlets/messages/StatusBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.js","sourceRoot":"","sources":["../../../src/packlets/messages/StatusBar.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright (c) 2026 Erik Fortune\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport React, { useCallback, useMemo, useState } from 'react';\n\nimport { Logging } from '@fgv/ts-utils';\nimport {\n  FunnelIcon,\n  DocumentDuplicateIcon,\n  MagnifyingGlassIcon,\n  XMarkIcon\n} from '@heroicons/react/24/outline';\nimport { CheckIcon } from '@heroicons/react/24/solid';\n\nimport { deriveSeverityFromLevel, IMessage, MessageSeverity } from './model';\nimport { useResponsive } from '../responsive';\n\n// ============================================================================\n// Severity display config\n// ============================================================================\n\nconst SEVERITY_ICONS: Record<MessageSeverity, string> = {\n  info: '\\u2139',\n  success: '\\u2713',\n  warning: '\\u26A0',\n  error: '\\u2717'\n};\n\nconst SEVERITY_COLORS: Record<MessageSeverity, string> = {\n  info: 'text-status-info-icon',\n  success: 'text-status-success-icon',\n  warning: 'text-status-warning-icon',\n  error: 'text-status-error-icon'\n};\n\nconst LOG_ROW_COLORS: Record<MessageSeverity, string> = {\n  info: '',\n  success: 'bg-status-success-bg',\n  warning: 'bg-status-warning-bg',\n  error: 'bg-status-error-bg'\n};\n\n// ============================================================================\n// Level filter config\n// ============================================================================\n\n/**\n * Effective display severity for a message: its explicit `severity` styling override,\n * or the severity derived from its canonical log level.\n */\nfunction effectiveSeverity(message: IMessage): MessageSeverity {\n  return message.severity ?? deriveSeverityFromLevel(message.level);\n}\n\n/**\n * Filter choices exposed in the UI, mapping labels to ReporterLogLevel values.\n *\n * The full log-level granularity is exposed (the core gap fix): `Detail+` lets the panel\n * filter at the same granularity a ts-utils logger records, including `detail` messages\n * that the previous severity-based filter could not represent. `All` additionally surfaces\n * `quiet`-level messages (per {@link @fgv/ts-utils#Logging.shouldLog | shouldLog} semantics,\n * `quiet` is only visible under the `all` threshold).\n */\nconst FILTER_LEVELS: ReadonlyArray<{ readonly label: string; readonly level: Logging.ReporterLogLevel }> = [\n  { label: 'All', level: 'all' },\n  { label: 'Detail+', level: 'detail' },\n  { label: 'Info+', level: 'info' },\n  { label: 'Warn+', level: 'warning' },\n  { label: 'Error', level: 'error' }\n] as const;\n\n// ============================================================================\n// Status Bar\n// ============================================================================\n\n/**\n * Props for the StatusBar component.\n * @public\n */\nexport interface IStatusBarProps {\n  readonly messages: ReadonlyArray<IMessage>;\n  readonly onClear: () => void;\n  /** Initial filter level for the log panel. Defaults to 'all'. */\n  readonly initialFilterLevel?: Logging.ReporterLogLevel;\n  /**\n   * Maximum height of the expanded panel as a CSS length (e.g. `'40vh'`, `'320px'`).\n   * The panel is bounded to this height on both desktop and mobile; the message list\n   * scrolls within the bound while the header and filter controls stay fixed. Defaults to `'40vh'`.\n   */\n  readonly maxExpandedHeight?: string;\n  /** Whether the panel is expanded on mount. Defaults to `false` (collapsed). */\n  readonly defaultExpanded?: boolean;\n}\n\n/**\n * Collapsible status bar / log panel at the bottom of the application.\n *\n * Collapsed: shows severity counts.\n * Expanded: filterable, searchable, copyable log of all messages, bounded to\n * {@link IStatusBarProps.maxExpandedHeight} with the list scrolling within the bound.\n * @public\n */\nexport function StatusBar(props: IStatusBarProps): React.ReactElement {\n  const {\n    messages,\n    onClear,\n    initialFilterLevel,\n    maxExpandedHeight = '40vh',\n    defaultExpanded = false\n  } = props;\n  const { layoutMode } = useResponsive();\n  const isMobile = layoutMode === 'mobile';\n  const [expanded, setExpanded] = useState(defaultExpanded);\n  const [showFilters, setShowFilters] = useState(false);\n  const [filterLevel, setFilterLevel] = useState<Logging.ReporterLogLevel>(initialFilterLevel ?? 'all');\n  const [searchTerm, setSearchTerm] = useState('');\n  const [copySuccessId, setCopySuccessId] = useState<string | null>(null);\n\n  const counts = useMemo(() => {\n    const result: Record<MessageSeverity, number> = { info: 0, success: 0, warning: 0, error: 0 };\n    for (const msg of messages) {\n      result[effectiveSeverity(msg)]++;\n    }\n    return result;\n  }, [messages]);\n\n  const filteredMessages = useMemo(() => {\n    return messages.filter((msg) => {\n      const passesLevel = Logging.shouldLog(msg.level, filterLevel);\n      const passesSearch = searchTerm === '' || msg.text.toLowerCase().includes(searchTerm.toLowerCase());\n      return passesLevel && passesSearch;\n    });\n  }, [messages, filterLevel, searchTerm]);\n\n  const isFiltered = filteredMessages.length !== messages.length;\n\n  const formatTime = useCallback((timestamp: number): string => {\n    return new Date(timestamp).toLocaleTimeString();\n  }, []);\n\n  const copyToClipboard = useCallback((text: string, id: string): void => {\n    navigator.clipboard\n      .writeText(text)\n      .then(() => {\n        setCopySuccessId(id);\n        setTimeout(() => setCopySuccessId(null), 2000);\n      })\n      .catch(() => undefined);\n  }, []);\n\n  const copyAllFiltered = useCallback((): void => {\n    const text = filteredMessages\n      .map((msg) => `[${msg.level.toUpperCase()}] ${formatTime(msg.timestamp)} - ${msg.text}`)\n      .join('\\n');\n    copyToClipboard(text, '__all__');\n  }, [filteredMessages, formatTime, copyToClipboard]);\n\n  return (\n    <div className=\"border-t border-border bg-surface\">\n      {/* Collapsed bar */}\n      <button\n        onClick={(): void => setExpanded(!expanded)}\n        className=\"flex items-center justify-between w-full px-4 py-1.5 text-xs text-secondary hover:bg-hover\"\n      >\n        <div className=\"flex items-center gap-4\">\n          {(Object.keys(counts) as MessageSeverity[]).map((severity) =>\n            counts[severity] > 0 ? (\n              <span key={severity} className={`flex items-center gap-1 ${SEVERITY_COLORS[severity]}`}>\n                <span>{SEVERITY_ICONS[severity]}</span>\n                <span>{counts[severity]}</span>\n              </span>\n            ) : null\n          )}\n          {messages.length === 0 && <span className=\"text-muted\">No messages</span>}\n        </div>\n        <span className=\"text-muted\">{expanded ? '\\u25BC' : '\\u25B2'}</span>\n      </button>\n\n      {/* Expanded log — bounded bottom-sheet on mobile, bounded inline panel on desktop.\n          The panel stays in document flow on both layouts (no `fixed` takeover); the mobile\n          backdrop is the only fixed element, dimming the rest and supporting tap-to-dismiss. */}\n      {expanded && (\n        <>\n          {isMobile && (\n            <div\n              className=\"fixed inset-0 z-40 bg-backdrop\"\n              onClick={(): void => setExpanded(false)}\n              aria-hidden=\"true\"\n            />\n          )}\n          <div\n            className={`flex flex-col border-t border-border-subtle ${\n              isMobile ? 'relative z-50 bg-surface shadow-xl rounded-t-lg' : ''\n            }`}\n            style={{ maxHeight: maxExpandedHeight }}\n          >\n            {/* Header toolbar */}\n            <div className=\"flex items-center justify-between px-4 py-1 bg-surface-alt border-b border-border-subtle shrink-0\">\n              <span className=\"text-xs font-medium text-muted\">\n                {isFiltered\n                  ? `${filteredMessages.length} of ${messages.length} messages`\n                  : `${messages.length} message${messages.length !== 1 ? 's' : ''}`}\n              </span>\n              <div className=\"flex items-center gap-1\">\n                <button\n                  onClick={(): void => setShowFilters(!showFilters)}\n                  className={`p-1 rounded hover:bg-surface-raised ${showFilters ? 'bg-surface-raised' : ''}`}\n                  title=\"Filter messages\"\n                >\n                  <FunnelIcon className=\"h-3.5 w-3.5 text-muted\" style={{ width: 14, height: 14 }} />\n                </button>\n                <button\n                  onClick={copyAllFiltered}\n                  className={`p-1 rounded transition-colors ${\n                    copySuccessId === '__all__' ? 'bg-status-success-bg' : 'hover:bg-surface-raised'\n                  }`}\n                  title={copySuccessId === '__all__' ? 'Copied!' : 'Copy filtered messages'}\n                >\n                  {copySuccessId === '__all__' ? (\n                    <CheckIcon\n                      className=\"h-3.5 w-3.5 text-status-success-icon\"\n                      style={{ width: 14, height: 14 }}\n                    />\n                  ) : (\n                    <DocumentDuplicateIcon\n                      className=\"h-3.5 w-3.5 text-muted\"\n                      style={{ width: 14, height: 14 }}\n                    />\n                  )}\n                </button>\n                <button onClick={onClear} className=\"text-xs text-muted hover:text-secondary ml-1\">\n                  Clear\n                </button>\n                <button\n                  onClick={(): void => setExpanded(false)}\n                  className=\"p-1 rounded hover:bg-surface-raised ml-1\"\n                  title=\"Collapse log panel\"\n                  aria-label=\"Collapse log panel\"\n                >\n                  <XMarkIcon className=\"h-3.5 w-3.5 text-muted\" style={{ width: 14, height: 14 }} />\n                </button>\n              </div>\n            </div>\n\n            {/* Filter toolbar */}\n            {showFilters && (\n              <div className=\"px-4 py-1.5 bg-surface-raised border-b border-border-subtle flex items-center gap-3 shrink-0\">\n                {/* Level filter buttons */}\n                <div className=\"flex items-center gap-1\">\n                  {FILTER_LEVELS.map(({ label, level }) => (\n                    <button\n                      key={level}\n                      onClick={(): void => setFilterLevel(level)}\n                      className={`text-xs px-2 py-0.5 rounded border ${\n                        filterLevel === level\n                          ? 'bg-status-info-bg border-status-info-border text-status-info-text'\n                          : 'bg-surface border-border text-secondary hover:bg-hover'\n                      }`}\n                    >\n                      {label}\n                    </button>\n                  ))}\n                </div>\n\n                {/* Search input — `position: relative` inline so the absolutely-positioned\n                    icon + clear-button fallbacks have a containing block even when Tailwind's\n                    `relative` utility is absent. */}\n                <div className=\"relative flex-1\" style={{ position: 'relative' }}>\n                  <MagnifyingGlassIcon\n                    className=\"absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted\"\n                    style={{\n                      position: 'absolute',\n                      left: 8,\n                      top: '50%',\n                      transform: 'translateY(-50%)',\n                      width: 14,\n                      height: 14\n                    }}\n                  />\n                  <input\n                    type=\"text\"\n                    placeholder=\"Search messages...\"\n                    value={searchTerm}\n                    onChange={(e): void => setSearchTerm(e.target.value)}\n                    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\"\n                  />\n                  {searchTerm.length > 0 && (\n                    <button\n                      onClick={(): void => setSearchTerm('')}\n                      className=\"absolute right-2 top-1/2 -translate-y-1/2 text-muted hover:text-secondary text-xs\"\n                      style={{\n                        position: 'absolute',\n                        right: 8,\n                        top: '50%',\n                        transform: 'translateY(-50%)'\n                      }}\n                      aria-label=\"Clear search\"\n                    >\n                      &times;\n                    </button>\n                  )}\n                </div>\n              </div>\n            )}\n\n            {/* Message list — scrolls within the bounded panel; header/filters stay fixed */}\n            <div className=\"flex-1 min-h-0 overflow-y-auto\">\n              {filteredMessages.length === 0 ? (\n                <div className=\"px-4 py-3 text-xs text-muted text-center\">\n                  {isFiltered ? 'No messages match the current filter' : 'No messages'}\n                </div>\n              ) : (\n                filteredMessages.map((msg) => {\n                  const severity = effectiveSeverity(msg);\n                  return (\n                    <div\n                      key={msg.id}\n                      className={`group flex items-start gap-2 px-4 py-1.5 text-xs border-b border-border-subtle ${LOG_ROW_COLORS[severity]}`}\n                    >\n                      <span className={`shrink-0 ${SEVERITY_COLORS[severity]}`}>\n                        {SEVERITY_ICONS[severity]}\n                      </span>\n                      <span className=\"flex-1 text-secondary\">{msg.text}</span>\n                      <button\n                        onClick={(): void => copyToClipboard(msg.text, msg.id)}\n                        className={`shrink-0 p-0.5 rounded transition-colors ${\n                          copySuccessId === msg.id\n                            ? 'opacity-100 bg-status-success-surface'\n                            : 'opacity-0 group-hover:opacity-100 hover:bg-surface-raised'\n                        }`}\n                        title={copySuccessId === msg.id ? 'Copied!' : 'Copy message'}\n                      >\n                        {copySuccessId === msg.id ? (\n                          <CheckIcon\n                            className=\"h-3 w-3 text-status-success-icon\"\n                            style={{ width: 12, height: 12 }}\n                          />\n                        ) : (\n                          <DocumentDuplicateIcon\n                            className=\"h-3 w-3 text-muted\"\n                            style={{ width: 12, height: 12 }}\n                          />\n                        )}\n                      </button>\n                      <span className=\"shrink-0 text-muted\">{formatTime(msg.timestamp)}</span>\n                    </div>\n                  );\n                })\n              )}\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/packlets/messages/Toast.js

@@ -20,7 +20,7 @@
  * SOFTWARE.
  */
 import React, { useEffect } from 'react';
-import { DEFAULT_TOAST_CONFIG } from './model';
+import { DEFAULT_TOAST_CONFIG, deriveSeverityFromLevel } from './model';
 import { useResponsive } from '../responsive';
 // ============================================================================
 // Severity Styles
@@ -36,8 +36,10 @@ const SEVERITY_STYLES = {
  * @public
  */
 export function ToastItem(props) {
+    var _a;
     const { message, onDismiss } = props;
-    const config = DEFAULT_TOAST_CONFIG[message.severity];
+    const severity = (_a = message.severity) !== null && _a !== void 0 ? _a : deriveSeverityFromLevel(message.level);
+    const config = DEFAULT_TOAST_CONFIG[severity];
     const { layoutMode } = useResponsive();
     useEffect(() => {
         if (config.autoDismissMs > 0) {
@@ -46,10 +48,11 @@ export function ToastItem(props) {
         }
         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" },
+    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[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)),
+            message.action &&
+                (message.action.href !== undefined ? (React.createElement("a", { href: message.action.href, target: "_blank", rel: "noopener noreferrer", className: "text-sm font-medium underline hover:no-underline" }, message.action.label)) : (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"))));
 }
 /**

package/dist/packlets/messages/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../src/packlets/messages/Toast.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright (c) 2026 Erik Fortune\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport React, { useEffect } from 'react';\n\nimport { DEFAULT_TOAST_CONFIG, deriveSeverityFromLevel, IMessage, MessageSeverity } from './model';\nimport { useResponsive } from '../responsive';\n\n// ============================================================================\n// Severity Styles\n// ============================================================================\n\nconst SEVERITY_STYLES: Record<MessageSeverity, string> = {\n  info: 'bg-status-info-bg border-status-info-border text-status-info-text',\n  success: 'bg-status-success-bg border-status-success-border text-status-success-text',\n  warning: 'bg-status-warning-bg border-status-warning-border text-status-warning-text',\n  error: 'bg-status-error-bg border-status-error-border text-status-error-text'\n};\n\n// ============================================================================\n// Single Toast\n// ============================================================================\n\n/**\n * Props for a single Toast item.\n * @public\n */\nexport interface IToastItemProps {\n  readonly message: IMessage;\n  readonly onDismiss: (id: string) => void;\n}\n\n/**\n * A single toast notification.\n * @public\n */\nexport function ToastItem(props: IToastItemProps): React.ReactElement {\n  const { message, onDismiss } = props;\n  const severity = message.severity ?? deriveSeverityFromLevel(message.level);\n  const config = DEFAULT_TOAST_CONFIG[severity];\n  const { layoutMode } = useResponsive();\n\n  useEffect(() => {\n    if (config.autoDismissMs > 0) {\n      const timer = setTimeout(() => onDismiss(message.id), config.autoDismissMs);\n      return (): void => clearTimeout(timer);\n    }\n    return undefined;\n  }, [message.id, config.autoDismissMs, onDismiss]);\n\n  return (\n    <div\n      className={`flex items-start gap-3 px-4 py-3 rounded-lg border shadow-lg ${\n        layoutMode === 'mobile' ? 'w-full' : 'max-w-sm'\n      } ${SEVERITY_STYLES[severity]}`}\n      role=\"alert\"\n    >\n      <div className=\"flex-1 text-sm line-clamp-4\" title={message.text}>\n        {message.text}\n      </div>\n      <div className=\"flex items-center gap-2 shrink-0\">\n        {message.action &&\n          (message.action.href !== undefined ? (\n            <a\n              href={message.action.href}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"text-sm font-medium underline hover:no-underline\"\n            >\n              {message.action.label}\n            </a>\n          ) : (\n            <button\n              onClick={message.action.onAction}\n              className=\"text-sm font-medium underline hover:no-underline\"\n            >\n              {message.action.label}\n            </button>\n          ))}\n        <button\n          onClick={(): void => onDismiss(message.id)}\n          className=\"text-current opacity-50 hover:opacity-100\"\n          aria-label=\"Dismiss\"\n        >\n          &times;\n        </button>\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// Toast Container\n// ============================================================================\n\n/**\n * Props for the ToastContainer.\n * @public\n */\nexport interface IToastContainerProps {\n  readonly toasts: ReadonlyArray<IMessage>;\n  readonly onDismiss: (id: string) => void;\n  /** Maximum number of toasts to show simultaneously */\n  readonly maxVisible?: number;\n}\n\n/**\n * Container that renders active toasts in the bottom-right corner.\n * @public\n */\nexport function ToastContainer(props: IToastContainerProps): React.ReactElement | null {\n  const { toasts, onDismiss, maxVisible = 5 } = props;\n  const { layoutMode } = useResponsive();\n  const visible = toasts.slice(-maxVisible);\n\n  if (visible.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={`fixed bottom-16 z-50 flex flex-col gap-2 ${\n        layoutMode === 'mobile' ? 'left-4 right-4' : 'right-4'\n      }`}\n    >\n      {visible.map((toast) => (\n        <ToastItem key={toast.id} message={toast} onDismiss={onDismiss} />\n      ))}\n    </div>\n  );\n}\n"]}

package/dist/packlets/messages/index.js

@@ -2,8 +2,8 @@
  * Messages packlet - observability context, toast system, and log panel.
  * @packageDocumentation
  */
-export { DEFAULT_TOAST_CONFIG, createMessage, generateMessageId } from './model';
-export { MessagesProvider, useMessages } from './MessagesContext';
+export { DEFAULT_TOAST_CONFIG, deriveSeverityFromLevel, createMessage, generateMessageId } from './model';
+export { MessagesProvider, TAILWIND_PROBE_CLASS, TAILWIND_PROBE_HEIGHT_PX, TAILWIND_PROBE_MESSAGE_TEXT, TAILWIND_SETUP_DOCS_URL, useMessages } from './MessagesContext';
 export { ToastItem, ToastContainer } from './Toast';
 export { StatusBar } from './StatusBar';
 export { MessagesLogger } from './MessagesLogger';

package/dist/packlets/messages/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/packlets/messages/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAQL,oBAAoB,EACpB,uBAAuB,EACvB,aAAa,EACb,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAGL,gBAAgB,EAChB,oBAAoB,EACpB,wBAAwB,EACxB,2BAA2B,EAC3B,uBAAuB,EACvB,WAAW,EACZ,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAmD,MAAM,SAAS,CAAC;AAErG,OAAO,EAAE,SAAS,EAAwB,MAAM,aAAa,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,cAAc,EAA+B,MAAM,kBAAkB,CAAC","sourcesContent":["/**\n * Messages packlet - observability context, toast system, and log panel.\n * @packageDocumentation\n */\n\nexport {\n  type MessageSeverity,\n  type IMessage,\n  type IMessageAction,\n  type IMessageHrefAction,\n  type IMessageCallbackAction,\n  type ICreateMessageOptions,\n  type IToastConfig,\n  DEFAULT_TOAST_CONFIG,\n  deriveSeverityFromLevel,\n  createMessage,\n  generateMessageId\n} from './model';\n\nexport {\n  type IMessagesContextValue,\n  type IMessagesProviderProps,\n  MessagesProvider,\n  TAILWIND_PROBE_CLASS,\n  TAILWIND_PROBE_HEIGHT_PX,\n  TAILWIND_PROBE_MESSAGE_TEXT,\n  TAILWIND_SETUP_DOCS_URL,\n  useMessages\n} from './MessagesContext';\n\nexport { ToastItem, ToastContainer, type IToastItemProps, type IToastContainerProps } from './Toast';\n\nexport { StatusBar, type IStatusBarProps } from './StatusBar';\n\nexport { MessagesLogger } from './MessagesLogger';\n\nexport { useLogReporter, type IUseLogReporterOptions } from './useLogReporter';\n"]}

package/dist/packlets/messages/model.js

@@ -19,6 +19,26 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+/**
+ * Derives a display {@link MessageSeverity} from a canonical
+ * {@link @fgv/ts-utils#MessageLogLevel | log level}, used when a message carries no explicit
+ * `severity` styling override. `'success'` is never derived — it is a UI-only affordance.
+ * @param level - The canonical log level.
+ * @returns The styling severity to use for display.
+ * @public
+ */
+export function deriveSeverityFromLevel(level) {
+    switch (level) {
+        case 'warning':
+            return 'warning';
+        case 'error':
+            return 'error';
+        case 'quiet':
+        case 'detail':
+        case 'info':
+            return 'info';
+    }
+}
 /**
  * Default toast configuration by severity.
  * @public
@@ -41,16 +61,23 @@ export function generateMessageId() {
     return `msg-${++_nextId}-${Date.now().toString(36)}`;
 }
 /**
- * Creates a new message.
+ * Creates a new message at the given canonical {@link @fgv/ts-utils#MessageLogLevel | log level}.
+ * The level drives filtering; pass `options.severity` only to override display styling
+ * (e.g. `'success'`).
+ * @param level - The canonical log level (filter axis).
+ * @param text - The message text.
+ * @param options - Optional styling severity and action.
+ * @returns The created message.
  * @public
  */
-export function createMessage(severity, text, action) {
+export function createMessage(level, text, options) {
     return {
         id: generateMessageId(),
-        severity,
+        level,
+        severity: options === null || options === void 0 ? void 0 : options.severity,
         text,
         timestamp: Date.now(),
-        action
+        action: options === null || options === void 0 ? void 0 : options.action
     };
 }
 //# sourceMappingURL=model.js.map

package/dist/packlets/messages/model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../../src/packlets/messages/model.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAuBH;;;;;;;GAOG;AACH,MAAM,UAAU,uBAAuB,CAAC,KAAsB;IAC5D,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,SAAS;YACZ,OAAO,SAAS,CAAC;QACnB,KAAK,OAAO;YACV,OAAO,OAAO,CAAC;QACjB,KAAK,OAAO,CAAC;QACb,KAAK,QAAQ,CAAC;QACd,KAAK,MAAM;YACT,OAAO,MAAM,CAAC;IAClB,CAAC;AACH,CAAC;AAkFD;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAA0C;IACzE,IAAI,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE;IAC7B,OAAO,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE;IAChC,OAAO,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE;IAChC,KAAK,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE;CACnB,CAAC;AAEX,+EAA+E;AAC/E,UAAU;AACV,+EAA+E;AAE/E,IAAI,OAAO,GAAW,CAAC,CAAC;AAExB;;;GAGG;AACH,MAAM,UAAU,iBAAiB;IAC/B,OAAO,OAAO,EAAE,OAAO,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;AACvD,CAAC;AAgBD;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa,CAC3B,KAAsB,EACtB,IAAY,EACZ,OAA+B;IAE/B,OAAO;QACL,EAAE,EAAE,iBAAiB,EAAE;QACvB,KAAK;QACL,QAAQ,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ;QAC3B,IAAI;QACJ,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;QACrB,MAAM,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM;KACxB,CAAC;AACJ,CAAC","sourcesContent":["/*\n * Copyright (c) 2026 Erik Fortune\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n/**\n * Message model types for the observability system.\n * @packageDocumentation\n */\n\nimport { type MessageLogLevel } from '@fgv/ts-utils';\n\n// ============================================================================\n// Message Severity\n// ============================================================================\n\n/**\n * Display styling levels for messages — drives color, icon, and toast behavior.\n *\n * This is the styling axis, orthogonal to the {@link @fgv/ts-utils#MessageLogLevel | log level}\n * filter axis on {@link IMessage.level}. `'success'` lives here (a UI affordance with no\n * log-level analog) and is only ever set explicitly — never derived from a logger bridge.\n * @public\n */\nexport type MessageSeverity = 'info' | 'success' | 'warning' | 'error';\n\n/**\n * Derives a display {@link MessageSeverity} from a canonical\n * {@link @fgv/ts-utils#MessageLogLevel | log level}, used when a message carries no explicit\n * `severity` styling override. `'success'` is never derived — it is a UI-only affordance.\n * @param level - The canonical log level.\n * @returns The styling severity to use for display.\n * @public\n */\nexport function deriveSeverityFromLevel(level: MessageLogLevel): MessageSeverity {\n  switch (level) {\n    case 'warning':\n      return 'warning';\n    case 'error':\n      return 'error';\n    case 'quiet':\n    case 'detail':\n    case 'info':\n      return 'info';\n  }\n}\n\n// ============================================================================\n// Message\n// ============================================================================\n\n/**\n * A single message in the observability stream.\n * @public\n */\nexport interface IMessage {\n  /** Unique message ID */\n  readonly id: string;\n  /**\n   * Canonical {@link @fgv/ts-utils#MessageLogLevel | log level} — drives FILTERING.\n   * Set losslessly from a ts-utils logger when a message originates from the logger bridge.\n   */\n  readonly level: MessageLogLevel;\n  /**\n   * Display styling override (color / icon / toast). Optional; when absent, styling is\n   * derived from {@link IMessage.level} via {@link deriveSeverityFromLevel}. `'success'`\n   * lives here — set explicitly for UI-originated messages, never from a logger bridge.\n   */\n  readonly severity?: MessageSeverity;\n  /** Message text */\n  readonly text: string;\n  /** Timestamp (ms since epoch) */\n  readonly timestamp: number;\n  /** Optional action (e.g., a link or callback) */\n  readonly action?: IMessageAction;\n}\n\n/**\n * An actionable element attached to a message rendered as an external link.\n * Renderers display this as an `<a>` that opens in a new tab with\n * `noopener noreferrer`.\n * @public\n */\nexport interface IMessageHrefAction {\n  /** Action label */\n  readonly label: string;\n  /** External URL to open when the action is clicked. */\n  readonly href: string;\n  readonly onAction?: undefined;\n}\n\n/**\n * An actionable element attached to a message rendered as a callback button.\n * Renderers display this as a `<button>` that invokes {@link IMessageCallbackAction.onAction}.\n * @public\n */\nexport interface IMessageCallbackAction {\n  /** Action label */\n  readonly label: string;\n  /** Callback when the action is triggered. */\n  readonly onAction: () => void;\n  readonly href?: undefined;\n}\n\n/**\n * An actionable element attached to a message — either an external link\n * ({@link IMessageHrefAction}) or a callback ({@link IMessageCallbackAction}).\n * The discriminated-union shape makes \"exactly one of `href` or `onAction`\"\n * an enforced contract at type-check time, so callers cannot accidentally\n * supply both or neither.\n * @public\n */\nexport type IMessageAction = IMessageHrefAction | IMessageCallbackAction;\n\n// ============================================================================\n// Toast Configuration\n// ============================================================================\n\n/**\n * Configuration for toast auto-dismiss behavior.\n * @public\n */\nexport interface IToastConfig {\n  /** Auto-dismiss duration in ms. 0 = no auto-dismiss. */\n  readonly autoDismissMs: number;\n}\n\n/**\n * Default toast configuration by severity.\n * @public\n */\nexport const DEFAULT_TOAST_CONFIG: Record<MessageSeverity, IToastConfig> = {\n  info: { autoDismissMs: 3000 },\n  success: { autoDismissMs: 3000 },\n  warning: { autoDismissMs: 5000 },\n  error: { autoDismissMs: 0 }\n} as const;\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nlet _nextId: number = 0;\n\n/**\n * Generates a unique message ID.\n * @internal\n */\nexport function generateMessageId(): string {\n  return `msg-${++_nextId}-${Date.now().toString(36)}`;\n}\n\n/**\n * Options for {@link createMessage} (and `addMessage`).\n * @public\n */\nexport interface ICreateMessageOptions {\n  /**\n   * Explicit display styling override. Omit to derive styling from the level via\n   * {@link deriveSeverityFromLevel}. Set to `'success'` for UI-originated success messages.\n   */\n  readonly severity?: MessageSeverity;\n  /** Optional action (e.g., a link or callback). */\n  readonly action?: IMessageAction;\n}\n\n/**\n * Creates a new message at the given canonical {@link @fgv/ts-utils#MessageLogLevel | log level}.\n * The level drives filtering; pass `options.severity` only to override display styling\n * (e.g. `'success'`).\n * @param level - The canonical log level (filter axis).\n * @param text - The message text.\n * @param options - Optional styling severity and action.\n * @returns The created message.\n * @public\n */\nexport function createMessage(\n  level: MessageLogLevel,\n  text: string,\n  options?: ICreateMessageOptions\n): IMessage {\n  return {\n    id: generateMessageId(),\n    level,\n    severity: options?.severity,\n    text,\n    timestamp: Date.now(),\n    action: options?.action\n  };\n}\n"]}

package/dist/packlets/messages/useLogReporter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLogReporter.js","sourceRoot":"","sources":["../../../src/packlets/messages/useLogReporter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAWlD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,cAAc,CAAC,OAAgC;IAC7D,MAAM,EAAE,UAAU,EAAE,GAAG,WAAW,EAAE,CAAC;IACrC,MAAM,QAAQ,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAC;IAEnC,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,MAAM,MAAM,GAAG,IAAI,cAAc,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QACxD,OAAO,IAAI,OAAO,CAAC,WAAW,CAAU,EAAE,MAAM,EAAE,CAAC,CAAC;IACtD,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;AAC7B,CAAC","sourcesContent":["/*\n * Copyright (c) 2026 Erik Fortune\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\n/**\n * React hook that provides a LogReporter wired into the MessagesContext.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const reporter = useLogReporter();\n *\n *   const handleSave = () => {\n *     const result = workspace.save(data);\n *     // Automatically shows success toast or error in log panel\n *     result.report(reporter, {\n *       success: { level: 'info', message: () => 'Saved successfully' },\n *       failure: 'error'\n *     });\n *   };\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport { useMemo } from 'react';\n\nimport { Logging } from '@fgv/ts-utils';\n\nimport { useMessages } from './MessagesContext';\nimport { MessagesLogger } from './MessagesLogger';\n\n/**\n * Options for the useLogReporter hook.\n * @public\n */\nexport interface IUseLogReporterOptions {\n  /** Minimum log level (default: 'info') */\n  readonly logLevel?: Logging.ReporterLogLevel;\n}\n\n/**\n * React hook that creates a {@link @fgv/ts-utils#Logging.LogReporter | LogReporter}\n * backed by the MessagesContext.\n *\n * The returned reporter implements both `ILogger` and `IResultReporter<unknown>`,\n * so it can be used with `Result.report()` and direct logging calls.\n *\n * @param options - Optional configuration\n * @returns A LogReporter that routes messages into the toast/log system\n * @public\n */\nexport function useLogReporter(options?: IUseLogReporterOptions): Logging.LogReporter<unknown> {\n  const { addMessage } = useMessages();\n  const logLevel = options?.logLevel;\n\n  return useMemo(() => {\n    const logger = new MessagesLogger(addMessage, logLevel);\n    return new Logging.LogReporter<unknown>({ logger });\n  }, [addMessage, logLevel]);\n}\n"]}