tempest-react-sdk 0.78.0 → 0.79.0

package/dist/components/AppBar/use-sticky-body-warning.js

@@ -4,7 +4,7 @@ import { useEffect as t } from "react";
 var n = "[tempest-react-sdk] <AppBar sticky /> will not stick: `document.body` has `overflow-x: hidden`, which forces its computed `overflow-y` to `auto` and makes the body a scroll container. The bar then pins to the body's scrollport instead of the viewport and scrolls off the top with the content — most visibly on Chrome Android. Fix: `html, body { overflow-x: clip }`, on both elements, since neither clamps alone. Pass `sticky={false}` if the bar is meant to scroll away.", r = !1;
 function i(i) {
 	t(() => {
-		i && !r && e() && (typeof document > "u" || !document.body || getComputedStyle(document.body).overflowX === "hidden" && (r = !0, console.warn(n)));
+		i && !r && e() && typeof document < "u" && document.body && getComputedStyle(document.body).overflowX === "hidden" && (r = !0, console.warn(n));
 	}, [i]);
 }
 //#endregion

package/dist/components/AppBar/use-sticky-body-warning.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-sticky-body-warning.js","names":[],"sources":["../../../src/components/AppBar/use-sticky-body-warning.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nimport { isDevBuild } from \"../../utils/dev-mode\";\n\n/**\n * The one line of the app's own CSS that silently defeats `sticky`.\n *\n * `body { overflow-x: hidden }` is how most apps stop a too-wide child from\n * panning the page sideways. It also, per CSS Overflow 3, forces the computed\n * `overflow-y` to `auto` — a value the author never wrote — which makes the\n * body a **scroll container**. Every sticky descendant then pins to the body's\n * scrollport instead of the viewport, and that scrollport travels with the\n * document: measured in Chromium at 390px with a long page, the bar sat at\n * `top: -900px` after scrolling 900px, i.e. off screen.\n *\n * Nothing about that reads as a CSS problem from the app's side. The bar still\n * reports `position: sticky` in DevTools, the markup is unchanged, and on\n * desktop the screens usually fit without scrolling so the bug never shows. It\n * surfaces on Chrome Android, where the collapsing URL bar makes every screen a\n * scrolling screen — and it gets reported as \"the app bar is broken\", because\n * that is what the user sees.\n *\n * Hence this warning: the SDK cannot fix it from inside the component (a sticky\n * element has no way to opt out of its scroll container, and a rule the SDK\n * ships in its reset loses to the app's own stylesheet, which is imported\n * after), but it can name the cause in one console line.\n *\n * `clip` is the fix because it clamps the same horizontal overflow without\n * creating a scroll container. It has to be on `html` **and** `body` — with it\n * on only one of them the document still panned to `x: 500` in the same\n * measurement.\n */\nconst MESSAGE =\n    \"[tempest-react-sdk] <AppBar sticky /> will not stick: `document.body` has \" +\n    \"`overflow-x: hidden`, which forces its computed `overflow-y` to `auto` and makes the \" +\n    \"body a scroll container. The bar then pins to the body's scrollport instead of the \" +\n    \"viewport and scrolls off the top with the content — most visibly on Chrome Android. \" +\n    \"Fix: `html, body { overflow-x: clip }`, on both elements, since neither clamps alone. \" +\n    \"Pass `sticky={false}` if the bar is meant to scroll away.\";\n\n/** Set once the warning has been printed, so re-renders do not bury the console. */\nlet warned = false;\n\n/**\n * Reset the warn-once latch. Test-only — the latch is module state, and a suite\n * that renders more than one bar would otherwise see the warning only once.\n */\nexport function resetStickyBodyWarning(): void {\n    warned = false;\n}\n\n/**\n * Warn once, in development, when the page's own CSS will keep a sticky bar\n * from sticking.\n *\n * Reads the body's `overflow-x` rather than walking the ancestors, because that\n * single declaration is the whole failure mode: an app that genuinely wants the\n * body to scroll writes `overflow-y: auto` itself, and a sticky bar inside a\n * scroll container the app chose on purpose behaves exactly as intended. What\n * is never intentional is acquiring that scroll container as a side effect of\n * clamping the other axis.\n *\n * @param enabled - Whether the bar is actually sticky. A bar rendered with\n *   `sticky={false}` has nothing to lose and stays quiet.\n */\nexport function useStickyBodyWarning(enabled: boolean): void {\n    useEffect(() => {\n        if (!enabled || warned || !isDevBuild()) return;\n        if (typeof document === \"undefined\" || !document.body) return;\n        if (getComputedStyle(document.body).overflowX !== \"hidden\") return;\n        warned = true;\n        console.warn(MESSAGE);\n    }, [enabled]);\n}\n"],"mappings":";;;AAgCA,IAAM,IACF,ydAQA,IAAS;AAwBb,SAAgB,EAAqB,GAAwB;CACzD,QAAgB;EACR,AAAC,KAAW,MAAW,EAAW,MAClC,OAAO,WAAa,OAAe,CAAC,SAAS,QAC7C,iBAAiB,SAAS,IAAI,CAAC,CAAC,cAAc,aAClD,IAAS,IACT,QAAQ,KAAK,CAAO;CACxB,GAAG,CAAC,CAAO,CAAC;AAChB"}
+{"version":3,"file":"use-sticky-body-warning.js","names":["MESSAGE","warned","useStickyBodyWarning","enabled","isDevBuild"],"sources":["../../../src/components/AppBar/use-sticky-body-warning.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nimport { isDevBuild } from \"../../utils/dev-mode\";\n\n/**\n * The one line of the app's own CSS that silently defeats `sticky`.\n *\n * `body { overflow-x: hidden }` is how most apps stop a too-wide child from\n * panning the page sideways. It also, per CSS Overflow 3, forces the computed\n * `overflow-y` to `auto` — a value the author never wrote — which makes the\n * body a **scroll container**. Every sticky descendant then pins to the body's\n * scrollport instead of the viewport, and that scrollport travels with the\n * document: measured in Chromium at 390px with a long page, the bar sat at\n * `top: -900px` after scrolling 900px, i.e. off screen.\n *\n * Nothing about that reads as a CSS problem from the app's side. The bar still\n * reports `position: sticky` in DevTools, the markup is unchanged, and on\n * desktop the screens usually fit without scrolling so the bug never shows. It\n * surfaces on Chrome Android, where the collapsing URL bar makes every screen a\n * scrolling screen — and it gets reported as \"the app bar is broken\", because\n * that is what the user sees.\n *\n * Hence this warning: the SDK cannot fix it from inside the component (a sticky\n * element has no way to opt out of its scroll container, and a rule the SDK\n * ships in its reset loses to the app's own stylesheet, which is imported\n * after), but it can name the cause in one console line.\n *\n * `clip` is the fix because it clamps the same horizontal overflow without\n * creating a scroll container. It has to be on `html` **and** `body` — with it\n * on only one of them the document still panned to `x: 500` in the same\n * measurement.\n */\nconst MESSAGE =\n    \"[tempest-react-sdk] <AppBar sticky /> will not stick: `document.body` has \" +\n    \"`overflow-x: hidden`, which forces its computed `overflow-y` to `auto` and makes the \" +\n    \"body a scroll container. The bar then pins to the body's scrollport instead of the \" +\n    \"viewport and scrolls off the top with the content — most visibly on Chrome Android. \" +\n    \"Fix: `html, body { overflow-x: clip }`, on both elements, since neither clamps alone. \" +\n    \"Pass `sticky={false}` if the bar is meant to scroll away.\";\n\n/** Set once the warning has been printed, so re-renders do not bury the console. */\nlet warned = false;\n\n/**\n * Reset the warn-once latch. Test-only — the latch is module state, and a suite\n * that renders more than one bar would otherwise see the warning only once.\n */\nexport function resetStickyBodyWarning(): void {\n    warned = false;\n}\n\n/**\n * Warn once, in development, when the page's own CSS will keep a sticky bar\n * from sticking.\n *\n * Reads the body's `overflow-x` rather than walking the ancestors, because that\n * single declaration is the whole failure mode: an app that genuinely wants the\n * body to scroll writes `overflow-y: auto` itself, and a sticky bar inside a\n * scroll container the app chose on purpose behaves exactly as intended. What\n * is never intentional is acquiring that scroll container as a side effect of\n * clamping the other axis.\n *\n * @param enabled - Whether the bar is actually sticky. A bar rendered with\n *   `sticky={false}` has nothing to lose and stays quiet.\n */\nexport function useStickyBodyWarning(enabled: boolean): void {\n    useEffect(() => {\n        if (!enabled || warned || !isDevBuild()) return;\n        if (typeof document === \"undefined\" || !document.body) return;\n        if (getComputedStyle(document.body).overflowX !== \"hidden\") return;\n        warned = true;\n        console.warn(MESSAGE);\n    }, [enabled]);\n}\n"],"mappings":";;;AAgCA,IAAMA,IACF,ydAQAC,IAAS;AAwBb,SAAgBC,EAAqB,GAAwB;CACzD,QAAgB;EACZ,AAAKC,KAAW,MAAWC,EAAW,KAClC,OAAO,WAAa,OAAgB,SAAS,QAC7C,iBAAiB,SAAS,IAAI,CAAC,CAAC,cAAc,aAClD,IAAS,IACT,QAAQ,KAAKJ,CAAO;CACxB,GAAG,CAACG,CAAO,CAAC;AAChB"}

package/dist/components/AppShell/AppShell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.cjs","names":[],"sources":["../../../src/components/AppShell/AppShell.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { useBreakpoint } from \"@/hooks/use-breakpoint\";\nimport styles from \"./AppShell.module.css\";\n\nexport interface AppShellProps extends HTMLAttributes<HTMLDivElement> {\n    /** Top navigation bar (Navbar / custom). Renders on every breakpoint. */\n    navbar?: ReactNode;\n    /** Side navigation (Sidebar). Hidden below `md` — pair with `<Drawer>` for mobile. */\n    sidebar?: ReactNode;\n    /** Mobile-only bottom navigation (BottomNavigation). Hidden at `md+`. */\n    bottomNav?: ReactNode;\n    /** Footer rendered after the main content. */\n    footer?: ReactNode;\n    /** Breakpoint at which the sidebar appears. Default `\"md\"`. */\n    sidebarBreakpoint?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n    children?: ReactNode;\n}\n\n/**\n * Full app layout — composes [[Navbar]] + [[Sidebar]] + content +\n * [[BottomNavigation]] + footer with responsive behaviour:\n *\n * - **Desktop (`>= sidebarBreakpoint`)**: navbar + sidebar + main + footer.\n * - **Mobile (`< sidebarBreakpoint`)**: navbar + main + bottom nav + footer\n *   (sidebar hidden — app should expose it via `<Drawer>` from a hamburger).\n *\n * @example\n * <AppShell\n *     navbar={<Navbar logo={<Brand />} actions={<UserMenu />} />}\n *     sidebar={<Sidebar items={...} value={tab} onChange={setTab} />}\n *     bottomNav={<BottomNavigation items={...} value={tab} onChange={setTab} />}\n *     footer={<Footer />}\n * >\n *     <Page title=\"Dashboard\">{content}</Page>\n * </AppShell>\n */\nexport function AppShell({\n    navbar,\n    sidebar,\n    bottomNav,\n    footer,\n    sidebarBreakpoint = \"md\",\n    className,\n    children,\n    ...props\n}: AppShellProps) {\n    const bp = useBreakpoint();\n    const showSidebar = bp.above(sidebarBreakpoint);\n    return (\n        <div className={cn(styles.shell, className)} {...props}>\n            {navbar && <div className={styles.navbar}>{navbar}</div>}\n            <div className={styles.row}>\n                {sidebar && showSidebar && <div className={styles.sidebar}>{sidebar}</div>}\n                <main className={styles.main}>{children}</main>\n            </div>\n            {footer && <div className={styles.footer}>{footer}</div>}\n            {bottomNav && !showSidebar && <div className={styles.bottomNav}>{bottomNav}</div>}\n        </div>\n    );\n}\n"],"mappings":"wJAqCA,SAAgB,EAAS,CACrB,SACA,UACA,YACA,SACA,oBAAoB,KACpB,YACA,WACA,GAAG,GACW,CAEd,IAAM,EADK,EAAA,cACS,CAAA,CAAG,MAAM,CAAiB,EAC9C,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,CAAS,EAAG,GAAI,EAAjD,SAAA,CACK,IAAU,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAS,SAAA,CAAY,CAAA,GACvD,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,IAAvB,SAAA,CACK,GAAW,IAAe,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,SAAA,CAAa,CAAA,GACzE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAO,UAAe,CAAA,CAC7C,IACJ,IAAU,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAS,SAAA,CAAY,CAAA,EACtD,GAAa,CAAC,IAAe,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,UAAY,SAAA,CAAe,CAAA,CAC/E,GAEb"}
+{"version":3,"file":"AppShell.cjs","names":["useBreakpoint","cn","styles","require_cn","require_use_breakpoint","require_AppShell_module","react_jsx_runtime","AppShell","props","showSidebar","sidebarBreakpoint","className","navbar","sidebar","footer","bottomNav"],"sources":["../../../src/components/AppShell/AppShell.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { useBreakpoint } from \"@/hooks/use-breakpoint\";\nimport styles from \"./AppShell.module.css\";\n\nexport interface AppShellProps extends HTMLAttributes<HTMLDivElement> {\n    /** Top navigation bar (Navbar / custom). Renders on every breakpoint. */\n    navbar?: ReactNode;\n    /** Side navigation (Sidebar). Hidden below `md` — pair with `<Drawer>` for mobile. */\n    sidebar?: ReactNode;\n    /** Mobile-only bottom navigation (BottomNavigation). Hidden at `md+`. */\n    bottomNav?: ReactNode;\n    /** Footer rendered after the main content. */\n    footer?: ReactNode;\n    /** Breakpoint at which the sidebar appears. Default `\"md\"`. */\n    sidebarBreakpoint?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n    children?: ReactNode;\n}\n\n/**\n * Full app layout — composes [[Navbar]] + [[Sidebar]] + content +\n * [[BottomNavigation]] + footer with responsive behaviour:\n *\n * - **Desktop (`>= sidebarBreakpoint`)**: navbar + sidebar + main + footer.\n * - **Mobile (`< sidebarBreakpoint`)**: navbar + main + bottom nav + footer\n *   (sidebar hidden — app should expose it via `<Drawer>` from a hamburger).\n *\n * @example\n * <AppShell\n *     navbar={<Navbar logo={<Brand />} actions={<UserMenu />} />}\n *     sidebar={<Sidebar items={...} value={tab} onChange={setTab} />}\n *     bottomNav={<BottomNavigation items={...} value={tab} onChange={setTab} />}\n *     footer={<Footer />}\n * >\n *     <Page title=\"Dashboard\">{content}</Page>\n * </AppShell>\n */\nexport function AppShell({\n    navbar,\n    sidebar,\n    bottomNav,\n    footer,\n    sidebarBreakpoint = \"md\",\n    className,\n    children,\n    ...props\n}: AppShellProps) {\n    const bp = useBreakpoint();\n    const showSidebar = bp.above(sidebarBreakpoint);\n    return (\n        <div className={cn(styles.shell, className)} {...props}>\n            {navbar && <div className={styles.navbar}>{navbar}</div>}\n            <div className={styles.row}>\n                {sidebar && showSidebar && <div className={styles.sidebar}>{sidebar}</div>}\n                <main className={styles.main}>{children}</main>\n            </div>\n            {footer && <div className={styles.footer}>{footer}</div>}\n            {bottomNav && !showSidebar && <div className={styles.bottomNav}>{bottomNav}</div>}\n        </div>\n    );\n}\n"],"mappings":"A,wJAqCA,SAAgBO,EAAS,CACrB,SACA,UACA,YACA,SACA,oBAAoB,KACpB,YACA,WACA,GAAGC,GACW,CAEd,IAAMC,EADKT,EAAAA,cACS,CAAA,CAAG,MAAMU,CAAiB,EAC9C,OACI,EAAAJ,EAAA,KAAA,CAAC,MAAD,CAAK,UAAWL,EAAAA,GAAGC,EAAAA,QAAO,MAAOS,CAAS,EAAG,GAAIH,EAAjD,SAAA,CACKI,IAAU,EAAAN,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWJ,EAAAA,QAAO,OAAS,SAAAU,CAAY,CAAA,GACvD,EAAAN,EAAA,KAAA,CAAC,MAAD,CAAK,UAAWJ,EAAAA,QAAO,IAAvB,SAAA,CACKW,GAAWJ,IAAe,EAAAH,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWJ,EAAAA,QAAO,QAAU,SAAAW,CAAa,CAAA,GACzE,EAAAP,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWJ,EAAAA,QAAO,KAAO,UAAe,CAAA,CAC7C,C,GACJY,IAAU,EAAAR,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWJ,EAAAA,QAAO,OAAS,SAAAY,CAAY,CAAA,EACtDC,GAAa,CAACN,IAAe,EAAAH,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWJ,EAAAA,QAAO,UAAY,SAAAa,CAAe,CAAA,CAC/E,C,EAEb,C"}

package/dist/components/AppShell/AppShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.js","names":[],"sources":["../../../src/components/AppShell/AppShell.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { useBreakpoint } from \"@/hooks/use-breakpoint\";\nimport styles from \"./AppShell.module.css\";\n\nexport interface AppShellProps extends HTMLAttributes<HTMLDivElement> {\n    /** Top navigation bar (Navbar / custom). Renders on every breakpoint. */\n    navbar?: ReactNode;\n    /** Side navigation (Sidebar). Hidden below `md` — pair with `<Drawer>` for mobile. */\n    sidebar?: ReactNode;\n    /** Mobile-only bottom navigation (BottomNavigation). Hidden at `md+`. */\n    bottomNav?: ReactNode;\n    /** Footer rendered after the main content. */\n    footer?: ReactNode;\n    /** Breakpoint at which the sidebar appears. Default `\"md\"`. */\n    sidebarBreakpoint?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n    children?: ReactNode;\n}\n\n/**\n * Full app layout — composes [[Navbar]] + [[Sidebar]] + content +\n * [[BottomNavigation]] + footer with responsive behaviour:\n *\n * - **Desktop (`>= sidebarBreakpoint`)**: navbar + sidebar + main + footer.\n * - **Mobile (`< sidebarBreakpoint`)**: navbar + main + bottom nav + footer\n *   (sidebar hidden — app should expose it via `<Drawer>` from a hamburger).\n *\n * @example\n * <AppShell\n *     navbar={<Navbar logo={<Brand />} actions={<UserMenu />} />}\n *     sidebar={<Sidebar items={...} value={tab} onChange={setTab} />}\n *     bottomNav={<BottomNavigation items={...} value={tab} onChange={setTab} />}\n *     footer={<Footer />}\n * >\n *     <Page title=\"Dashboard\">{content}</Page>\n * </AppShell>\n */\nexport function AppShell({\n    navbar,\n    sidebar,\n    bottomNav,\n    footer,\n    sidebarBreakpoint = \"md\",\n    className,\n    children,\n    ...props\n}: AppShellProps) {\n    const bp = useBreakpoint();\n    const showSidebar = bp.above(sidebarBreakpoint);\n    return (\n        <div className={cn(styles.shell, className)} {...props}>\n            {navbar && <div className={styles.navbar}>{navbar}</div>}\n            <div className={styles.row}>\n                {sidebar && showSidebar && <div className={styles.sidebar}>{sidebar}</div>}\n                <main className={styles.main}>{children}</main>\n            </div>\n            {footer && <div className={styles.footer}>{footer}</div>}\n            {bottomNav && !showSidebar && <div className={styles.bottomNav}>{bottomNav}</div>}\n        </div>\n    );\n}\n"],"mappings":";;;;;AAqCA,SAAgB,EAAS,EACrB,WACA,YACA,cACA,WACA,uBAAoB,MACpB,cACA,aACA,GAAG,KACW;CAEd,IAAM,IADK,EACS,CAAA,CAAG,MAAM,CAAiB;CAC9C,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,OAAO,CAAS;EAAG,GAAI;EAAjD,UAAA;GACK,KAAU,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAS,UAAA;GAAY,CAAA;GACvD,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAvB,UAAA,CACK,KAAW,KAAe,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAU,UAAA;IAAa,CAAA,GACzE,kBAAC,QAAD;KAAM,WAAW,EAAO;KAAO;IAAe,CAAA,CAC7C;;GACJ,KAAU,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAS,UAAA;GAAY,CAAA;GACtD,KAAa,CAAC,KAAe,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAY,UAAA;GAAe,CAAA;EAC/E;;AAEb"}
+{"version":3,"file":"AppShell.js","names":["styles","AppShell_module_default","AppShell","props","showSidebar","useBreakpoint","sidebarBreakpoint","cn","className","navbar","sidebar","footer","bottomNav"],"sources":["../../../src/components/AppShell/AppShell.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { useBreakpoint } from \"@/hooks/use-breakpoint\";\nimport styles from \"./AppShell.module.css\";\n\nexport interface AppShellProps extends HTMLAttributes<HTMLDivElement> {\n    /** Top navigation bar (Navbar / custom). Renders on every breakpoint. */\n    navbar?: ReactNode;\n    /** Side navigation (Sidebar). Hidden below `md` — pair with `<Drawer>` for mobile. */\n    sidebar?: ReactNode;\n    /** Mobile-only bottom navigation (BottomNavigation). Hidden at `md+`. */\n    bottomNav?: ReactNode;\n    /** Footer rendered after the main content. */\n    footer?: ReactNode;\n    /** Breakpoint at which the sidebar appears. Default `\"md\"`. */\n    sidebarBreakpoint?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n    children?: ReactNode;\n}\n\n/**\n * Full app layout — composes [[Navbar]] + [[Sidebar]] + content +\n * [[BottomNavigation]] + footer with responsive behaviour:\n *\n * - **Desktop (`>= sidebarBreakpoint`)**: navbar + sidebar + main + footer.\n * - **Mobile (`< sidebarBreakpoint`)**: navbar + main + bottom nav + footer\n *   (sidebar hidden — app should expose it via `<Drawer>` from a hamburger).\n *\n * @example\n * <AppShell\n *     navbar={<Navbar logo={<Brand />} actions={<UserMenu />} />}\n *     sidebar={<Sidebar items={...} value={tab} onChange={setTab} />}\n *     bottomNav={<BottomNavigation items={...} value={tab} onChange={setTab} />}\n *     footer={<Footer />}\n * >\n *     <Page title=\"Dashboard\">{content}</Page>\n * </AppShell>\n */\nexport function AppShell({\n    navbar,\n    sidebar,\n    bottomNav,\n    footer,\n    sidebarBreakpoint = \"md\",\n    className,\n    children,\n    ...props\n}: AppShellProps) {\n    const bp = useBreakpoint();\n    const showSidebar = bp.above(sidebarBreakpoint);\n    return (\n        <div className={cn(styles.shell, className)} {...props}>\n            {navbar && <div className={styles.navbar}>{navbar}</div>}\n            <div className={styles.row}>\n                {sidebar && showSidebar && <div className={styles.sidebar}>{sidebar}</div>}\n                <main className={styles.main}>{children}</main>\n            </div>\n            {footer && <div className={styles.footer}>{footer}</div>}\n            {bottomNav && !showSidebar && <div className={styles.bottomNav}>{bottomNav}</div>}\n        </div>\n    );\n}\n"],"mappings":";;;;;AAqCA,SAAgBE,EAAS,EACrB,WACA,YACA,cACA,WACA,uBAAoB,MACpB,cACA,aACA,GAAGC,KACW;CAEd,IAAMC,IADKC,EACS,CAAA,CAAG,MAAMC,CAAiB;CAC9C,OACI,kBAAC,OAAD;EAAK,WAAWC,EAAGP,EAAO,OAAOQ,CAAS;EAAG,GAAIL;EAAjD,UAAA;GACKM,KAAU,kBAAC,OAAD;IAAK,WAAWT,EAAO;IAAS,UAAAS;GAAY,CAAA;GACvD,kBAAC,OAAD;IAAK,WAAWT,EAAO;IAAvB,UAAA,CACKU,KAAWN,KAAe,kBAAC,OAAD;KAAK,WAAWJ,EAAO;KAAU,UAAAU;IAAa,CAAA,GACzE,kBAAC,QAAD;KAAM,WAAWV,EAAO;KAAO;IAAe,CAAA,CAC7C;;GACJW,KAAU,kBAAC,OAAD;IAAK,WAAWX,EAAO;IAAS,UAAAW;GAAY,CAAA;GACtDC,KAAa,CAACR,KAAe,kBAAC,OAAD;IAAK,WAAWJ,EAAO;IAAY,UAAAY;GAAe,CAAA;EAC/E;;AAEb"}

package/dist/components/AppShell/AppShell.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.module.cjs","names":[],"sources":["../../../src/components/AppShell/AppShell.module.css"],"sourcesContent":[".shell {\n    display: flex;\n    flex-direction: column;\n    min-height: 100dvh;\n    width: 100%;\n    background: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n/*\n * The wrapper steps out of the box tree so the bar inside it is laid out by the\n * shell directly.\n *\n * A sticky element cannot leave its containing block, and as a plain block this\n * wrapper was exactly as tall as the bar: `Navbar` is sticky by default and\n * scrolled away with the page anyway — measured in Chromium and Firefox at\n * 1440x900, `top: -1261px` at `scrollY` 1261 (#406). With `display: contents`\n * the containing block is the shell, which grows with the content, and the bar\n * stays at `top: 0`. Making the wrapper sticky instead would pin the bar even\n * when the app passed `sticky={false}`; this way the bar's own prop decides.\n */\n.navbar {\n    display: contents;\n}\n\n.row {\n    flex: 1 1 auto;\n    display: flex;\n    min-height: 0;\n    width: 100%;\n}\n\n.sidebar {\n    flex: 0 0 auto;\n}\n\n.main {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow-x: auto;\n}\n\n.footer {\n    flex: 0 0 auto;\n}\n\n.bottomNav {\n    position: sticky;\n    bottom: 0;\n    z-index: 30;\n    flex: 0 0 auto;\n}\n"],"mappings":";"}
+{"version":3,"file":"AppShell.module.cjs","names":["shell","navbar","row","sidebar","main","footer","bottomNav","AppShell_module_default"],"sources":["../../../src/components/AppShell/AppShell.module.css"],"sourcesContent":[".shell {\n    display: flex;\n    flex-direction: column;\n    min-height: 100dvh;\n    width: 100%;\n    background: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n/*\n * The wrapper steps out of the box tree so the bar inside it is laid out by the\n * shell directly.\n *\n * A sticky element cannot leave its containing block, and as a plain block this\n * wrapper was exactly as tall as the bar: `Navbar` is sticky by default and\n * scrolled away with the page anyway — measured in Chromium and Firefox at\n * 1440x900, `top: -1261px` at `scrollY` 1261 (#406). With `display: contents`\n * the containing block is the shell, which grows with the content, and the bar\n * stays at `top: 0`. Making the wrapper sticky instead would pin the bar even\n * when the app passed `sticky={false}`; this way the bar's own prop decides.\n */\n.navbar {\n    display: contents;\n}\n\n.row {\n    flex: 1 1 auto;\n    display: flex;\n    min-height: 0;\n    width: 100%;\n}\n\n.sidebar {\n    flex: 0 0 auto;\n}\n\n.main {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow-x: auto;\n}\n\n.footer {\n    flex: 0 0 auto;\n}\n\n.bottomNav {\n    position: sticky;\n    bottom: 0;\n    z-index: 30;\n    flex: 0 0 auto;\n}\n"],"mappings":";"}

package/dist/components/AppShell/AppShell.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.module.js","names":[],"sources":["../../../src/components/AppShell/AppShell.module.css"],"sourcesContent":[".shell {\n    display: flex;\n    flex-direction: column;\n    min-height: 100dvh;\n    width: 100%;\n    background: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n/*\n * The wrapper steps out of the box tree so the bar inside it is laid out by the\n * shell directly.\n *\n * A sticky element cannot leave its containing block, and as a plain block this\n * wrapper was exactly as tall as the bar: `Navbar` is sticky by default and\n * scrolled away with the page anyway — measured in Chromium and Firefox at\n * 1440x900, `top: -1261px` at `scrollY` 1261 (#406). With `display: contents`\n * the containing block is the shell, which grows with the content, and the bar\n * stays at `top: 0`. Making the wrapper sticky instead would pin the bar even\n * when the app passed `sticky={false}`; this way the bar's own prop decides.\n */\n.navbar {\n    display: contents;\n}\n\n.row {\n    flex: 1 1 auto;\n    display: flex;\n    min-height: 0;\n    width: 100%;\n}\n\n.sidebar {\n    flex: 0 0 auto;\n}\n\n.main {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow-x: auto;\n}\n\n.footer {\n    flex: 0 0 auto;\n}\n\n.bottomNav {\n    position: sticky;\n    bottom: 0;\n    z-index: 30;\n    flex: 0 0 auto;\n}\n"],"mappings":";"}
+{"version":3,"file":"AppShell.module.js","names":["shell","navbar","row","sidebar","main","footer","bottomNav","AppShell_module_default"],"sources":["../../../src/components/AppShell/AppShell.module.css"],"sourcesContent":[".shell {\n    display: flex;\n    flex-direction: column;\n    min-height: 100dvh;\n    width: 100%;\n    background: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n/*\n * The wrapper steps out of the box tree so the bar inside it is laid out by the\n * shell directly.\n *\n * A sticky element cannot leave its containing block, and as a plain block this\n * wrapper was exactly as tall as the bar: `Navbar` is sticky by default and\n * scrolled away with the page anyway — measured in Chromium and Firefox at\n * 1440x900, `top: -1261px` at `scrollY` 1261 (#406). With `display: contents`\n * the containing block is the shell, which grows with the content, and the bar\n * stays at `top: 0`. Making the wrapper sticky instead would pin the bar even\n * when the app passed `sticky={false}`; this way the bar's own prop decides.\n */\n.navbar {\n    display: contents;\n}\n\n.row {\n    flex: 1 1 auto;\n    display: flex;\n    min-height: 0;\n    width: 100%;\n}\n\n.sidebar {\n    flex: 0 0 auto;\n}\n\n.main {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow-x: auto;\n}\n\n.footer {\n    flex: 0 0 auto;\n}\n\n.bottomNav {\n    position: sticky;\n    bottom: 0;\n    z-index: 30;\n    flex: 0 0 auto;\n}\n"],"mappings":";"}

package/dist/components/AspectRatio/AspectRatio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AspectRatio.cjs","names":[],"sources":["../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./AspectRatio.module.css\";\n\nexport interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {\n    /**\n     * Width-to-height ratio. Pass `16/9` for widescreen, `1` for square,\n     * `4/3` for SD video, `3/4` for portrait, etc. Default `16/9`.\n     */\n    ratio?: number;\n    children?: ReactNode;\n}\n\n/**\n * Preserve a constant aspect ratio for media (images, video, embeds). The\n * inner child stretches to fill the box. Uses the native `aspect-ratio`\n * CSS property — works on all modern browsers (Safari 15+, Chrome 88+).\n *\n * @example\n * <AspectRatio ratio={16 / 9}>\n *     <img src=\"/cover.jpg\" alt=\"\" style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }} />\n * </AspectRatio>\n */\nexport function AspectRatio({\n    ratio = 16 / 9,\n    className,\n    style,\n    children,\n    ...props\n}: AspectRatioProps) {\n    const finalStyle: CSSProperties = { aspectRatio: String(ratio), ...style };\n    return (\n        <div className={cn(styles.aspect, className)} style={finalStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"mappings":"+GAuBA,SAAgB,EAAY,CACxB,QAAQ,GAAK,EACb,YACA,QACA,WACA,GAAG,GACc,CACjB,IAAM,EAA4B,CAAE,YAAa,OAAO,CAAK,EAAG,GAAG,CAAM,EACzE,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,CAAS,EAAG,MAAO,EAAY,GAAI,EAChE,UACA,CAAA,CAEb"}
+{"version":3,"file":"AspectRatio.cjs","names":["cn","styles","require_cn","require_AspectRatio_module","react_jsx_runtime","AspectRatio","props","finalStyle","ratio","style","className"],"sources":["../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./AspectRatio.module.css\";\n\nexport interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {\n    /**\n     * Width-to-height ratio. Pass `16/9` for widescreen, `1` for square,\n     * `4/3` for SD video, `3/4` for portrait, etc. Default `16/9`.\n     */\n    ratio?: number;\n    children?: ReactNode;\n}\n\n/**\n * Preserve a constant aspect ratio for media (images, video, embeds). The\n * inner child stretches to fill the box. Uses the native `aspect-ratio`\n * CSS property — works on all modern browsers (Safari 15+, Chrome 88+).\n *\n * @example\n * <AspectRatio ratio={16 / 9}>\n *     <img src=\"/cover.jpg\" alt=\"\" style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }} />\n * </AspectRatio>\n */\nexport function AspectRatio({\n    ratio = 16 / 9,\n    className,\n    style,\n    children,\n    ...props\n}: AspectRatioProps) {\n    const finalStyle: CSSProperties = { aspectRatio: String(ratio), ...style };\n    return (\n        <div className={cn(styles.aspect, className)} style={finalStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"mappings":"A,+GAuBA,SAAgBK,EAAY,CACxB,QAAQ,GAAK,EACb,YACA,QACA,WACA,GAAGC,GACc,CACjB,IAAMC,EAA4B,CAAE,YAAa,OAAOC,CAAK,EAAG,GAAGC,CAAM,EACzE,OACI,EAAAL,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWJ,EAAAA,GAAGC,EAAAA,QAAO,OAAQS,CAAS,EAAG,MAAOH,EAAY,GAAID,EAChE,UACA,CAAA,CAEb,C"}

package/dist/components/AspectRatio/AspectRatio.js.map

@@ -1 +1 @@
-{"version":3,"file":"AspectRatio.js","names":[],"sources":["../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./AspectRatio.module.css\";\n\nexport interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {\n    /**\n     * Width-to-height ratio. Pass `16/9` for widescreen, `1` for square,\n     * `4/3` for SD video, `3/4` for portrait, etc. Default `16/9`.\n     */\n    ratio?: number;\n    children?: ReactNode;\n}\n\n/**\n * Preserve a constant aspect ratio for media (images, video, embeds). The\n * inner child stretches to fill the box. Uses the native `aspect-ratio`\n * CSS property — works on all modern browsers (Safari 15+, Chrome 88+).\n *\n * @example\n * <AspectRatio ratio={16 / 9}>\n *     <img src=\"/cover.jpg\" alt=\"\" style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }} />\n * </AspectRatio>\n */\nexport function AspectRatio({\n    ratio = 16 / 9,\n    className,\n    style,\n    children,\n    ...props\n}: AspectRatioProps) {\n    const finalStyle: CSSProperties = { aspectRatio: String(ratio), ...style };\n    return (\n        <div className={cn(styles.aspect, className)} style={finalStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"mappings":";;;;AAuBA,SAAgB,EAAY,EACxB,WAAQ,KAAK,GACb,cACA,UACA,aACA,GAAG,KACc;CACjB,IAAM,IAA4B;EAAE,aAAa,OAAO,CAAK;EAAG,GAAG;CAAM;CACzE,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,QAAQ,CAAS;EAAG,OAAO;EAAY,GAAI;EAChE;CACA,CAAA;AAEb"}
+{"version":3,"file":"AspectRatio.js","names":["styles","AspectRatio_module_default","AspectRatio","props","finalStyle","ratio","style","cn","className"],"sources":["../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./AspectRatio.module.css\";\n\nexport interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {\n    /**\n     * Width-to-height ratio. Pass `16/9` for widescreen, `1` for square,\n     * `4/3` for SD video, `3/4` for portrait, etc. Default `16/9`.\n     */\n    ratio?: number;\n    children?: ReactNode;\n}\n\n/**\n * Preserve a constant aspect ratio for media (images, video, embeds). The\n * inner child stretches to fill the box. Uses the native `aspect-ratio`\n * CSS property — works on all modern browsers (Safari 15+, Chrome 88+).\n *\n * @example\n * <AspectRatio ratio={16 / 9}>\n *     <img src=\"/cover.jpg\" alt=\"\" style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }} />\n * </AspectRatio>\n */\nexport function AspectRatio({\n    ratio = 16 / 9,\n    className,\n    style,\n    children,\n    ...props\n}: AspectRatioProps) {\n    const finalStyle: CSSProperties = { aspectRatio: String(ratio), ...style };\n    return (\n        <div className={cn(styles.aspect, className)} style={finalStyle} {...props}>\n            {children}\n        </div>\n    );\n}\n"],"mappings":";;;;AAuBA,SAAgBE,EAAY,EACxB,WAAQ,KAAK,GACb,cACA,UACA,aACA,GAAGC,KACc;CACjB,IAAMC,IAA4B;EAAE,aAAa,OAAOC,CAAK;EAAG,GAAGC;CAAM;CACzE,OACI,kBAAC,OAAD;EAAK,WAAWC,EAAGP,EAAO,QAAQQ,CAAS;EAAG,OAAOJ;EAAY,GAAID;EAChE;CACA,CAAA;AAEb"}

package/dist/components/AspectRatio/AspectRatio.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AspectRatio.module.cjs","names":[],"sources":["../../../src/components/AspectRatio/AspectRatio.module.css"],"sourcesContent":[".aspect {\n    width: 100%;\n    position: relative;\n}\n\n.aspect > * {\n    width: 100%;\n    height: 100%;\n}\n"],"mappings":";"}
+{"version":3,"file":"AspectRatio.module.cjs","names":["aspect","AspectRatio_module_default"],"sources":["../../../src/components/AspectRatio/AspectRatio.module.css"],"sourcesContent":[".aspect {\n    width: 100%;\n    position: relative;\n}\n\n.aspect > * {\n    width: 100%;\n    height: 100%;\n}\n"],"mappings":";"}

package/dist/components/AspectRatio/AspectRatio.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"AspectRatio.module.js","names":[],"sources":["../../../src/components/AspectRatio/AspectRatio.module.css"],"sourcesContent":[".aspect {\n    width: 100%;\n    position: relative;\n}\n\n.aspect > * {\n    width: 100%;\n    height: 100%;\n}\n"],"mappings":";"}
+{"version":3,"file":"AspectRatio.module.js","names":["aspect","AspectRatio_module_default"],"sources":["../../../src/components/AspectRatio/AspectRatio.module.css"],"sourcesContent":[".aspect {\n    width: 100%;\n    position: relative;\n}\n\n.aspect > * {\n    width: 100%;\n    height: 100%;\n}\n"],"mappings":";"}

package/dist/components/AudioPlayer/AudioPlayer.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("../../hooks/use-object-url.cjs"),n=require("../../audio/duration.cjs"),r=require("../../audio/audio-output.cjs"),i=require("./AudioPlayer.module.cjs");let a=require("react"),o=require("react/jsx-runtime"),s=require("lucide-react");var c={"pt-BR":{play:`Tocar`,pause:`Pausar`,seek:`Posição`},en:{play:`Play`,pause:`Pause`,seek:`Seek`}};function l({src:l,durationMs:u,sinkId:d,autoPlay:f=!1,loop:p=!1,locale:m=`pt-BR`,actions:h,onEnded:g,onError:_,disabled:v=!1,className:y,...b}){let x=c[m],S=(0,a.useRef)(null),[C,w]=(0,a.useState)(!1),[T,E]=(0,a.useState)(0),[D,O]=(0,a.useState)(1/0),k=(0,a.useRef)(!1),A=t.useObjectUrl(typeof l==`string`?null:l),j=typeof l==`string`?l:A,M=Number.isFinite(u)?u:D,N=Number.isFinite(M)&&M>0;(0,a.useEffect)(()=>{E(0),w(!1),O(1/0),k.current=!1},[j]),(0,a.useEffect)(()=>{d!==void 0&&r.setAudioOutput(S.current,d)},[d,j]);let P=()=>{let e=S.current;if(!e)return;if(Number.isFinite(e.duration)){O(e.duration*1e3);return}if(k.current||Number.isFinite(u))return;k.current=!0;let t=()=>{e.removeEventListener(`timeupdate`,t),Number.isFinite(e.duration)&&O(e.duration*1e3),e.currentTime=0};e.addEventListener(`timeupdate`,t),e.currentTime=1e101},F=()=>{let e=S.current;if(e&&j){if(e.paused){e.play().then(()=>w(!0)).catch(e=>_?.(e));return}e.pause(),w(!1)}},I=e=>{let t=S.current;t&&N&&(t.currentTime=e/1e3,E(e))};return(0,o.jsxs)(`div`,{className:e.cn(i.default.player,y),...b,children:[(0,o.jsx)(`audio`,{ref:S,src:j??void 0,loop:p,autoPlay:f,preload:`metadata`,onLoadedMetadata:P,onDurationChange:P,onTimeUpdate:()=>{let e=S.current;e&&E(e.currentTime*1e3)},onPlay:()=>w(!0),onPause:()=>w(!1),onEnded:()=>{w(!1),E(0),g?.()},onError:e=>_?.(e)}),(0,o.jsx)(`button`,{type:`button`,className:i.default.transport,onClick:F,disabled:v||!j,"aria-label":C?x.pause:x.play,title:C?x.pause:x.play,children:C?(0,o.jsx)(s.Pause,{size:16,"aria-hidden":!0}):(0,o.jsx)(s.Play,{size:16,"aria-hidden":!0})}),(0,o.jsx)(`input`,{type:`range`,className:i.default.seek,min:0,max:N?Math.round(M):0,step:100,value:Math.min(Math.round(T),N?Math.round(M):0),onChange:e=>I(Number(e.target.value)),disabled:v||!N,"aria-label":x.seek,"aria-valuetext":`${n.formatDuration(T)} / ${n.formatDuration(M)}`}),(0,o.jsxs)(`span`,{className:i.default.time,children:[(0,o.jsx)(`span`,{children:n.formatDuration(T)}),(0,o.jsx)(`span`,{"aria-hidden":`true`,children:`/`}),(0,o.jsx)(`span`,{children:n.formatDuration(M)})]}),h&&(0,o.jsx)(`span`,{className:i.default.actions,children:h})]})}exports.AudioPlayer=l;
+const e=require("../../utils/cn.cjs"),t=require("../../hooks/use-object-url.cjs"),n=require("../../audio/duration.cjs"),r=require("../../audio/audio-output.cjs"),i=require("./AudioPlayer.module.cjs");let a=require("react"),o=require("react/jsx-runtime"),s=require("lucide-react");var c={"pt-BR":{play:`Tocar`,pause:`Pausar`,seek:`Posição`},en:{play:`Play`,pause:`Pause`,seek:`Seek`}};function l({src:l,durationMs:u,sinkId:d,autoPlay:f=!1,loop:p=!1,locale:m=`pt-BR`,actions:h,onEnded:g,onError:_,disabled:v=!1,className:y,...b}){let x=c[m],S=(0,a.useRef)(null),[C,w]=(0,a.useState)(!1),[T,E]=(0,a.useState)(0),[D,O]=(0,a.useState)(1/0),k=(0,a.useRef)(!1),A=t.useObjectUrl(typeof l==`string`?null:l),j=typeof l==`string`?l:A,M=Number.isFinite(u)?u:D,N=Number.isFinite(M)&&M>0;(0,a.useEffect)(()=>{E(0),w(!1),O(1/0),k.current=!1},[j]),(0,a.useEffect)(()=>{d!==void 0&&r.setAudioOutput(S.current,d)},[d,j]);let P=()=>{let e=S.current;if(!e)return;if(Number.isFinite(e.duration)){O(e.duration*1e3);return}if(k.current||Number.isFinite(u))return;k.current=!0;let t=()=>{e.removeEventListener(`timeupdate`,t),Number.isFinite(e.duration)&&O(e.duration*1e3),e.currentTime=0};e.addEventListener(`timeupdate`,t),e.currentTime=1e101},F=()=>{let e=S.current;e&&j&&(e.paused?e.play().then(()=>w(!0)).catch(e=>_?.(e)):(e.pause(),w(!1)))},I=e=>{let t=S.current;t&&N&&(t.currentTime=e/1e3,E(e))};return(0,o.jsxs)(`div`,{className:e.cn(i.default.player,y),...b,children:[(0,o.jsx)(`audio`,{ref:S,src:j??void 0,loop:p,autoPlay:f,preload:`metadata`,onLoadedMetadata:P,onDurationChange:P,onTimeUpdate:()=>{let e=S.current;e&&E(e.currentTime*1e3)},onPlay:()=>w(!0),onPause:()=>w(!1),onEnded:()=>{w(!1),E(0),g?.()},onError:e=>_?.(e)}),(0,o.jsx)(`button`,{type:`button`,className:i.default.transport,onClick:F,disabled:v||!j,"aria-label":C?x.pause:x.play,title:C?x.pause:x.play,children:C?(0,o.jsx)(s.Pause,{size:16,"aria-hidden":!0}):(0,o.jsx)(s.Play,{size:16,"aria-hidden":!0})}),(0,o.jsx)(`input`,{type:`range`,className:i.default.seek,min:0,max:N?Math.round(M):0,step:100,value:Math.min(Math.round(T),N?Math.round(M):0),onChange:e=>I(Number(e.target.value)),disabled:v||!N,"aria-label":x.seek,"aria-valuetext":`${n.formatDuration(T)} / ${n.formatDuration(M)}`}),(0,o.jsxs)(`span`,{className:i.default.time,children:[(0,o.jsx)(`span`,{children:n.formatDuration(T)}),(0,o.jsx)(`span`,{"aria-hidden":`true`,children:`/`}),(0,o.jsx)(`span`,{children:n.formatDuration(M)})]}),h&&(0,o.jsx)(`span`,{className:i.default.actions,children:h})]})}exports.AudioPlayer=l;
 //# sourceMappingURL=AudioPlayer.cjs.map

package/dist/components/AudioPlayer/AudioPlayer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AudioPlayer.cjs","names":[],"sources":["../../../src/components/AudioPlayer/AudioPlayer.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — src accepts a URL or a Blob, and\n * everything else is a facet of playing it: durationMs (because MediaRecorder WebM\n * carries none), sinkId (output device), autoPlay/loop, onEnded/onError, plus the\n * actions slot and locale for the labels. The body is the transport state machine —\n * object-URL lifecycle, seek, and the rAF-free time updates — which shares one audio\n * element ref throughout.\n */\nimport { Pause, Play } from \"lucide-react\";\nimport { useEffect, useRef, useState, type HTMLAttributes } from \"react\";\n\nimport { setAudioOutput } from \"@/audio/audio-output\";\nimport { formatDuration } from \"@/audio/duration\";\nimport { useObjectUrl } from \"@/hooks/use-object-url\";\nimport { cn } from \"@/utils/cn\";\n\nimport styles from \"./AudioPlayer.module.css\";\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"children\";\n\nexport interface AudioPlayerProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /**\n     * What to play — a URL, or a `Blob`/`File` straight from a recorder.\n     *\n     * A `Blob` is wrapped in an object URL that is revoked when it changes or the\n     * component unmounts, so a page that records twenty notes does not leak twenty\n     * URLs for the lifetime of the tab.\n     */\n    src: string | Blob | null;\n    /**\n     * Known length in milliseconds.\n     *\n     * Pass it whenever you have it — a recording from `useAudioRecorder` always does.\n     * See the note on the seek bar for why the element's own `duration` is not\n     * trustworthy for a fresh recording.\n     */\n    durationMs?: number;\n    /** Output device, from `useMediaDevices().audioOutputs`. Chromium only. */\n    sinkId?: string;\n    /** Start playing as soon as `src` is ready. Default `false`. */\n    autoPlay?: boolean;\n    /** Loop. Default `false`. */\n    loop?: boolean;\n    /** Locale for the labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Rendered to the right of the times — a download button, a delete button. */\n    actions?: React.ReactNode;\n    /** Fired when playback reaches the end. */\n    onEnded?: () => void;\n    /** Fired when the element reports a decode/network error. */\n    onError?: (error: unknown) => void;\n    /** No `src` yet, or playback not allowed. */\n    disabled?: boolean;\n}\n\nconst STRINGS = {\n    \"pt-BR\": { play: \"Tocar\", pause: \"Pausar\", seek: \"Posição\" },\n    en: { play: \"Play\", pause: \"Pause\", seek: \"Seek\" },\n} as const;\n\n/**\n * Playback transport for one clip: play/pause, a seek bar, elapsed and total time.\n *\n * Built around a real `<audio>` element rather than the SDK's `createAudioPlayer`,\n * which is a fire-and-forget handle for notification chimes and has no transport to\n * expose. Accepts a `Blob` directly, because the thing an app most often plays is the\n * recording it just made.\n *\n * The seek bar is a bare `<input type=\"range\">` rather than the SDK's `Slider`: that\n * component is a form field, with a label row and a value badge, and a transport wants\n * neither. The native input keeps the keyboard and screen-reader behaviour that\n * matters here for free.\n *\n * @example\n * const rec = useAudioRecorder(mic.stream);\n * {rec.recording && (\n *     <AudioPlayer src={rec.recording.blob} durationMs={rec.recording.durationMs} />\n * )}\n */\nexport function AudioPlayer({\n    src,\n    durationMs,\n    sinkId,\n    autoPlay = false,\n    loop = false,\n    locale = \"pt-BR\",\n    actions,\n    onEnded,\n    onError,\n    disabled = false,\n    className,\n    ...rest\n}: AudioPlayerProps) {\n    const strings = STRINGS[locale];\n    const audio = useRef<HTMLAudioElement | null>(null);\n    const [playing, setPlaying] = useState(false);\n    const [currentMs, setCurrentMs] = useState(0);\n    const [elementMs, setElementMs] = useState(Number.POSITIVE_INFINITY);\n    const probed = useRef(false);\n\n    const blobUrl = useObjectUrl(typeof src === \"string\" ? null : src);\n    const url = typeof src === \"string\" ? src : blobUrl;\n\n    /**\n     * Total length, preferring what the caller knows.\n     *\n     * `MediaRecorder` writes WebM with no duration in the header, so a fresh recording\n     * reports `Infinity` — which is why the recorder keeps its own clock and passes it\n     * here. `durationMs` wins whenever it is finite; the element's value is the\n     * fallback for a plain URL.\n     */\n    const totalMs = Number.isFinite(durationMs) ? (durationMs as number) : elementMs;\n    const seekable = Number.isFinite(totalMs) && totalMs > 0;\n\n    useEffect(() => {\n        setCurrentMs(0);\n        setPlaying(false);\n        setElementMs(Number.POSITIVE_INFINITY);\n        probed.current = false;\n    }, [url]);\n\n    useEffect(() => {\n        if (sinkId === undefined) return;\n        void setAudioOutput(audio.current, sinkId);\n    }, [sinkId, url]);\n\n    /**\n     * Coax a duration out of an element that reports `Infinity`.\n     *\n     * Seeking past the end forces the browser to demux to the last frame, after which\n     * it knows the real length. It is a hack with no alternative — the header simply\n     * does not carry the value — and it runs at most once per source, only when the\n     * caller gave us no `durationMs`.\n     */\n    const handleMetadata = (): void => {\n        const node = audio.current;\n        if (!node) return;\n        if (Number.isFinite(node.duration)) {\n            setElementMs(node.duration * 1000);\n            return;\n        }\n        if (probed.current || Number.isFinite(durationMs)) return;\n        probed.current = true;\n        const onSeeked = (): void => {\n            node.removeEventListener(\"timeupdate\", onSeeked);\n            if (Number.isFinite(node.duration)) setElementMs(node.duration * 1000);\n            node.currentTime = 0;\n        };\n        node.addEventListener(\"timeupdate\", onSeeked);\n        node.currentTime = 1e101;\n    };\n\n    const toggle = (): void => {\n        const node = audio.current;\n        if (!node || !url) return;\n        if (node.paused) {\n            void node\n                .play()\n                .then(() => setPlaying(true))\n                .catch((error: unknown) => onError?.(error));\n            return;\n        }\n        node.pause();\n        setPlaying(false);\n    };\n\n    const seek = (ms: number): void => {\n        const node = audio.current;\n        if (!node || !seekable) return;\n        node.currentTime = ms / 1000;\n        setCurrentMs(ms);\n    };\n\n    return (\n        <div className={cn(styles.player, className)} {...rest}>\n            <audio\n                ref={audio}\n                src={url ?? undefined}\n                loop={loop}\n                autoPlay={autoPlay}\n                preload=\"metadata\"\n                onLoadedMetadata={handleMetadata}\n                onDurationChange={handleMetadata}\n                onTimeUpdate={() => {\n                    const node = audio.current;\n                    if (node) setCurrentMs(node.currentTime * 1000);\n                }}\n                onPlay={() => setPlaying(true)}\n                onPause={() => setPlaying(false)}\n                onEnded={() => {\n                    setPlaying(false);\n                    setCurrentMs(0);\n                    onEnded?.();\n                }}\n                onError={(event) => onError?.(event)}\n            />\n\n            <button\n                type=\"button\"\n                className={styles.transport}\n                onClick={toggle}\n                disabled={disabled || !url}\n                aria-label={playing ? strings.pause : strings.play}\n                title={playing ? strings.pause : strings.play}\n            >\n                {playing ? <Pause size={16} aria-hidden /> : <Play size={16} aria-hidden />}\n            </button>\n\n            <input\n                type=\"range\"\n                className={styles.seek}\n                min={0}\n                max={seekable ? Math.round(totalMs) : 0}\n                step={100}\n                value={Math.min(Math.round(currentMs), seekable ? Math.round(totalMs) : 0)}\n                onChange={(event) => seek(Number(event.target.value))}\n                disabled={disabled || !seekable}\n                aria-label={strings.seek}\n                aria-valuetext={`${formatDuration(currentMs)} / ${formatDuration(totalMs)}`}\n            />\n\n            <span className={styles.time}>\n                <span>{formatDuration(currentMs)}</span>\n                <span aria-hidden=\"true\">/</span>\n                <span>{formatDuration(totalMs)}</span>\n            </span>\n\n            {actions && <span className={styles.actions}>{actions}</span>}\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AudioPlayer.cjs","names":["useRef","useState","useObjectUrl","setAudioOutput","cn","styles","Pause","Play","formatDuration","require_cn","require_use_object_url","require_duration","require_audio_output","require_AudioPlayer_module","react","react_jsx_runtime","lucide_react","STRINGS","AudioPlayer","rest","strings","locale","audio","playing","setPlaying","currentMs","setCurrentMs","elementMs","setElementMs","probed","blobUrl","src","url","totalMs","durationMs","seekable","sinkId","handleMetadata","node","onSeeked","toggle","onError","error","seek","ms","className","onEnded","event","disabled","actions"],"sources":["../../../src/components/AudioPlayer/AudioPlayer.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — src accepts a URL or a Blob, and\n * everything else is a facet of playing it: durationMs (because MediaRecorder WebM\n * carries none), sinkId (output device), autoPlay/loop, onEnded/onError, plus the\n * actions slot and locale for the labels. The body is the transport state machine —\n * object-URL lifecycle, seek, and the rAF-free time updates — which shares one audio\n * element ref throughout.\n */\nimport { Pause, Play } from \"lucide-react\";\nimport { useEffect, useRef, useState, type HTMLAttributes } from \"react\";\n\nimport { setAudioOutput } from \"@/audio/audio-output\";\nimport { formatDuration } from \"@/audio/duration\";\nimport { useObjectUrl } from \"@/hooks/use-object-url\";\nimport { cn } from \"@/utils/cn\";\n\nimport styles from \"./AudioPlayer.module.css\";\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"children\";\n\nexport interface AudioPlayerProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /**\n     * What to play — a URL, or a `Blob`/`File` straight from a recorder.\n     *\n     * A `Blob` is wrapped in an object URL that is revoked when it changes or the\n     * component unmounts, so a page that records twenty notes does not leak twenty\n     * URLs for the lifetime of the tab.\n     */\n    src: string | Blob | null;\n    /**\n     * Known length in milliseconds.\n     *\n     * Pass it whenever you have it — a recording from `useAudioRecorder` always does.\n     * See the note on the seek bar for why the element's own `duration` is not\n     * trustworthy for a fresh recording.\n     */\n    durationMs?: number;\n    /** Output device, from `useMediaDevices().audioOutputs`. Chromium only. */\n    sinkId?: string;\n    /** Start playing as soon as `src` is ready. Default `false`. */\n    autoPlay?: boolean;\n    /** Loop. Default `false`. */\n    loop?: boolean;\n    /** Locale for the labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Rendered to the right of the times — a download button, a delete button. */\n    actions?: React.ReactNode;\n    /** Fired when playback reaches the end. */\n    onEnded?: () => void;\n    /** Fired when the element reports a decode/network error. */\n    onError?: (error: unknown) => void;\n    /** No `src` yet, or playback not allowed. */\n    disabled?: boolean;\n}\n\nconst STRINGS = {\n    \"pt-BR\": { play: \"Tocar\", pause: \"Pausar\", seek: \"Posição\" },\n    en: { play: \"Play\", pause: \"Pause\", seek: \"Seek\" },\n} as const;\n\n/**\n * Playback transport for one clip: play/pause, a seek bar, elapsed and total time.\n *\n * Built around a real `<audio>` element rather than the SDK's `createAudioPlayer`,\n * which is a fire-and-forget handle for notification chimes and has no transport to\n * expose. Accepts a `Blob` directly, because the thing an app most often plays is the\n * recording it just made.\n *\n * The seek bar is a bare `<input type=\"range\">` rather than the SDK's `Slider`: that\n * component is a form field, with a label row and a value badge, and a transport wants\n * neither. The native input keeps the keyboard and screen-reader behaviour that\n * matters here for free.\n *\n * @example\n * const rec = useAudioRecorder(mic.stream);\n * {rec.recording && (\n *     <AudioPlayer src={rec.recording.blob} durationMs={rec.recording.durationMs} />\n * )}\n */\nexport function AudioPlayer({\n    src,\n    durationMs,\n    sinkId,\n    autoPlay = false,\n    loop = false,\n    locale = \"pt-BR\",\n    actions,\n    onEnded,\n    onError,\n    disabled = false,\n    className,\n    ...rest\n}: AudioPlayerProps) {\n    const strings = STRINGS[locale];\n    const audio = useRef<HTMLAudioElement | null>(null);\n    const [playing, setPlaying] = useState(false);\n    const [currentMs, setCurrentMs] = useState(0);\n    const [elementMs, setElementMs] = useState(Number.POSITIVE_INFINITY);\n    const probed = useRef(false);\n\n    const blobUrl = useObjectUrl(typeof src === \"string\" ? null : src);\n    const url = typeof src === \"string\" ? src : blobUrl;\n\n    /**\n     * Total length, preferring what the caller knows.\n     *\n     * `MediaRecorder` writes WebM with no duration in the header, so a fresh recording\n     * reports `Infinity` — which is why the recorder keeps its own clock and passes it\n     * here. `durationMs` wins whenever it is finite; the element's value is the\n     * fallback for a plain URL.\n     */\n    const totalMs = Number.isFinite(durationMs) ? (durationMs as number) : elementMs;\n    const seekable = Number.isFinite(totalMs) && totalMs > 0;\n\n    useEffect(() => {\n        setCurrentMs(0);\n        setPlaying(false);\n        setElementMs(Number.POSITIVE_INFINITY);\n        probed.current = false;\n    }, [url]);\n\n    useEffect(() => {\n        if (sinkId === undefined) return;\n        void setAudioOutput(audio.current, sinkId);\n    }, [sinkId, url]);\n\n    /**\n     * Coax a duration out of an element that reports `Infinity`.\n     *\n     * Seeking past the end forces the browser to demux to the last frame, after which\n     * it knows the real length. It is a hack with no alternative — the header simply\n     * does not carry the value — and it runs at most once per source, only when the\n     * caller gave us no `durationMs`.\n     */\n    const handleMetadata = (): void => {\n        const node = audio.current;\n        if (!node) return;\n        if (Number.isFinite(node.duration)) {\n            setElementMs(node.duration * 1000);\n            return;\n        }\n        if (probed.current || Number.isFinite(durationMs)) return;\n        probed.current = true;\n        const onSeeked = (): void => {\n            node.removeEventListener(\"timeupdate\", onSeeked);\n            if (Number.isFinite(node.duration)) setElementMs(node.duration * 1000);\n            node.currentTime = 0;\n        };\n        node.addEventListener(\"timeupdate\", onSeeked);\n        node.currentTime = 1e101;\n    };\n\n    const toggle = (): void => {\n        const node = audio.current;\n        if (!node || !url) return;\n        if (node.paused) {\n            void node\n                .play()\n                .then(() => setPlaying(true))\n                .catch((error: unknown) => onError?.(error));\n            return;\n        }\n        node.pause();\n        setPlaying(false);\n    };\n\n    const seek = (ms: number): void => {\n        const node = audio.current;\n        if (!node || !seekable) return;\n        node.currentTime = ms / 1000;\n        setCurrentMs(ms);\n    };\n\n    return (\n        <div className={cn(styles.player, className)} {...rest}>\n            <audio\n                ref={audio}\n                src={url ?? undefined}\n                loop={loop}\n                autoPlay={autoPlay}\n                preload=\"metadata\"\n                onLoadedMetadata={handleMetadata}\n                onDurationChange={handleMetadata}\n                onTimeUpdate={() => {\n                    const node = audio.current;\n                    if (node) setCurrentMs(node.currentTime * 1000);\n                }}\n                onPlay={() => setPlaying(true)}\n                onPause={() => setPlaying(false)}\n                onEnded={() => {\n                    setPlaying(false);\n                    setCurrentMs(0);\n                    onEnded?.();\n                }}\n                onError={(event) => onError?.(event)}\n            />\n\n            <button\n                type=\"button\"\n                className={styles.transport}\n                onClick={toggle}\n                disabled={disabled || !url}\n                aria-label={playing ? strings.pause : strings.play}\n                title={playing ? strings.pause : strings.play}\n            >\n                {playing ? <Pause size={16} aria-hidden /> : <Play size={16} aria-hidden />}\n            </button>\n\n            <input\n                type=\"range\"\n                className={styles.seek}\n                min={0}\n                max={seekable ? Math.round(totalMs) : 0}\n                step={100}\n                value={Math.min(Math.round(currentMs), seekable ? Math.round(totalMs) : 0)}\n                onChange={(event) => seek(Number(event.target.value))}\n                disabled={disabled || !seekable}\n                aria-label={strings.seek}\n                aria-valuetext={`${formatDuration(currentMs)} / ${formatDuration(totalMs)}`}\n            />\n\n            <span className={styles.time}>\n                <span>{formatDuration(currentMs)}</span>\n                <span aria-hidden=\"true\">/</span>\n                <span>{formatDuration(totalMs)}</span>\n            </span>\n\n            {actions && <span className={styles.actions}>{actions}</span>}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/AudioPlayer/AudioPlayer.js

@@ -41,13 +41,7 @@ function p({ src: p, durationMs: m, sinkId: h, autoPlay: g = !1, loop: _ = !1, l
 		e.addEventListener("timeupdate", t), e.currentTime = 1e101;
 	}, z = () => {
 		let e = E.current;
-		if (e && F) {
-			if (e.paused) {
-				e.play().then(() => O(!0)).catch((e) => x?.(e));
-				return;
-			}
-			e.pause(), O(!1);
-		}
+		e && F && (e.paused ? e.play().then(() => O(!0)).catch((e) => x?.(e)) : (e.pause(), O(!1)));
 	}, B = (e) => {
 		let t = E.current;
 		t && L && (t.currentTime = e / 1e3, A(e));

package/dist/components/AudioPlayer/AudioPlayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"AudioPlayer.js","names":[],"sources":["../../../src/components/AudioPlayer/AudioPlayer.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — src accepts a URL or a Blob, and\n * everything else is a facet of playing it: durationMs (because MediaRecorder WebM\n * carries none), sinkId (output device), autoPlay/loop, onEnded/onError, plus the\n * actions slot and locale for the labels. The body is the transport state machine —\n * object-URL lifecycle, seek, and the rAF-free time updates — which shares one audio\n * element ref throughout.\n */\nimport { Pause, Play } from \"lucide-react\";\nimport { useEffect, useRef, useState, type HTMLAttributes } from \"react\";\n\nimport { setAudioOutput } from \"@/audio/audio-output\";\nimport { formatDuration } from \"@/audio/duration\";\nimport { useObjectUrl } from \"@/hooks/use-object-url\";\nimport { cn } from \"@/utils/cn\";\n\nimport styles from \"./AudioPlayer.module.css\";\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"children\";\n\nexport interface AudioPlayerProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /**\n     * What to play — a URL, or a `Blob`/`File` straight from a recorder.\n     *\n     * A `Blob` is wrapped in an object URL that is revoked when it changes or the\n     * component unmounts, so a page that records twenty notes does not leak twenty\n     * URLs for the lifetime of the tab.\n     */\n    src: string | Blob | null;\n    /**\n     * Known length in milliseconds.\n     *\n     * Pass it whenever you have it — a recording from `useAudioRecorder` always does.\n     * See the note on the seek bar for why the element's own `duration` is not\n     * trustworthy for a fresh recording.\n     */\n    durationMs?: number;\n    /** Output device, from `useMediaDevices().audioOutputs`. Chromium only. */\n    sinkId?: string;\n    /** Start playing as soon as `src` is ready. Default `false`. */\n    autoPlay?: boolean;\n    /** Loop. Default `false`. */\n    loop?: boolean;\n    /** Locale for the labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Rendered to the right of the times — a download button, a delete button. */\n    actions?: React.ReactNode;\n    /** Fired when playback reaches the end. */\n    onEnded?: () => void;\n    /** Fired when the element reports a decode/network error. */\n    onError?: (error: unknown) => void;\n    /** No `src` yet, or playback not allowed. */\n    disabled?: boolean;\n}\n\nconst STRINGS = {\n    \"pt-BR\": { play: \"Tocar\", pause: \"Pausar\", seek: \"Posição\" },\n    en: { play: \"Play\", pause: \"Pause\", seek: \"Seek\" },\n} as const;\n\n/**\n * Playback transport for one clip: play/pause, a seek bar, elapsed and total time.\n *\n * Built around a real `<audio>` element rather than the SDK's `createAudioPlayer`,\n * which is a fire-and-forget handle for notification chimes and has no transport to\n * expose. Accepts a `Blob` directly, because the thing an app most often plays is the\n * recording it just made.\n *\n * The seek bar is a bare `<input type=\"range\">` rather than the SDK's `Slider`: that\n * component is a form field, with a label row and a value badge, and a transport wants\n * neither. The native input keeps the keyboard and screen-reader behaviour that\n * matters here for free.\n *\n * @example\n * const rec = useAudioRecorder(mic.stream);\n * {rec.recording && (\n *     <AudioPlayer src={rec.recording.blob} durationMs={rec.recording.durationMs} />\n * )}\n */\nexport function AudioPlayer({\n    src,\n    durationMs,\n    sinkId,\n    autoPlay = false,\n    loop = false,\n    locale = \"pt-BR\",\n    actions,\n    onEnded,\n    onError,\n    disabled = false,\n    className,\n    ...rest\n}: AudioPlayerProps) {\n    const strings = STRINGS[locale];\n    const audio = useRef<HTMLAudioElement | null>(null);\n    const [playing, setPlaying] = useState(false);\n    const [currentMs, setCurrentMs] = useState(0);\n    const [elementMs, setElementMs] = useState(Number.POSITIVE_INFINITY);\n    const probed = useRef(false);\n\n    const blobUrl = useObjectUrl(typeof src === \"string\" ? null : src);\n    const url = typeof src === \"string\" ? src : blobUrl;\n\n    /**\n     * Total length, preferring what the caller knows.\n     *\n     * `MediaRecorder` writes WebM with no duration in the header, so a fresh recording\n     * reports `Infinity` — which is why the recorder keeps its own clock and passes it\n     * here. `durationMs` wins whenever it is finite; the element's value is the\n     * fallback for a plain URL.\n     */\n    const totalMs = Number.isFinite(durationMs) ? (durationMs as number) : elementMs;\n    const seekable = Number.isFinite(totalMs) && totalMs > 0;\n\n    useEffect(() => {\n        setCurrentMs(0);\n        setPlaying(false);\n        setElementMs(Number.POSITIVE_INFINITY);\n        probed.current = false;\n    }, [url]);\n\n    useEffect(() => {\n        if (sinkId === undefined) return;\n        void setAudioOutput(audio.current, sinkId);\n    }, [sinkId, url]);\n\n    /**\n     * Coax a duration out of an element that reports `Infinity`.\n     *\n     * Seeking past the end forces the browser to demux to the last frame, after which\n     * it knows the real length. It is a hack with no alternative — the header simply\n     * does not carry the value — and it runs at most once per source, only when the\n     * caller gave us no `durationMs`.\n     */\n    const handleMetadata = (): void => {\n        const node = audio.current;\n        if (!node) return;\n        if (Number.isFinite(node.duration)) {\n            setElementMs(node.duration * 1000);\n            return;\n        }\n        if (probed.current || Number.isFinite(durationMs)) return;\n        probed.current = true;\n        const onSeeked = (): void => {\n            node.removeEventListener(\"timeupdate\", onSeeked);\n            if (Number.isFinite(node.duration)) setElementMs(node.duration * 1000);\n            node.currentTime = 0;\n        };\n        node.addEventListener(\"timeupdate\", onSeeked);\n        node.currentTime = 1e101;\n    };\n\n    const toggle = (): void => {\n        const node = audio.current;\n        if (!node || !url) return;\n        if (node.paused) {\n            void node\n                .play()\n                .then(() => setPlaying(true))\n                .catch((error: unknown) => onError?.(error));\n            return;\n        }\n        node.pause();\n        setPlaying(false);\n    };\n\n    const seek = (ms: number): void => {\n        const node = audio.current;\n        if (!node || !seekable) return;\n        node.currentTime = ms / 1000;\n        setCurrentMs(ms);\n    };\n\n    return (\n        <div className={cn(styles.player, className)} {...rest}>\n            <audio\n                ref={audio}\n                src={url ?? undefined}\n                loop={loop}\n                autoPlay={autoPlay}\n                preload=\"metadata\"\n                onLoadedMetadata={handleMetadata}\n                onDurationChange={handleMetadata}\n                onTimeUpdate={() => {\n                    const node = audio.current;\n                    if (node) setCurrentMs(node.currentTime * 1000);\n                }}\n                onPlay={() => setPlaying(true)}\n                onPause={() => setPlaying(false)}\n                onEnded={() => {\n                    setPlaying(false);\n                    setCurrentMs(0);\n                    onEnded?.();\n                }}\n                onError={(event) => onError?.(event)}\n            />\n\n            <button\n                type=\"button\"\n                className={styles.transport}\n                onClick={toggle}\n                disabled={disabled || !url}\n                aria-label={playing ? strings.pause : strings.play}\n                title={playing ? strings.pause : strings.play}\n            >\n                {playing ? <Pause size={16} aria-hidden /> : <Play size={16} aria-hidden />}\n            </button>\n\n            <input\n                type=\"range\"\n                className={styles.seek}\n                min={0}\n                max={seekable ? Math.round(totalMs) : 0}\n                step={100}\n                value={Math.min(Math.round(currentMs), seekable ? Math.round(totalMs) : 0)}\n                onChange={(event) => seek(Number(event.target.value))}\n                disabled={disabled || !seekable}\n                aria-label={strings.seek}\n                aria-valuetext={`${formatDuration(currentMs)} / ${formatDuration(totalMs)}`}\n            />\n\n            <span className={styles.time}>\n                <span>{formatDuration(currentMs)}</span>\n                <span aria-hidden=\"true\">/</span>\n                <span>{formatDuration(totalMs)}</span>\n            </span>\n\n            {actions && <span className={styles.actions}>{actions}</span>}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;AAwDA,IAAM,IAAU;CACZ,SAAS;EAAE,MAAM;EAAS,OAAO;EAAU,MAAM;CAAU;CAC3D,IAAI;EAAE,MAAM;EAAQ,OAAO;EAAS,MAAM;CAAO;AACrD;AAqBA,SAAgB,EAAY,EACxB,QACA,eACA,WACA,cAAW,IACX,UAAO,IACP,YAAS,SACT,YACA,YACA,YACA,cAAW,IACX,cACA,GAAG,KACc;CACjB,IAAM,IAAU,EAAQ,IAClB,IAAQ,EAAgC,IAAI,GAC5C,CAAC,GAAS,KAAc,EAAS,EAAK,GACtC,CAAC,GAAW,KAAgB,EAAS,CAAC,GACtC,CAAC,GAAW,KAAgB,EAAS,QAAwB,GAC7D,IAAS,EAAO,EAAK,GAErB,IAAU,EAAa,OAAO,KAAQ,WAAW,OAAO,CAAG,GAC3D,IAAM,OAAO,KAAQ,WAAW,IAAM,GAUtC,IAAU,OAAO,SAAS,CAAU,IAAK,IAAwB,GACjE,IAAW,OAAO,SAAS,CAAO,KAAK,IAAU;CASvD,AAPA,QAAgB;EAIZ,AAHA,EAAa,CAAC,GACd,EAAW,EAAK,GAChB,EAAa,QAAwB,GACrC,EAAO,UAAU;CACrB,GAAG,CAAC,CAAG,CAAC,GAER,QAAgB;EACR,MAAW,KAAA,KACf,EAAoB,EAAM,SAAS,CAAM;CAC7C,GAAG,CAAC,GAAQ,CAAG,CAAC;CAUhB,IAAM,UAA6B;EAC/B,IAAM,IAAO,EAAM;EACnB,IAAI,CAAC,GAAM;EACX,IAAI,OAAO,SAAS,EAAK,QAAQ,GAAG;GAChC,EAAa,EAAK,WAAW,GAAI;GACjC;EACJ;EACA,IAAI,EAAO,WAAW,OAAO,SAAS,CAAU,GAAG;EACnD,EAAO,UAAU;EACjB,IAAM,UAAuB;GAGzB,AAFA,EAAK,oBAAoB,cAAc,CAAQ,GAC3C,OAAO,SAAS,EAAK,QAAQ,KAAG,EAAa,EAAK,WAAW,GAAI,GACrE,EAAK,cAAc;EACvB;EAEA,AADA,EAAK,iBAAiB,cAAc,CAAQ,GAC5C,EAAK,cAAc;CACvB,GAEM,UAAqB;EACvB,IAAM,IAAO,EAAM;EACf,IAAC,KAAS,GACd;OAAI,EAAK,QAAQ;IACb,EACK,KAAK,CAAC,CACN,WAAW,EAAW,EAAI,CAAC,CAAC,CAC5B,OAAO,MAAmB,IAAU,CAAK,CAAC;IAC/C;GACJ;GAEA,AADA,EAAK,MAAM,GACX,EAAW,EAAK;EAFhB;CAGJ,GAEM,KAAQ,MAAqB;EAC/B,IAAM,IAAO,EAAM;EACf,AAAC,KAAS,MACd,EAAK,cAAc,IAAK,KACxB,EAAa,CAAE;CACnB;CAEA,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,QAAQ,CAAS;EAAG,GAAI;EAAlD,UAAA;GACI,kBAAC,SAAD;IACI,KAAK;IACL,KAAK,KAAO,KAAA;IACN;IACI;IACV,SAAQ;IACR,kBAAkB;IAClB,kBAAkB;IAClB,oBAAoB;KAChB,IAAM,IAAO,EAAM;KACnB,AAAI,KAAM,EAAa,EAAK,cAAc,GAAI;IAClD;IACA,cAAc,EAAW,EAAI;IAC7B,eAAe,EAAW,EAAK;IAC/B,eAAe;KAGX,AAFA,EAAW,EAAK,GAChB,EAAa,CAAC,GACd,IAAU;IACd;IACA,UAAU,MAAU,IAAU,CAAK;GACtC,CAAA;GAED,kBAAC,UAAD;IACI,MAAK;IACL,WAAW,EAAO;IAClB,SAAS;IACT,UAAU,KAAY,CAAC;IACvB,cAAY,IAAU,EAAQ,QAAQ,EAAQ;IAC9C,OAAO,IAAU,EAAQ,QAAQ,EAAQ;IAExC,UAAU,EAAV,IAAW,IAAkC,GAAnC;KAAO,MAAM;KAAI,eAAA;IAAa,CAAiC;GACtE,CAAA;GAER,kBAAC,SAAD;IACI,MAAK;IACL,WAAW,EAAO;IAClB,KAAK;IACL,KAAK,IAAW,KAAK,MAAM,CAAO,IAAI;IACtC,MAAM;IACN,OAAO,KAAK,IAAI,KAAK,MAAM,CAAS,GAAG,IAAW,KAAK,MAAM,CAAO,IAAI,CAAC;IACzE,WAAW,MAAU,EAAK,OAAO,EAAM,OAAO,KAAK,CAAC;IACpD,UAAU,KAAY,CAAC;IACvB,cAAY,EAAQ;IACpB,kBAAgB,GAAG,EAAe,CAAS,EAAE,KAAK,EAAe,CAAO;GAC3E,CAAA;GAED,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAxB,UAAA;KACI,kBAAC,QAAD,EAAA,UAAO,EAAe,CAAS,EAAQ,CAAA;KACvC,kBAAC,QAAD;MAAM,eAAY;MAAO,UAAA;KAAO,CAAA;KAChC,kBAAC,QAAD,EAAA,UAAO,EAAe,CAAO,EAAQ,CAAA;IACnC;;GAEL,KAAW,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAU,UAAA;GAAc,CAAA;EAC3D;;AAEb"}
+{"version":3,"file":"AudioPlayer.js","names":["styles","AudioPlayer_module_default","STRINGS","AudioPlayer","rest","strings","locale","audio","useRef","playing","setPlaying","useState","currentMs","setCurrentMs","elementMs","setElementMs","probed","blobUrl","useObjectUrl","src","url","totalMs","durationMs","seekable","useEffect","sinkId","setAudioOutput","handleMetadata","node","onSeeked","toggle","onError","error","seek","ms","cn","className","onEnded","event","disabled","jsx","Pause","Play","formatDuration","actions"],"sources":["../../../src/components/AudioPlayer/AudioPlayer.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — src accepts a URL or a Blob, and\n * everything else is a facet of playing it: durationMs (because MediaRecorder WebM\n * carries none), sinkId (output device), autoPlay/loop, onEnded/onError, plus the\n * actions slot and locale for the labels. The body is the transport state machine —\n * object-URL lifecycle, seek, and the rAF-free time updates — which shares one audio\n * element ref throughout.\n */\nimport { Pause, Play } from \"lucide-react\";\nimport { useEffect, useRef, useState, type HTMLAttributes } from \"react\";\n\nimport { setAudioOutput } from \"@/audio/audio-output\";\nimport { formatDuration } from \"@/audio/duration\";\nimport { useObjectUrl } from \"@/hooks/use-object-url\";\nimport { cn } from \"@/utils/cn\";\n\nimport styles from \"./AudioPlayer.module.css\";\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"children\";\n\nexport interface AudioPlayerProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /**\n     * What to play — a URL, or a `Blob`/`File` straight from a recorder.\n     *\n     * A `Blob` is wrapped in an object URL that is revoked when it changes or the\n     * component unmounts, so a page that records twenty notes does not leak twenty\n     * URLs for the lifetime of the tab.\n     */\n    src: string | Blob | null;\n    /**\n     * Known length in milliseconds.\n     *\n     * Pass it whenever you have it — a recording from `useAudioRecorder` always does.\n     * See the note on the seek bar for why the element's own `duration` is not\n     * trustworthy for a fresh recording.\n     */\n    durationMs?: number;\n    /** Output device, from `useMediaDevices().audioOutputs`. Chromium only. */\n    sinkId?: string;\n    /** Start playing as soon as `src` is ready. Default `false`. */\n    autoPlay?: boolean;\n    /** Loop. Default `false`. */\n    loop?: boolean;\n    /** Locale for the labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Rendered to the right of the times — a download button, a delete button. */\n    actions?: React.ReactNode;\n    /** Fired when playback reaches the end. */\n    onEnded?: () => void;\n    /** Fired when the element reports a decode/network error. */\n    onError?: (error: unknown) => void;\n    /** No `src` yet, or playback not allowed. */\n    disabled?: boolean;\n}\n\nconst STRINGS = {\n    \"pt-BR\": { play: \"Tocar\", pause: \"Pausar\", seek: \"Posição\" },\n    en: { play: \"Play\", pause: \"Pause\", seek: \"Seek\" },\n} as const;\n\n/**\n * Playback transport for one clip: play/pause, a seek bar, elapsed and total time.\n *\n * Built around a real `<audio>` element rather than the SDK's `createAudioPlayer`,\n * which is a fire-and-forget handle for notification chimes and has no transport to\n * expose. Accepts a `Blob` directly, because the thing an app most often plays is the\n * recording it just made.\n *\n * The seek bar is a bare `<input type=\"range\">` rather than the SDK's `Slider`: that\n * component is a form field, with a label row and a value badge, and a transport wants\n * neither. The native input keeps the keyboard and screen-reader behaviour that\n * matters here for free.\n *\n * @example\n * const rec = useAudioRecorder(mic.stream);\n * {rec.recording && (\n *     <AudioPlayer src={rec.recording.blob} durationMs={rec.recording.durationMs} />\n * )}\n */\nexport function AudioPlayer({\n    src,\n    durationMs,\n    sinkId,\n    autoPlay = false,\n    loop = false,\n    locale = \"pt-BR\",\n    actions,\n    onEnded,\n    onError,\n    disabled = false,\n    className,\n    ...rest\n}: AudioPlayerProps) {\n    const strings = STRINGS[locale];\n    const audio = useRef<HTMLAudioElement | null>(null);\n    const [playing, setPlaying] = useState(false);\n    const [currentMs, setCurrentMs] = useState(0);\n    const [elementMs, setElementMs] = useState(Number.POSITIVE_INFINITY);\n    const probed = useRef(false);\n\n    const blobUrl = useObjectUrl(typeof src === \"string\" ? null : src);\n    const url = typeof src === \"string\" ? src : blobUrl;\n\n    /**\n     * Total length, preferring what the caller knows.\n     *\n     * `MediaRecorder` writes WebM with no duration in the header, so a fresh recording\n     * reports `Infinity` — which is why the recorder keeps its own clock and passes it\n     * here. `durationMs` wins whenever it is finite; the element's value is the\n     * fallback for a plain URL.\n     */\n    const totalMs = Number.isFinite(durationMs) ? (durationMs as number) : elementMs;\n    const seekable = Number.isFinite(totalMs) && totalMs > 0;\n\n    useEffect(() => {\n        setCurrentMs(0);\n        setPlaying(false);\n        setElementMs(Number.POSITIVE_INFINITY);\n        probed.current = false;\n    }, [url]);\n\n    useEffect(() => {\n        if (sinkId === undefined) return;\n        void setAudioOutput(audio.current, sinkId);\n    }, [sinkId, url]);\n\n    /**\n     * Coax a duration out of an element that reports `Infinity`.\n     *\n     * Seeking past the end forces the browser to demux to the last frame, after which\n     * it knows the real length. It is a hack with no alternative — the header simply\n     * does not carry the value — and it runs at most once per source, only when the\n     * caller gave us no `durationMs`.\n     */\n    const handleMetadata = (): void => {\n        const node = audio.current;\n        if (!node) return;\n        if (Number.isFinite(node.duration)) {\n            setElementMs(node.duration * 1000);\n            return;\n        }\n        if (probed.current || Number.isFinite(durationMs)) return;\n        probed.current = true;\n        const onSeeked = (): void => {\n            node.removeEventListener(\"timeupdate\", onSeeked);\n            if (Number.isFinite(node.duration)) setElementMs(node.duration * 1000);\n            node.currentTime = 0;\n        };\n        node.addEventListener(\"timeupdate\", onSeeked);\n        node.currentTime = 1e101;\n    };\n\n    const toggle = (): void => {\n        const node = audio.current;\n        if (!node || !url) return;\n        if (node.paused) {\n            void node\n                .play()\n                .then(() => setPlaying(true))\n                .catch((error: unknown) => onError?.(error));\n            return;\n        }\n        node.pause();\n        setPlaying(false);\n    };\n\n    const seek = (ms: number): void => {\n        const node = audio.current;\n        if (!node || !seekable) return;\n        node.currentTime = ms / 1000;\n        setCurrentMs(ms);\n    };\n\n    return (\n        <div className={cn(styles.player, className)} {...rest}>\n            <audio\n                ref={audio}\n                src={url ?? undefined}\n                loop={loop}\n                autoPlay={autoPlay}\n                preload=\"metadata\"\n                onLoadedMetadata={handleMetadata}\n                onDurationChange={handleMetadata}\n                onTimeUpdate={() => {\n                    const node = audio.current;\n                    if (node) setCurrentMs(node.currentTime * 1000);\n                }}\n                onPlay={() => setPlaying(true)}\n                onPause={() => setPlaying(false)}\n                onEnded={() => {\n                    setPlaying(false);\n                    setCurrentMs(0);\n                    onEnded?.();\n                }}\n                onError={(event) => onError?.(event)}\n            />\n\n            <button\n                type=\"button\"\n                className={styles.transport}\n                onClick={toggle}\n                disabled={disabled || !url}\n                aria-label={playing ? strings.pause : strings.play}\n                title={playing ? strings.pause : strings.play}\n            >\n                {playing ? <Pause size={16} aria-hidden /> : <Play size={16} aria-hidden />}\n            </button>\n\n            <input\n                type=\"range\"\n                className={styles.seek}\n                min={0}\n                max={seekable ? Math.round(totalMs) : 0}\n                step={100}\n                value={Math.min(Math.round(currentMs), seekable ? Math.round(totalMs) : 0)}\n                onChange={(event) => seek(Number(event.target.value))}\n                disabled={disabled || !seekable}\n                aria-label={strings.seek}\n                aria-valuetext={`${formatDuration(currentMs)} / ${formatDuration(totalMs)}`}\n            />\n\n            <span className={styles.time}>\n                <span>{formatDuration(currentMs)}</span>\n                <span aria-hidden=\"true\">/</span>\n                <span>{formatDuration(totalMs)}</span>\n            </span>\n\n            {actions && <span className={styles.actions}>{actions}</span>}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/AudioPlayer/AudioPlayer.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AudioPlayer.module.cjs","names":[],"sources":["../../../src/components/AudioPlayer/AudioPlayer.module.css"],"sourcesContent":[".player {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-3);\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n.transport {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: 2.25rem;\n    height: 2.25rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.transport:disabled {\n    background-color: var(--tempest-surface-3);\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.transport:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .transport {\n        transition: none;\n    }\n}\n\n/*\n * The track is drawn on the input itself rather than with a wrapper and an overlay:\n * the native element already carries the keyboard behaviour and the value semantics,\n * and the only thing missing is the look.\n */\n.seek {\n    flex: 1 1 auto;\n    min-width: 3rem;\n    height: 1.25rem;\n    margin: 0;\n    background: none;\n    accent-color: var(--tempest-primary);\n    cursor: pointer;\n}\n\n.seek:disabled {\n    accent-color: var(--tempest-surface-3);\n    cursor: not-allowed;\n}\n\n.seek:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n/*\n * Tabular figures, so the elapsed time does not shift the seek bar sideways as the\n * digits change — a proportional `1` is narrower than a `0`, and at 10 updates a\n * second the whole row visibly jitters.\n */\n.time {\n    display: inline-flex;\n    flex: 0 0 auto;\n    gap: var(--tempest-space-1);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.actions {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--tempest-space-1);\n}\n\n/* Touch hit-slop — 44×44 without changing the visual footprint, as `Button` does. */\n@media (pointer: coarse) {\n    .transport::after {\n        content: \"\";\n        position: absolute;\n        inset: -4px;\n    }\n}\n\n@media (max-width: 480px) {\n    .player {\n        gap: var(--tempest-space-2);\n        padding: var(--tempest-space-2);\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"AudioPlayer.module.cjs","names":["player","transport","seek","time","actions","AudioPlayer_module_default"],"sources":["../../../src/components/AudioPlayer/AudioPlayer.module.css"],"sourcesContent":[".player {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-3);\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n.transport {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: 2.25rem;\n    height: 2.25rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.transport:disabled {\n    background-color: var(--tempest-surface-3);\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.transport:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .transport {\n        transition: none;\n    }\n}\n\n/*\n * The track is drawn on the input itself rather than with a wrapper and an overlay:\n * the native element already carries the keyboard behaviour and the value semantics,\n * and the only thing missing is the look.\n */\n.seek {\n    flex: 1 1 auto;\n    min-width: 3rem;\n    height: 1.25rem;\n    margin: 0;\n    background: none;\n    accent-color: var(--tempest-primary);\n    cursor: pointer;\n}\n\n.seek:disabled {\n    accent-color: var(--tempest-surface-3);\n    cursor: not-allowed;\n}\n\n.seek:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n/*\n * Tabular figures, so the elapsed time does not shift the seek bar sideways as the\n * digits change — a proportional `1` is narrower than a `0`, and at 10 updates a\n * second the whole row visibly jitters.\n */\n.time {\n    display: inline-flex;\n    flex: 0 0 auto;\n    gap: var(--tempest-space-1);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.actions {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--tempest-space-1);\n}\n\n/* Touch hit-slop — 44×44 without changing the visual footprint, as `Button` does. */\n@media (pointer: coarse) {\n    .transport::after {\n        content: \"\";\n        position: absolute;\n        inset: -4px;\n    }\n}\n\n@media (max-width: 480px) {\n    .player {\n        gap: var(--tempest-space-2);\n        padding: var(--tempest-space-2);\n    }\n}\n"],"mappings":";"}

package/dist/components/AudioPlayer/AudioPlayer.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"AudioPlayer.module.js","names":[],"sources":["../../../src/components/AudioPlayer/AudioPlayer.module.css"],"sourcesContent":[".player {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-3);\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n.transport {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: 2.25rem;\n    height: 2.25rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.transport:disabled {\n    background-color: var(--tempest-surface-3);\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.transport:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .transport {\n        transition: none;\n    }\n}\n\n/*\n * The track is drawn on the input itself rather than with a wrapper and an overlay:\n * the native element already carries the keyboard behaviour and the value semantics,\n * and the only thing missing is the look.\n */\n.seek {\n    flex: 1 1 auto;\n    min-width: 3rem;\n    height: 1.25rem;\n    margin: 0;\n    background: none;\n    accent-color: var(--tempest-primary);\n    cursor: pointer;\n}\n\n.seek:disabled {\n    accent-color: var(--tempest-surface-3);\n    cursor: not-allowed;\n}\n\n.seek:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n/*\n * Tabular figures, so the elapsed time does not shift the seek bar sideways as the\n * digits change — a proportional `1` is narrower than a `0`, and at 10 updates a\n * second the whole row visibly jitters.\n */\n.time {\n    display: inline-flex;\n    flex: 0 0 auto;\n    gap: var(--tempest-space-1);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.actions {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--tempest-space-1);\n}\n\n/* Touch hit-slop — 44×44 without changing the visual footprint, as `Button` does. */\n@media (pointer: coarse) {\n    .transport::after {\n        content: \"\";\n        position: absolute;\n        inset: -4px;\n    }\n}\n\n@media (max-width: 480px) {\n    .player {\n        gap: var(--tempest-space-2);\n        padding: var(--tempest-space-2);\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"AudioPlayer.module.js","names":["player","transport","seek","time","actions","AudioPlayer_module_default"],"sources":["../../../src/components/AudioPlayer/AudioPlayer.module.css"],"sourcesContent":[".player {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-3);\n    min-width: 0;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n.transport {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: 2.25rem;\n    height: 2.25rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-primary);\n    color: var(--tempest-primary-foreground);\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n.transport:disabled {\n    background-color: var(--tempest-surface-3);\n    color: var(--tempest-text-subtle);\n    cursor: not-allowed;\n}\n\n.transport:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .transport {\n        transition: none;\n    }\n}\n\n/*\n * The track is drawn on the input itself rather than with a wrapper and an overlay:\n * the native element already carries the keyboard behaviour and the value semantics,\n * and the only thing missing is the look.\n */\n.seek {\n    flex: 1 1 auto;\n    min-width: 3rem;\n    height: 1.25rem;\n    margin: 0;\n    background: none;\n    accent-color: var(--tempest-primary);\n    cursor: pointer;\n}\n\n.seek:disabled {\n    accent-color: var(--tempest-surface-3);\n    cursor: not-allowed;\n}\n\n.seek:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n/*\n * Tabular figures, so the elapsed time does not shift the seek bar sideways as the\n * digits change — a proportional `1` is narrower than a `0`, and at 10 updates a\n * second the whole row visibly jitters.\n */\n.time {\n    display: inline-flex;\n    flex: 0 0 auto;\n    gap: var(--tempest-space-1);\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    font-variant-numeric: tabular-nums;\n}\n\n.actions {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--tempest-space-1);\n}\n\n/* Touch hit-slop — 44×44 without changing the visual footprint, as `Button` does. */\n@media (pointer: coarse) {\n    .transport::after {\n        content: \"\";\n        position: absolute;\n        inset: -4px;\n    }\n}\n\n@media (max-width: 480px) {\n    .player {\n        gap: var(--tempest-space-2);\n        padding: var(--tempest-space-2);\n    }\n}\n"],"mappings":";"}

package/dist/components/AudioRecorder/AudioRecorder.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("../../hooks/use-media-permission.cjs"),n=require("../../audio/duration.cjs"),r=require("../AudioPlayer/AudioPlayer.cjs"),i=require("../../audio/audio-recorder.cjs"),a=require("../../audio/use-audio-recorder.cjs"),o=require("../../audio/use-microphone.cjs"),s=require("../../audio/wav.cjs"),c=require("./AudioRecorder.module.cjs");let l=require("react"),u=require("react/jsx-runtime"),d=require("lucide-react");var f={"pt-BR":{record:`Gravar`,stop:`Parar`,pause:`Pausar`,resume:`Continuar`,retake:`Gravar de novo`,level:`Nível do microfone`,asking:`Pedindo acesso ao microfone…`,denied:`Acesso ao microfone bloqueado. Libere nas configurações do site e recarregue.`,unsupported:`Este navegador não grava áudio.`,idleHint:`Toque em Gravar para começar.`,recording:`Gravando`,paused:`Pausado`,converting:`Convertendo…`},en:{record:`Record`,stop:`Stop`,pause:`Pause`,resume:`Resume`,retake:`Record again`,level:`Microphone level`,asking:`Requesting microphone access…`,denied:`Microphone access blocked. Allow it in site settings and reload.`,unsupported:`This browser cannot record audio.`,idleHint:`Press Record to start.`,recording:`Recording`,paused:`Paused`,converting:`Converting…`}};function p({onRecorded:p,maxDurationMs:m,deviceId:h,format:g=`native`,wavOptions:_,audioBitsPerSecond:v,review:y=!0,locale:b=`pt-BR`,footer:x,onError:S,disabled:C=!1,className:w,...T}){let E=f[b],D=t.useMediaPermission(`microphone`),O=o.useMicrophone({deviceId:h}),[k,A]=(0,l.useState)(!1),[j,M]=(0,l.useState)(null),[N,P]=(0,l.useState)(!0);(0,l.useEffect)(()=>P(i.isAudioRecordingSupported()),[]);let F=async e=>{if(g!==`wav`){M(e),p?.(e);return}A(!0);try{let t=await s.blobToWav(e.blob,_),n={...e,blob:t,mimeType:`audio/wav`};M(n),p?.(n)}catch(t){S?.(t),M(e),p?.(e)}finally{A(!1)}},I=a.useAudioRecorder(O.stream,{maxDurationMs:m,audioBitsPerSecond:v,onRecorded:e=>void F(e),onError:S}),[L,R]=(0,l.useState)(!1);(0,l.useEffect)(()=>{L&&I.ready&&I.status===`idle`&&(R(!1),I.start())},[L,I.ready,I.status,I]);let z=()=>{if(M(null),O.stream&&I.ready){I.start();return}R(!0),O.start()},B=()=>{M(null),I.cancel(),z()},V=I.status===`recording`||I.status===`paused`,H=D.state===`denied`;return N?(0,u.jsxs)(`div`,{className:e.cn(c.default.recorder,w),...T,children:[(0,u.jsxs)(`div`,{className:c.default.row,children:[!V&&(0,u.jsxs)(`button`,{type:`button`,className:c.default.record,onClick:j?B:z,disabled:C||H||k,"aria-label":j?E.retake:E.record,children:[j?(0,u.jsx)(d.RotateCcw,{size:16,"aria-hidden":!0}):(0,u.jsx)(d.Mic,{size:16,"aria-hidden":!0}),(0,u.jsx)(`span`,{children:j?E.retake:E.record})]}),V&&(0,u.jsxs)(u.Fragment,{children:[(0,u.jsxs)(`button`,{type:`button`,className:c.default.stop,onClick:()=>void I.stop(),"aria-label":E.stop,children:[(0,u.jsx)(d.Square,{size:14,"aria-hidden":!0}),(0,u.jsx)(`span`,{children:E.stop})]}),(0,u.jsx)(`button`,{type:`button`,className:c.default.secondary,onClick:I.status===`paused`?I.resume:I.pause,"aria-label":I.status===`paused`?E.resume:E.pause,children:I.status===`paused`?(0,u.jsx)(d.Play,{size:14,"aria-hidden":!0}):(0,u.jsx)(d.Pause,{size:14,"aria-hidden":!0})})]}),V&&(0,u.jsx)(`div`,{className:c.default.meter,role:`meter`,"aria-label":E.level,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(I.level*100),children:(0,u.jsx)(`span`,{className:c.default.meterFill,style:{transform:`scaleX(${I.level})`}})}),(0,u.jsxs)(`span`,{className:c.default.clock,children:[n.formatDuration(V?I.durationMs:j?.durationMs??0),m!==void 0&&(0,u.jsxs)(`span`,{className:c.default.max,children:[` / `,n.formatDuration(m)]})]})]}),(0,u.jsx)(`p`,{className:c.default.status,role:`status`,children:k?E.converting:O.status===`requesting`?E.asking:H?E.denied:O.error?O.error.message:I.status===`recording`?E.recording:I.status===`paused`?E.paused:j?``:E.idleHint}),y&&j&&(0,u.jsx)(r.AudioPlayer,{src:j.blob,durationMs:j.durationMs,locale:b,onError:S}),x&&(0,u.jsx)(`div`,{className:c.default.footer,children:x})]}):(0,u.jsx)(`div`,{className:e.cn(c.default.recorder,w),...T,children:(0,u.jsx)(`p`,{className:c.default.notice,children:E.unsupported})})}exports.AudioRecorder=p;
+const e=require("../../utils/cn.cjs"),t=require("../../hooks/use-media-permission.cjs"),n=require("../../audio/duration.cjs"),r=require("../AudioPlayer/AudioPlayer.cjs"),i=require("../../audio/audio-recorder.cjs"),a=require("../../audio/use-audio-recorder.cjs"),o=require("../../audio/use-microphone.cjs"),s=require("../../audio/wav.cjs"),c=require("./AudioRecorder.module.cjs");let l=require("react"),u=require("react/jsx-runtime"),d=require("lucide-react");var f={"pt-BR":{record:`Gravar`,stop:`Parar`,pause:`Pausar`,resume:`Continuar`,retake:`Gravar de novo`,level:`Nível do microfone`,asking:`Pedindo acesso ao microfone…`,denied:`Acesso ao microfone bloqueado. Libere nas configurações do site e recarregue.`,unsupported:`Este navegador não grava áudio.`,idleHint:`Toque em Gravar para começar.`,recording:`Gravando`,paused:`Pausado`,converting:`Convertendo…`},en:{record:`Record`,stop:`Stop`,pause:`Pause`,resume:`Resume`,retake:`Record again`,level:`Microphone level`,asking:`Requesting microphone access…`,denied:`Microphone access blocked. Allow it in site settings and reload.`,unsupported:`This browser cannot record audio.`,idleHint:`Press Record to start.`,recording:`Recording`,paused:`Paused`,converting:`Converting…`}};function p({onRecorded:p,maxDurationMs:m,deviceId:h,format:g=`native`,wavOptions:_,audioBitsPerSecond:v,review:y=!0,locale:b=`pt-BR`,footer:x,onError:S,disabled:C=!1,className:w,...T}){let E=f[b],D=t.useMediaPermission(`microphone`),O=o.useMicrophone({deviceId:h}),[k,A]=(0,l.useState)(!1),[j,M]=(0,l.useState)(null),[N,P]=(0,l.useState)(!0);(0,l.useEffect)(()=>P(i.isAudioRecordingSupported()),[]);let F=async e=>{if(g!==`wav`)M(e),p?.(e);else{A(!0);try{let t=await s.blobToWav(e.blob,_),n={...e,blob:t,mimeType:`audio/wav`};M(n),p?.(n)}catch(t){S?.(t),M(e),p?.(e)}finally{A(!1)}}},I=a.useAudioRecorder(O.stream,{maxDurationMs:m,audioBitsPerSecond:v,onRecorded:e=>void F(e),onError:S}),[L,R]=(0,l.useState)(!1);(0,l.useEffect)(()=>{L&&I.ready&&I.status===`idle`&&(R(!1),I.start())},[L,I.ready,I.status,I]);let z=()=>{M(null),O.stream&&I.ready?I.start():(R(!0),O.start())},B=()=>{M(null),I.cancel(),z()},V=I.status===`recording`||I.status===`paused`,H=D.state===`denied`;return N?(0,u.jsxs)(`div`,{className:e.cn(c.default.recorder,w),...T,children:[(0,u.jsxs)(`div`,{className:c.default.row,children:[!V&&(0,u.jsxs)(`button`,{type:`button`,className:c.default.record,onClick:j?B:z,disabled:C||H||k,"aria-label":j?E.retake:E.record,children:[j?(0,u.jsx)(d.RotateCcw,{size:16,"aria-hidden":!0}):(0,u.jsx)(d.Mic,{size:16,"aria-hidden":!0}),(0,u.jsx)(`span`,{children:j?E.retake:E.record})]}),V&&(0,u.jsxs)(u.Fragment,{children:[(0,u.jsxs)(`button`,{type:`button`,className:c.default.stop,onClick:()=>void I.stop(),"aria-label":E.stop,children:[(0,u.jsx)(d.Square,{size:14,"aria-hidden":!0}),(0,u.jsx)(`span`,{children:E.stop})]}),(0,u.jsx)(`button`,{type:`button`,className:c.default.secondary,onClick:I.status===`paused`?I.resume:I.pause,"aria-label":I.status===`paused`?E.resume:E.pause,children:I.status===`paused`?(0,u.jsx)(d.Play,{size:14,"aria-hidden":!0}):(0,u.jsx)(d.Pause,{size:14,"aria-hidden":!0})})]}),V&&(0,u.jsx)(`div`,{className:c.default.meter,role:`meter`,"aria-label":E.level,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(I.level*100),children:(0,u.jsx)(`span`,{className:c.default.meterFill,style:{transform:`scaleX(${I.level})`}})}),(0,u.jsxs)(`span`,{className:c.default.clock,children:[n.formatDuration(V?I.durationMs:j?.durationMs??0),m!==void 0&&(0,u.jsxs)(`span`,{className:c.default.max,children:[` / `,n.formatDuration(m)]})]})]}),(0,u.jsx)(`p`,{className:c.default.status,role:`status`,children:k?E.converting:O.status===`requesting`?E.asking:H?E.denied:O.error?O.error.message:I.status===`recording`?E.recording:I.status===`paused`?E.paused:j?``:E.idleHint}),y&&j&&(0,u.jsx)(r.AudioPlayer,{src:j.blob,durationMs:j.durationMs,locale:b,onError:S}),x&&(0,u.jsx)(`div`,{className:c.default.footer,children:x})]}):(0,u.jsx)(`div`,{className:e.cn(c.default.recorder,w),...T,children:(0,u.jsx)(`p`,{className:c.default.notice,children:E.unsupported})})}exports.AudioRecorder=p;
 //# sourceMappingURL=AudioRecorder.cjs.map

package/dist/components/AudioRecorder/AudioRecorder.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AudioRecorder.cjs","names":[],"sources":["../../../src/components/AudioRecorder/AudioRecorder.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — recording has three\n * separate configurations that a caller genuinely picks between: the capture\n * (deviceId, audioBitsPerSecond, maxDurationMs), the output (format, wavOptions) and\n * the review step (review, footer, locale). The body holds permission, recording,\n * review and error as one state machine; splitting it would thread the same recorder\n * handle through props.\n */\nimport { Mic, Pause, Play, RotateCcw, Square } from \"lucide-react\";\nimport { useEffect, useState, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { formatDuration } from \"@/audio/duration\";\nimport { isAudioRecordingSupported } from \"@/audio/audio-recorder\";\nimport { useAudioRecorder } from \"@/audio/use-audio-recorder\";\nimport { useMicrophone } from \"@/audio/use-microphone\";\nimport { blobToWav, type WavOptions } from \"@/audio/wav\";\nimport type { AudioRecording } from \"@/audio/audio-recorder\";\nimport { useMediaPermission } from \"@/hooks/use-media-permission\";\nimport { cn } from \"@/utils/cn\";\n\nimport { AudioPlayer } from \"../AudioPlayer\";\nimport styles from \"./AudioRecorder.module.css\";\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"children\" | \"onError\";\n\nexport interface AudioRecorderProps extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    OverriddenDomProps\n> {\n    /**\n     * Called once a recording is finished and (when asked) converted.\n     *\n     * Fires on stop and on hitting `maxDurationMs`, never on cancel.\n     */\n    onRecorded?: (recording: AudioRecording) => void;\n    /** Stop automatically after this long. Strongly recommended on anything public. */\n    maxDurationMs?: number;\n    /** Specific microphone, from `useMediaDevices().audioInputs`. */\n    deviceId?: string;\n    /**\n     * Output container.\n     *\n     * `\"native\"` (default) keeps what the browser produced — Opus on Chromium and\n     * Firefox, AAC on Safari — which is the smallest and needs no work. `\"wav\"`\n     * converts on stop, for a backend that only accepts WAV; see `wavOptions`, and\n     * expect roughly ten times the bytes.\n     */\n    format?: \"native\" | \"wav\";\n    /** Passed to `blobToWav` when `format=\"wav\"`. `{ mono: true, sampleRate: 16000 }` suits speech. */\n    wavOptions?: WavOptions;\n    /** Target bitrate. 32000–64000 is plenty for speech in Opus. */\n    audioBitsPerSecond?: number;\n    /** Offer playback of the recording before handing it over. Default `true`. */\n    review?: boolean;\n    /** Locale for the labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Rendered under the controls — a hint, a character count, a legal notice. */\n    footer?: ReactNode;\n    /** Recorder-level failure, or a failed WAV conversion. */\n    onError?: (error: unknown) => void;\n    disabled?: boolean;\n}\n\nconst STRINGS = {\n    \"pt-BR\": {\n        record: \"Gravar\",\n        stop: \"Parar\",\n        pause: \"Pausar\",\n        resume: \"Continuar\",\n        retake: \"Gravar de novo\",\n        level: \"Nível do microfone\",\n        asking: \"Pedindo acesso ao microfone…\",\n        denied: \"Acesso ao microfone bloqueado. Libere nas configurações do site e recarregue.\",\n        unsupported: \"Este navegador não grava áudio.\",\n        idleHint: \"Toque em Gravar para começar.\",\n        recording: \"Gravando\",\n        paused: \"Pausado\",\n        converting: \"Convertendo…\",\n    },\n    en: {\n        record: \"Record\",\n        stop: \"Stop\",\n        pause: \"Pause\",\n        resume: \"Resume\",\n        retake: \"Record again\",\n        level: \"Microphone level\",\n        asking: \"Requesting microphone access…\",\n        denied: \"Microphone access blocked. Allow it in site settings and reload.\",\n        unsupported: \"This browser cannot record audio.\",\n        idleHint: \"Press Record to start.\",\n        recording: \"Recording\",\n        paused: \"Paused\",\n        converting: \"Converting…\",\n    },\n} as const;\n\n/**\n * Record a voice note: one button to start, a live level meter, a clock, and a\n * playback review before the audio leaves the component.\n *\n * The permission flow is the part worth reading. The microphone is **not** opened on\n * mount — the prompt fires on the first press of Record, because a prompt the user did\n * not provoke is the most reliable way to earn a permanent block, after which\n * `getUserMedia` rejects without ever asking again. When the permission is already\n * `\"denied\"`, the component says so and how to fix it instead of offering a button\n * that cannot work.\n *\n * The level meter is not decoration either: a muted OS input or a headset with its mic\n * arm folded up produces a perfectly successful recording of silence, and without a\n * visible level the user only finds out after they finish talking.\n *\n * @example\n * <AudioRecorder\n *     maxDurationMs={120_000}\n *     format=\"wav\"\n *     wavOptions={{ mono: true, sampleRate: 16000 }}\n *     onRecorded={({ blob }) => upload(blob)}\n * />\n */\nexport function AudioRecorder({\n    onRecorded,\n    maxDurationMs,\n    deviceId,\n    format = \"native\",\n    wavOptions,\n    audioBitsPerSecond,\n    review = true,\n    locale = \"pt-BR\",\n    footer,\n    onError,\n    disabled = false,\n    className,\n    ...rest\n}: AudioRecorderProps) {\n    const strings = STRINGS[locale];\n    const permission = useMediaPermission(\"microphone\");\n    const mic = useMicrophone({ deviceId });\n    const [converting, setConverting] = useState(false);\n    const [result, setResult] = useState<AudioRecording | null>(null);\n    const [supported, setSupported] = useState(true);\n\n    useEffect(() => setSupported(isAudioRecordingSupported()), []);\n\n    /**\n     * Convert if asked, then publish.\n     *\n     * The conversion is awaited here rather than left to the caller so that\n     * `onRecorded` only ever fires with the format the caller asked for — a callback\n     * that sometimes hands over WebM and sometimes WAV is a bug waiting in the upload\n     * path.\n     */\n    const finish = async (recording: AudioRecording): Promise<void> => {\n        if (format !== \"wav\") {\n            setResult(recording);\n            onRecorded?.(recording);\n            return;\n        }\n        setConverting(true);\n        try {\n            const blob = await blobToWav(recording.blob, wavOptions);\n            const converted: AudioRecording = { ...recording, blob, mimeType: \"audio/wav\" };\n            setResult(converted);\n            onRecorded?.(converted);\n        } catch (error) {\n            onError?.(error);\n            setResult(recording);\n            onRecorded?.(recording);\n        } finally {\n            setConverting(false);\n        }\n    };\n\n    const recorder = useAudioRecorder(mic.stream, {\n        maxDurationMs,\n        audioBitsPerSecond,\n        onRecorded: (recording) => void finish(recording),\n        onError,\n    });\n\n    /**\n     * Start recording as soon as the stream lands.\n     *\n     * The user pressed Record before the permission prompt existed, so the press has\n     * to survive the round-trip: `mic.start()` opens the device, the stream arrives a\n     * few hundred milliseconds later, and recording begins then. Waiting for a second\n     * press would make the first one look broken.\n     */\n    const [armed, setArmed] = useState(false);\n    useEffect(() => {\n        if (!armed || !recorder.ready || recorder.status !== \"idle\") return;\n        setArmed(false);\n        recorder.start();\n    }, [armed, recorder.ready, recorder.status, recorder]);\n\n    const begin = (): void => {\n        setResult(null);\n        if (mic.stream && recorder.ready) {\n            recorder.start();\n            return;\n        }\n        setArmed(true);\n        mic.start();\n    };\n\n    const retake = (): void => {\n        setResult(null);\n        recorder.cancel();\n        begin();\n    };\n\n    const busy = recorder.status === \"recording\" || recorder.status === \"paused\";\n    const blocked = permission.state === \"denied\";\n\n    if (!supported) {\n        return (\n            <div className={cn(styles.recorder, className)} {...rest}>\n                <p className={styles.notice}>{strings.unsupported}</p>\n            </div>\n        );\n    }\n\n    return (\n        <div className={cn(styles.recorder, className)} {...rest}>\n            <div className={styles.row}>\n                {!busy && (\n                    <button\n                        type=\"button\"\n                        className={styles.record}\n                        onClick={result ? retake : begin}\n                        disabled={disabled || blocked || converting}\n                        aria-label={result ? strings.retake : strings.record}\n                    >\n                        {result ? (\n                            <RotateCcw size={16} aria-hidden />\n                        ) : (\n                            <Mic size={16} aria-hidden />\n                        )}\n                        <span>{result ? strings.retake : strings.record}</span>\n                    </button>\n                )}\n\n                {busy && (\n                    <>\n                        <button\n                            type=\"button\"\n                            className={styles.stop}\n                            onClick={() => void recorder.stop()}\n                            aria-label={strings.stop}\n                        >\n                            <Square size={14} aria-hidden />\n                            <span>{strings.stop}</span>\n                        </button>\n                        <button\n                            type=\"button\"\n                            className={styles.secondary}\n                            onClick={\n                                recorder.status === \"paused\" ? recorder.resume : recorder.pause\n                            }\n                            aria-label={\n                                recorder.status === \"paused\" ? strings.resume : strings.pause\n                            }\n                        >\n                            {recorder.status === \"paused\" ? (\n                                <Play size={14} aria-hidden />\n                            ) : (\n                                <Pause size={14} aria-hidden />\n                            )}\n                        </button>\n                    </>\n                )}\n\n                {busy && (\n                    <div\n                        className={styles.meter}\n                        role=\"meter\"\n                        aria-label={strings.level}\n                        aria-valuemin={0}\n                        aria-valuemax={100}\n                        aria-valuenow={Math.round(recorder.level * 100)}\n                    >\n                        <span\n                            className={styles.meterFill}\n                            style={{ transform: `scaleX(${recorder.level})` }}\n                        />\n                    </div>\n                )}\n\n                <span className={styles.clock}>\n                    {formatDuration(busy ? recorder.durationMs : (result?.durationMs ?? 0))}\n                    {maxDurationMs !== undefined && (\n                        <span className={styles.max}> / {formatDuration(maxDurationMs)}</span>\n                    )}\n                </span>\n            </div>\n\n            <p className={styles.status} role=\"status\">\n                {converting\n                    ? strings.converting\n                    : mic.status === \"requesting\"\n                      ? strings.asking\n                      : blocked\n                        ? strings.denied\n                        : mic.error\n                          ? mic.error.message\n                          : recorder.status === \"recording\"\n                            ? strings.recording\n                            : recorder.status === \"paused\"\n                              ? strings.paused\n                              : result\n                                ? \"\"\n                                : strings.idleHint}\n            </p>\n\n            {review && result && (\n                <AudioPlayer\n                    src={result.blob}\n                    durationMs={result.durationMs}\n                    locale={locale}\n                    onError={onError}\n                />\n            )}\n\n            {footer && <div className={styles.footer}>{footer}</div>}\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AudioRecorder.cjs","names":["useMediaPermission","useMicrophone","useState","isAudioRecordingSupported","blobToWav","useAudioRecorder","cn","styles","RotateCcw","Mic","_Fragment","Square","Play","Pause","formatDuration","AudioPlayer","require_cn","require_use_media_permission","require_duration","require_AudioPlayer","require_audio_recorder","require_use_audio_recorder","require_use_microphone","require_wav","require_AudioRecorder_module","react","react_jsx_runtime","lucide_react","STRINGS","AudioRecorder","rest","strings","locale","permission","mic","converting","setConverting","result","setResult","supported","setSupported","finish","format","recording","onRecorded","blob","wavOptions","converted","error","onError","recorder","armed","setArmed","begin","retake","busy","blocked","className","disabled","maxDurationMs","review","footer"],"sources":["../../../src/components/AudioRecorder/AudioRecorder.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — recording has three\n * separate configurations that a caller genuinely picks between: the capture\n * (deviceId, audioBitsPerSecond, maxDurationMs), the output (format, wavOptions) and\n * the review step (review, footer, locale). The body holds permission, recording,\n * review and error as one state machine; splitting it would thread the same recorder\n * handle through props.\n */\nimport { Mic, Pause, Play, RotateCcw, Square } from \"lucide-react\";\nimport { useEffect, useState, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { formatDuration } from \"@/audio/duration\";\nimport { isAudioRecordingSupported } from \"@/audio/audio-recorder\";\nimport { useAudioRecorder } from \"@/audio/use-audio-recorder\";\nimport { useMicrophone } from \"@/audio/use-microphone\";\nimport { blobToWav, type WavOptions } from \"@/audio/wav\";\nimport type { AudioRecording } from \"@/audio/audio-recorder\";\nimport { useMediaPermission } from \"@/hooks/use-media-permission\";\nimport { cn } from \"@/utils/cn\";\n\nimport { AudioPlayer } from \"../AudioPlayer\";\nimport styles from \"./AudioRecorder.module.css\";\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"children\" | \"onError\";\n\nexport interface AudioRecorderProps extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    OverriddenDomProps\n> {\n    /**\n     * Called once a recording is finished and (when asked) converted.\n     *\n     * Fires on stop and on hitting `maxDurationMs`, never on cancel.\n     */\n    onRecorded?: (recording: AudioRecording) => void;\n    /** Stop automatically after this long. Strongly recommended on anything public. */\n    maxDurationMs?: number;\n    /** Specific microphone, from `useMediaDevices().audioInputs`. */\n    deviceId?: string;\n    /**\n     * Output container.\n     *\n     * `\"native\"` (default) keeps what the browser produced — Opus on Chromium and\n     * Firefox, AAC on Safari — which is the smallest and needs no work. `\"wav\"`\n     * converts on stop, for a backend that only accepts WAV; see `wavOptions`, and\n     * expect roughly ten times the bytes.\n     */\n    format?: \"native\" | \"wav\";\n    /** Passed to `blobToWav` when `format=\"wav\"`. `{ mono: true, sampleRate: 16000 }` suits speech. */\n    wavOptions?: WavOptions;\n    /** Target bitrate. 32000–64000 is plenty for speech in Opus. */\n    audioBitsPerSecond?: number;\n    /** Offer playback of the recording before handing it over. Default `true`. */\n    review?: boolean;\n    /** Locale for the labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Rendered under the controls — a hint, a character count, a legal notice. */\n    footer?: ReactNode;\n    /** Recorder-level failure, or a failed WAV conversion. */\n    onError?: (error: unknown) => void;\n    disabled?: boolean;\n}\n\nconst STRINGS = {\n    \"pt-BR\": {\n        record: \"Gravar\",\n        stop: \"Parar\",\n        pause: \"Pausar\",\n        resume: \"Continuar\",\n        retake: \"Gravar de novo\",\n        level: \"Nível do microfone\",\n        asking: \"Pedindo acesso ao microfone…\",\n        denied: \"Acesso ao microfone bloqueado. Libere nas configurações do site e recarregue.\",\n        unsupported: \"Este navegador não grava áudio.\",\n        idleHint: \"Toque em Gravar para começar.\",\n        recording: \"Gravando\",\n        paused: \"Pausado\",\n        converting: \"Convertendo…\",\n    },\n    en: {\n        record: \"Record\",\n        stop: \"Stop\",\n        pause: \"Pause\",\n        resume: \"Resume\",\n        retake: \"Record again\",\n        level: \"Microphone level\",\n        asking: \"Requesting microphone access…\",\n        denied: \"Microphone access blocked. Allow it in site settings and reload.\",\n        unsupported: \"This browser cannot record audio.\",\n        idleHint: \"Press Record to start.\",\n        recording: \"Recording\",\n        paused: \"Paused\",\n        converting: \"Converting…\",\n    },\n} as const;\n\n/**\n * Record a voice note: one button to start, a live level meter, a clock, and a\n * playback review before the audio leaves the component.\n *\n * The permission flow is the part worth reading. The microphone is **not** opened on\n * mount — the prompt fires on the first press of Record, because a prompt the user did\n * not provoke is the most reliable way to earn a permanent block, after which\n * `getUserMedia` rejects without ever asking again. When the permission is already\n * `\"denied\"`, the component says so and how to fix it instead of offering a button\n * that cannot work.\n *\n * The level meter is not decoration either: a muted OS input or a headset with its mic\n * arm folded up produces a perfectly successful recording of silence, and without a\n * visible level the user only finds out after they finish talking.\n *\n * @example\n * <AudioRecorder\n *     maxDurationMs={120_000}\n *     format=\"wav\"\n *     wavOptions={{ mono: true, sampleRate: 16000 }}\n *     onRecorded={({ blob }) => upload(blob)}\n * />\n */\nexport function AudioRecorder({\n    onRecorded,\n    maxDurationMs,\n    deviceId,\n    format = \"native\",\n    wavOptions,\n    audioBitsPerSecond,\n    review = true,\n    locale = \"pt-BR\",\n    footer,\n    onError,\n    disabled = false,\n    className,\n    ...rest\n}: AudioRecorderProps) {\n    const strings = STRINGS[locale];\n    const permission = useMediaPermission(\"microphone\");\n    const mic = useMicrophone({ deviceId });\n    const [converting, setConverting] = useState(false);\n    const [result, setResult] = useState<AudioRecording | null>(null);\n    const [supported, setSupported] = useState(true);\n\n    useEffect(() => setSupported(isAudioRecordingSupported()), []);\n\n    /**\n     * Convert if asked, then publish.\n     *\n     * The conversion is awaited here rather than left to the caller so that\n     * `onRecorded` only ever fires with the format the caller asked for — a callback\n     * that sometimes hands over WebM and sometimes WAV is a bug waiting in the upload\n     * path.\n     */\n    const finish = async (recording: AudioRecording): Promise<void> => {\n        if (format !== \"wav\") {\n            setResult(recording);\n            onRecorded?.(recording);\n            return;\n        }\n        setConverting(true);\n        try {\n            const blob = await blobToWav(recording.blob, wavOptions);\n            const converted: AudioRecording = { ...recording, blob, mimeType: \"audio/wav\" };\n            setResult(converted);\n            onRecorded?.(converted);\n        } catch (error) {\n            onError?.(error);\n            setResult(recording);\n            onRecorded?.(recording);\n        } finally {\n            setConverting(false);\n        }\n    };\n\n    const recorder = useAudioRecorder(mic.stream, {\n        maxDurationMs,\n        audioBitsPerSecond,\n        onRecorded: (recording) => void finish(recording),\n        onError,\n    });\n\n    /**\n     * Start recording as soon as the stream lands.\n     *\n     * The user pressed Record before the permission prompt existed, so the press has\n     * to survive the round-trip: `mic.start()` opens the device, the stream arrives a\n     * few hundred milliseconds later, and recording begins then. Waiting for a second\n     * press would make the first one look broken.\n     */\n    const [armed, setArmed] = useState(false);\n    useEffect(() => {\n        if (!armed || !recorder.ready || recorder.status !== \"idle\") return;\n        setArmed(false);\n        recorder.start();\n    }, [armed, recorder.ready, recorder.status, recorder]);\n\n    const begin = (): void => {\n        setResult(null);\n        if (mic.stream && recorder.ready) {\n            recorder.start();\n            return;\n        }\n        setArmed(true);\n        mic.start();\n    };\n\n    const retake = (): void => {\n        setResult(null);\n        recorder.cancel();\n        begin();\n    };\n\n    const busy = recorder.status === \"recording\" || recorder.status === \"paused\";\n    const blocked = permission.state === \"denied\";\n\n    if (!supported) {\n        return (\n            <div className={cn(styles.recorder, className)} {...rest}>\n                <p className={styles.notice}>{strings.unsupported}</p>\n            </div>\n        );\n    }\n\n    return (\n        <div className={cn(styles.recorder, className)} {...rest}>\n            <div className={styles.row}>\n                {!busy && (\n                    <button\n                        type=\"button\"\n                        className={styles.record}\n                        onClick={result ? retake : begin}\n                        disabled={disabled || blocked || converting}\n                        aria-label={result ? strings.retake : strings.record}\n                    >\n                        {result ? (\n                            <RotateCcw size={16} aria-hidden />\n                        ) : (\n                            <Mic size={16} aria-hidden />\n                        )}\n                        <span>{result ? strings.retake : strings.record}</span>\n                    </button>\n                )}\n\n                {busy && (\n                    <>\n                        <button\n                            type=\"button\"\n                            className={styles.stop}\n                            onClick={() => void recorder.stop()}\n                            aria-label={strings.stop}\n                        >\n                            <Square size={14} aria-hidden />\n                            <span>{strings.stop}</span>\n                        </button>\n                        <button\n                            type=\"button\"\n                            className={styles.secondary}\n                            onClick={\n                                recorder.status === \"paused\" ? recorder.resume : recorder.pause\n                            }\n                            aria-label={\n                                recorder.status === \"paused\" ? strings.resume : strings.pause\n                            }\n                        >\n                            {recorder.status === \"paused\" ? (\n                                <Play size={14} aria-hidden />\n                            ) : (\n                                <Pause size={14} aria-hidden />\n                            )}\n                        </button>\n                    </>\n                )}\n\n                {busy && (\n                    <div\n                        className={styles.meter}\n                        role=\"meter\"\n                        aria-label={strings.level}\n                        aria-valuemin={0}\n                        aria-valuemax={100}\n                        aria-valuenow={Math.round(recorder.level * 100)}\n                    >\n                        <span\n                            className={styles.meterFill}\n                            style={{ transform: `scaleX(${recorder.level})` }}\n                        />\n                    </div>\n                )}\n\n                <span className={styles.clock}>\n                    {formatDuration(busy ? recorder.durationMs : (result?.durationMs ?? 0))}\n                    {maxDurationMs !== undefined && (\n                        <span className={styles.max}> / {formatDuration(maxDurationMs)}</span>\n                    )}\n                </span>\n            </div>\n\n            <p className={styles.status} role=\"status\">\n                {converting\n                    ? strings.converting\n                    : mic.status === \"requesting\"\n                      ? strings.asking\n                      : blocked\n                        ? strings.denied\n                        : mic.error\n                          ? mic.error.message\n                          : recorder.status === \"recording\"\n                            ? strings.recording\n                            : recorder.status === \"paused\"\n                              ? strings.paused\n                              : result\n                                ? \"\"\n                                : strings.idleHint}\n            </p>\n\n            {review && result && (\n                <AudioPlayer\n                    src={result.blob}\n                    durationMs={result.durationMs}\n                    locale={locale}\n                    onError={onError}\n                />\n            )}\n\n            {footer && <div className={styles.footer}>{footer}</div>}\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/AudioRecorder/AudioRecorder.js

@@ -47,22 +47,21 @@ function b({ onRecorded: b, maxDurationMs: x, deviceId: S, format: C = "native",
 	let N = y[D], P = t("microphone"), F = o({ deviceId: S }), [I, L] = u(!1), [R, z] = u(null), [B, V] = u(!0);
 	l(() => V(i()), []);
 	let H = async (e) => {
-		if (C !== "wav") {
-			z(e), b?.(e);
-			return;
-		}
-		L(!0);
-		try {
-			let t = await s(e.blob, w), n = {
-				...e,
-				blob: t,
-				mimeType: "audio/wav"
-			};
-			z(n), b?.(n);
-		} catch (t) {
-			k?.(t), z(e), b?.(e);
-		} finally {
-			L(!1);
+		if (C !== "wav") z(e), b?.(e);
+		else {
+			L(!0);
+			try {
+				let t = await s(e.blob, w), n = {
+					...e,
+					blob: t,
+					mimeType: "audio/wav"
+				};
+				z(n), b?.(n);
+			} catch (t) {
+				k?.(t), z(e), b?.(e);
+			} finally {
+				L(!1);
+			}
 		}
 	}, U = a(F.stream, {
 		maxDurationMs: x,
@@ -79,11 +78,7 @@ function b({ onRecorded: b, maxDurationMs: x, deviceId: S, format: C = "native",
 		U
 	]);
 	let K = () => {
-		if (z(null), F.stream && U.ready) {
-			U.start();
-			return;
-		}
-		G(!0), F.start();
+		z(null), F.stream && U.ready ? U.start() : (G(!0), F.start());
 	}, q = () => {
 		z(null), U.cancel(), K();
 	}, J = U.status === "recording" || U.status === "paused", Y = P.state === "denied";