@molecule/app-ui-react 1.1.0 → 1.2.1

package/dist/components/LoadErrorBanner.d.ts

@@ -0,0 +1,71 @@
+/**
+ * LoadErrorBanner component — the shared "load failed" banner with Retry.
+ *
+ * The fleet hand-rolled this in dozens of apps (an error line + a Retry
+ * button, each drifting in wording, styling, and pending behavior). Use it
+ * wherever a page/section fetch FAILS — it pairs with `Skeleton` for the
+ * loading state and `EmptyState` for the empty one. For form-submit errors
+ * use `<Alert status="error">` instead; this banner is specifically the
+ * load-failure-with-retry pattern, and its Retry button owns the
+ * pending/disabled state so the caller cannot double-fire it.
+ *
+ * @example
+ * ```tsx
+ * import { LoadErrorBanner } from '@molecule/app-ui-react'
+ *
+ * {error ? (
+ *   <LoadErrorBanner
+ *     message={t('decks.loadFailed', {}, { defaultValue: 'Could not load decks.' })}
+ *     onRetry={load} // return the promise — pending state is automatic
+ *   />
+ * ) : (
+ *   <DeckList decks={decks} />
+ * )}
+ * ```
+ *
+ * @remarks
+ * Pass `onRetry` as a promise-returning function; while it is pending the
+ * retry button is disabled and shows a localized "Retrying…" label, and a
+ * rejection is NOT swallowed silently — the banner stays (callers render
+ * persistent failure by keeping `error` set, which keeps this banner
+ * mounted). Omit `onRetry` and no retry button renders (display-only
+ * failure). `data-mol-id` on the ROOT goes through rest props (fleet
+ * locator convention); the retry button carries `retryMolId`
+ * (default `load-error-retry`) so e2e can click it without knowing the
+ * page. Announced politely (`role="status"` via the inner Alert's
+ * `live={false}`) — a load failure on initial render has nothing to
+ * interrupt.
+ *
+ * @module
+ */
+import type { JSX } from 'react';
+import React from 'react';
+/**
+ * Props for {@link LoadErrorBanner}. Rest props are forwarded to the root
+ * `<div>`, so they are typed as its attributes.
+ */
+export interface LoadErrorBannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The primary error line (e.g. the localized "Could not load X."). */
+    message: React.ReactNode;
+    /** Secondary line under the message (status code, hint). */
+    detail?: React.ReactNode;
+    /**
+     * Called when Retry is clicked. Return the promise; while pending, the
+     * button is disabled and shows "Retrying…". Omit for a display-only
+     * banner.
+     */
+    onRetry?: () => void | Promise<void>;
+    /** Retry-button label. Falls back to a localized "Retry". */
+    retryLabel?: React.ReactNode;
+    /** `data-mol-id` for the retry button (default `load-error-retry`). */
+    retryMolId?: string;
+    /** Extra content between message and retry row (e.g. an error code). */
+    children?: React.ReactNode;
+}
+/**
+ * Error banner with an owned pending-state Retry button.
+ *
+ * @param props - Component props (see {@link LoadErrorBannerProps}).
+ */
+export declare function LoadErrorBanner({ message, detail, onRetry, retryLabel, retryMolId, children, ...rest }: LoadErrorBannerProps): JSX.Element;
+//# sourceMappingURL=LoadErrorBanner.d.ts.map

package/dist/components/LoadErrorBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadErrorBanner.d.ts","sourceRoot":"","sources":["../../src/components/LoadErrorBanner.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAQvC;;;GAGG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,CACX;IACC,uEAAuE;IACvE,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACpC,6DAA6D;IAC7D,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,uEAAuE;IACvE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAA+B,EAC/B,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CA4CpC"}

package/dist/components/LoadErrorBanner.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+import { Alert } from './Alert.js';
+import { Button } from './Button.js';
+/**
+ * Error banner with an owned pending-state Retry button.
+ *
+ * @param props - Component props (see {@link LoadErrorBannerProps}).
+ */
+export function LoadErrorBanner({ message, detail, onRetry, retryLabel, retryMolId = 'load-error-retry', children, ...rest }) {
+    const cm = getClassMap();
+    const { t } = useTranslation();
+    const [pending, setPending] = useState(false);
+    const handleRetry = () => {
+        if (!onRetry || pending)
+            return;
+        setPending(true);
+        // A rejected retry means "still failing": the caller owns that error and
+        // keeps showing the banner, so ignoring it here only stops it becoming an
+        // unhandled rejection.
+        void Promise.resolve(onRetry())
+            .catch((_error) => undefined)
+            .finally(() => setPending(false));
+    };
+    return (_jsx("div", { ...rest, children: _jsx(Alert, { status: "error", live: false, children: _jsxs("div", { className: cm.stack(2), children: [_jsx("p", { className: cm.textSize('sm'), children: message }), detail ? (_jsx("p", { className: cm.cn(cm.textSize('xs'), 'text-on-surface-variant'), children: detail })) : null, children, onRetry ? (_jsx("div", { className: cm.flex({ justify: 'start' }), children: _jsx(Button, { variant: "outline", size: "sm", onClick: handleRetry, disabled: pending, "data-mol-id": retryMolId, children: pending
+                                ? t('loadError.retrying', {}, { defaultValue: 'Retrying…' })
+                                : (retryLabel ?? t('loadError.retry', {}, { defaultValue: 'Retry' })) }) })) : null] }) }) }));
+}
+//# sourceMappingURL=LoadErrorBanner.js.map

package/dist/components/LoadErrorBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadErrorBanner.js","sourceRoot":"","sources":["../../src/components/LoadErrorBanner.tsx"],"names":[],"mappings":";AA0CA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AA4BpC;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,EACP,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,GAAG,kBAAkB,EAC/B,QAAQ,EACR,GAAG,IAAI,EACc;IACrB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IACxB,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE7C,MAAM,WAAW,GAAG,GAAS,EAAE;QAC7B,IAAI,CAAC,OAAO,IAAI,OAAO;YAAE,OAAM;QAC/B,UAAU,CAAC,IAAI,CAAC,CAAA;QAChB,yEAAyE;QACzE,0EAA0E;QAC1E,uBAAuB;QACvB,KAAK,OAAO,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;aAC5B,KAAK,CAAC,CAAC,MAAe,EAAE,EAAE,CAAC,SAAS,CAAC;aACrC,OAAO,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAA;IACrC,CAAC,CAAA;IAED,OAAO,CACL,iBAAS,IAAI,YACX,KAAC,KAAK,IAAC,MAAM,EAAC,OAAO,EAAC,IAAI,EAAE,KAAK,YAC/B,eAAK,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,aACzB,YAAG,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAG,OAAO,GAAK,EAC7C,MAAM,CAAC,CAAC,CAAC,CACR,YAAG,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,yBAAyB,CAAC,YAAG,MAAM,GAAK,CAChF,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,EACR,OAAO,CAAC,CAAC,CAAC,CACT,cAAK,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,YAC3C,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,OAAO,iBACJ,UAAU,YAEtB,OAAO;gCACN,CAAC,CAAC,CAAC,CAAC,oBAAoB,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC;gCAC5D,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,iBAAiB,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC,GAChE,GACL,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,GACA,GACJ,CACP,CAAA;AACH,CAAC"}

package/dist/components/PromptDialog.d.ts

@@ -0,0 +1,91 @@
+/**
+ * PromptDialog component — the shared "ask for a short string" modal.
+ *
+ * The shared home for what `window.prompt` used to do (renaming, renaming a
+ * board, creating a tag, "invite by email"). `window.prompt` is broken
+ * headless (it hangs e2e) and awkward on touch; this renders the same
+ * interaction as a real dialog built on {@link Modal}. For a confirm WITHOUT
+ * an input use {@link ConfirmDialog}; for an INLINE two-click arm/commit
+ * button use {@link ConfirmButton}.
+ *
+ * @example
+ * ```tsx
+ * import { PromptDialog } from '@molecule/app-ui-react'
+ *
+ * <PromptDialog
+ *   open={renameOpen}
+ *   onClose={() => setRenameOpen(false)}
+ *   title={t('board.renameTitle', {}, { defaultValue: 'Rename board' })}
+ *   placeholder={t('board.namePlaceholder', {}, { defaultValue: 'Board name' })}
+ *   initialValue={board.name}
+ *   confirmLabel={t('common.save', {}, { defaultValue: 'Save' })}
+ *   onSubmit={async (name) => {
+ *     await renameBoard(board.id, name) // resolve → dialog closes
+ *   }}
+ * />
+ * ```
+ *
+ * @remarks
+ * `onSubmit` receives the RAW entered value (no trimming — the caller owns
+ * validation). Resolve it and the dialog closes and resets; reject or throw
+ * and the dialog STAYS OPEN with the value intact — render your error
+ * message through `children` (e.g. an `<Alert status="error">`), since the
+ * rejection itself is deliberately swallowed here. While the promise is
+ * pending the input and both buttons are disabled, so the action cannot
+ * double-fire. Enter submits; Escape and the backdrop cancel exactly like a
+ * Modal. Optional `inputMolId` / `confirmMolId` / `cancelMolId` render as
+ * `data-mol-id` attributes for e2e locators; the buttons are also
+ * text-labeled so `getByRole('button', { name })` reaches them.
+ *
+ * WIZARD GOTCHA (learned the hard way, fleet migration 2026-09-24): a
+ * fulfilled submit calls `onClose()` — "close", not "cancel". A multi-stage
+ * flow that advances its stage INSIDE `onSubmit` gets clobbered if its
+ * `onClose` unconditionally resets to idle (the auto-close fires right
+ * after the stage advance). Make `onClose` stage-aware via functional
+ * state (`setStage((cur) => (cur === 'name' ? 'idle' : cur))`) so cancel
+ * still resets but the post-submit auto-close doesn't undo the advance.
+ *
+ * @module
+ */
+import React, { type JSX } from 'react';
+/** Props for {@link PromptDialog}. */
+export interface PromptDialogProps {
+    /** Whether the dialog is open. */
+    open: boolean;
+    /** Called when the dialog should close (escape, backdrop, cancel, or a fulfilled {@link PromptDialogProps.onSubmit}). */
+    onClose: () => void;
+    /** Dialog heading. */
+    title: React.ReactNode;
+    /** Explanatory line under the title. */
+    description?: React.ReactNode;
+    /** Input placeholder. */
+    placeholder?: string;
+    /** Value the input starts from every time the dialog opens. */
+    initialValue?: string;
+    /**
+     * Called with the entered value on confirm. Resolve to close the dialog;
+     * reject or throw to keep it open (show the error via {@link PromptDialogProps.children}).
+     */
+    onSubmit: (value: string) => void | Promise<void>;
+    /** Confirm-button label. Falls back to a localized "Confirm". */
+    confirmLabel?: React.ReactNode;
+    /** Cancel-button label. Falls back to a localized "Cancel". */
+    cancelLabel?: React.ReactNode;
+    /** Render the confirm button in the error color (e.g. an irreversible reset). */
+    destructive?: boolean;
+    /** `data-mol-id` for the text input. */
+    inputMolId?: string;
+    /** `data-mol-id` for the confirm button. */
+    confirmMolId?: string;
+    /** `data-mol-id` for the cancel button. */
+    cancelMolId?: string;
+    /** Extra body content under the input (error banners, hints). */
+    children?: React.ReactNode;
+}
+/**
+ * Modal that asks the user for a short string, replacing `window.prompt`.
+ *
+ * @param props - Component props (see {@link PromptDialogProps}).
+ */
+export declare function PromptDialog({ open, onClose, title, description, placeholder, initialValue, onSubmit, confirmLabel, cancelLabel, destructive, inputMolId, confirmMolId, cancelMolId, children, }: PromptDialogProps): JSX.Element;
+//# sourceMappingURL=PromptDialog.d.ts.map

package/dist/components/PromptDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptDialog.d.ts","sourceRoot":"","sources":["../../src/components/PromptDialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AAEH,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAAuB,MAAM,OAAO,CAAA;AAS5D,sCAAsC;AACtC,MAAM,WAAW,iBAAiB;IAChC,kCAAkC;IAClC,IAAI,EAAE,OAAO,CAAA;IACb,yHAAyH;IACzH,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,sBAAsB;IACtB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,wCAAwC;IACxC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACjD,iEAAiE;IACjE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,+DAA+D;IAC/D,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,iFAAiF;IACjF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,WAAW,EACX,WAAW,EACX,YAAiB,EACjB,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,WAAmB,EACnB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,QAAQ,GACT,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAoEjC"}

package/dist/components/PromptDialog.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * PromptDialog component — the shared "ask for a short string" modal.
+ *
+ * The shared home for what `window.prompt` used to do (renaming, renaming a
+ * board, creating a tag, "invite by email"). `window.prompt` is broken
+ * headless (it hangs e2e) and awkward on touch; this renders the same
+ * interaction as a real dialog built on {@link Modal}. For a confirm WITHOUT
+ * an input use {@link ConfirmDialog}; for an INLINE two-click arm/commit
+ * button use {@link ConfirmButton}.
+ *
+ * @example
+ * ```tsx
+ * import { PromptDialog } from '@molecule/app-ui-react'
+ *
+ * <PromptDialog
+ *   open={renameOpen}
+ *   onClose={() => setRenameOpen(false)}
+ *   title={t('board.renameTitle', {}, { defaultValue: 'Rename board' })}
+ *   placeholder={t('board.namePlaceholder', {}, { defaultValue: 'Board name' })}
+ *   initialValue={board.name}
+ *   confirmLabel={t('common.save', {}, { defaultValue: 'Save' })}
+ *   onSubmit={async (name) => {
+ *     await renameBoard(board.id, name) // resolve → dialog closes
+ *   }}
+ * />
+ * ```
+ *
+ * @remarks
+ * `onSubmit` receives the RAW entered value (no trimming — the caller owns
+ * validation). Resolve it and the dialog closes and resets; reject or throw
+ * and the dialog STAYS OPEN with the value intact — render your error
+ * message through `children` (e.g. an `<Alert status="error">`), since the
+ * rejection itself is deliberately swallowed here. While the promise is
+ * pending the input and both buttons are disabled, so the action cannot
+ * double-fire. Enter submits; Escape and the backdrop cancel exactly like a
+ * Modal. Optional `inputMolId` / `confirmMolId` / `cancelMolId` render as
+ * `data-mol-id` attributes for e2e locators; the buttons are also
+ * text-labeled so `getByRole('button', { name })` reaches them.
+ *
+ * WIZARD GOTCHA (learned the hard way, fleet migration 2026-09-24): a
+ * fulfilled submit calls `onClose()` — "close", not "cancel". A multi-stage
+ * flow that advances its stage INSIDE `onSubmit` gets clobbered if its
+ * `onClose` unconditionally resets to idle (the auto-close fires right
+ * after the stage advance). Make `onClose` stage-aware via functional
+ * state (`setStage((cur) => (cur === 'name' ? 'idle' : cur))`) so cancel
+ * still resets but the post-submit auto-close doesn't undo the advance.
+ *
+ * @module
+ */
+import { useEffect, useState } from 'react';
+import { useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+import { Button } from './Button.js';
+import { Input } from './Input.js';
+import { Modal } from './Modal.js';
+/**
+ * Modal that asks the user for a short string, replacing `window.prompt`.
+ *
+ * @param props - Component props (see {@link PromptDialogProps}).
+ */
+export function PromptDialog({ open, onClose, title, description, placeholder, initialValue = '', onSubmit, confirmLabel, cancelLabel, destructive = false, inputMolId, confirmMolId, cancelMolId, children, }) {
+    const cm = getClassMap();
+    const { t } = useTranslation();
+    const [value, setValue] = useState(initialValue);
+    const [pending, setPending] = useState(false);
+    // Re-seed from initialValue each open so a reopened dialog shows the
+    // CURRENT value, not whatever the user typed last time.
+    useEffect(() => {
+        if (open) {
+            setValue(initialValue);
+            setPending(false);
+        }
+    }, [open, initialValue]);
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (pending)
+            return;
+        setPending(true);
+        void Promise.resolve(onSubmit(value))
+            .then(() => onClose())
+            .catch(() => {
+            // Deliberate: a rejection keeps the dialog open (see @remarks);
+            // the caller renders the error through `children`.
+            setPending(false);
+        });
+    };
+    return (_jsx(Modal, { open: open, onClose: pending ? () => { } : onClose, children: _jsx("form", { onSubmit: handleSubmit, children: _jsxs("div", { className: cm.stack(3), children: [_jsx("h2", { className: cm.cn(cm.textSize('lg'), cm.fontWeight('bold')), children: title }), description ? _jsx("p", { className: cm.textSize('sm'), children: description }) : null, _jsx(Input, { value: value, onChange: (e) => setValue(e.target.value), placeholder: placeholder, "aria-label": typeof title === 'string' ? title : placeholder, disabled: pending, autoFocus: true, "data-mol-id": inputMolId }), children, _jsxs("div", { className: cm.flex({ justify: 'end', gap: 'sm' }), children: [_jsx(Button, { type: "button", variant: "ghost", onClick: onClose, disabled: pending, "data-mol-id": cancelMolId, children: cancelLabel ?? t('prompt.cancel', {}, { defaultValue: 'Cancel' }) }), _jsx(Button, { type: "submit", variant: "solid", color: destructive ? 'error' : 'primary', disabled: pending, "data-mol-id": confirmMolId, children: confirmLabel ?? t('prompt.confirm', {}, { defaultValue: 'Confirm' }) })] })] }) }) }));
+}
+//# sourceMappingURL=PromptDialog.js.map

package/dist/components/PromptDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptDialog.js","sourceRoot":"","sources":["../../src/components/PromptDialog.tsx"],"names":[],"mappings":"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"}

package/dist/components/ResponsiveAppShell.d.ts

@@ -0,0 +1,327 @@
+/**
+ * ResponsiveAppShell — the shared responsive app shell: a top bar, a desktop
+ * sidebar (≥768px) and a mobile nav drawer (<768px) around one content region.
+ *
+ * Roughly 89 flagship apps hand-roll this shell in ~15 drifting variants
+ * (inline-style panels, `max-width: 768px` fenceposts, CSS-hidden duplicate
+ * shells, hydration-spinner gates). This family is the fleet standard; it
+ * follows the QA-hardened shape the best templates converged on
+ * (`time-tracking`'s `useIsDesktop`, `blog`'s drawer, `weather-dashboard`'s
+ * one-shell-per-breakpoint doctrine).
+ *
+ * Compose it:
+ *
+ * ```tsx
+ * import { ResponsiveAppShell } from '@molecule/app-ui-react'
+ * import { NavLink, Outlet } from 'react-router'
+ *
+ * const nav = (
+ *   <>
+ *     <NavLink to="/dashboard">Dashboard</NavLink>
+ *     <NavLink to="/projects">Projects</NavLink>
+ *     <NavLink to="/reports">Reports</NavLink>
+ *   </>
+ * )
+ *
+ * export function Shell() {
+ *   return (
+ *     <ResponsiveAppShell>
+ *       <ResponsiveAppShell.TopBar
+ *         brand={<NavLink to="/dashboard">Timetrack</NavLink>}
+ *         actions={<UserMenu />}
+ *       />
+ *       <ResponsiveAppShell.Sidebar>{nav}</ResponsiveAppShell.Sidebar>
+ *       <ResponsiveAppShell.Drawer>{nav}</ResponsiveAppShell.Drawer>
+ *       <ResponsiveAppShell.Content>
+ *         <Outlet />
+ *       </ResponsiveAppShell.Content>
+ *     </ResponsiveAppShell>
+ *   )
+ * }
+ * ```
+ *
+ * @remarks
+ * - **Breakpoint: 768px** — the fleet-wide `md` breakpoint. Exactly ONE shell
+ *   is MOUNTED per breakpoint: `Sidebar` renders only ≥768px, `Drawer` (and
+ *   the menu trigger) only below. This is deliberate — rendering both and
+ *   hiding one with CSS (`hidden md:block` style) leaves duplicate `<main>`/
+ *   `<nav>` landmarks in the accessibility tree, double-mounts route content
+ *   (double fetches, duplicate text matches for e2e locators). CSS-only
+ *   responsive pairs remain available for NON-duplicating surface swaps via
+ *   `hiddenBelow()` / `hiddenFrom()` on the UIClassMap. The `useIsDesktop`
+ *   hook is exported for apps that need the same signal elsewhere: it reads
+ *   `matchMedia` synchronously on first client render (no mounted-then-swap
+ *   flicker in this CSR-only package) and subscribes to `change` events; the
+ *   initializer is guarded (`typeof window`/`matchMedia`) so SSR and
+ *   non-browser harnesses render the mobile shell instead of crashing.
+ * - **a11y contract.** `TopBar` renders the `<header>` landmark and its menu
+ *   trigger carries `aria-label` + `aria-expanded` + `aria-controls` (the
+ *   panel id comes from `useId()`). `Sidebar` renders `<aside>` with a
+ *   `<nav aria-label>` landmark around its children. `Drawer` implements the
+ *   WAI-ARIA APG dialog pattern on mobile: `role="dialog"` + `aria-modal`
+ *   panel, focus moves into the panel on open and returns to the trigger on
+ *   close, Tab/Shift+Tab are trapped inside, Escape and a backdrop click
+ *   close, and body scroll is locked (reference-counted, so a `<Modal>`
+ *   confirm stacked above the drawer never unlocks early). `Content` renders
+ *   the `<main>` landmark. Marking the CURRENT nav item is the CONSUMER's job
+ *   — pass `aria-current="page"` from your nav children (the shell renders
+ *   them pass-through).
+ * - **Behavior.** The drawer auto-closes on SPA navigation (react-router
+ *   location change) so it never sticks over the next page, and when the
+ *   viewport crosses to desktop while it is open. Apps need an
+ *   `I18nProvider` (all visible labels go through `t(key, {}, {
+ *   defaultValue })`) and a react-router context; without the router the
+ *   shell still renders — it just cannot auto-close on navigation.
+ * - **Locators.** Every fixed element carries a `data-mol-id` default,
+ *   overridable per sub-component: `shell-topbar`, `shell-drawer-open`
+ *   (trigger), `shell-sidebar`, `shell-drawer` (panel), `shell-drawer-close`,
+ *   `shell-content`, and `shell-root` on the root `<div>`.
+ * - **ClassMap gaps routed around (Rule 5 inline-style exceptions, each
+ *   commented at the call site).** The UIClassMap `drawer` token is a
+ *   RIGHT-anchored settings-panel shape (`!right-0 … !max-w-sm`) and cannot
+ *   serve a left nav drawer; there is no standalone `overflowY: auto`,
+ *   `z-index`, or `left: 0` token. The shell therefore applies small
+ *   documented inline styles for the drawer/sidebar geometry (pixel width à
+ *   la `@molecule/app-sidebar-layout-react`, `max-width: 85vw`,
+ *   `overflow-y: auto`, stacking `zIndex`) instead of widening UIClassMap —
+ *   a `navDrawer()`-style token belongs in `@molecule/app-ui` + the ClassMap
+ *   bond, both outside this package.
+ * - **Siblings.** `@molecule/app-sidebar-layout-react` `SidebarLayout` is the
+ *   router-coupled DESKTOP-only sidebar (no mobile collapse);
+ *   `@molecule/app-shell-layout-react` `AppShellLayout` is the marketing
+ *   header/footer frame. THIS family is the responsive authenticated shell.
+ *   Do not nest `SidebarLayout` inside it — pick one shell per app.
+ *
+ * @module
+ */
+import { type JSX, type ReactNode } from 'react';
+/**
+ * Whether the viewport is at least 768px wide (the fleet's `md` breakpoint).
+ *
+ * Reads `window.matchMedia` synchronously in the state initializer, so the
+ * FIRST client render is already correct — no mobile-then-desktop swap frame
+ * (this is time-tracking's QA-hardened version; the naive
+ * "state starts false, sync in an effect" variant mounts the wrong shell for
+ * one frame and double-fetches route data on desktop). Subscribes to
+ * `change` events afterwards. Guarded for non-browser environments
+ * (SSR/node): returns `false` (the mobile shell) when no `window.matchMedia`
+ * exists.
+ *
+ * @param query - Override the media query. Defaults to `(min-width: 768px)`.
+ * @returns Whether the desktop shell should mount.
+ */
+export declare function useIsDesktop(query?: string): boolean;
+/**
+ * Semantic sidebar width — the same stack-agnostic presets
+ * `@molecule/app-sidebar-layout-react` uses, so both shells render the same
+ * fleet geometry: `sm` → 208px, `md` → 240px (default), `lg` → 256px. A raw
+ * `number` is an exact pixel width. Applied via inline style (a specific
+ * pixel width is the documented "value a swappable ClassMap cannot express
+ * as a token" case).
+ */
+export type ShellSidebarWidth = 'sm' | 'md' | 'lg' | number;
+/**
+ * Props for the {@link ResponsiveAppShell} root.
+ */
+export interface ResponsiveAppShellProps {
+    /**
+     * The shell sub-components — `<ResponsiveAppShell.TopBar />`,
+     * `<ResponsiveAppShell.Sidebar />`, `<ResponsiveAppShell.Drawer />` and
+     * `<ResponsiveAppShell.Content />`.
+     */
+    children: ReactNode;
+    /**
+     * Sidebar (and drawer) width: `'sm'` (208px), `'md'` (240px, default),
+     * `'lg'` (256px) or an exact pixel number.
+     */
+    sidebarWidth?: ShellSidebarWidth;
+    /** Extra classes on the root flex-row container. */
+    className?: string;
+    /**
+     * `data-mol-id` for the root container. Defaults to `'shell-root'`.
+     */
+    dataMolId?: string;
+}
+/**
+ * Root of the responsive app shell. Owns the breakpoint signal and the
+ * drawer open state, closes the drawer on SPA navigation and on
+ * desktop-crossing resizes, and provides both to the sub-components via
+ * context.
+ *
+ * Render the four sub-components inside it — see the module example for the
+ * canonical composition.
+ *
+ * @param props - The shell sub-components, sidebar width, and className.
+ * @returns The flex-row shell root.
+ */
+declare function ResponsiveAppShellBase({ children, sidebarWidth, className, dataMolId, }: ResponsiveAppShellProps): JSX.Element;
+/**
+ * Props for the {@link ResponsiveAppShellTopBar} sub-component.
+ */
+export interface ResponsiveAppShellTopBarProps {
+    /**
+     * Brand/title node, rendered after the menu trigger — typically a
+     * `<Link to="/…">` with the app name or logo. The shell wraps it in a
+     * flex row; style the node itself.
+     */
+    brand?: ReactNode;
+    /** Trailing actions — user menu, theme toggle, search, etc. */
+    actions?: ReactNode;
+    /**
+     * Render the top bar only below the breakpoint (mount-conditioned, not
+     * CSS-hidden — no dead DOM on desktop). For apps whose desktop shell has
+     * no top bar (e.g. the sidebar carries everything). Default: `false`
+     * (top bar on every breakpoint).
+     */
+    mobileOnly?: boolean;
+    /** Extra classes on the `<header>`. */
+    className?: string;
+    /** `data-mol-id` override. Default: `'shell-topbar'`. */
+    dataMolId?: string;
+    /** `data-testid` override. */
+    testId?: string;
+}
+/**
+ * The shell's `<header>` landmark: menu trigger (mobile, when a Drawer is
+ * composed), brand, and trailing actions.
+ *
+ * Sticks to the top of the viewport by default. The menu trigger renders
+ * only while a `ResponsiveAppShell.Drawer` is part of the composition AND
+ * the viewport is below the breakpoint.
+ *
+ * @param props - Brand/actions slots, `mobileOnly`, and class/id overrides.
+ * @returns The header landmark, or `null` when `mobileOnly` is set on desktop.
+ */
+export declare function ResponsiveAppShellTopBar({ brand, actions, mobileOnly, className, dataMolId, testId, }: ResponsiveAppShellTopBarProps): JSX.Element | null;
+/**
+ * Props for the {@link ResponsiveAppShellSidebar} sub-component.
+ */
+export interface ResponsiveAppShellSidebarProps {
+    /**
+     * Nav content — the links (they land inside the sidebar's `<nav>` landmark;
+     * pass `aria-current="page"` from the active one yourself). Typically the
+     * SAME element variable the Drawer receives, so only the mounted
+     * breakpoint's copy ever instantiates.
+     */
+    children: ReactNode;
+    /**
+     * Accessible name for the sidebar's `<nav>` landmark. Defaults to the
+     * `appShell.primaryNav` translation (English fallback `"Primary
+     * navigation"`).
+     */
+    navLabel?: string;
+    /**
+     * Below-nav content (user card, quick action) — rendered after the `<nav>`
+     * in a bordered footer row, so it does not sit inside the nav landmark.
+     */
+    footer?: ReactNode;
+    /** Extra classes on the `<aside>`. */
+    className?: string;
+    /** `data-mol-id` override. Default: `'shell-sidebar'`. */
+    dataMolId?: string;
+    /** `data-testid` override. */
+    testId?: string;
+}
+/**
+ * The desktop sidebar (`<aside>` + `<nav>` landmarks). Renders NOTHING below
+ * 768px — the {@link ResponsiveAppShellDrawer} carries the nav there.
+ *
+ * Full viewport height, sticky at the top edge, scrolls internally when its
+ * content outgrows the viewport.
+ *
+ * @param props - Nav children, nav label, footer slot, class/id overrides.
+ * @returns The sidebar landmarks, or `null` below the breakpoint.
+ */
+export declare function ResponsiveAppShellSidebar({ children, navLabel, footer, className, dataMolId, testId, }: ResponsiveAppShellSidebarProps): JSX.Element | null;
+/**
+ * Props for the {@link ResponsiveAppShellDrawer} sub-component.
+ */
+export interface ResponsiveAppShellDrawerProps {
+    /**
+     * Nav content — the links, same as (or adapted from) the Sidebar's. Only
+     * mounted while the drawer is open on a below-breakpoint viewport.
+     */
+    children: ReactNode;
+    /**
+     * Header row content (typically the brand), rendered next to the close
+     * button.
+     */
+    header?: ReactNode;
+    /**
+     * Accessible name for the dialog and its `<nav>` landmark. Defaults to the
+     * `appShell.primaryNav` translation (English fallback `"Primary
+     * navigation"`).
+     */
+    navLabel?: string;
+    /** Below-nav content (user card, sign-out), after the `<nav>`. */
+    footer?: ReactNode;
+    /** Whether the panel shows a close (X) button. Default: `true`. */
+    showCloseButton?: boolean;
+    /** Extra classes on the dialog panel. */
+    className?: string;
+    /** `data-mol-id` override for the panel. Default: `'shell-drawer'`. */
+    dataMolId?: string;
+    /** `data-mol-id` override for the close button. Default: `'shell-drawer-close'`. */
+    closeDataMolId?: string;
+    /** `data-testid` override for the panel. */
+    testId?: string;
+}
+/**
+ * The mobile nav drawer (<768px): a left-anchored dialog panel over a
+ * backdrop, opened by the menu trigger the TopBar renders.
+ *
+ * Implements the WAI-ARIA APG dialog pattern — focus moves into the panel on
+ * open and returns to the previously focused element (the trigger) on close,
+ * Tab is trapped inside, Escape and backdrop clicks close, body scroll locks
+ * (reference-counted with any stacked `<Modal>`), and the shell closes it on
+ * SPA navigation. Renders nothing on desktop or while closed.
+ *
+ * @param props - Nav children, header/nav-label/footer slots, close-button
+ * and class/id overrides.
+ * @returns The drawer portal while open on mobile, otherwise `null`.
+ */
+export declare function ResponsiveAppShellDrawer({ children, header, navLabel, footer, showCloseButton, className, dataMolId, closeDataMolId, testId, }: ResponsiveAppShellDrawerProps): JSX.Element | null;
+/**
+ * Props for the {@link ResponsiveAppShellContent} sub-component.
+ */
+export interface ResponsiveAppShellContentProps {
+    /** The routed page content — typically an `<Outlet />`. */
+    children: ReactNode;
+    /** Extra classes on the `<main>`. */
+    className?: string;
+    /** Inline styles on the `<main>` (rarely needed — layout is owned). */
+    style?: React.CSSProperties;
+    /** `data-mol-id` override. Default: `'shell-content'`. */
+    dataMolId?: string;
+    /** `data-testid` override. */
+    testId?: string;
+}
+/**
+ * The shell's `<main>` landmark. Grows to fill the row and may shrink below
+ * its content width, so page-level `overflow-x` strips scroll inside the
+ * page instead of widening the whole shell.
+ *
+ * @param props - The page content and class/id overrides.
+ * @returns The main landmark.
+ */
+export declare function ResponsiveAppShellContent({ children, className, style, dataMolId, testId, }: ResponsiveAppShellContentProps): JSX.Element;
+/**
+ * The responsive app shell family — see the {@link ResponsiveAppShellBase |
+ * root component} and the module docs for the full contract.
+ *
+ * Consumed as `<ResponsiveAppShell.TopBar />`, `.Sidebar`, `.Drawer` and
+ * `.Content` inside `<ResponsiveAppShell>`; each is also exported as a named
+ * component (`ResponsiveAppShellTopBar`, …) for star-import consumers.
+ */
+export declare const ResponsiveAppShell: typeof ResponsiveAppShellBase & {
+    /** The `<header>` landmark — brand + actions + the drawer menu trigger. */
+    TopBar: typeof ResponsiveAppShellTopBar;
+    /** The desktop `<aside>`/`<nav>` landmarks (≥768px only). */
+    Sidebar: typeof ResponsiveAppShellSidebar;
+    /** The mobile dialog drawer (<768px only). */
+    Drawer: typeof ResponsiveAppShellDrawer;
+    /** The `<main>` landmark. */
+    Content: typeof ResponsiveAppShellContent;
+};
+export {};
+//# sourceMappingURL=ResponsiveAppShell.d.ts.map

package/dist/components/ResponsiveAppShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveAppShell.d.ts","sourceRoot":"","sources":["../../src/components/ResponsiveAppShell.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+FG;AAEH,OAAO,EAEL,KAAK,GAAG,EACR,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAYd;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,KAAK,GAAE,MAAsB,GAAG,OAAO,CAenE;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;AAiG3D;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAA;IAChC,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;GAWG;AACH,iBAAS,sBAAsB,CAAC,EAC9B,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,SAAwB,GACzB,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CA+DvC;AAED;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC5C;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,OAAO,EACP,UAAkB,EAClB,SAAS,EACT,SAA0B,EAC1B,MAAM,GACP,EAAE,6BAA6B,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA8DpD;AAED;;GAEG;AACH,MAAM,WAAW,8BAA8B;IAC7C;;;;;OAKG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED;;;;;;;;;GASG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,SAA2B,EAC3B,MAAM,GACP,EAAE,8BAA8B,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA+CrD;AAED;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC5C;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,mEAAmE;IACnE,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oFAAoF;IACpF,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,eAAsB,EACtB,SAAS,EACT,SAA0B,EAC1B,cAAqC,EACrC,MAAM,GACP,EAAE,6BAA6B,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA0LpD;AAED;;GAEG;AACH,MAAM,WAAW,8BAA8B;IAC7C,2DAA2D;IAC3D,QAAQ,EAAE,SAAS,CAAA;IACnB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uEAAuE;IACvE,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,SAAS,EACT,KAAK,EACL,SAA2B,EAC3B,MAAM,GACP,EAAE,8BAA8B,GAAG,GAAG,CAAC,OAAO,CAiB9C;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB;IAC7B,2EAA2E;;IAE3E,6DAA6D;;IAE7D,8CAA8C;;IAE9C,6BAA6B;;CAE7B,CAAA"}