@fgv/ts-app-shell 5.1.0-1

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

@@ -0,0 +1,59 @@
+/**
+ * Message model types for the observability system.
+ * @packageDocumentation
+ */
+/**
+ * Severity levels for messages.
+ * @public
+ */
+export type MessageSeverity = 'info' | 'success' | 'warning' | 'error';
+/**
+ * A single message in the observability stream.
+ * @public
+ */
+export interface IMessage {
+    /** Unique message ID */
+    readonly id: string;
+    /** Message severity */
+    readonly severity: MessageSeverity;
+    /** Message text */
+    readonly text: string;
+    /** Timestamp (ms since epoch) */
+    readonly timestamp: number;
+    /** Optional action (e.g., a link or callback) */
+    readonly action?: IMessageAction;
+}
+/**
+ * An actionable element attached to a message (e.g., "Go to Session" link).
+ * @public
+ */
+export interface IMessageAction {
+    /** Action label */
+    readonly label: string;
+    /** Callback when the action is triggered */
+    readonly onAction: () => void;
+}
+/**
+ * Configuration for toast auto-dismiss behavior.
+ * @public
+ */
+export interface IToastConfig {
+    /** Auto-dismiss duration in ms. 0 = no auto-dismiss. */
+    readonly autoDismissMs: number;
+}
+/**
+ * Default toast configuration by severity.
+ * @public
+ */
+export declare const DEFAULT_TOAST_CONFIG: Record<MessageSeverity, IToastConfig>;
+/**
+ * Generates a unique message ID.
+ * @internal
+ */
+export declare function generateMessageId(): string;
+/**
+ * Creates a new message.
+ * @public
+ */
+export declare function createMessage(severity: MessageSeverity, text: string, action?: IMessageAction): IMessage;
+//# sourceMappingURL=model.d.ts.map

package/lib/packlets/messages/model.js

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

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

@@ -0,0 +1,22 @@
+import { Logging } from '@fgv/ts-utils';
+/**
+ * Options for the useLogReporter hook.
+ * @public
+ */
+export interface IUseLogReporterOptions {
+    /** Minimum log level (default: 'info') */
+    readonly logLevel?: Logging.ReporterLogLevel;
+}
+/**
+ * React hook that creates a {@link @fgv/ts-utils#Logging.LogReporter | LogReporter}
+ * backed by the MessagesContext.
+ *
+ * The returned reporter implements both `ILogger` and `IResultReporter<unknown>`,
+ * so it can be used with `Result.report()` and direct logging calls.
+ *
+ * @param options - Optional configuration
+ * @returns A LogReporter that routes messages into the toast/log system
+ * @public
+ */
+export declare function useLogReporter(options?: IUseLogReporterOptions): Logging.LogReporter<unknown>;
+//# sourceMappingURL=useLogReporter.d.ts.map

package/lib/packlets/messages/useLogReporter.js

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

package/lib/packlets/modal/ConfirmDialog.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+/**
+ * Severity level for the confirm dialog.
+ * Controls the color of the confirm button.
+ * @public
+ */
+export type ConfirmDialogSeverity = 'danger' | 'warning' | 'info';
+/**
+ * Props for the ConfirmDialog component.
+ * @public
+ */
+export interface IConfirmDialogProps {
+    /** Whether the dialog is open */
+    readonly isOpen: boolean;
+    /** Dialog title */
+    readonly title: string;
+    /** Dialog message body */
+    readonly message: React.ReactNode;
+    /** Label for the confirm button (defaults to 'Confirm') */
+    readonly confirmLabel?: string;
+    /** Label for the cancel button (defaults to 'Cancel') */
+    readonly cancelLabel?: string;
+    /** Severity level controlling confirm button color (defaults to 'danger') */
+    readonly severity?: ConfirmDialogSeverity;
+    /** Called when the user confirms */
+    readonly onConfirm: () => void;
+    /** Called when the user cancels or closes */
+    readonly onCancel: () => void;
+}
+/**
+ * Generic confirmation dialog.
+ *
+ * Renders a modal overlay with a title, message, and confirm/cancel buttons.
+ * Closes on Escape key or backdrop click (treated as cancel).
+ *
+ * @public
+ */
+export declare function ConfirmDialog(props: IConfirmDialogProps): React.ReactElement | null;
+//# sourceMappingURL=ConfirmDialog.d.ts.map

package/lib/packlets/modal/ConfirmDialog.js

@@ -0,0 +1,114 @@
+"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.ConfirmDialog = ConfirmDialog;
+const react_1 = __importStar(require("react"));
+const responsive_1 = require("../responsive");
+const severityClasses = {
+    danger: 'bg-status-error-btn hover:bg-status-error-btn-hover focus:ring-status-error-accent',
+    warning: 'bg-status-warning-btn hover:bg-status-warning-btn-hover focus:ring-status-warning-strong',
+    info: 'bg-status-info-btn hover:bg-status-info-btn-hover focus:ring-status-info-icon'
+};
+const severityIconClasses = {
+    danger: 'text-status-error-icon',
+    warning: 'text-status-warning-icon',
+    info: 'text-status-info-icon'
+};
+/**
+ * Generic confirmation dialog.
+ *
+ * Renders a modal overlay with a title, message, and confirm/cancel buttons.
+ * Closes on Escape key or backdrop click (treated as cancel).
+ *
+ * @public
+ */
+function ConfirmDialog(props) {
+    const { isOpen, title, message, confirmLabel = 'Confirm', cancelLabel = 'Cancel', severity = 'danger', onConfirm, onCancel } = props;
+    const { layoutMode } = (0, responsive_1.useResponsive)();
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key === 'Escape') {
+            onCancel();
+        }
+    }, [onCancel]);
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            document.addEventListener('keydown', handleKeyDown);
+            return () => document.removeEventListener('keydown', handleKeyDown);
+        }
+        return undefined;
+    }, [isOpen, handleKeyDown]);
+    if (!isOpen) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center" },
+        react_1.default.createElement("div", { className: "absolute inset-0 bg-backdrop", onClick: onCancel, role: "presentation" }),
+        react_1.default.createElement("div", { className: `relative bg-surface rounded-lg shadow-xl ${layoutMode === 'mobile' ? 'w-[95vw]' : 'max-w-md w-full mx-4'}`, role: "alertdialog", "aria-modal": "true", "aria-labelledby": "confirm-dialog-title", "aria-describedby": "confirm-dialog-message" },
+            react_1.default.createElement("div", { className: "p-6" },
+                react_1.default.createElement("div", { className: "flex items-start gap-4" },
+                    react_1.default.createElement("div", { className: `flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-full ${severity === 'danger'
+                            ? 'bg-status-error-bg'
+                            : severity === 'warning'
+                                ? 'bg-status-warning-bg'
+                                : 'bg-status-info-bg'}` },
+                        react_1.default.createElement("svg", { className: `w-6 h-6 ${severityIconClasses[severity]}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 }, severity === 'info' ? (react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })) : (react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" })))),
+                    react_1.default.createElement("div", { className: "flex-1 min-w-0" },
+                        react_1.default.createElement("h3", { id: "confirm-dialog-title", className: "text-base font-semibold text-primary leading-6" }, title),
+                        react_1.default.createElement("div", { id: "confirm-dialog-message", className: "mt-2 text-sm text-secondary" }, typeof message === 'string' ? react_1.default.createElement("p", null, message) : message))),
+                react_1.default.createElement("div", { className: "mt-6 flex justify-end gap-3" },
+                    react_1.default.createElement("button", { type: "button", onClick: onCancel, className: "px-4 py-2 text-sm font-medium text-secondary bg-surface border border-border rounded-md hover:bg-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-focus-ring transition-colors" }, cancelLabel),
+                    react_1.default.createElement("button", { type: "button", onClick: onConfirm, className: `px-4 py-2 text-sm font-medium text-white rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors ${severityClasses[severity]}` }, confirmLabel))))));
+}
+//# sourceMappingURL=ConfirmDialog.js.map

package/lib/packlets/modal/Modal.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+/**
+ * Props for the Modal component.
+ * @public
+ */
+export interface IModalProps {
+    /** Whether the modal is open */
+    readonly isOpen: boolean;
+    /** Callback to close the modal */
+    readonly onClose: () => void;
+    /** Modal title */
+    readonly title: string;
+    /** Modal content */
+    readonly children: React.ReactNode;
+}
+/**
+ * Generic modal overlay component.
+ * Renders a centered dialog with a backdrop that closes on click or Escape.
+ * @public
+ */
+export declare function Modal(props: IModalProps): React.ReactElement | null;
+//# sourceMappingURL=Modal.d.ts.map

package/lib/packlets/modal/Modal.js

@@ -0,0 +1,91 @@
+"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.Modal = Modal;
+const react_1 = __importStar(require("react"));
+const responsive_1 = require("../responsive");
+/**
+ * Generic modal overlay component.
+ * Renders a centered dialog with a backdrop that closes on click or Escape.
+ * @public
+ */
+function Modal(props) {
+    const { isOpen, onClose, title, children } = props;
+    const { layoutMode } = (0, responsive_1.useResponsive)();
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key === 'Escape') {
+            onClose();
+        }
+    }, [onClose]);
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            document.addEventListener('keydown', handleKeyDown);
+            return () => document.removeEventListener('keydown', handleKeyDown);
+        }
+        return undefined;
+    }, [isOpen, handleKeyDown]);
+    if (!isOpen) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center" },
+        react_1.default.createElement("div", { className: "absolute inset-0 bg-backdrop", onClick: onClose, role: "presentation" }),
+        react_1.default.createElement("div", { className: `relative bg-surface rounded-lg shadow-xl flex flex-col ${layoutMode === 'mobile' ? 'w-[95vw] max-h-[95vh]' : 'max-w-lg w-full mx-4 max-h-[80vh]'}`, role: "dialog", "aria-modal": "true", "aria-label": title },
+            react_1.default.createElement("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border" },
+                react_1.default.createElement("h2", { className: "text-lg font-semibold text-primary" }, title),
+                react_1.default.createElement("button", { onClick: onClose, className: "text-muted hover:text-secondary transition-colors", "aria-label": "Close" }, "\u00D7")),
+            react_1.default.createElement("div", { className: "px-6 py-4 overflow-y-auto flex-1" }, children))));
+}
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +1,7 @@
+/**
+ * Modal packlet - generic overlay dialog component.
+ * @packageDocumentation
+ */
+export { Modal, type IModalProps } from './Modal';
+export { ConfirmDialog, type IConfirmDialogProps, type ConfirmDialogSeverity } from './ConfirmDialog';
+//# sourceMappingURL=index.d.ts.map

package/lib/packlets/modal/index.js

@@ -0,0 +1,12 @@
+"use strict";
+/**
+ * Modal packlet - generic overlay dialog component.
+ * @packageDocumentation
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmDialog = exports.Modal = void 0;
+var Modal_1 = require("./Modal");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
+var ConfirmDialog_1 = require("./ConfirmDialog");
+Object.defineProperty(exports, "ConfirmDialog", { enumerable: true, get: function () { return ConfirmDialog_1.ConfirmDialog; } });
+//# sourceMappingURL=index.js.map

package/lib/packlets/print/PrintEnclosure.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Print enclosure component rendered inside the popup window.
+ * @packageDocumentation
+ */
+import React from 'react';
+/**
+ * Props for {@link PrintEnclosure}.
+ * @public
+ */
+export interface IPrintEnclosureProps {
+    /** Title displayed in the toolbar. */
+    readonly title: string;
+    /** Optional extra controls rendered in the toolbar (e.g. toggles). */
+    readonly toolbarExtras?: React.ReactNode;
+    /** Reference to the popup window (used for print and close actions). */
+    readonly popupWindow: Window;
+    /** Content to display and print. */
+    readonly children: React.ReactNode;
+}
+/**
+ * A container component rendered inside a popup window that provides a
+ * toolbar with Print and Close buttons and renders children as the
+ * printable content.
+ *
+ * @remarks
+ * The toolbar is hidden when printing via CSS (`print-toolbar` class).
+ * Children are rendered at full width with no scroll constraints so
+ * multi-page content flows naturally to the printer.
+ *
+ * @public
+ */
+export declare function PrintEnclosure({ title, toolbarExtras, popupWindow, children }: IPrintEnclosureProps): React.JSX.Element;
+//# sourceMappingURL=PrintEnclosure.d.ts.map

package/lib/packlets/print/PrintEnclosure.js

@@ -0,0 +1,96 @@
+"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.PrintEnclosure = PrintEnclosure;
+/**
+ * Print enclosure component rendered inside the popup window.
+ * @packageDocumentation
+ */
+const react_1 = __importStar(require("react"));
+const outline_1 = require("@heroicons/react/24/outline");
+/**
+ * A container component rendered inside a popup window that provides a
+ * toolbar with Print and Close buttons and renders children as the
+ * printable content.
+ *
+ * @remarks
+ * The toolbar is hidden when printing via CSS (`print-toolbar` class).
+ * Children are rendered at full width with no scroll constraints so
+ * multi-page content flows naturally to the printer.
+ *
+ * @public
+ */
+function PrintEnclosure({ title, toolbarExtras, popupWindow, children }) {
+    const handlePrint = (0, react_1.useCallback)(() => {
+        popupWindow.print();
+    }, [popupWindow]);
+    const handleClose = (0, react_1.useCallback)(() => {
+        popupWindow.close();
+    }, [popupWindow]);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { className: "print-toolbar sticky top-0 z-10 flex items-center justify-between gap-4 bg-surface border-b border-border px-6 py-3 mb-6 shadow-sm" },
+            react_1.default.createElement("h1", { className: "text-lg font-semibold text-primary truncate" }, title),
+            react_1.default.createElement("div", { className: "flex items-center gap-3 shrink-0" },
+                toolbarExtras,
+                react_1.default.createElement("button", { type: "button", onClick: handlePrint, className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white bg-brand-primary hover:bg-brand-primary/90 rounded-md transition-colors" },
+                    react_1.default.createElement(outline_1.PrinterIcon, { className: "w-4 h-4" }),
+                    "Print"),
+                react_1.default.createElement("button", { type: "button", onClick: handleClose, className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-secondary bg-surface-raised hover:bg-surface-raised rounded-md transition-colors" },
+                    react_1.default.createElement(outline_1.XMarkIcon, { className: "w-4 h-4" }),
+                    "Close"))),
+        react_1.default.createElement("div", { className: "max-w-4xl mx-auto px-6" }, children)));
+}
+//# sourceMappingURL=PrintEnclosure.js.map

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

@@ -0,0 +1,7 @@
+/**
+ * Print packlet - popup window for print-optimized content rendering.
+ * @packageDocumentation
+ */
+export { openPrintWindow, type IPrintWindowOptions } from './openPrintWindow';
+export { PrintEnclosure, type IPrintEnclosureProps } from './PrintEnclosure';
+//# sourceMappingURL=index.d.ts.map

package/lib/packlets/print/index.js

@@ -0,0 +1,12 @@
+"use strict";
+/**
+ * Print packlet - popup window for print-optimized content rendering.
+ * @packageDocumentation
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrintEnclosure = exports.openPrintWindow = void 0;
+var openPrintWindow_1 = require("./openPrintWindow");
+Object.defineProperty(exports, "openPrintWindow", { enumerable: true, get: function () { return openPrintWindow_1.openPrintWindow; } });
+var PrintEnclosure_1 = require("./PrintEnclosure");
+Object.defineProperty(exports, "PrintEnclosure", { enumerable: true, get: function () { return PrintEnclosure_1.PrintEnclosure; } });
+//# sourceMappingURL=index.js.map