@fgv/ts-app-shell 5.1.0-1

package/dist/packlets/modal/ConfirmDialog.js

@@ -0,0 +1,78 @@
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { useCallback, useEffect } from 'react';
+import { useResponsive } from '../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
+ */
+export function ConfirmDialog(props) {
+    const { isOpen, title, message, confirmLabel = 'Confirm', cancelLabel = 'Cancel', severity = 'danger', onConfirm, onCancel } = props;
+    const { layoutMode } = useResponsive();
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Escape') {
+            onCancel();
+        }
+    }, [onCancel]);
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener('keydown', handleKeyDown);
+            return () => document.removeEventListener('keydown', handleKeyDown);
+        }
+        return undefined;
+    }, [isOpen, handleKeyDown]);
+    if (!isOpen) {
+        return null;
+    }
+    return (React.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center" },
+        React.createElement("div", { className: "absolute inset-0 bg-backdrop", onClick: onCancel, role: "presentation" }),
+        React.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.createElement("div", { className: "p-6" },
+                React.createElement("div", { className: "flex items-start gap-4" },
+                    React.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.createElement("svg", { className: `w-6 h-6 ${severityIconClasses[severity]}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 }, severity === 'info' ? (React.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.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.createElement("div", { className: "flex-1 min-w-0" },
+                        React.createElement("h3", { id: "confirm-dialog-title", className: "text-base font-semibold text-primary leading-6" }, title),
+                        React.createElement("div", { id: "confirm-dialog-message", className: "mt-2 text-sm text-secondary" }, typeof message === 'string' ? React.createElement("p", null, message) : message))),
+                React.createElement("div", { className: "mt-6 flex justify-end gap-3" },
+                    React.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.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/dist/packlets/modal/Modal.js

@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { useCallback, useEffect } from 'react';
+import { useResponsive } from '../responsive';
+/**
+ * Generic modal overlay component.
+ * Renders a centered dialog with a backdrop that closes on click or Escape.
+ * @public
+ */
+export function Modal(props) {
+    const { isOpen, onClose, title, children } = props;
+    const { layoutMode } = useResponsive();
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Escape') {
+            onClose();
+        }
+    }, [onClose]);
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener('keydown', handleKeyDown);
+            return () => document.removeEventListener('keydown', handleKeyDown);
+        }
+        return undefined;
+    }, [isOpen, handleKeyDown]);
+    if (!isOpen) {
+        return null;
+    }
+    return (React.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center" },
+        React.createElement("div", { className: "absolute inset-0 bg-backdrop", onClick: onClose, role: "presentation" }),
+        React.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.createElement("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border" },
+                React.createElement("h2", { className: "text-lg font-semibold text-primary" }, title),
+                React.createElement("button", { onClick: onClose, className: "text-muted hover:text-secondary transition-colors", "aria-label": "Close" }, "\u00D7")),
+            React.createElement("div", { className: "px-6 py-4 overflow-y-auto flex-1" }, children))));
+}
+//# sourceMappingURL=Modal.js.map

package/dist/packlets/modal/index.js

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

package/dist/packlets/print/PrintEnclosure.js

@@ -0,0 +1,60 @@
+/*
+ * 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.
+ */
+/**
+ * Print enclosure component rendered inside the popup window.
+ * @packageDocumentation
+ */
+import React, { useCallback } from 'react';
+import { PrinterIcon, XMarkIcon } from '@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
+ */
+export function PrintEnclosure({ title, toolbarExtras, popupWindow, children }) {
+    const handlePrint = useCallback(() => {
+        popupWindow.print();
+    }, [popupWindow]);
+    const handleClose = useCallback(() => {
+        popupWindow.close();
+    }, [popupWindow]);
+    return (React.createElement("div", null,
+        React.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.createElement("h1", { className: "text-lg font-semibold text-primary truncate" }, title),
+            React.createElement("div", { className: "flex items-center gap-3 shrink-0" },
+                toolbarExtras,
+                React.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.createElement(PrinterIcon, { className: "w-4 h-4" }),
+                    "Print"),
+                React.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.createElement(XMarkIcon, { className: "w-4 h-4" }),
+                    "Close"))),
+        React.createElement("div", { className: "max-w-4xl mx-auto px-6" }, children)));
+}
+//# sourceMappingURL=PrintEnclosure.js.map

package/dist/packlets/print/index.js

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

package/dist/packlets/print/openPrintWindow.js

@@ -0,0 +1,112 @@
+/*
+ * 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.
+ */
+/**
+ * Opens a popup window for print-optimized content rendering.
+ * @packageDocumentation
+ */
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { PrintEnclosure } from './PrintEnclosure';
+/**
+ * Clones all stylesheet-related elements from the source document head
+ * into the target document head so that styles are available in the popup.
+ */
+function cloneStyles(source, target) {
+    const styles = Array.from(source.querySelectorAll('style'));
+    for (const style of styles) {
+        target.head.appendChild(style.cloneNode(true));
+    }
+    const links = Array.from(source.querySelectorAll('link[rel="stylesheet"]'));
+    for (const link of links) {
+        target.head.appendChild(link.cloneNode(true));
+    }
+}
+/**
+ * Opens a popup window and renders the given React content inside a
+ * {@link PrintEnclosure} with Print and Close toolbar buttons.
+ *
+ * @remarks
+ * Must be called synchronously from a user click handler to avoid
+ * popup blockers. If the popup is blocked, returns `null`.
+ *
+ * Styles are cloned from the parent document so that Tailwind and other
+ * CSS frameworks work in the popup. An independent React root is created
+ * in the popup (not a portal) so the popup is fully self-contained.
+ *
+ * @public
+ */
+export function openPrintWindow(content, options) {
+    const { title, width = 900, height = 700, toolbarExtras } = options;
+    const popup = window.open('', '', `width=${width},height=${height}`);
+    if (!popup) {
+        return null;
+    }
+    popup.document.write(`<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>${title.replace(/</g, '&lt;')}</title>
+  <style>
+    @media screen {
+      body {
+        background: #f9fafb;
+        padding: 2rem;
+        margin: 0;
+      }
+    }
+    @media print {
+      body {
+        margin: 0;
+        padding: 0;
+        background: white;
+      }
+      .print-toolbar {
+        display: none !important;
+      }
+      .break-before-page {
+        break-before: page;
+      }
+      .break-inside-avoid {
+        break-inside: avoid;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div id="print-root"></div>
+</body>
+</html>`);
+    popup.document.close();
+    cloneStyles(document, popup.document);
+    const container = popup.document.getElementById('print-root');
+    if (!container) {
+        popup.close();
+        return null;
+    }
+    const root = createRoot(container);
+    root.render(React.createElement(PrintEnclosure, { title: title, toolbarExtras: toolbarExtras, popupWindow: popup }, content));
+    popup.addEventListener('beforeunload', () => {
+        root.unmount();
+    });
+    return popup;
+}
+//# sourceMappingURL=openPrintWindow.js.map

package/dist/packlets/responsive/ResponsiveProvider.js

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { createContext, useContext } from 'react';
+import { useResponsiveLayout } from './useResponsiveLayout';
+const ResponsiveContext = createContext(undefined);
+/**
+ * Provides responsive layout information to the component tree via context.
+ *
+ * Wrap your app (or a subtree) with this provider. Descendants use
+ * {@link useResponsive} to read the current layout mode, device type, etc.
+ *
+ * @example
+ * ```tsx
+ * <ResponsiveProvider>
+ *   <App />
+ * </ResponsiveProvider>
+ * ```
+ * @public
+ */
+export function ResponsiveProvider({ forceLayoutMode, children }) {
+    const layout = useResponsiveLayout(forceLayoutMode);
+    return React.createElement(ResponsiveContext.Provider, { value: layout }, children);
+}
+/**
+ * Access the current responsive layout information.
+ *
+ * Must be called within a {@link ResponsiveProvider}.
+ * @public
+ */
+export function useResponsive() {
+    const context = useContext(ResponsiveContext);
+    if (!context) {
+        throw new Error('useResponsive must be used within a ResponsiveProvider');
+    }
+    return context;
+}
+//# sourceMappingURL=ResponsiveProvider.js.map

package/dist/packlets/responsive/index.js

@@ -0,0 +1,7 @@
+/**
+ * Responsive layout detection and context provider.
+ * @packageDocumentation
+ */
+export { useResponsiveLayout } from './useResponsiveLayout';
+export { ResponsiveProvider, useResponsive } from './ResponsiveProvider';
+//# sourceMappingURL=index.js.map

package/dist/packlets/responsive/useResponsiveLayout.js

@@ -0,0 +1,118 @@
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { useState, useEffect } from 'react';
+/**
+ * Breakpoints for responsive design (in CSS pixels).
+ */
+const BREAKPOINTS = {
+    /** At or below this width, use mobile layout */
+    mobile: 640,
+    /** At or below this width, use compact layout */
+    compact: 1024
+};
+/**
+ * Detect if the device supports touch input.
+ */
+function detectTouchSupport() {
+    var _a;
+    return ('ontouchstart' in window ||
+        navigator.maxTouchPoints > 0 ||
+        ((_a = navigator.msMaxTouchPoints) !== null && _a !== void 0 ? _a : 0) > 0);
+}
+/**
+ * Determine device type from viewport dimensions and touch capability.
+ */
+function determineDeviceType(width, isTouch) {
+    if (width <= BREAKPOINTS.mobile) {
+        return 'mobile';
+    }
+    if (width <= BREAKPOINTS.compact && isTouch) {
+        return 'tablet';
+    }
+    return 'desktop';
+}
+/**
+ * Determine the structural layout mode from viewport width.
+ */
+function determineLayoutMode(width) {
+    if (width <= BREAKPOINTS.mobile) {
+        return 'mobile';
+    }
+    if (width <= BREAKPOINTS.compact) {
+        return 'compact';
+    }
+    return 'full';
+}
+/**
+ * Compute the full layout info from current viewport state.
+ */
+function computeLayout(forceLayoutMode) {
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    const isTouchDevice = detectTouchSupport();
+    const orientation = width > height ? 'landscape' : 'portrait';
+    const deviceType = determineDeviceType(width, isTouchDevice);
+    const layoutMode = forceLayoutMode !== null && forceLayoutMode !== void 0 ? forceLayoutMode : determineLayoutMode(width);
+    return {
+        deviceType,
+        orientation,
+        layoutMode,
+        screenWidth: width,
+        screenHeight: height,
+        isTouchDevice
+    };
+}
+/**
+ * Hook that tracks responsive layout information for the current viewport.
+ *
+ * Listens to `resize` and `orientationchange` events and recomputes layout
+ * on every change. Use the `layoutMode` field to drive structural rendering
+ * decisions (e.g., sidebar as drawer vs. fixed panel).
+ *
+ * @param forceLayoutMode - Optional override for testing or storybook use.
+ * @public
+ */
+export function useResponsiveLayout(forceLayoutMode) {
+    const [layout, setLayout] = useState(() => computeLayout(forceLayoutMode));
+    useEffect(() => {
+        if (forceLayoutMode) {
+            return;
+        }
+        function updateLayout() {
+            setLayout(computeLayout());
+        }
+        window.addEventListener('resize', updateLayout);
+        const onOrientationChange = () => {
+            // Small delay to let the browser update viewport dimensions
+            setTimeout(updateLayout, 100);
+        };
+        window.addEventListener('orientationchange', onOrientationChange);
+        // Sync on mount in case viewport changed between SSR and hydration
+        updateLayout();
+        return () => {
+            window.removeEventListener('resize', updateLayout);
+            window.removeEventListener('orientationchange', onOrientationChange);
+        };
+    }, [forceLayoutMode]);
+    return layout;
+}
+//# sourceMappingURL=useResponsiveLayout.js.map