tempest-react-sdk 0.24.0 → 0.26.0

package/dist/components/Lightbox/Lightbox.js

@@ -0,0 +1,148 @@
+import { cn as e } from "../../utils/cn.js";
+import { useScrollLock as t } from "../../hooks/use-scroll-lock.js";
+import { useFocusTrap as n } from "../../hooks/use-focus-trap.js";
+import { Portal as r } from "../Portal/Portal.js";
+import i from "./Lightbox.module.js";
+import { useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { ChevronLeft as d, ChevronRight as f, X as p } from "lucide-react";
+//#region src/components/Lightbox/Lightbox.tsx
+function m({ items: m, open: h, index: g = 0, onIndexChange: _, onClose: v, showThumbnails: y, showCounter: b = !0, loop: x = !0, closeLabel: S = "Close", previousLabel: C = "Previous image", nextLabel: w = "Next image", className: T }) {
+	let E = s(null), [D, O] = c(g), k = _ !== void 0, A = k ? g : D;
+	n(E, h), t(h);
+	let j = a((e) => {
+		if (m.length === 0) return;
+		let t = x ? (e + m.length) % m.length : Math.max(0, Math.min(e, m.length - 1));
+		k || O(t), _?.(t);
+	}, [
+		k,
+		m.length,
+		x,
+		_
+	]);
+	if (o(() => {
+		k || O(g);
+	}, [g, k]), o(() => {
+		if (!h) return;
+		function e(e) {
+			switch (e.key) {
+				case "Escape":
+					v();
+					break;
+				case "ArrowRight":
+					j(A + 1);
+					break;
+				case "ArrowLeft":
+					j(A - 1);
+					break;
+				case "Home":
+					j(0);
+					break;
+				case "End":
+					j(m.length - 1);
+					break;
+				default: return;
+			}
+			e.preventDefault();
+		}
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		A,
+		m.length,
+		j,
+		v,
+		h
+	]), o(() => {
+		if (!(!h || typeof Image > "u")) for (let e of [-1, 1]) {
+			let t = m[(A + e + m.length) % m.length];
+			if (!t) continue;
+			let n = new Image();
+			n.src = t.src;
+		}
+	}, [
+		A,
+		m,
+		h
+	]), !h || m.length === 0) return null;
+	let M = m[Math.max(0, Math.min(A, m.length - 1))], N = y ?? m.length > 1, P = m.length > 1;
+	return /* @__PURE__ */ l(r, { children: /* @__PURE__ */ u("div", {
+		ref: E,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": M.alt,
+		className: e(i.overlay, T),
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: i.topBar,
+				children: [b && P ? /* @__PURE__ */ u("span", {
+					className: i.counter,
+					children: [
+						A + 1,
+						" / ",
+						m.length
+					]
+				}) : /* @__PURE__ */ l("span", {}), /* @__PURE__ */ l("button", {
+					type: "button",
+					className: i.iconButton,
+					"aria-label": S,
+					onClick: v,
+					children: /* @__PURE__ */ l(p, { size: 20 })
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: i.stage,
+				children: [
+					P ? /* @__PURE__ */ l("button", {
+						type: "button",
+						className: e(i.iconButton, i.nav),
+						"aria-label": C,
+						disabled: !x && A === 0,
+						onClick: () => j(A - 1),
+						children: /* @__PURE__ */ l(d, { size: 24 })
+					}) : null,
+					/* @__PURE__ */ u("figure", {
+						className: i.figure,
+						children: [/* @__PURE__ */ l("img", {
+							src: M.src,
+							alt: M.alt,
+							className: i.image
+						}), M.caption ? /* @__PURE__ */ l("figcaption", {
+							className: i.caption,
+							children: M.caption
+						}) : null]
+					}),
+					P ? /* @__PURE__ */ l("button", {
+						type: "button",
+						className: e(i.iconButton, i.nav),
+						"aria-label": w,
+						disabled: !x && A === m.length - 1,
+						onClick: () => j(A + 1),
+						children: /* @__PURE__ */ l(f, { size: 24 })
+					}) : null
+				]
+			}),
+			N && P ? /* @__PURE__ */ l("div", {
+				className: i.thumbnails,
+				role: "tablist",
+				"aria-label": M.alt,
+				children: m.map((t, n) => /* @__PURE__ */ l("button", {
+					type: "button",
+					role: "tab",
+					"aria-selected": n === A,
+					"aria-label": t.alt,
+					className: e(i.thumbnail, n === A && i.thumbnailActive),
+					onClick: () => j(n),
+					children: /* @__PURE__ */ l("img", {
+						src: t.thumbnail ?? t.src,
+						alt: "",
+						className: i.thumbnailImage
+					})
+				}, `${t.src}-${n}`))
+			}) : null
+		]
+	}) });
+}
+//#endregion
+export { m as Lightbox };
+
+//# sourceMappingURL=Lightbox.js.map

package/dist/components/Lightbox/Lightbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.js","names":[],"sources":["../../../src/components/Lightbox/Lightbox.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight, X } from \"lucide-react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\nimport { useScrollLock } from \"@/hooks/use-scroll-lock\";\nimport { cn } from \"@/utils/cn\";\nimport { Portal } from \"../Portal\";\nimport styles from \"./Lightbox.module.css\";\n\n/** One item of the gallery. */\nexport interface LightboxItem {\n    /** Full-size image URL. */\n    src: string;\n    /** Alt text. Required: a gallery of unlabeled images is unusable with a screen reader. */\n    alt: string;\n    /** Caption rendered under the image. */\n    caption?: string;\n    /** Thumbnail URL for the strip. Falls back to `src`. */\n    thumbnail?: string;\n}\n\nexport interface LightboxProps {\n    items: LightboxItem[];\n    /** Whether the overlay is open. */\n    open: boolean;\n    /** Index shown while open. Default `0`. */\n    index?: number;\n    onIndexChange?: (index: number) => void;\n    onClose: () => void;\n    /** Renders the thumbnail strip. Default `true` when there is more than one item. */\n    showThumbnails?: boolean;\n    /** Renders the `3 / 12` counter. Default `true`. */\n    showCounter?: boolean;\n    /**\n     * Wrap around at the ends. Default `true` — in a photo viewer, hitting a dead\n     * end at the last image reads as a bug more often than as a boundary.\n     */\n    loop?: boolean;\n    closeLabel?: string;\n    previousLabel?: string;\n    nextLabel?: string;\n    className?: string;\n}\n\n/**\n * Full-screen image viewer with keyboard navigation.\n *\n * `Esc` closes, `←`/`→` walk the gallery, `Home`/`End` jump to the ends. Focus is\n * trapped inside while open and the page behind is scroll-locked, so the overlay\n * behaves like the dialog it is instead of a fancy `<div>` the keyboard can escape.\n *\n * Only the current image is mounted; neighbours are **preloaded** via `Image()` so\n * pressing `→` does not flash an empty frame.\n *\n * @example\n * ```tsx\n * const [open, setOpen] = useState(false);\n * const [index, setIndex] = useState(0);\n *\n * <Lightbox\n *   open={open}\n *   items={photos.map((p) => ({ src: p.url, alt: p.description }))}\n *   index={index}\n *   onIndexChange={setIndex}\n *   onClose={() => setOpen(false)}\n * />\n * ```\n */\nexport function Lightbox({\n    items,\n    open,\n    index = 0,\n    onIndexChange,\n    onClose,\n    showThumbnails,\n    showCounter = true,\n    loop = true,\n    closeLabel = \"Close\",\n    previousLabel = \"Previous image\",\n    nextLabel = \"Next image\",\n    className,\n}: LightboxProps) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [internalIndex, setInternalIndex] = useState(index);\n    const isControlled = onIndexChange !== undefined;\n    const current = isControlled ? index : internalIndex;\n\n    useFocusTrap(containerRef, open);\n    useScrollLock(open);\n\n    const move = useCallback(\n        (next: number): void => {\n            if (items.length === 0) return;\n            const target = loop\n                ? (next + items.length) % items.length\n                : Math.max(0, Math.min(next, items.length - 1));\n            if (!isControlled) setInternalIndex(target);\n            onIndexChange?.(target);\n        },\n        [isControlled, items.length, loop, onIndexChange],\n    );\n\n    useEffect(() => {\n        if (!isControlled) setInternalIndex(index);\n    }, [index, isControlled]);\n\n    useEffect(() => {\n        if (!open) return;\n        function onKeyDown(event: KeyboardEvent): void {\n            switch (event.key) {\n                case \"Escape\":\n                    onClose();\n                    break;\n                case \"ArrowRight\":\n                    move(current + 1);\n                    break;\n                case \"ArrowLeft\":\n                    move(current - 1);\n                    break;\n                case \"Home\":\n                    move(0);\n                    break;\n                case \"End\":\n                    move(items.length - 1);\n                    break;\n                default:\n                    return;\n            }\n            event.preventDefault();\n        }\n        document.addEventListener(\"keydown\", onKeyDown);\n        return () => document.removeEventListener(\"keydown\", onKeyDown);\n    }, [current, items.length, move, onClose, open]);\n\n    useEffect(() => {\n        if (!open || typeof Image === \"undefined\") return;\n        for (const offset of [-1, 1]) {\n            const neighbour = items[(current + offset + items.length) % items.length];\n            if (!neighbour) continue;\n            const preload = new Image();\n            preload.src = neighbour.src;\n        }\n    }, [current, items, open]);\n\n    if (!open || items.length === 0) return null;\n\n    const item = items[Math.max(0, Math.min(current, items.length - 1))];\n    const withThumbnails = showThumbnails ?? items.length > 1;\n    const multiple = items.length > 1;\n\n    return (\n        <Portal>\n            <div\n                ref={containerRef}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-label={item.alt}\n                className={cn(styles.overlay, className)}\n            >\n                <div className={styles.topBar}>\n                    {showCounter && multiple ? (\n                        <span className={styles.counter}>\n                            {current + 1} / {items.length}\n                        </span>\n                    ) : (\n                        <span />\n                    )}\n                    <button\n                        type=\"button\"\n                        className={styles.iconButton}\n                        aria-label={closeLabel}\n                        onClick={onClose}\n                    >\n                        <X size={20} />\n                    </button>\n                </div>\n\n                <div className={styles.stage}>\n                    {multiple ? (\n                        <button\n                            type=\"button\"\n                            className={cn(styles.iconButton, styles.nav)}\n                            aria-label={previousLabel}\n                            disabled={!loop && current === 0}\n                            onClick={() => move(current - 1)}\n                        >\n                            <ChevronLeft size={24} />\n                        </button>\n                    ) : null}\n\n                    <figure className={styles.figure}>\n                        <img src={item.src} alt={item.alt} className={styles.image} />\n                        {item.caption ? (\n                            <figcaption className={styles.caption}>{item.caption}</figcaption>\n                        ) : null}\n                    </figure>\n\n                    {multiple ? (\n                        <button\n                            type=\"button\"\n                            className={cn(styles.iconButton, styles.nav)}\n                            aria-label={nextLabel}\n                            disabled={!loop && current === items.length - 1}\n                            onClick={() => move(current + 1)}\n                        >\n                            <ChevronRight size={24} />\n                        </button>\n                    ) : null}\n                </div>\n\n                {withThumbnails && multiple ? (\n                    <div className={styles.thumbnails} role=\"tablist\" aria-label={item.alt}>\n                        {items.map((entry, entryIndex) => (\n                            <button\n                                key={`${entry.src}-${entryIndex}`}\n                                type=\"button\"\n                                role=\"tab\"\n                                aria-selected={entryIndex === current}\n                                aria-label={entry.alt}\n                                className={cn(\n                                    styles.thumbnail,\n                                    entryIndex === current && styles.thumbnailActive,\n                                )}\n                                onClick={() => move(entryIndex)}\n                            >\n                                <img\n                                    src={entry.thumbnail ?? entry.src}\n                                    alt=\"\"\n                                    className={styles.thumbnailImage}\n                                />\n                            </button>\n                        ))}\n                    </div>\n                ) : null}\n            </div>\n        </Portal>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Lightbox/Lightbox.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_overlay_ZZFy5`,t=`tempest_overlay-in_xSy6S`,n=`tempest_topBar_KFfyo`,r=`tempest_counter_tVBEK`,i=`tempest_iconButton_475l0`,a=`tempest_stage_MkXLd`,o=`tempest_nav_9nijD`,s=`tempest_figure_pZz5C`,c=`tempest_image_fAx-S`,l=`tempest_caption_yB3pA`,u=`tempest_thumbnails_wROsn`,d=`tempest_thumbnail_Vyp-R`,f=`tempest_thumbnailActive_ucTff`,p=`tempest_thumbnailImage_mvEYb`,m={overlay:e,overlayIn:t,topBar:n,counter:r,iconButton:i,stage:a,nav:o,figure:s,image:c,caption:l,thumbnails:u,thumbnail:d,thumbnailActive:f,thumbnailImage:p};exports.caption=l,exports.counter=r,exports.default=m,exports.figure=s,exports.iconButton=i,exports.image=c,exports.nav=o,exports.overlay=e,exports.overlayIn=t,exports.stage=a,exports.thumbnail=d,exports.thumbnailActive=f,exports.thumbnailImage=p,exports.thumbnails=u,exports.topBar=n;
+//# sourceMappingURL=Lightbox.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.module.cjs","names":[],"sources":["../../../src/components/Lightbox/Lightbox.module.css"],"sourcesContent":[".overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--tempest-z-modal);\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3);\n    padding-top: max(var(--tempest-space-3), var(--tempest-safe-area-top));\n    padding-bottom: max(var(--tempest-space-3), var(--tempest-safe-area-bottom));\n    background-color: rgb(0 0 0 / 0.88);\n    animation: overlay-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n@keyframes overlay-in {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n.topBar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    flex: 0 0 auto;\n}\n\n.counter {\n    color: #ffffff;\n    font-size: var(--tempest-text-sm);\n    font-variant-numeric: tabular-nums;\n}\n\n.iconButton {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 40px;\n    border: 0;\n    border-radius: var(--tempest-radius-full);\n    background-color: rgb(255 255 255 / 0.12);\n    color: #ffffff;\n    cursor: pointer;\n    transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.iconButton:hover:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.24);\n}\n\n.iconButton:disabled {\n    opacity: 0.35;\n    cursor: not-allowed;\n}\n\n.iconButton:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid #ffffff;\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.stage {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-3);\n    flex: 1 1 auto;\n    min-height: 0;\n}\n\n.nav {\n    flex: 0 0 auto;\n}\n\n.figure {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    margin: 0;\n    min-width: 0;\n    min-height: 0;\n}\n\n.image {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n    border-radius: var(--tempest-radius-sm);\n}\n\n.caption {\n    color: rgb(255 255 255 / 0.82);\n    font-size: var(--tempest-text-sm);\n    text-align: center;\n}\n\n.thumbnails {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    flex: 0 0 auto;\n    overflow-x: auto;\n    overscroll-behavior-x: contain;\n    padding-bottom: var(--tempest-space-1);\n}\n\n.thumbnail {\n    flex: 0 0 auto;\n    width: 56px;\n    height: 56px;\n    padding: 0;\n    border: 2px solid transparent;\n    border-radius: var(--tempest-radius-sm);\n    background: none;\n    cursor: pointer;\n    opacity: 0.55;\n    transition:\n        opacity var(--tempest-duration-fast) var(--tempest-ease-out),\n        border-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.thumbnail:hover {\n    opacity: 0.85;\n}\n\n.thumbnailActive {\n    opacity: 1;\n    border-color: #ffffff;\n}\n\n.thumbnail:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid #ffffff;\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.thumbnailImage {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: calc(var(--tempest-radius-sm) - 1px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .overlay {\n        animation: none;\n    }\n\n    .iconButton,\n    .thumbnail {\n        transition: none;\n    }\n}\n"],"mappings":""}

package/dist/components/Lightbox/Lightbox.module.js

@@ -0,0 +1,21 @@
+//#region src/components/Lightbox/Lightbox.module.css
+var e = "tempest_overlay_ZZFy5", t = "tempest_overlay-in_xSy6S", n = "tempest_topBar_KFfyo", r = "tempest_counter_tVBEK", i = "tempest_iconButton_475l0", a = "tempest_stage_MkXLd", o = "tempest_nav_9nijD", s = "tempest_figure_pZz5C", c = "tempest_image_fAx-S", l = "tempest_caption_yB3pA", u = "tempest_thumbnails_wROsn", d = "tempest_thumbnail_Vyp-R", f = "tempest_thumbnailActive_ucTff", p = "tempest_thumbnailImage_mvEYb", m = {
+	overlay: e,
+	overlayIn: t,
+	topBar: n,
+	counter: r,
+	iconButton: i,
+	stage: a,
+	nav: o,
+	figure: s,
+	image: c,
+	caption: l,
+	thumbnails: u,
+	thumbnail: d,
+	thumbnailActive: f,
+	thumbnailImage: p
+};
+//#endregion
+export { l as caption, r as counter, m as default, s as figure, i as iconButton, c as image, o as nav, e as overlay, t as overlayIn, a as stage, d as thumbnail, f as thumbnailActive, p as thumbnailImage, u as thumbnails, n as topBar };
+
+//# sourceMappingURL=Lightbox.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.module.js","names":[],"sources":["../../../src/components/Lightbox/Lightbox.module.css"],"sourcesContent":[".overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--tempest-z-modal);\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3);\n    padding-top: max(var(--tempest-space-3), var(--tempest-safe-area-top));\n    padding-bottom: max(var(--tempest-space-3), var(--tempest-safe-area-bottom));\n    background-color: rgb(0 0 0 / 0.88);\n    animation: overlay-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n@keyframes overlay-in {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n.topBar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    flex: 0 0 auto;\n}\n\n.counter {\n    color: #ffffff;\n    font-size: var(--tempest-text-sm);\n    font-variant-numeric: tabular-nums;\n}\n\n.iconButton {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 40px;\n    border: 0;\n    border-radius: var(--tempest-radius-full);\n    background-color: rgb(255 255 255 / 0.12);\n    color: #ffffff;\n    cursor: pointer;\n    transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.iconButton:hover:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.24);\n}\n\n.iconButton:disabled {\n    opacity: 0.35;\n    cursor: not-allowed;\n}\n\n.iconButton:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid #ffffff;\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.stage {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-3);\n    flex: 1 1 auto;\n    min-height: 0;\n}\n\n.nav {\n    flex: 0 0 auto;\n}\n\n.figure {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    margin: 0;\n    min-width: 0;\n    min-height: 0;\n}\n\n.image {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n    border-radius: var(--tempest-radius-sm);\n}\n\n.caption {\n    color: rgb(255 255 255 / 0.82);\n    font-size: var(--tempest-text-sm);\n    text-align: center;\n}\n\n.thumbnails {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    flex: 0 0 auto;\n    overflow-x: auto;\n    overscroll-behavior-x: contain;\n    padding-bottom: var(--tempest-space-1);\n}\n\n.thumbnail {\n    flex: 0 0 auto;\n    width: 56px;\n    height: 56px;\n    padding: 0;\n    border: 2px solid transparent;\n    border-radius: var(--tempest-radius-sm);\n    background: none;\n    cursor: pointer;\n    opacity: 0.55;\n    transition:\n        opacity var(--tempest-duration-fast) var(--tempest-ease-out),\n        border-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.thumbnail:hover {\n    opacity: 0.85;\n}\n\n.thumbnailActive {\n    opacity: 1;\n    border-color: #ffffff;\n}\n\n.thumbnail:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid #ffffff;\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.thumbnailImage {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: calc(var(--tempest-radius-sm) - 1px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .overlay {\n        animation: none;\n    }\n\n    .iconButton,\n    .thumbnail {\n        transition: none;\n    }\n}\n"],"mappings":""}

package/dist/components/NotificationCenter/NotificationCenter.cjs

@@ -0,0 +1,2 @@
+const e=require("../../utils/cn.cjs"),t=require("../Badge/Badge.cjs"),n=require("../EmptyState/EmptyState.cjs"),r=require("../../utils/relative-time.cjs"),i=require("./NotificationCenter.module.cjs");let a=require("react/jsx-runtime");function o({items:o,title:s=`Notificações`,onSelect:c,onMarkRead:l,onMarkAllRead:u,onDismiss:d,renderIcon:f,locale:p=`pt-BR`,emptyState:m,now:h,className:g,..._}){let v=o.filter(e=>!e.read).length,y=h??new Date().getTime(),b=e=>{e.read||l?.(e.id),c?.(e)},x=!!(c||l);return(0,a.jsxs)(`div`,{className:e.cn(i.default.panel,g),..._,children:[(s||u&&v>0)&&(0,a.jsxs)(`header`,{className:i.default.header,children:[s?(0,a.jsxs)(`h2`,{className:i.default.title,children:[s,v>0&&(0,a.jsx)(t.Badge,{variant:`primary`,"aria-label":`${v} não lidas`,children:v})]}):(0,a.jsx)(`span`,{}),u&&v>0&&(0,a.jsx)(`button`,{type:`button`,className:i.default.headerAction,onClick:u,children:`Marcar todas como lidas`})]}),o.length===0?m??(0,a.jsx)(n.EmptyState,{title:`Nenhuma notificação`}):(0,a.jsx)(`ul`,{className:i.default.list,children:o.map(t=>(0,a.jsxs)(`li`,{className:e.cn(i.default.item,!t.read&&i.default.unread),"aria-current":t.read?void 0:`true`,children:[f&&(0,a.jsx)(`span`,{className:i.default.icon,children:f(t)}),(0,a.jsxs)(`div`,{className:i.default.body,children:[x?(0,a.jsxs)(`button`,{type:`button`,className:i.default.trigger,onClick:()=>b(t),children:[(0,a.jsx)(`span`,{className:i.default.itemTitle,children:t.title}),t.body&&(0,a.jsx)(`span`,{className:i.default.itemBody,children:t.body})]}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(`span`,{className:i.default.itemTitle,children:t.title}),t.body&&(0,a.jsx)(`span`,{className:i.default.itemBody,children:t.body})]}),(0,a.jsx)(`time`,{className:i.default.time,dateTime:new Date(t.receivedAt).toISOString(),children:r.relativeTime(t.receivedAt,{locale:p,now:y})})]}),d&&(0,a.jsx)(`button`,{type:`button`,className:i.default.dismiss,onClick:()=>d(t.id),"aria-label":`Descartar: ${t.title}`,children:`×`})]},t.id))})]})}exports.NotificationCenter=o;
+//# sourceMappingURL=NotificationCenter.cjs.map

package/dist/components/NotificationCenter/NotificationCenter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCenter.cjs","names":[],"sources":["../../../src/components/NotificationCenter/NotificationCenter.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport { relativeTime, type RelativeTimeLocale } from \"@/utils/relative-time\";\n\nimport { Badge } from \"../Badge\";\nimport { EmptyState } from \"../EmptyState\";\nimport type { NotificationItem } from \"./use-notification-inbox\";\nimport styles from \"./NotificationCenter.module.css\";\n\n/**\n * DOM attributes this component redefines.\n *\n * `title` becomes a rendered heading node instead of a tooltip string, and\n * `onSelect` becomes \"an entry was activated\" instead of the DOM text-selection\n * event. Both would be type errors if merged, and silently confusing if allowed\n * through.\n */\ntype OverriddenDomProps = \"children\" | \"title\" | \"onSelect\";\n\nexport interface NotificationCenterProps extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    OverriddenDomProps\n> {\n    /** Entries to show. Rendered in the order given — `useNotificationInbox` sorts newest first. */\n    items: readonly NotificationItem[];\n    /**\n     * Panel heading. Pass `null` to render the list with no header.\n     *\n     * Widened from the DOM `title` attribute (a `string`) on purpose: this is a\n     * rendered heading, not a tooltip, so it takes a node.\n     */\n    title?: ReactNode;\n    /** Activate an entry: click, `Enter` or `Space`. Also marks it read when `onMarkRead` is set. */\n    onSelect?: (item: NotificationItem) => void;\n    /** Mark one entry as read. Enables the per-item read control. */\n    onMarkRead?: (id: string) => void;\n    /** Mark every entry as read. Enables the header action. */\n    onMarkAllRead?: () => void;\n    /** Remove one entry. Enables the per-item dismiss control. */\n    onDismiss?: (id: string) => void;\n    /** Icon rendered at the leading edge of each row — an `<Icon name={…} />`, say. */\n    renderIcon?: (item: NotificationItem) => ReactNode;\n    /** Locale for the relative timestamps. Default `\"pt-BR\"`. */\n    locale?: RelativeTimeLocale;\n    /** Shown when `items` is empty. */\n    emptyState?: ReactNode;\n    /** Reference point for the relative timestamps. Default: now, at render time. */\n    now?: number;\n}\n\n/**\n * Inbox panel for notifications the app has received.\n *\n * Deliberately presentational and controlled: it takes a list and emits intent.\n * Where the list comes from — an API, a service-worker push, `localStorage` — and\n * where read state is written are app decisions, and a component that assumed any\n * of them would be wrong for most apps. `useNotificationInbox` is the companion\n * that holds the state, including the service-worker bridge.\n *\n * It is also just the panel, not a popover: apps mount it inside their own\n * `Popover`, `Drawer` or route. That keeps one component from owning both the\n * inbox and a positioning strategy.\n *\n * @example\n * const inbox = useNotificationInbox();\n *\n * <Popover trigger={<Button>Notificações ({inbox.unreadCount})</Button>}>\n *     <NotificationCenter\n *         items={inbox.items}\n *         onMarkRead={inbox.markRead}\n *         onMarkAllRead={inbox.markAllRead}\n *         onDismiss={inbox.remove}\n *         onSelect={(item) => item.url && navigate(item.url)}\n *     />\n * </Popover>\n */\nexport function NotificationCenter({\n    items,\n    title = \"Notificações\",\n    onSelect,\n    onMarkRead,\n    onMarkAllRead,\n    onDismiss,\n    renderIcon,\n    locale = \"pt-BR\",\n    emptyState,\n    now,\n    className,\n    ...rest\n}: NotificationCenterProps) {\n    const unreadCount = items.filter((item) => !item.read).length;\n    const reference = now ?? new Date().getTime();\n\n    /**\n     * Activate an entry.\n     *\n     * Reading a notification is implied by opening it, so activation marks it read\n     * as well — otherwise every app would have to remember to call both, and the\n     * unread badge would keep counting something the user already saw.\n     */\n    const activate = (item: NotificationItem): void => {\n        if (!item.read) onMarkRead?.(item.id);\n        onSelect?.(item);\n    };\n\n    const interactive = Boolean(onSelect || onMarkRead);\n\n    return (\n        <div className={cn(styles.panel, className)} {...rest}>\n            {(title || (onMarkAllRead && unreadCount > 0)) && (\n                <header className={styles.header}>\n                    {title ? (\n                        <h2 className={styles.title}>\n                            {title}\n                            {unreadCount > 0 && (\n                                <Badge variant=\"primary\" aria-label={`${unreadCount} não lidas`}>\n                                    {unreadCount}\n                                </Badge>\n                            )}\n                        </h2>\n                    ) : (\n                        <span />\n                    )}\n                    {onMarkAllRead && unreadCount > 0 && (\n                        <button\n                            type=\"button\"\n                            className={styles.headerAction}\n                            onClick={onMarkAllRead}\n                        >\n                            Marcar todas como lidas\n                        </button>\n                    )}\n                </header>\n            )}\n\n            {items.length === 0 ? (\n                (emptyState ?? <EmptyState title=\"Nenhuma notificação\" />)\n            ) : (\n                <ul className={styles.list}>\n                    {items.map((item) => (\n                        <li\n                            key={item.id}\n                            className={cn(styles.item, !item.read && styles.unread)}\n                            aria-current={!item.read ? \"true\" : undefined}\n                        >\n                            {renderIcon && <span className={styles.icon}>{renderIcon(item)}</span>}\n\n                            <div className={styles.body}>\n                                {interactive ? (\n                                    <button\n                                        type=\"button\"\n                                        className={styles.trigger}\n                                        onClick={() => activate(item)}\n                                    >\n                                        <span className={styles.itemTitle}>{item.title}</span>\n                                        {item.body && (\n                                            <span className={styles.itemBody}>{item.body}</span>\n                                        )}\n                                    </button>\n                                ) : (\n                                    <>\n                                        <span className={styles.itemTitle}>{item.title}</span>\n                                        {item.body && (\n                                            <span className={styles.itemBody}>{item.body}</span>\n                                        )}\n                                    </>\n                                )}\n                                <time\n                                    className={styles.time}\n                                    dateTime={new Date(item.receivedAt).toISOString()}\n                                >\n                                    {relativeTime(item.receivedAt, { locale, now: reference })}\n                                </time>\n                            </div>\n\n                            {onDismiss && (\n                                <button\n                                    type=\"button\"\n                                    className={styles.dismiss}\n                                    onClick={() => onDismiss(item.id)}\n                                    aria-label={`Descartar: ${item.title}`}\n                                >\n                                    ×\n                                </button>\n                            )}\n                        </li>\n                    ))}\n                </ul>\n            )}\n        </div>\n    );\n}\n"],"mappings":"2OA6EA,SAAgB,EAAmB,CAC/B,QACA,QAAQ,eACR,WACA,aACA,gBACA,YACA,aACA,SAAS,QACT,aACA,MACA,YACA,GAAG,GACqB,CACxB,IAAM,EAAc,EAAM,OAAQ,GAAS,CAAC,EAAK,IAAI,CAAC,CAAC,OACjD,EAAY,GAAO,IAAI,KAAK,CAAA,CAAE,QAAQ,EAStC,EAAY,GAAiC,CAC1C,EAAK,MAAM,IAAa,EAAK,EAAE,EACpC,IAAW,CAAI,CACnB,EAEM,EAAc,GAAQ,GAAY,GAExC,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,CAAS,EAAG,GAAI,WAAjD,EACM,GAAU,GAAiB,EAAc,KACvC,EAAA,EAAA,KAAA,CAAC,SAAD,CAAQ,UAAW,EAAA,QAAO,gBAA1B,CACK,GACG,EAAA,EAAA,KAAA,CAAC,KAAD,CAAI,UAAW,EAAA,QAAO,eAAtB,CACK,EACA,EAAc,IACX,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CAAO,QAAQ,UAAU,aAAY,GAAG,EAAY,qBAC/C,CACE,CAAA,CAEX,KAEJ,EAAA,EAAA,IAAA,CAAC,OAAD,CAAO,CAAA,EAEV,GAAiB,EAAc,IAC5B,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,aAClB,QAAS,WACZ,yBAEO,CAAA,CAER,IAGX,EAAM,SAAW,EACb,IAAc,EAAA,EAAA,IAAA,CAAC,EAAA,WAAD,CAAY,MAAM,qBAAuB,CAAA,GAExD,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAW,EAAA,QAAO,cACjB,EAAM,IAAK,IACR,EAAA,EAAA,KAAA,CAAC,KAAD,CAEI,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,CAAC,EAAK,MAAQ,EAAA,QAAO,MAAM,EACtD,eAAe,EAAK,KAAgB,IAAA,GAAT,gBAH/B,CAKK,IAAc,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,cAAO,EAAW,CAAI,CAAQ,CAAA,GAErE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,cAAvB,CACK,GACG,EAAA,EAAA,KAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,QAClB,YAAe,EAAS,CAAI,WAHhC,EAKI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,EAAK,KAAY,CAAA,EACpD,EAAK,OACF,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAK,IAAW,CAAA,CAEnD,KAER,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,EAAK,KAAY,CAAA,EACpD,EAAK,OACF,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAK,IAAW,CAAA,CAEzD,CAAA,CAAA,GAEN,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,UAAW,EAAA,QAAO,KAClB,SAAU,IAAI,KAAK,EAAK,UAAU,CAAC,CAAC,YAAY,WAE/C,EAAA,aAAa,EAAK,WAAY,CAAE,SAAQ,IAAK,CAAU,CAAC,CACvD,CAAA,CACL,IAEJ,IACG,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,QAClB,YAAe,EAAU,EAAK,EAAE,EAChC,aAAY,cAAc,EAAK,iBAClC,GAEO,CAAA,CAEZ,GA5CK,EAAK,EA4CV,CACP,CACD,CAAA,CAEP,GAEb"}

package/dist/components/NotificationCenter/NotificationCenter.js

@@ -0,0 +1,83 @@
+import { cn as e } from "../../utils/cn.js";
+import { Badge as t } from "../Badge/Badge.js";
+import { EmptyState as n } from "../EmptyState/EmptyState.js";
+import { relativeTime as r } from "../../utils/relative-time.js";
+import i from "./NotificationCenter.module.js";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/NotificationCenter/NotificationCenter.tsx
+function c({ items: c, title: l = "Notificações", onSelect: u, onMarkRead: d, onMarkAllRead: f, onDismiss: p, renderIcon: m, locale: h = "pt-BR", emptyState: g, now: _, className: v, ...y }) {
+	let b = c.filter((e) => !e.read).length, x = _ ?? (/* @__PURE__ */ new Date()).getTime(), S = (e) => {
+		e.read || d?.(e.id), u?.(e);
+	}, C = !!(u || d);
+	return /* @__PURE__ */ s("div", {
+		className: e(i.panel, v),
+		...y,
+		children: [(l || f && b > 0) && /* @__PURE__ */ s("header", {
+			className: i.header,
+			children: [l ? /* @__PURE__ */ s("h2", {
+				className: i.title,
+				children: [l, b > 0 && /* @__PURE__ */ o(t, {
+					variant: "primary",
+					"aria-label": `${b} não lidas`,
+					children: b
+				})]
+			}) : /* @__PURE__ */ o("span", {}), f && b > 0 && /* @__PURE__ */ o("button", {
+				type: "button",
+				className: i.headerAction,
+				onClick: f,
+				children: "Marcar todas como lidas"
+			})]
+		}), c.length === 0 ? g ?? /* @__PURE__ */ o(n, { title: "Nenhuma notificação" }) : /* @__PURE__ */ o("ul", {
+			className: i.list,
+			children: c.map((t) => /* @__PURE__ */ s("li", {
+				className: e(i.item, !t.read && i.unread),
+				"aria-current": t.read ? void 0 : "true",
+				children: [
+					m && /* @__PURE__ */ o("span", {
+						className: i.icon,
+						children: m(t)
+					}),
+					/* @__PURE__ */ s("div", {
+						className: i.body,
+						children: [C ? /* @__PURE__ */ s("button", {
+							type: "button",
+							className: i.trigger,
+							onClick: () => S(t),
+							children: [/* @__PURE__ */ o("span", {
+								className: i.itemTitle,
+								children: t.title
+							}), t.body && /* @__PURE__ */ o("span", {
+								className: i.itemBody,
+								children: t.body
+							})]
+						}) : /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("span", {
+							className: i.itemTitle,
+							children: t.title
+						}), t.body && /* @__PURE__ */ o("span", {
+							className: i.itemBody,
+							children: t.body
+						})] }), /* @__PURE__ */ o("time", {
+							className: i.time,
+							dateTime: new Date(t.receivedAt).toISOString(),
+							children: r(t.receivedAt, {
+								locale: h,
+								now: x
+							})
+						})]
+					}),
+					p && /* @__PURE__ */ o("button", {
+						type: "button",
+						className: i.dismiss,
+						onClick: () => p(t.id),
+						"aria-label": `Descartar: ${t.title}`,
+						children: "×"
+					})
+				]
+			}, t.id))
+		})]
+	});
+}
+//#endregion
+export { c as NotificationCenter };
+
+//# sourceMappingURL=NotificationCenter.js.map

package/dist/components/NotificationCenter/NotificationCenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCenter.js","names":[],"sources":["../../../src/components/NotificationCenter/NotificationCenter.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport { relativeTime, type RelativeTimeLocale } from \"@/utils/relative-time\";\n\nimport { Badge } from \"../Badge\";\nimport { EmptyState } from \"../EmptyState\";\nimport type { NotificationItem } from \"./use-notification-inbox\";\nimport styles from \"./NotificationCenter.module.css\";\n\n/**\n * DOM attributes this component redefines.\n *\n * `title` becomes a rendered heading node instead of a tooltip string, and\n * `onSelect` becomes \"an entry was activated\" instead of the DOM text-selection\n * event. Both would be type errors if merged, and silently confusing if allowed\n * through.\n */\ntype OverriddenDomProps = \"children\" | \"title\" | \"onSelect\";\n\nexport interface NotificationCenterProps extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    OverriddenDomProps\n> {\n    /** Entries to show. Rendered in the order given — `useNotificationInbox` sorts newest first. */\n    items: readonly NotificationItem[];\n    /**\n     * Panel heading. Pass `null` to render the list with no header.\n     *\n     * Widened from the DOM `title` attribute (a `string`) on purpose: this is a\n     * rendered heading, not a tooltip, so it takes a node.\n     */\n    title?: ReactNode;\n    /** Activate an entry: click, `Enter` or `Space`. Also marks it read when `onMarkRead` is set. */\n    onSelect?: (item: NotificationItem) => void;\n    /** Mark one entry as read. Enables the per-item read control. */\n    onMarkRead?: (id: string) => void;\n    /** Mark every entry as read. Enables the header action. */\n    onMarkAllRead?: () => void;\n    /** Remove one entry. Enables the per-item dismiss control. */\n    onDismiss?: (id: string) => void;\n    /** Icon rendered at the leading edge of each row — an `<Icon name={…} />`, say. */\n    renderIcon?: (item: NotificationItem) => ReactNode;\n    /** Locale for the relative timestamps. Default `\"pt-BR\"`. */\n    locale?: RelativeTimeLocale;\n    /** Shown when `items` is empty. */\n    emptyState?: ReactNode;\n    /** Reference point for the relative timestamps. Default: now, at render time. */\n    now?: number;\n}\n\n/**\n * Inbox panel for notifications the app has received.\n *\n * Deliberately presentational and controlled: it takes a list and emits intent.\n * Where the list comes from — an API, a service-worker push, `localStorage` — and\n * where read state is written are app decisions, and a component that assumed any\n * of them would be wrong for most apps. `useNotificationInbox` is the companion\n * that holds the state, including the service-worker bridge.\n *\n * It is also just the panel, not a popover: apps mount it inside their own\n * `Popover`, `Drawer` or route. That keeps one component from owning both the\n * inbox and a positioning strategy.\n *\n * @example\n * const inbox = useNotificationInbox();\n *\n * <Popover trigger={<Button>Notificações ({inbox.unreadCount})</Button>}>\n *     <NotificationCenter\n *         items={inbox.items}\n *         onMarkRead={inbox.markRead}\n *         onMarkAllRead={inbox.markAllRead}\n *         onDismiss={inbox.remove}\n *         onSelect={(item) => item.url && navigate(item.url)}\n *     />\n * </Popover>\n */\nexport function NotificationCenter({\n    items,\n    title = \"Notificações\",\n    onSelect,\n    onMarkRead,\n    onMarkAllRead,\n    onDismiss,\n    renderIcon,\n    locale = \"pt-BR\",\n    emptyState,\n    now,\n    className,\n    ...rest\n}: NotificationCenterProps) {\n    const unreadCount = items.filter((item) => !item.read).length;\n    const reference = now ?? new Date().getTime();\n\n    /**\n     * Activate an entry.\n     *\n     * Reading a notification is implied by opening it, so activation marks it read\n     * as well — otherwise every app would have to remember to call both, and the\n     * unread badge would keep counting something the user already saw.\n     */\n    const activate = (item: NotificationItem): void => {\n        if (!item.read) onMarkRead?.(item.id);\n        onSelect?.(item);\n    };\n\n    const interactive = Boolean(onSelect || onMarkRead);\n\n    return (\n        <div className={cn(styles.panel, className)} {...rest}>\n            {(title || (onMarkAllRead && unreadCount > 0)) && (\n                <header className={styles.header}>\n                    {title ? (\n                        <h2 className={styles.title}>\n                            {title}\n                            {unreadCount > 0 && (\n                                <Badge variant=\"primary\" aria-label={`${unreadCount} não lidas`}>\n                                    {unreadCount}\n                                </Badge>\n                            )}\n                        </h2>\n                    ) : (\n                        <span />\n                    )}\n                    {onMarkAllRead && unreadCount > 0 && (\n                        <button\n                            type=\"button\"\n                            className={styles.headerAction}\n                            onClick={onMarkAllRead}\n                        >\n                            Marcar todas como lidas\n                        </button>\n                    )}\n                </header>\n            )}\n\n            {items.length === 0 ? (\n                (emptyState ?? <EmptyState title=\"Nenhuma notificação\" />)\n            ) : (\n                <ul className={styles.list}>\n                    {items.map((item) => (\n                        <li\n                            key={item.id}\n                            className={cn(styles.item, !item.read && styles.unread)}\n                            aria-current={!item.read ? \"true\" : undefined}\n                        >\n                            {renderIcon && <span className={styles.icon}>{renderIcon(item)}</span>}\n\n                            <div className={styles.body}>\n                                {interactive ? (\n                                    <button\n                                        type=\"button\"\n                                        className={styles.trigger}\n                                        onClick={() => activate(item)}\n                                    >\n                                        <span className={styles.itemTitle}>{item.title}</span>\n                                        {item.body && (\n                                            <span className={styles.itemBody}>{item.body}</span>\n                                        )}\n                                    </button>\n                                ) : (\n                                    <>\n                                        <span className={styles.itemTitle}>{item.title}</span>\n                                        {item.body && (\n                                            <span className={styles.itemBody}>{item.body}</span>\n                                        )}\n                                    </>\n                                )}\n                                <time\n                                    className={styles.time}\n                                    dateTime={new Date(item.receivedAt).toISOString()}\n                                >\n                                    {relativeTime(item.receivedAt, { locale, now: reference })}\n                                </time>\n                            </div>\n\n                            {onDismiss && (\n                                <button\n                                    type=\"button\"\n                                    className={styles.dismiss}\n                                    onClick={() => onDismiss(item.id)}\n                                    aria-label={`Descartar: ${item.title}`}\n                                >\n                                    ×\n                                </button>\n                            )}\n                        </li>\n                    ))}\n                </ul>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;AA6EA,SAAgB,EAAmB,EAC/B,UACA,WAAQ,gBACR,aACA,eACA,kBACA,cACA,eACA,YAAS,SACT,eACA,QACA,cACA,GAAG,KACqB;CACxB,IAAM,IAAc,EAAM,QAAQ,MAAS,CAAC,EAAK,IAAI,CAAC,CAAC,QACjD,IAAY,sBAAO,IAAI,KAAK,EAAA,CAAE,QAAQ,GAStC,KAAY,MAAiC;EAE/C,AADK,EAAK,QAAM,IAAa,EAAK,EAAE,GACpC,IAAW,CAAI;CACnB,GAEM,IAAc,GAAQ,KAAY;CAExC,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,OAAO,CAAS;EAAG,GAAI;YAAjD,EACM,KAAU,KAAiB,IAAc,MACvC,kBAAC,UAAD;GAAQ,WAAW,EAAO;aAA1B,CACK,IACG,kBAAC,MAAD;IAAI,WAAW,EAAO;cAAtB,CACK,GACA,IAAc,KACX,kBAAC,GAAD;KAAO,SAAQ;KAAU,cAAY,GAAG,EAAY;eAC/C;IACE,CAAA,CAEX;QAEJ,kBAAC,QAAD,CAAO,CAAA,GAEV,KAAiB,IAAc,KAC5B,kBAAC,UAAD;IACI,MAAK;IACL,WAAW,EAAO;IAClB,SAAS;cACZ;GAEO,CAAA,CAER;MAGX,EAAM,WAAW,IACb,KAAc,kBAAC,GAAD,EAAY,OAAM,sBAAuB,CAAA,IAExD,kBAAC,MAAD;GAAI,WAAW,EAAO;aACjB,EAAM,KAAK,MACR,kBAAC,MAAD;IAEI,WAAW,EAAG,EAAO,MAAM,CAAC,EAAK,QAAQ,EAAO,MAAM;IACtD,gBAAe,EAAK,OAAgB,KAAA,IAAT;cAH/B;KAKK,KAAc,kBAAC,QAAD;MAAM,WAAW,EAAO;gBAAO,EAAW,CAAI;KAAQ,CAAA;KAErE,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB,CACK,IACG,kBAAC,UAAD;OACI,MAAK;OACL,WAAW,EAAO;OAClB,eAAe,EAAS,CAAI;iBAHhC,CAKI,kBAAC,QAAD;QAAM,WAAW,EAAO;kBAAY,EAAK;OAAY,CAAA,GACpD,EAAK,QACF,kBAAC,QAAD;QAAM,WAAW,EAAO;kBAAW,EAAK;OAAW,CAAA,CAEnD;WAER,kBAAA,GAAA,EAAA,UAAA,CACI,kBAAC,QAAD;OAAM,WAAW,EAAO;iBAAY,EAAK;MAAY,CAAA,GACpD,EAAK,QACF,kBAAC,QAAD;OAAM,WAAW,EAAO;iBAAW,EAAK;MAAW,CAAA,CAEzD,EAAA,CAAA,GAEN,kBAAC,QAAD;OACI,WAAW,EAAO;OAClB,UAAU,IAAI,KAAK,EAAK,UAAU,CAAC,CAAC,YAAY;iBAE/C,EAAa,EAAK,YAAY;QAAE;QAAQ,KAAK;OAAU,CAAC;MACvD,CAAA,CACL;;KAEJ,KACG,kBAAC,UAAD;MACI,MAAK;MACL,WAAW,EAAO;MAClB,eAAe,EAAU,EAAK,EAAE;MAChC,cAAY,cAAc,EAAK;gBAClC;KAEO,CAAA;IAEZ;MA5CK,EAAK,EA4CV,CACP;EACD,CAAA,CAEP;;AAEb"}

package/dist/components/NotificationCenter/NotificationCenter.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_panel_FdsVm`,t=`tempest_header_hEQNb`,n=`tempest_title_UJyzl`,r=`tempest_headerAction_A0T8e`,i=`tempest_list_Q23Lz`,a=`tempest_item_e-qev`,o=`tempest_unread_5bHa-`,s=`tempest_icon_W0eML`,c=`tempest_body_m3hfl`,l=`tempest_trigger_y7SuR`,u=`tempest_itemTitle_o7OXC`,d=`tempest_itemBody_KL7uZ`,f=`tempest_time_NLUQU`,p=`tempest_dismiss_74KRm`,m={panel:e,header:t,title:n,headerAction:r,list:i,item:a,unread:o,icon:s,body:c,trigger:l,itemTitle:u,itemBody:d,time:f,dismiss:p};exports.body=c,exports.default=m,exports.dismiss=p,exports.header=t,exports.headerAction=r,exports.icon=s,exports.item=a,exports.itemBody=d,exports.itemTitle=u,exports.list=i,exports.panel=e,exports.time=f,exports.title=n,exports.trigger=l,exports.unread=o;
+//# sourceMappingURL=NotificationCenter.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCenter.module.cjs","names":[],"sources":["../../../src/components/NotificationCenter/NotificationCenter.module.css"],"sourcesContent":[".panel {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.title {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    margin: 0;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.headerAction {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-primary);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    cursor: pointer;\n    white-space: nowrap;\n}\n\n.headerAction:hover {\n    text-decoration: underline;\n}\n\n.headerAction:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    overflow-y: auto;\n}\n\n.item {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.item:last-child {\n    border-bottom: none;\n}\n\n/*\n * Unread is marked by a left bar plus a tinted background, never by colour alone\n * — the distinction has to survive a monochrome display and colour blindness.\n * `aria-current` on the row carries the same information non-visually.\n */\n.item.unread {\n    background-color: var(--tempest-surface);\n    box-shadow: inset 3px 0 0 0 var(--tempest-primary);\n}\n\n.icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface-2, var(--tempest-surface));\n    color: var(--tempest-text-muted);\n}\n\n.body {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n}\n\n/*\n * The whole title/body block is one button so the hit target matches what the\n * user perceives as \"the notification\", instead of just its title text.\n */\n.trigger {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    text-align: left;\n    cursor: pointer;\n}\n\n.trigger:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n.itemTitle {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n}\n\n.itemBody {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.time {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n}\n\n.dismiss {\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    background: none;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-base);\n    line-height: 1;\n    cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .dismiss:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.dismiss:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n"],"mappings":""}

package/dist/components/NotificationCenter/NotificationCenter.module.js

@@ -0,0 +1,21 @@
+//#region src/components/NotificationCenter/NotificationCenter.module.css
+var e = "tempest_panel_FdsVm", t = "tempest_header_hEQNb", n = "tempest_title_UJyzl", r = "tempest_headerAction_A0T8e", i = "tempest_list_Q23Lz", a = "tempest_item_e-qev", o = "tempest_unread_5bHa-", s = "tempest_icon_W0eML", c = "tempest_body_m3hfl", l = "tempest_trigger_y7SuR", u = "tempest_itemTitle_o7OXC", d = "tempest_itemBody_KL7uZ", f = "tempest_time_NLUQU", p = "tempest_dismiss_74KRm", m = {
+	panel: e,
+	header: t,
+	title: n,
+	headerAction: r,
+	list: i,
+	item: a,
+	unread: o,
+	icon: s,
+	body: c,
+	trigger: l,
+	itemTitle: u,
+	itemBody: d,
+	time: f,
+	dismiss: p
+};
+//#endregion
+export { c as body, m as default, p as dismiss, t as header, r as headerAction, s as icon, a as item, d as itemBody, u as itemTitle, i as list, e as panel, f as time, n as title, l as trigger, o as unread };
+
+//# sourceMappingURL=NotificationCenter.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCenter.module.js","names":[],"sources":["../../../src/components/NotificationCenter/NotificationCenter.module.css"],"sourcesContent":[".panel {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n}\n\n.header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.title {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    margin: 0;\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-semibold);\n}\n\n.headerAction {\n    padding: 0;\n    border: none;\n    background: none;\n    color: var(--tempest-primary);\n    font: inherit;\n    font-size: var(--tempest-text-xs);\n    cursor: pointer;\n    white-space: nowrap;\n}\n\n.headerAction:hover {\n    text-decoration: underline;\n}\n\n.headerAction:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n.list {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    overflow-y: auto;\n}\n\n.item {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.item:last-child {\n    border-bottom: none;\n}\n\n/*\n * Unread is marked by a left bar plus a tinted background, never by colour alone\n * — the distinction has to survive a monochrome display and colour blindness.\n * `aria-current` on the row carries the same information non-visually.\n */\n.item.unread {\n    background-color: var(--tempest-surface);\n    box-shadow: inset 3px 0 0 0 var(--tempest-primary);\n}\n\n.icon {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    border-radius: var(--tempest-radius-full);\n    background-color: var(--tempest-surface-2, var(--tempest-surface));\n    color: var(--tempest-text-muted);\n}\n\n.body {\n    display: flex;\n    flex: 1;\n    min-width: 0;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n}\n\n/*\n * The whole title/body block is one button so the hit target matches what the\n * user perceives as \"the notification\", instead of just its title text.\n */\n.trigger {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    padding: 0;\n    border: none;\n    background: none;\n    color: inherit;\n    font: inherit;\n    text-align: left;\n    cursor: pointer;\n}\n\n.trigger:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n    border-radius: var(--tempest-radius-sm);\n}\n\n.itemTitle {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n}\n\n.itemBody {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n    line-height: var(--tempest-leading-normal);\n}\n\n.time {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n}\n\n.dismiss {\n    flex-shrink: 0;\n    width: 1.5rem;\n    height: 1.5rem;\n    padding: 0;\n    border: none;\n    border-radius: var(--tempest-radius-full);\n    background: none;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-base);\n    line-height: 1;\n    cursor: pointer;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .dismiss:hover {\n        background-color: var(--tempest-surface);\n        color: var(--tempest-text);\n    }\n}\n\n.dismiss:focus-visible {\n    outline: 2px solid var(--tempest-primary);\n    outline-offset: 2px;\n}\n"],"mappings":""}

package/dist/components/NotificationCenter/use-notification-inbox.cjs

@@ -0,0 +1,2 @@
+let e=require("react");function t(e,t){let n=typeof e.title==`string`?e.title:null;return n?{id:typeof e.id==`string`?e.id:`sw-${e.tag??t}-${n}`,title:n,body:typeof e.body==`string`?e.body:void 0,receivedAt:typeof e.receivedAt==`number`?e.receivedAt:new Date().getTime(),url:typeof e.url==`string`?e.url:void 0,data:e.data??void 0,read:!1}:null}function n(n={}){let{initialItems:r=[],listenToServiceWorker:i=!0,messageType:a=`tempest:notification`,limit:o=100,onChange:s}=n,[c,l]=(0,e.useState)(()=>[...r].sort((e,t)=>t.receivedAt-e.receivedAt).slice(0,o)),u=(0,e.useCallback)(e=>{l(t=>{let n=e(t);return s?.(n),n})},[s]),d=(0,e.useCallback)(e=>{u(t=>[e,...t.filter(t=>t.id!==e.id)].sort((e,t)=>t.receivedAt-e.receivedAt).slice(0,o))},[u,o]),f=(0,e.useCallback)((e,t)=>{u(n=>n.map(n=>n.id===e?{...n,read:t}:n))},[u]),p=(0,e.useCallback)(e=>f(e,!0),[f]),m=(0,e.useCallback)(e=>f(e,!1),[f]),h=(0,e.useCallback)(()=>{u(e=>e.map(e=>({...e,read:!0})))},[u]),g=(0,e.useCallback)(e=>{u(t=>t.filter(t=>t.id!==e))},[u]),_=(0,e.useCallback)(()=>u(()=>[]),[u]);return(0,e.useEffect)(()=>{if(!i||typeof navigator>`u`||!navigator.serviceWorker)return;let e=navigator.serviceWorker,n=e=>{let n=e.data;if(!n||n.type!==a)return;let r=t(n.notification??n.payload??n,0);r&&d(r)};return e.addEventListener(`message`,n),()=>e.removeEventListener(`message`,n)},[i,a,d]),{items:c,unreadCount:(0,e.useMemo)(()=>c.filter(e=>!e.read).length,[c]),add:d,markRead:p,markUnread:m,markAllRead:h,remove:g,clear:_}}exports.useNotificationInbox=n;
+//# sourceMappingURL=use-notification-inbox.cjs.map

package/dist/components/NotificationCenter/use-notification-inbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-notification-inbox.cjs","names":[],"sources":["../../../src/components/NotificationCenter/use-notification-inbox.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\n\n/** One entry in the inbox. */\nexport interface NotificationItem {\n    /** Stable id. Re-adding an existing id updates that entry instead of duplicating it. */\n    id: string;\n    title: string;\n    /** Body text. Optional — a title-only notification is a legitimate shape. */\n    body?: string;\n    /** Epoch milliseconds. Used for ordering and for the relative timestamp. */\n    receivedAt: number;\n    read?: boolean;\n    /** Where activating the notification should take the user. */\n    url?: string;\n    /** Free-form payload the app passes through, e.g. the entity it refers to. */\n    data?: Record<string, unknown>;\n}\n\nexport interface UseNotificationInboxOptions {\n    /** Entries the inbox starts with — typically what the API returned. */\n    initialItems?: readonly NotificationItem[];\n    /**\n     * Listen for `message` events from the service worker and add whatever\n     * arrives. Default `true`.\n     *\n     * This is the missing half of web push: a service worker runs outside the\n     * page and cannot touch React state, so a push that arrives while the app is\n     * open shows an OS notification and then vanishes as far as the UI is\n     * concerned. Have the worker `postMessage` the payload and it lands here.\n     */\n    listenToServiceWorker?: boolean;\n    /**\n     * Message `type` to accept from the worker. Default `\"tempest:notification\"`.\n     *\n     * Filtering by type matters because the SW message channel is shared — a\n     * sync-progress ping or a cache-updated notice would otherwise show up in the\n     * user's inbox.\n     */\n    messageType?: string;\n    /**\n     * Cap on stored entries; the oldest are dropped past it. Default `100`.\n     *\n     * An inbox fed by push grows without bound otherwise, and it lives in memory.\n     */\n    limit?: number;\n    /** Called whenever the list changes — the hook for persisting it. */\n    onChange?: (items: readonly NotificationItem[]) => void;\n}\n\nexport interface UseNotificationInboxResult {\n    items: NotificationItem[];\n    unreadCount: number;\n    /** Add an entry, or update the existing one with the same id. */\n    add: (item: NotificationItem) => void;\n    markRead: (id: string) => void;\n    markUnread: (id: string) => void;\n    markAllRead: () => void;\n    remove: (id: string) => void;\n    clear: () => void;\n}\n\n/** Coerce an unknown service-worker payload into an inbox entry. */\nfunction toItem(payload: Record<string, unknown>, index: number): NotificationItem | null {\n    const title = typeof payload.title === \"string\" ? payload.title : null;\n    if (!title) return null;\n    return {\n        id: typeof payload.id === \"string\" ? payload.id : `sw-${payload.tag ?? index}-${title}`,\n        title,\n        body: typeof payload.body === \"string\" ? payload.body : undefined,\n        receivedAt:\n            typeof payload.receivedAt === \"number\" ? payload.receivedAt : new Date().getTime(),\n        url: typeof payload.url === \"string\" ? payload.url : undefined,\n        data: (payload.data as Record<string, unknown> | undefined) ?? undefined,\n        read: false,\n    };\n}\n\n/**\n * Client-side inbox state for received notifications.\n *\n * Newest first, deduplicated by `id`, capped at `limit`. Pairs with\n * `NotificationCenter` for the UI and with the `push` module for the source:\n * point a service worker's `postMessage` at it and a push that arrives while the\n * app is open shows up in the inbox instead of only as an OS notification.\n *\n * Persistence is deliberately left out — where an inbox belongs (server, Dexie,\n * `localStorage`) is an app decision. Use `onChange` to write it wherever it goes,\n * and `initialItems` to read it back.\n *\n * @example\n * const inbox = useNotificationInbox({\n *     initialItems: await api.notifications.list(),\n *     onChange: (items) => storage.set(\"inbox\", items),\n * });\n *\n * <NotificationCenter\n *     items={inbox.items}\n *     onMarkRead={inbox.markRead}\n *     onMarkAllRead={inbox.markAllRead}\n *     onDismiss={inbox.remove}\n * />\n */\nexport function useNotificationInbox(\n    options: UseNotificationInboxOptions = {},\n): UseNotificationInboxResult {\n    const {\n        initialItems = [],\n        listenToServiceWorker = true,\n        messageType = \"tempest:notification\",\n        limit = 100,\n        onChange,\n    } = options;\n\n    const [items, setItems] = useState<NotificationItem[]>(() =>\n        [...initialItems].sort((a, b) => b.receivedAt - a.receivedAt).slice(0, limit),\n    );\n\n    const update = useCallback(\n        (next: (current: NotificationItem[]) => NotificationItem[]) => {\n            setItems((current) => {\n                const result = next(current);\n                onChange?.(result);\n                return result;\n            });\n        },\n        [onChange],\n    );\n\n    const add = useCallback(\n        (item: NotificationItem) => {\n            update((current) => {\n                const without = current.filter((entry) => entry.id !== item.id);\n                return [item, ...without]\n                    .sort((a, b) => b.receivedAt - a.receivedAt)\n                    .slice(0, limit);\n            });\n        },\n        [update, limit],\n    );\n\n    const setRead = useCallback(\n        (id: string, read: boolean) => {\n            update((current) =>\n                current.map((entry) => (entry.id === id ? { ...entry, read } : entry)),\n            );\n        },\n        [update],\n    );\n\n    const markRead = useCallback((id: string) => setRead(id, true), [setRead]);\n    const markUnread = useCallback((id: string) => setRead(id, false), [setRead]);\n\n    const markAllRead = useCallback(() => {\n        update((current) => current.map((entry) => ({ ...entry, read: true })));\n    }, [update]);\n\n    const remove = useCallback(\n        (id: string) => {\n            update((current) => current.filter((entry) => entry.id !== id));\n        },\n        [update],\n    );\n\n    const clear = useCallback(() => update(() => []), [update]);\n\n    useEffect(() => {\n        if (!listenToServiceWorker) return;\n        if (typeof navigator === \"undefined\" || !navigator.serviceWorker) return;\n\n        /**\n         * Captured, not re-read in the cleanup.\n         *\n         * Looking `navigator.serviceWorker` up again at teardown throws if it is\n         * gone by then, and the listener would leak either way — the container has\n         * to be the same object the listener was added to.\n         */\n        const container = navigator.serviceWorker;\n\n        const handler = (event: MessageEvent) => {\n            const payload = event.data as Record<string, unknown> | null;\n            if (!payload || payload.type !== messageType) return;\n            const raw = (payload.notification ?? payload.payload ?? payload) as Record<\n                string,\n                unknown\n            >;\n            const item = toItem(raw, 0);\n            if (item) add(item);\n        };\n\n        container.addEventListener(\"message\", handler);\n        return () => container.removeEventListener(\"message\", handler);\n    }, [listenToServiceWorker, messageType, add]);\n\n    const unreadCount = useMemo(() => items.filter((item) => !item.read).length, [items]);\n\n    return { items, unreadCount, add, markRead, markUnread, markAllRead, remove, clear };\n}\n"],"mappings":"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"}

package/dist/components/NotificationCenter/use-notification-inbox.js

@@ -0,0 +1,63 @@
+import { useCallback as e, useEffect as t, useMemo as n, useState as r } from "react";
+//#region src/components/NotificationCenter/use-notification-inbox.ts
+function i(e, t) {
+	let n = typeof e.title == "string" ? e.title : null;
+	return n ? {
+		id: typeof e.id == "string" ? e.id : `sw-${e.tag ?? t}-${n}`,
+		title: n,
+		body: typeof e.body == "string" ? e.body : void 0,
+		receivedAt: typeof e.receivedAt == "number" ? e.receivedAt : (/* @__PURE__ */ new Date()).getTime(),
+		url: typeof e.url == "string" ? e.url : void 0,
+		data: e.data ?? void 0,
+		read: !1
+	} : null;
+}
+function a(a = {}) {
+	let { initialItems: o = [], listenToServiceWorker: s = !0, messageType: c = "tempest:notification", limit: l = 100, onChange: u } = a, [d, f] = r(() => [...o].sort((e, t) => t.receivedAt - e.receivedAt).slice(0, l)), p = e((e) => {
+		f((t) => {
+			let n = e(t);
+			return u?.(n), n;
+		});
+	}, [u]), m = e((e) => {
+		p((t) => [e, ...t.filter((t) => t.id !== e.id)].sort((e, t) => t.receivedAt - e.receivedAt).slice(0, l));
+	}, [p, l]), h = e((e, t) => {
+		p((n) => n.map((n) => n.id === e ? {
+			...n,
+			read: t
+		} : n));
+	}, [p]), g = e((e) => h(e, !0), [h]), _ = e((e) => h(e, !1), [h]), v = e(() => {
+		p((e) => e.map((e) => ({
+			...e,
+			read: !0
+		})));
+	}, [p]), y = e((e) => {
+		p((t) => t.filter((t) => t.id !== e));
+	}, [p]), b = e(() => p(() => []), [p]);
+	return t(() => {
+		if (!s || typeof navigator > "u" || !navigator.serviceWorker) return;
+		let e = navigator.serviceWorker, t = (e) => {
+			let t = e.data;
+			if (!t || t.type !== c) return;
+			let n = i(t.notification ?? t.payload ?? t, 0);
+			n && m(n);
+		};
+		return e.addEventListener("message", t), () => e.removeEventListener("message", t);
+	}, [
+		s,
+		c,
+		m
+	]), {
+		items: d,
+		unreadCount: n(() => d.filter((e) => !e.read).length, [d]),
+		add: m,
+		markRead: g,
+		markUnread: _,
+		markAllRead: v,
+		remove: y,
+		clear: b
+	};
+}
+//#endregion
+export { a as useNotificationInbox };
+
+//# sourceMappingURL=use-notification-inbox.js.map

package/dist/components/NotificationCenter/use-notification-inbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-notification-inbox.js","names":[],"sources":["../../../src/components/NotificationCenter/use-notification-inbox.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\n\n/** One entry in the inbox. */\nexport interface NotificationItem {\n    /** Stable id. Re-adding an existing id updates that entry instead of duplicating it. */\n    id: string;\n    title: string;\n    /** Body text. Optional — a title-only notification is a legitimate shape. */\n    body?: string;\n    /** Epoch milliseconds. Used for ordering and for the relative timestamp. */\n    receivedAt: number;\n    read?: boolean;\n    /** Where activating the notification should take the user. */\n    url?: string;\n    /** Free-form payload the app passes through, e.g. the entity it refers to. */\n    data?: Record<string, unknown>;\n}\n\nexport interface UseNotificationInboxOptions {\n    /** Entries the inbox starts with — typically what the API returned. */\n    initialItems?: readonly NotificationItem[];\n    /**\n     * Listen for `message` events from the service worker and add whatever\n     * arrives. Default `true`.\n     *\n     * This is the missing half of web push: a service worker runs outside the\n     * page and cannot touch React state, so a push that arrives while the app is\n     * open shows an OS notification and then vanishes as far as the UI is\n     * concerned. Have the worker `postMessage` the payload and it lands here.\n     */\n    listenToServiceWorker?: boolean;\n    /**\n     * Message `type` to accept from the worker. Default `\"tempest:notification\"`.\n     *\n     * Filtering by type matters because the SW message channel is shared — a\n     * sync-progress ping or a cache-updated notice would otherwise show up in the\n     * user's inbox.\n     */\n    messageType?: string;\n    /**\n     * Cap on stored entries; the oldest are dropped past it. Default `100`.\n     *\n     * An inbox fed by push grows without bound otherwise, and it lives in memory.\n     */\n    limit?: number;\n    /** Called whenever the list changes — the hook for persisting it. */\n    onChange?: (items: readonly NotificationItem[]) => void;\n}\n\nexport interface UseNotificationInboxResult {\n    items: NotificationItem[];\n    unreadCount: number;\n    /** Add an entry, or update the existing one with the same id. */\n    add: (item: NotificationItem) => void;\n    markRead: (id: string) => void;\n    markUnread: (id: string) => void;\n    markAllRead: () => void;\n    remove: (id: string) => void;\n    clear: () => void;\n}\n\n/** Coerce an unknown service-worker payload into an inbox entry. */\nfunction toItem(payload: Record<string, unknown>, index: number): NotificationItem | null {\n    const title = typeof payload.title === \"string\" ? payload.title : null;\n    if (!title) return null;\n    return {\n        id: typeof payload.id === \"string\" ? payload.id : `sw-${payload.tag ?? index}-${title}`,\n        title,\n        body: typeof payload.body === \"string\" ? payload.body : undefined,\n        receivedAt:\n            typeof payload.receivedAt === \"number\" ? payload.receivedAt : new Date().getTime(),\n        url: typeof payload.url === \"string\" ? payload.url : undefined,\n        data: (payload.data as Record<string, unknown> | undefined) ?? undefined,\n        read: false,\n    };\n}\n\n/**\n * Client-side inbox state for received notifications.\n *\n * Newest first, deduplicated by `id`, capped at `limit`. Pairs with\n * `NotificationCenter` for the UI and with the `push` module for the source:\n * point a service worker's `postMessage` at it and a push that arrives while the\n * app is open shows up in the inbox instead of only as an OS notification.\n *\n * Persistence is deliberately left out — where an inbox belongs (server, Dexie,\n * `localStorage`) is an app decision. Use `onChange` to write it wherever it goes,\n * and `initialItems` to read it back.\n *\n * @example\n * const inbox = useNotificationInbox({\n *     initialItems: await api.notifications.list(),\n *     onChange: (items) => storage.set(\"inbox\", items),\n * });\n *\n * <NotificationCenter\n *     items={inbox.items}\n *     onMarkRead={inbox.markRead}\n *     onMarkAllRead={inbox.markAllRead}\n *     onDismiss={inbox.remove}\n * />\n */\nexport function useNotificationInbox(\n    options: UseNotificationInboxOptions = {},\n): UseNotificationInboxResult {\n    const {\n        initialItems = [],\n        listenToServiceWorker = true,\n        messageType = \"tempest:notification\",\n        limit = 100,\n        onChange,\n    } = options;\n\n    const [items, setItems] = useState<NotificationItem[]>(() =>\n        [...initialItems].sort((a, b) => b.receivedAt - a.receivedAt).slice(0, limit),\n    );\n\n    const update = useCallback(\n        (next: (current: NotificationItem[]) => NotificationItem[]) => {\n            setItems((current) => {\n                const result = next(current);\n                onChange?.(result);\n                return result;\n            });\n        },\n        [onChange],\n    );\n\n    const add = useCallback(\n        (item: NotificationItem) => {\n            update((current) => {\n                const without = current.filter((entry) => entry.id !== item.id);\n                return [item, ...without]\n                    .sort((a, b) => b.receivedAt - a.receivedAt)\n                    .slice(0, limit);\n            });\n        },\n        [update, limit],\n    );\n\n    const setRead = useCallback(\n        (id: string, read: boolean) => {\n            update((current) =>\n                current.map((entry) => (entry.id === id ? { ...entry, read } : entry)),\n            );\n        },\n        [update],\n    );\n\n    const markRead = useCallback((id: string) => setRead(id, true), [setRead]);\n    const markUnread = useCallback((id: string) => setRead(id, false), [setRead]);\n\n    const markAllRead = useCallback(() => {\n        update((current) => current.map((entry) => ({ ...entry, read: true })));\n    }, [update]);\n\n    const remove = useCallback(\n        (id: string) => {\n            update((current) => current.filter((entry) => entry.id !== id));\n        },\n        [update],\n    );\n\n    const clear = useCallback(() => update(() => []), [update]);\n\n    useEffect(() => {\n        if (!listenToServiceWorker) return;\n        if (typeof navigator === \"undefined\" || !navigator.serviceWorker) return;\n\n        /**\n         * Captured, not re-read in the cleanup.\n         *\n         * Looking `navigator.serviceWorker` up again at teardown throws if it is\n         * gone by then, and the listener would leak either way — the container has\n         * to be the same object the listener was added to.\n         */\n        const container = navigator.serviceWorker;\n\n        const handler = (event: MessageEvent) => {\n            const payload = event.data as Record<string, unknown> | null;\n            if (!payload || payload.type !== messageType) return;\n            const raw = (payload.notification ?? payload.payload ?? payload) as Record<\n                string,\n                unknown\n            >;\n            const item = toItem(raw, 0);\n            if (item) add(item);\n        };\n\n        container.addEventListener(\"message\", handler);\n        return () => container.removeEventListener(\"message\", handler);\n    }, [listenToServiceWorker, messageType, add]);\n\n    const unreadCount = useMemo(() => items.filter((item) => !item.read).length, [items]);\n\n    return { items, unreadCount, add, markRead, markUnread, markAllRead, remove, clear };\n}\n"],"mappings":";;AA8DA,SAAS,EAAO,GAAkC,GAAwC;CACtF,IAAM,IAAQ,OAAO,EAAQ,SAAU,WAAW,EAAQ,QAAQ;CAElE,OADK,IACE;EACH,IAAI,OAAO,EAAQ,MAAO,WAAW,EAAQ,KAAK,MAAM,EAAQ,OAAO,EAAM,GAAG;EAChF;EACA,MAAM,OAAO,EAAQ,QAAS,WAAW,EAAQ,OAAO,KAAA;EACxD,YACI,OAAO,EAAQ,cAAe,WAAW,EAAQ,8BAAa,IAAI,KAAK,EAAA,CAAE,QAAQ;EACrF,KAAK,OAAO,EAAQ,OAAQ,WAAW,EAAQ,MAAM,KAAA;EACrD,MAAO,EAAQ,QAAgD,KAAA;EAC/D,MAAM;CACV,IAVmB;AAWvB;AA2BA,SAAgB,EACZ,IAAuC,CAAC,GACd;CAC1B,IAAM,EACF,kBAAe,CAAC,GAChB,2BAAwB,IACxB,iBAAc,wBACd,WAAQ,KACR,gBACA,GAEE,CAAC,GAAO,KAAY,QACtB,CAAC,GAAG,CAAY,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,aAAa,EAAE,UAAU,CAAC,CAAC,MAAM,GAAG,CAAK,CAChF,GAEM,IAAS,GACV,MAA8D;EAC3D,GAAU,MAAY;GAClB,IAAM,IAAS,EAAK,CAAO;GAE3B,OADA,IAAW,CAAM,GACV;EACX,CAAC;CACL,GACA,CAAC,CAAQ,CACb,GAEM,IAAM,GACP,MAA2B;EACxB,GAAQ,MAEG,CAAC,GAAM,GADE,EAAQ,QAAQ,MAAU,EAAM,OAAO,EAAK,EAC3C,CAAO,CAAC,CACpB,MAAM,GAAG,MAAM,EAAE,aAAa,EAAE,UAAU,CAAC,CAC3C,MAAM,GAAG,CAAK,CACtB;CACL,GACA,CAAC,GAAQ,CAAK,CAClB,GAEM,IAAU,GACX,GAAY,MAAkB;EAC3B,GAAQ,MACJ,EAAQ,KAAK,MAAW,EAAM,OAAO,IAAK;GAAE,GAAG;GAAO;EAAK,IAAI,CAAM,CACzE;CACJ,GACA,CAAC,CAAM,CACX,GAEM,IAAW,GAAa,MAAe,EAAQ,GAAI,EAAI,GAAG,CAAC,CAAO,CAAC,GACnE,IAAa,GAAa,MAAe,EAAQ,GAAI,EAAK,GAAG,CAAC,CAAO,CAAC,GAEtE,IAAc,QAAkB;EAClC,GAAQ,MAAY,EAAQ,KAAK,OAAW;GAAE,GAAG;GAAO,MAAM;EAAK,EAAE,CAAC;CAC1E,GAAG,CAAC,CAAM,CAAC,GAEL,IAAS,GACV,MAAe;EACZ,GAAQ,MAAY,EAAQ,QAAQ,MAAU,EAAM,OAAO,CAAE,CAAC;CAClE,GACA,CAAC,CAAM,CACX,GAEM,IAAQ,QAAkB,QAAa,CAAC,CAAC,GAAG,CAAC,CAAM,CAAC;CAgC1D,OA9BA,QAAgB;EAEZ,IADI,CAAC,KACD,OAAO,YAAc,OAAe,CAAC,UAAU,eAAe;EASlE,IAAM,IAAY,UAAU,eAEtB,KAAW,MAAwB;GACrC,IAAM,IAAU,EAAM;GACtB,IAAI,CAAC,KAAW,EAAQ,SAAS,GAAa;GAK9C,IAAM,IAAO,EAJA,EAAQ,gBAAgB,EAAQ,WAAW,GAI/B,CAAC;GAC1B,AAAI,KAAM,EAAI,CAAI;EACtB;EAGA,OADA,EAAU,iBAAiB,WAAW,CAAO,SAChC,EAAU,oBAAoB,WAAW,CAAO;CACjE,GAAG;EAAC;EAAuB;EAAa;CAAG,CAAC,GAIrC;EAAE;EAAO,aAFI,QAAc,EAAM,QAAQ,MAAS,CAAC,EAAK,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAK,CAEnE;EAAa;EAAK;EAAU;EAAY;EAAa;EAAQ;CAAM;AACvF"}

package/dist/components/RefreshIndicator/RefreshIndicator.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("../Spinner/Spinner.cjs"),n=require("./RefreshIndicator.module.cjs");let r=require("react"),i=require("react/jsx-runtime");function a(e,t){let n=t*1.5;return Math.min(e/2,n)}function o({onRefresh:o,children:s,threshold:c=80,disabled:l,className:u}){let d=(0,r.useRef)(null),f=(0,r.useRef)(null),[p,m]=(0,r.useState)(0),[h,g]=(0,r.useState)(!1),_=f.current!==null,v=e=>{if(l||h)return;let t=d.current;if(!t||t.scrollTop>0)return;let n=e.touches[0];n&&(f.current=n.clientY)},y=e=>{if(l||h)return;let t=f.current;if(t===null)return;let n=e.touches[0];if(!n)return;let r=n.clientY-t;if(r<=0){m(0);return}m(a(r,c))},b=()=>{f.current=null,m(0)},x=async()=>{if(l||h){b();return}if(!(f.current!==null&&p>=c)){b();return}f.current=null,g(!0),m(c);try{await o()}finally{g(!1),m(0)}},S=h||p>0,C=Math.min(1,p/c);return(0,i.jsxs)(`div`,{ref:d,className:e.cn(n.default.wrapper,u),"data-refreshing":h,onTouchStart:v,onTouchMove:y,onTouchEnd:x,children:[(0,i.jsx)(`div`,{className:n.default.indicator,"aria-hidden":!S,style:{opacity:h?1:C,transform:`translateX(-50%) translateY(${S?p:0}px) rotate(${C*360}deg)`},children:(0,i.jsx)(t.Spinner,{size:`sm`,label:`Atualizando`})}),(0,i.jsx)(`div`,{className:e.cn(n.default.content,(_||h)&&n.default.dragging),style:{transform:`translateY(${S?p:0}px)`},children:s})]})}exports.RefreshIndicator=o;
+const e=require("../../utils/cn.cjs"),t=require("../Spinner/Spinner.cjs"),n=require("./RefreshIndicator.module.cjs");let r=require("react"),i=require("react/jsx-runtime");function a(e,t){let n=t*1.5;return Math.min(e/2,n)}function o({onRefresh:o,children:s,threshold:c=80,disabled:l,className:u}){let d=(0,r.useRef)(null),f=(0,r.useRef)(null),[p,m]=(0,r.useState)(0),[h,g]=(0,r.useState)(!1),[_,v]=(0,r.useState)(!1),y=e=>{if(l||h)return;let t=d.current;if(!t||t.scrollTop>0)return;let n=e.touches[0];n&&(f.current=n.clientY,v(!0))},b=e=>{if(l||h)return;let t=f.current;if(t===null)return;let n=e.touches[0];if(!n)return;let r=n.clientY-t;if(r<=0){m(0);return}m(a(r,c))},x=()=>{f.current=null,v(!1),m(0)},S=async()=>{if(l||h){x();return}if(!(f.current!==null&&p>=c)){x();return}f.current=null,v(!1),g(!0),m(c);try{await o()}finally{g(!1),m(0)}},C=h||p>0,w=Math.min(1,p/c);return(0,i.jsxs)(`div`,{ref:d,className:e.cn(n.default.wrapper,u),"data-refreshing":h,onTouchStart:y,onTouchMove:b,onTouchEnd:S,children:[(0,i.jsx)(`div`,{className:n.default.indicator,"aria-hidden":!C,style:{opacity:h?1:w,transform:`translateX(-50%) translateY(${C?p:0}px) rotate(${w*360}deg)`},children:(0,i.jsx)(t.Spinner,{size:`sm`,label:`Atualizando`})}),(0,i.jsx)(`div`,{className:e.cn(n.default.content,(_||h)&&n.default.dragging),style:{transform:`translateY(${C?p:0}px)`},children:s})]})}exports.RefreshIndicator=o;
 //# sourceMappingURL=RefreshIndicator.cjs.map

package/dist/components/RefreshIndicator/RefreshIndicator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RefreshIndicator.cjs","names":[],"sources":["../../../src/components/RefreshIndicator/RefreshIndicator.tsx"],"sourcesContent":["import { useRef, useState, type ReactNode, type TouchEvent } from \"react\";\nimport { Spinner } from \"@/components/Spinner\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./RefreshIndicator.module.css\";\n\nexport interface RefreshIndicatorProps {\n    /** Invoked when the user pulls past `threshold` and releases. May be async. */\n    onRefresh: () => void | Promise<void>;\n    /** Scrollable content to wrap. */\n    children: ReactNode;\n    /** Pixels the user must pull past to trigger a refresh. Defaults to `80`. */\n    threshold?: number;\n    /** When true, pull-to-refresh is inert. */\n    disabled?: boolean;\n    className?: string;\n}\n\n/** Apply resistance so the content lags behind the finger and the pull never runs away. */\nfunction applyResistance(distance: number, threshold: number): number {\n    const cap = threshold * 1.5;\n    return Math.min(distance / 2, cap);\n}\n\n/**\n * RefreshIndicator — pull-to-refresh wrapper for touch devices.\n *\n * Wraps scrollable `children` and listens for a downward drag that starts while the\n * container is scrolled to the top. Pulling past `threshold` and releasing triggers\n * `onRefresh`; the SDK {@link Spinner} is shown while pulling and during the refresh.\n */\nexport function RefreshIndicator({\n    onRefresh,\n    children,\n    threshold = 80,\n    disabled,\n    className,\n}: RefreshIndicatorProps) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const startYRef = useRef<number | null>(null);\n    const [pull, setPull] = useState(0);\n    const [refreshing, setRefreshing] = useState(false);\n\n    const engaged = startYRef.current !== null;\n\n    const handleTouchStart = (event: TouchEvent<HTMLDivElement>): void => {\n        if (disabled || refreshing) return;\n        const container = containerRef.current;\n        if (!container || container.scrollTop > 0) return;\n        const touch = event.touches[0];\n        if (!touch) return;\n        startYRef.current = touch.clientY;\n    };\n\n    const handleTouchMove = (event: TouchEvent<HTMLDivElement>): void => {\n        if (disabled || refreshing) return;\n        const startY = startYRef.current;\n        if (startY === null) return;\n        const touch = event.touches[0];\n        if (!touch) return;\n        const delta = touch.clientY - startY;\n        if (delta <= 0) {\n            setPull(0);\n            return;\n        }\n        setPull(applyResistance(delta, threshold));\n    };\n\n    const reset = (): void => {\n        startYRef.current = null;\n        setPull(0);\n    };\n\n    const handleTouchEnd = async (): Promise<void> => {\n        if (disabled || refreshing) {\n            reset();\n            return;\n        }\n        const startY = startYRef.current;\n        const triggered = startY !== null && pull >= threshold;\n        if (!triggered) {\n            reset();\n            return;\n        }\n        startYRef.current = null;\n        setRefreshing(true);\n        setPull(threshold);\n        try {\n            await onRefresh();\n        } finally {\n            setRefreshing(false);\n            setPull(0);\n        }\n    };\n\n    const showIndicator = refreshing || pull > 0;\n    const progress = Math.min(1, pull / threshold);\n\n    return (\n        <div\n            ref={containerRef}\n            className={cn(styles.wrapper, className)}\n            data-refreshing={refreshing}\n            onTouchStart={handleTouchStart}\n            onTouchMove={handleTouchMove}\n            onTouchEnd={handleTouchEnd}\n        >\n            <div\n                className={styles.indicator}\n                aria-hidden={!showIndicator}\n                style={{\n                    opacity: refreshing ? 1 : progress,\n                    transform: `translateX(-50%) translateY(${showIndicator ? pull : 0}px) rotate(${progress * 360}deg)`,\n                }}\n            >\n                <Spinner size=\"sm\" label=\"Atualizando\" />\n            </div>\n            <div\n                className={cn(styles.content, (engaged || refreshing) && styles.dragging)}\n                style={{ transform: `translateY(${showIndicator ? pull : 0}px)` }}\n            >\n                {children}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"2KAkBA,SAAS,EAAgB,EAAkB,EAA2B,CAClE,IAAM,EAAM,EAAY,IACxB,OAAO,KAAK,IAAI,EAAW,EAAG,CAAG,CACrC,CASA,SAAgB,EAAiB,CAC7B,YACA,WACA,YAAY,GACZ,WACA,aACsB,CACtB,IAAM,GAAA,EAAA,EAAA,OAAA,CAAsC,IAAI,EAC1C,GAAA,EAAA,EAAA,OAAA,CAAkC,IAAI,EACtC,CAAC,EAAM,IAAA,EAAA,EAAA,SAAA,CAAoB,CAAC,EAC5B,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAA0B,EAAK,EAE5C,EAAU,EAAU,UAAY,KAEhC,EAAoB,GAA4C,CAClE,GAAI,GAAY,EAAY,OAC5B,IAAM,EAAY,EAAa,QAC/B,GAAI,CAAC,GAAa,EAAU,UAAY,EAAG,OAC3C,IAAM,EAAQ,EAAM,QAAQ,GACvB,IACL,EAAU,QAAU,EAAM,QAC9B,EAEM,EAAmB,GAA4C,CACjE,GAAI,GAAY,EAAY,OAC5B,IAAM,EAAS,EAAU,QACzB,GAAI,IAAW,KAAM,OACrB,IAAM,EAAQ,EAAM,QAAQ,GAC5B,GAAI,CAAC,EAAO,OACZ,IAAM,EAAQ,EAAM,QAAU,EAC9B,GAAI,GAAS,EAAG,CACZ,EAAQ,CAAC,EACT,MACJ,CACA,EAAQ,EAAgB,EAAO,CAAS,CAAC,CAC7C,EAEM,MAAoB,CACtB,EAAU,QAAU,KACpB,EAAQ,CAAC,CACb,EAEM,EAAiB,SAA2B,CAC9C,GAAI,GAAY,EAAY,CACxB,EAAM,EACN,MACJ,CAGA,GAAI,EAFW,EAAU,UACI,MAAQ,GAAQ,GAC7B,CACZ,EAAM,EACN,MACJ,CACA,EAAU,QAAU,KACpB,EAAc,EAAI,EAClB,EAAQ,CAAS,EACjB,GAAI,CACA,MAAM,EAAU,CACpB,QAAU,CACN,EAAc,EAAK,EACnB,EAAQ,CAAC,CACb,CACJ,EAEM,EAAgB,GAAc,EAAO,EACrC,EAAW,KAAK,IAAI,EAAG,EAAO,CAAS,EAE7C,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CACI,IAAK,EACL,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,CAAS,EACvC,kBAAiB,EACjB,aAAc,EACd,YAAa,EACb,WAAY,WANhB,EAQI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,QAAO,UAClB,cAAa,CAAC,EACd,MAAO,CACH,QAAS,EAAa,EAAI,EAC1B,UAAW,+BAA+B,EAAgB,EAAO,EAAE,aAAa,EAAW,IAAI,KACnG,YAEA,EAAA,EAAA,IAAA,CAAC,EAAA,QAAD,CAAS,KAAK,KAAK,MAAM,aAAe,CAAA,CACvC,CAAA,GACL,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,SAAU,GAAW,IAAe,EAAA,QAAO,QAAQ,EACxE,MAAO,CAAE,UAAW,cAAc,EAAgB,EAAO,EAAE,IAAK,EAE/D,UACA,CAAA,CACJ,GAEb"}
+{"version":3,"file":"RefreshIndicator.cjs","names":[],"sources":["../../../src/components/RefreshIndicator/RefreshIndicator.tsx"],"sourcesContent":["import { useRef, useState, type ReactNode, type TouchEvent } from \"react\";\nimport { Spinner } from \"@/components/Spinner\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./RefreshIndicator.module.css\";\n\nexport interface RefreshIndicatorProps {\n    /** Invoked when the user pulls past `threshold` and releases. May be async. */\n    onRefresh: () => void | Promise<void>;\n    /** Scrollable content to wrap. */\n    children: ReactNode;\n    /** Pixels the user must pull past to trigger a refresh. Defaults to `80`. */\n    threshold?: number;\n    /** When true, pull-to-refresh is inert. */\n    disabled?: boolean;\n    className?: string;\n}\n\n/** Apply resistance so the content lags behind the finger and the pull never runs away. */\nfunction applyResistance(distance: number, threshold: number): number {\n    const cap = threshold * 1.5;\n    return Math.min(distance / 2, cap);\n}\n\n/**\n * RefreshIndicator — pull-to-refresh wrapper for touch devices.\n *\n * Wraps scrollable `children` and listens for a downward drag that starts while the\n * container is scrolled to the top. Pulling past `threshold` and releasing triggers\n * `onRefresh`; the SDK {@link Spinner} is shown while pulling and during the refresh.\n */\nexport function RefreshIndicator({\n    onRefresh,\n    children,\n    threshold = 80,\n    disabled,\n    className,\n}: RefreshIndicatorProps) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const startYRef = useRef<number | null>(null);\n    const [pull, setPull] = useState(0);\n    const [refreshing, setRefreshing] = useState(false);\n    /**\n     * Whether a drag is in progress. Kept in state, not derived from\n     * `startYRef.current`: a ref is not reactive, so reading it during render ties\n     * the rendered class to a value React never re-renders for — it only looked\n     * correct here because the touch handlers happen to call `setPull` too.\n     */\n    const [engaged, setEngaged] = useState(false);\n\n    const handleTouchStart = (event: TouchEvent<HTMLDivElement>): void => {\n        if (disabled || refreshing) return;\n        const container = containerRef.current;\n        if (!container || container.scrollTop > 0) return;\n        const touch = event.touches[0];\n        if (!touch) return;\n        startYRef.current = touch.clientY;\n        setEngaged(true);\n    };\n\n    const handleTouchMove = (event: TouchEvent<HTMLDivElement>): void => {\n        if (disabled || refreshing) return;\n        const startY = startYRef.current;\n        if (startY === null) return;\n        const touch = event.touches[0];\n        if (!touch) return;\n        const delta = touch.clientY - startY;\n        if (delta <= 0) {\n            setPull(0);\n            return;\n        }\n        setPull(applyResistance(delta, threshold));\n    };\n\n    const reset = (): void => {\n        startYRef.current = null;\n        setEngaged(false);\n        setPull(0);\n    };\n\n    const handleTouchEnd = async (): Promise<void> => {\n        if (disabled || refreshing) {\n            reset();\n            return;\n        }\n        const startY = startYRef.current;\n        const triggered = startY !== null && pull >= threshold;\n        if (!triggered) {\n            reset();\n            return;\n        }\n        startYRef.current = null;\n        setEngaged(false);\n        setRefreshing(true);\n        setPull(threshold);\n        try {\n            await onRefresh();\n        } finally {\n            setRefreshing(false);\n            setPull(0);\n        }\n    };\n\n    const showIndicator = refreshing || pull > 0;\n    const progress = Math.min(1, pull / threshold);\n\n    return (\n        <div\n            ref={containerRef}\n            className={cn(styles.wrapper, className)}\n            data-refreshing={refreshing}\n            onTouchStart={handleTouchStart}\n            onTouchMove={handleTouchMove}\n            onTouchEnd={handleTouchEnd}\n        >\n            <div\n                className={styles.indicator}\n                aria-hidden={!showIndicator}\n                style={{\n                    opacity: refreshing ? 1 : progress,\n                    transform: `translateX(-50%) translateY(${showIndicator ? pull : 0}px) rotate(${progress * 360}deg)`,\n                }}\n            >\n                <Spinner size=\"sm\" label=\"Atualizando\" />\n            </div>\n            <div\n                className={cn(styles.content, (engaged || refreshing) && styles.dragging)}\n                style={{ transform: `translateY(${showIndicator ? pull : 0}px)` }}\n            >\n                {children}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"2KAkBA,SAAS,EAAgB,EAAkB,EAA2B,CAClE,IAAM,EAAM,EAAY,IACxB,OAAO,KAAK,IAAI,EAAW,EAAG,CAAG,CACrC,CASA,SAAgB,EAAiB,CAC7B,YACA,WACA,YAAY,GACZ,WACA,aACsB,CACtB,IAAM,GAAA,EAAA,EAAA,OAAA,CAAsC,IAAI,EAC1C,GAAA,EAAA,EAAA,OAAA,CAAkC,IAAI,EACtC,CAAC,EAAM,IAAA,EAAA,EAAA,SAAA,CAAoB,CAAC,EAC5B,CAAC,EAAY,IAAA,EAAA,EAAA,SAAA,CAA0B,EAAK,EAO5C,CAAC,EAAS,IAAA,EAAA,EAAA,SAAA,CAAuB,EAAK,EAEtC,EAAoB,GAA4C,CAClE,GAAI,GAAY,EAAY,OAC5B,IAAM,EAAY,EAAa,QAC/B,GAAI,CAAC,GAAa,EAAU,UAAY,EAAG,OAC3C,IAAM,EAAQ,EAAM,QAAQ,GACvB,IACL,EAAU,QAAU,EAAM,QAC1B,EAAW,EAAI,EACnB,EAEM,EAAmB,GAA4C,CACjE,GAAI,GAAY,EAAY,OAC5B,IAAM,EAAS,EAAU,QACzB,GAAI,IAAW,KAAM,OACrB,IAAM,EAAQ,EAAM,QAAQ,GAC5B,GAAI,CAAC,EAAO,OACZ,IAAM,EAAQ,EAAM,QAAU,EAC9B,GAAI,GAAS,EAAG,CACZ,EAAQ,CAAC,EACT,MACJ,CACA,EAAQ,EAAgB,EAAO,CAAS,CAAC,CAC7C,EAEM,MAAoB,CACtB,EAAU,QAAU,KACpB,EAAW,EAAK,EAChB,EAAQ,CAAC,CACb,EAEM,EAAiB,SAA2B,CAC9C,GAAI,GAAY,EAAY,CACxB,EAAM,EACN,MACJ,CAGA,GAAI,EAFW,EAAU,UACI,MAAQ,GAAQ,GAC7B,CACZ,EAAM,EACN,MACJ,CACA,EAAU,QAAU,KACpB,EAAW,EAAK,EAChB,EAAc,EAAI,EAClB,EAAQ,CAAS,EACjB,GAAI,CACA,MAAM,EAAU,CACpB,QAAU,CACN,EAAc,EAAK,EACnB,EAAQ,CAAC,CACb,CACJ,EAEM,EAAgB,GAAc,EAAO,EACrC,EAAW,KAAK,IAAI,EAAG,EAAO,CAAS,EAE7C,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CACI,IAAK,EACL,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,CAAS,EACvC,kBAAiB,EACjB,aAAc,EACd,YAAa,EACb,WAAY,WANhB,EAQI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,QAAO,UAClB,cAAa,CAAC,EACd,MAAO,CACH,QAAS,EAAa,EAAI,EAC1B,UAAW,+BAA+B,EAAgB,EAAO,EAAE,aAAa,EAAW,IAAI,KACnG,YAEA,EAAA,EAAA,IAAA,CAAC,EAAA,QAAD,CAAS,KAAK,KAAK,MAAM,aAAe,CAAA,CACvC,CAAA,GACL,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,SAAU,GAAW,IAAe,EAAA,QAAO,QAAQ,EACxE,MAAO,CAAE,UAAW,cAAc,EAAgB,EAAO,EAAE,IAAK,EAE/D,UACA,CAAA,CACJ,GAEb"}