@spatika/react 1.0.0

package/dist/composites/FloatingPageChrome.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronLeft, Search, X } from "lucide-react";
+import { cn } from "../lib/cn";
+import { Input } from "../primitives/Input";
+/** Shared control height for the sticky chrome row. */
+export const FLOATING_PAGE_CHROME_HEIGHT_CLASS = "h-9";
+/**
+ * Pinned rail below the fixed app chrome. Not sticky — pair with
+ * `app-page-chrome` so page content scrolls in `.app-page-chrome-body`.
+ */
+export const floatingPageChromeShellClass = "shrink-0 app-frame-pad pt-2 pb-1.5";
+/** Inner Apple glass capsule that holds identity, search, and actions. */
+export const floatingPageChromeTrayClass = "glass-page-toolbar flex w-full min-w-0 flex-col gap-2 px-1.5 py-1 sm:px-2";
+/** App-bar utility island (settings + notifications) — still a standalone chip. */
+const glassChip = "border border-border/50 bg-card/80 shadow-lg backdrop-blur-xl dark:border-white/10 dark:bg-zinc-900/70 dark:shadow-black/30";
+/** Inset control sitting on the page toolbar glass (not a second chip). */
+const pageToolbarControl = "border border-white/35 bg-white/20 shadow-none backdrop-blur-sm dark:border-white/10 dark:bg-white/[0.07]";
+/** Combined back + page name — flat on the glass tray. */
+export const floatingPageChromeIdentityClass = "flex h-9 min-w-0 shrink items-center rounded-full";
+/** Search field as an inset pill on the glass tray. */
+export const floatingPageChromeSearchWrapClass = cn("relative flex h-9 w-full max-w-md items-center rounded-full", pageToolbarControl);
+export const floatingPageChromeSearchInputClass = "h-9 w-full rounded-full border-0 bg-transparent py-0 pl-9 pr-8 text-sm leading-none shadow-none focus-visible:ring-0";
+/** View & filters / sort — inset on the glass tray, same height as search. */
+export const floatingPageChromePillClass = cn("h-9 gap-1.5 rounded-full px-2.5 text-xs font-semibold hover:bg-white/40 data-[state=open]:bg-white/50 dark:hover:bg-white/10 dark:data-[state=open]:bg-white/12", pageToolbarControl);
+/** Icon-only control (mobile search, mobile sort). */
+export const floatingPageChromeIconPillClass = cn("h-9 w-9 shrink-0 rounded-full hover:bg-white/40 data-[state=open]:bg-white/50 dark:hover:bg-white/10 dark:data-[state=open]:bg-white/12", pageToolbarControl);
+/** Cluster of related icon actions (add / layout / more). */
+export const floatingPageChromeClusterClass = cn("inline-flex h-9 w-fit items-center gap-0.5 rounded-full p-0.5", pageToolbarControl);
+/** App-bar utility island (settings + notifications). */
+export const appChromeActionClusterClass = cn("inline-flex h-10 w-fit items-center gap-0.5 rounded-full p-0.5", glassChip);
+/** Primary CTA in the chrome row. */
+export const floatingPageChromePrimaryClass = "h-9 gap-1.5 rounded-full px-3 text-xs font-semibold shadow-lg";
+/** Gap between a trigger pill and its attached menu (leaves room for the caret). */
+export const FLOATING_PAGE_CHROME_POPOVER_OFFSET = 10;
+export const floatingPageChromeAttachedPopoverClass = "overflow-visible rounded-2xl border border-border/50 bg-card/95 p-0 shadow-[0_16px_40px_-18px_rgba(15,23,42,0.42)] backdrop-blur-xl dark:border-white/10 dark:bg-zinc-900/92";
+/** Inner buttons sitting inside a glass cluster (no second chip). */
+export const appChromeClusterButtonClass = "relative z-[70] h-8 w-8 shrink-0 rounded-full px-0 text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground data-[state=open]:bg-muted/80 data-[state=open]:text-foreground";
+/**
+ * Small pointer that visually joins a popover to its trigger.
+ * `align="end"` matches popover `align="end"` (caret sits under the right-hand control).
+ */
+export function ChromeAttachedCaret({ align = "end", }) {
+    return (_jsx("span", { "aria-hidden": true, className: cn("pointer-events-none absolute -top-[7px] h-3.5 w-3.5 rotate-45 border-l border-t border-border/50 bg-card/95 dark:border-white/10 dark:bg-zinc-900/92", align === "end" ? "right-5" : "left-5") }));
+}
+export function FloatingPageChromeIdentity({ onBack, title, count, countLabel, backLabel = "Go back", className, }) {
+    const backClassName = "flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-foreground transition-colors hover:bg-muted/70 active:scale-[0.96]";
+    return (_jsxs("div", { "data-slot": "floating-page-chrome-identity", className: cn(floatingPageChromeIdentityClass, "max-w-[min(28rem,calc(100%-6.5rem))]", className), children: [onBack ? (_jsx("button", { type: "button", onClick: onBack, "aria-label": backLabel, className: backClassName, children: _jsx(ChevronLeft, { className: "h-4 w-4", "aria-hidden": true }) })) : (_jsx("span", { className: "w-2.5 shrink-0", "aria-hidden": true })), _jsx("h1", { className: "min-w-0 truncate text-sm font-semibold tracking-tight text-foreground", children: title }), count != null && count !== false ? (_jsx("span", { className: "page-header-count ml-1.5 mr-2.5", "aria-label": countLabel, children: count })) : (_jsx("span", { className: "w-2.5 shrink-0", "aria-hidden": true }))] }));
+}
+/** Search pill used in the chrome row and the mobile reveal row. */
+export function FloatingPageChromeSearchField({ value, onChange, onClear, placeholder, inputRef, className, fullWidth = false, type = "search", "aria-label": ariaLabel, }) {
+    return (_jsxs("div", { "data-slot": "floating-page-chrome-search", className: cn(floatingPageChromeSearchWrapClass, fullWidth && "max-w-none", className), children: [_jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/50" }), _jsx(Input, { ref: inputRef, type: type, enterKeyHint: "search", placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), className: floatingPageChromeSearchInputClass, autoComplete: "off", "aria-label": ariaLabel }), value ? (_jsx("button", { type: "button", onClick: onClear, className: "absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", "aria-label": "Clear search", children: _jsx(X, { className: "h-3.5 w-3.5" }) })) : null] }));
+}
+/**
+ * Shared chrome row: identity, optional centered search, trailing actions.
+ * `below` is a second row (mobile search, compact TOC) and is not itself a full-bleed bar.
+ * Pass `children` to pin this bar above a nested scroller (content never slides under it).
+ */
+export function FloatingPageChromeBar({ identity, search, actions, below, children, className, }) {
+    const bar = (_jsx("div", { "data-slot": "floating-page-chrome", className: cn(floatingPageChromeShellClass, children == null && className), children: _jsxs("div", { className: floatingPageChromeTrayClass, children: [_jsxs("div", { className: "flex h-9 w-full min-w-0 items-center gap-2", children: [identity, search ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "min-w-0 flex-1 md:hidden", "aria-hidden": true }), _jsx("div", { className: "hidden min-w-0 flex-1 justify-center px-0.5 sm:px-2 md:flex", children: search })] })) : (_jsx("div", { className: "min-w-0 flex-1", "aria-hidden": true })), actions ? (_jsx("div", { className: "flex h-9 shrink-0 items-center justify-end gap-1.5", children: actions })) : null] }), below] }) }));
+    if (children == null)
+        return bar;
+    return (_jsxs("div", { className: cn("app-page-chrome", className), children: [bar, _jsx("div", { className: "app-page-chrome-body", children: children })] }));
+}
+/** Shell + glass tray for pages that compose the chrome row by hand. */
+export function FloatingPageChromeShell({ children, below, className, }) {
+    return (_jsx("div", { "data-slot": "floating-page-chrome-shell", className: cn(floatingPageChromeShellClass, className), children: _jsxs("div", { className: floatingPageChromeTrayClass, children: [children, below] }) }));
+}

package/dist/composites/FormField.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export type FormFieldProps = {
+    id: string;
+    label: string;
+    description?: string;
+    error?: string;
+    children: ReactNode;
+    className?: string;
+    required?: boolean;
+};
+/**
+ * Label + control + helper/error stack for consistent form density.
+ */
+export declare function FormField({ id, label, description, error, children, className, required, }: FormFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=FormField.d.ts.map

package/dist/composites/FormField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../src/composites/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,cAAc,+BAkBhB"}

package/dist/composites/FormField.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+import { Label } from "../primitives/Label";
+/**
+ * Label + control + helper/error stack for consistent form density.
+ */
+export function FormField({ id, label, description, error, children, className, required, }) {
+    return (_jsxs("div", { "data-slot": "form-field", className: cn("space-y-2", className), children: [_jsxs(Label, { htmlFor: id, children: [label, required ? _jsx("span", { className: "text-destructive", children: "*" }) : null] }), children, description && !error ? (_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: description })) : null, error ? (_jsx("p", { className: "text-xs font-semibold text-destructive", role: "alert", children: error })) : null] }));
+}

package/dist/composites/GlassCard.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const glassCardVariants: (props?: ({
+    variant?: "default" | "menu" | "header" | "panel" | "subtle" | "app" | null | undefined;
+    padding?: "none" | "sm" | "lg" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type GlassCardProps = React.ComponentProps<"div"> & VariantProps<typeof glassCardVariants>;
+/**
+ * Opinionated glass surface — prefer this over raw `.glass*` class strings.
+ */
+declare const GlassCard: React.ForwardRefExoticComponent<Omit<GlassCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { GlassCard, glassCardVariants };
+//# sourceMappingURL=GlassCard.d.ts.map

package/dist/composites/GlassCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlassCard.d.ts","sourceRoot":"","sources":["../../src/composites/GlassCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,iBAAiB;;;8EAqBrB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GACtD,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAEzC;;GAEG;AACH,QAAA,MAAM,SAAS,oGAUd,CAAC;AAGF,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/composites/GlassCard.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn";
+const glassCardVariants = cva("relative overflow-hidden", {
+    variants: {
+        variant: {
+            default: "glass rounded-[var(--radius-card)]",
+            panel: "glass-panel rounded-[var(--radius-card)]",
+            subtle: "glass-subtle rounded-[var(--radius-card)]",
+            header: "glass-header",
+            menu: "glass-menu rounded-[var(--radius-card)]",
+            app: "app-card",
+        },
+        padding: {
+            none: "p-0",
+            sm: "p-3 sm:p-4",
+            md: "p-4 sm:p-5",
+            lg: "p-5 sm:p-6",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        padding: "md",
+    },
+});
+/**
+ * Opinionated glass surface — prefer this over raw `.glass*` class strings.
+ */
+const GlassCard = React.forwardRef(({ className, variant, padding, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "glass-card", "data-variant": variant ?? "default", className: cn(glassCardVariants({ variant, padding }), className), ...props })));
+GlassCard.displayName = "GlassCard";
+export { GlassCard, glassCardVariants };

package/dist/composites/HeaderIconButton.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export type HeaderIconButtonProps = React.ComponentProps<"button"> & {
+    active?: boolean;
+    /** Unread / status count shown as a pill */
+    badge?: number | string | boolean;
+    size?: "sm" | "md";
+};
+/**
+ * Square frosted toolbar control used in sticky headers and app chrome.
+ * Fully customizable via className; children typically an icon.
+ */
+export declare function HeaderIconButton({ className, active, badge, size, children, ...props }: HeaderIconButtonProps): React.JSX.Element;
+//# sourceMappingURL=HeaderIconButton.d.ts.map

package/dist/composites/HeaderIconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderIconButton.d.ts","sourceRoot":"","sources":["../../src/composites/HeaderIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,MAAM,EACN,KAAK,EACL,IAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,qBA0BvB"}

package/dist/composites/HeaderIconButton.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+import { Button } from "../primitives/Button";
+/**
+ * Square frosted toolbar control used in sticky headers and app chrome.
+ * Fully customizable via className; children typically an icon.
+ */
+export function HeaderIconButton({ className, active, badge, size = "md", children, ...props }) {
+    const dim = size === "sm" ? "h-8 w-8" : "h-9 w-9";
+    const showBadge = badge === true || (typeof badge === "number" && badge > 0) || typeof badge === "string";
+    return (_jsxs(Button, { type: "button", variant: "ghost", "data-slot": "header-icon-button", "data-active": active ? "true" : "false", className: cn(dim, "relative rounded-xl border border-transparent text-muted-foreground hover:bg-muted/40 hover:text-foreground", active && "border-primary/30 bg-primary/10 text-primary", className), ...props, children: [children, showBadge ? (_jsx("span", { className: "absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[9px] font-black text-primary-foreground shadow-sm", children: badge === true ? "" : badge })) : null] }));
+}

package/dist/composites/ListRow.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+export declare function ListRow({ active, className, children, trailing, onClick, }: {
+    active?: boolean;
+    className?: string;
+    children: ReactNode;
+    trailing?: ReactNode;
+    onClick?: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ListRow.d.ts.map

package/dist/composites/ListRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListRow.d.ts","sourceRoot":"","sources":["../../src/composites/ListRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,wBAAgB,OAAO,CAAC,EACtB,MAAc,EACd,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,GACR,EAAE;IACD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,+BAYA"}

package/dist/composites/ListRow.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+import { listRowToggleClass } from "../lib/chips";
+export function ListRow({ active = false, className, children, trailing, onClick, }) {
+    return (_jsxs("button", { type: "button", "data-slot": "list-row", className: cn(listRowToggleClass(active), className), onClick: onClick, children: [_jsx("span", { className: "min-w-0 flex-1 text-left", children: children }), trailing] }));
+}

package/dist/composites/MediaEntryCard.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+export type MediaEntryCardProps = {
+    title: string;
+    body?: string;
+    imageUrl?: string;
+    hideImage?: boolean;
+    /** Soft accent stripe when no image */
+    accentClassName?: string;
+    chips?: ReactNode;
+    meta?: ReactNode;
+    footerLeft?: ReactNode;
+    footerRight?: ReactNode;
+    menu?: ReactNode;
+    highlighted?: boolean;
+    onClick?: () => void;
+    className?: string;
+    /** Override media width on sm+ */
+    mediaClassName?: string;
+};
+/**
+ * Long horizontal entry card (story / activity style) with optional side media.
+ * All content regions are slots for full customization.
+ */
+export declare function MediaEntryCard({ title, body, imageUrl, hideImage, accentClassName, chips, meta, footerLeft, footerRight, menu, highlighted, onClick, className, mediaClassName, }: MediaEntryCardProps): import("react").JSX.Element;
+//# sourceMappingURL=MediaEntryCard.d.ts.map

package/dist/composites/MediaEntryCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaEntryCard.d.ts","sourceRoot":"","sources":["../../src/composites/MediaEntryCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,eAA8B,EAC9B,KAAK,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,IAAI,EACJ,WAAW,EACX,OAAO,EACP,SAAS,EACT,cAAc,GACf,EAAE,mBAAmB,+BAqDrB"}

package/dist/composites/MediaEntryCard.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+/**
+ * Long horizontal entry card (story / activity style) with optional side media.
+ * All content regions are slots for full customization.
+ */
+export function MediaEntryCard({ title, body, imageUrl, hideImage, accentClassName = "bg-primary", chips, meta, footerLeft, footerRight, menu, highlighted, onClick, className, mediaClassName, }) {
+    const Comp = onClick ? "button" : "div";
+    return (_jsxs(Comp, { type: onClick ? "button" : undefined, "data-slot": "media-entry-card", onClick: onClick, className: cn("group relative flex w-full overflow-hidden rounded-2xl border border-border/40 bg-card/80 text-left shadow-sm transition-[transform,box-shadow,border-color] duration-200", "hover:-translate-y-0.5 hover:border-primary/25 hover:shadow-lg", highlighted && "border-primary/50 shadow-[0_0_0_3px_color-mix(in_srgb,var(--primary)_12%,transparent)]", className), children: [!hideImage && imageUrl ? (_jsxs("div", { className: cn("relative hidden w-[38%] shrink-0 sm:block", mediaClassName), children: [_jsx("img", { src: imageUrl, alt: "", className: "absolute inset-0 size-full object-cover" }), _jsx("div", { className: "absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-card/80 to-transparent" })] })) : (_jsx("div", { className: cn("w-1 shrink-0 self-stretch opacity-80", accentClassName) })), _jsxs("div", { className: "flex min-h-[160px] min-w-0 flex-1 flex-col gap-3 p-4 sm:p-5", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h3", { className: "text-base font-black tracking-tight text-foreground", children: title }), chips ? _jsx("div", { className: "mt-1.5 flex flex-wrap gap-1.5", children: chips }) : null] }), menu] }), meta ? (_jsx("div", { className: "flex flex-wrap items-center gap-2 text-xs font-medium text-muted-foreground", children: meta })) : null, body ? (_jsx("p", { className: "line-clamp-3 text-sm leading-relaxed text-muted-foreground", children: body })) : null, (footerLeft || footerRight) && (_jsxs("div", { className: "mt-auto flex items-center justify-between gap-2 border-t border-border/20 pt-2", children: [_jsx("div", { className: "min-w-0 flex flex-wrap gap-1.5", children: footerLeft }), _jsx("div", { className: "shrink-0", children: footerRight })] }))] })] }));
+}

package/dist/composites/MobileTabBar.d.ts

@@ -0,0 +1,33 @@
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+export type MobileTabItem = {
+    id: string;
+    label: string;
+    icon: LucideIcon;
+    active?: boolean;
+    onClick?: () => void;
+    href?: string;
+    badge?: ReactNode;
+};
+/** Main-content padding that clears the floating bar until the desktop sidebar takes over. */
+export declare const APP_TABBAR_CLEARANCE_CLASS = "app-tabbar-clearance xl:pb-6";
+export type MobileTabBarProps = {
+    items: MobileTabItem[];
+    className?: string;
+    /** Extra trailing control (e.g. More) */
+    trailing?: ReactNode;
+    ariaLabel?: string;
+    /** Slide the bar away (e.g. while a text field is focused on iOS). */
+    hidden?: boolean;
+    /**
+     * Position inside a parent instead of the viewport, and keep the bar visible
+     * on large screens (docs previews, device frames).
+     */
+    contained?: boolean;
+};
+/**
+ * iOS 26-style floating liquid-glass tab bar.
+ * Sits above the home indicator as a capsule (not a full-bleed dock).
+ */
+export declare function MobileTabBar({ items, className, trailing, ariaLabel, hidden, contained, }: MobileTabBarProps): import("react").JSX.Element;
+//# sourceMappingURL=MobileTabBar.d.ts.map

package/dist/composites/MobileTabBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileTabBar.d.ts","sourceRoot":"","sources":["../../src/composites/MobileTabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,8FAA8F;AAC9F,eAAO,MAAM,0BAA0B,iCAAiC,CAAC;AAEzE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,SAAS,EACT,QAAQ,EACR,SAAqB,EACrB,MAAc,EACd,SAAiB,GAClB,EAAE,iBAAiB,+BAsFnB"}

package/dist/composites/MobileTabBar.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+/** Main-content padding that clears the floating bar until the desktop sidebar takes over. */
+export const APP_TABBAR_CLEARANCE_CLASS = "app-tabbar-clearance xl:pb-6";
+/**
+ * iOS 26-style floating liquid-glass tab bar.
+ * Sits above the home indicator as a capsule (not a full-bleed dock).
+ */
+export function MobileTabBar({ items, className, trailing, ariaLabel = "Primary", hidden = false, contained = false, }) {
+    return (_jsx("div", { "data-slot": "mobile-tab-bar", "aria-hidden": hidden || undefined, "data-mobile-tabbar-hidden": hidden ? "true" : undefined, className: cn("pointer-events-none z-50 flex justify-center", contained ? "absolute inset-x-0 bottom-0" : "fixed inset-x-0 bottom-0 xl:hidden", "transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none", hidden &&
+            "translate-y-[calc(100%+var(--app-tabbar-inset-y)+env(safe-area-inset-bottom,0px))] opacity-0", className), children: _jsx("div", { "data-app-tabbar-shell": true, className: cn("rounded-full", contained
+                ? "mb-1.5 w-[calc(100%-1rem)] max-w-[26.5rem]"
+                : "mb-[calc(var(--app-tabbar-inset-y)+env(safe-area-inset-bottom,0px))] w-[calc(100%-2*var(--app-tabbar-inset-x))] max-w-[26.5rem]", hidden ? "pointer-events-none" : "pointer-events-auto"), children: _jsxs("nav", { "data-app-tabbar": true, "aria-label": ariaLabel, className: "glass-tabbar flex h-[var(--app-tabbar-height)] items-stretch gap-0.5 px-1.5", children: [items.map((item) => {
+                        const Icon = item.icon;
+                        const classNameItem = cn("relative z-[1] flex min-h-0 min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-full px-1 py-1", "touch-manipulation select-none transition-[color,transform] duration-150 active:scale-[0.96]", item.active ? "text-primary" : "text-muted-foreground hover:text-foreground");
+                        const body = (_jsxs(_Fragment, { children: [item.active ? (_jsx("span", { className: "absolute inset-[3px] rounded-full bg-white/50 shadow-[inset_0_1px_0_var(--glass-highlight)] dark:bg-white/[0.14]", "aria-hidden": true })) : null, _jsxs("span", { className: "relative", children: [_jsx(Icon, { className: "relative h-5 w-5 shrink-0", strokeWidth: item.active ? 2.25 : 1.9, fill: item.active ? "currentColor" : "none", fillOpacity: item.active ? 0.18 : 0, "aria-hidden": true }), item.badge] }), _jsx("span", { className: cn("relative max-w-full truncate text-[10px] leading-none tracking-tight", item.active ? "font-semibold text-primary" : "font-medium text-muted-foreground"), children: item.label })] }));
+                        return item.href ? (_jsx("a", { href: item.href, className: classNameItem, onClick: item.onClick, "aria-current": item.active ? "page" : undefined, children: body }, item.id)) : (_jsx("button", { type: "button", className: classNameItem, onClick: item.onClick, children: body }, item.id));
+                    }), trailing] }) }) }));
+}

package/dist/composites/NotificationBell.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+export type NotificationItem = {
+    id: string;
+    title: string;
+    body?: string;
+    createdAtLabel?: string;
+    isRead?: boolean;
+    icon?: ReactNode;
+    onOpen?: () => void;
+    onDismiss?: () => void;
+};
+export type NotificationBellProps = {
+    unreadCount?: number;
+    items?: NotificationItem[];
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onMarkAll?: () => void;
+    emptyState?: ReactNode;
+    className?: string;
+    panelClassName?: string;
+    title?: string;
+};
+/**
+ * Notification trigger + glass panel list. Customize items and actions fully.
+ * Panel uses an opaque surface so sticky page chrome (e.g. "+ Record") cannot show through.
+ */
+export declare function NotificationBell({ unreadCount, items, open, onOpenChange, onMarkAll, emptyState, className, panelClassName, title, }: NotificationBellProps): import("react").JSX.Element;
+//# sourceMappingURL=NotificationBell.d.ts.map

package/dist/composites/NotificationBell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBell.d.ts","sourceRoot":"","sources":["../../src/composites/NotificationBell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,WAAe,EACf,KAAU,EACV,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,UAAU,EACV,SAAS,EACT,cAAc,EACd,KAAuB,GACxB,EAAE,qBAAqB,+BAwHvB"}

package/dist/composites/NotificationBell.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { Bell } from "lucide-react";
+import { cn } from "../lib/cn";
+import { Button } from "../primitives/Button";
+import { HeaderIconButton } from "./HeaderIconButton";
+/**
+ * Notification trigger + glass panel list. Customize items and actions fully.
+ * Panel uses an opaque surface so sticky page chrome (e.g. "+ Record") cannot show through.
+ */
+export function NotificationBell({ unreadCount = 0, items = [], open, onOpenChange, onMarkAll, emptyState, className, panelClassName, title = "Notifications", }) {
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onOpenChange(false);
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [open, onOpenChange]);
+    return (_jsxs("div", { "data-slot": "notification-bell", className: cn("relative z-20", className), children: [_jsx(HeaderIconButton, { badge: unreadCount > 0 ? (unreadCount > 99 ? "99+" : unreadCount) : undefined, active: open, "aria-label": title, "aria-expanded": open, onClick: () => onOpenChange(!open), children: _jsx(Bell, { className: cn("h-4 w-4", unreadCount > 0 && "text-primary") }) }), open ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "fixed inset-0 z-[90]", "aria-label": "Close notifications", onClick: () => onOpenChange(false) }), _jsxs("div", { role: "dialog", "aria-label": title, className: cn("absolute right-0 top-full z-[95] mt-2.5 w-[min(calc(100vw-1.5rem),24rem)] overflow-hidden rounded-2xl border border-border/60 bg-background shadow-[0_28px_64px_-20px_rgba(15,23,42,0.45)] dark:border-white/10 dark:bg-card dark:shadow-[0_28px_64px_-20px_rgba(0,0,0,0.65)]", panelClassName), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-4 py-3.5", children: [_jsx("p", { className: "text-[10px] font-black uppercase tracking-[0.2em] text-muted-foreground/60", children: title }), onMarkAll && unreadCount > 0 ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onMarkAll, children: "Mark all" })) : null] }), _jsx("div", { className: "mx-4 h-px bg-border/40" }), _jsx("div", { className: "max-h-80 overflow-y-auto py-2", children: items.length === 0
+                                    ? emptyState ?? (_jsx("p", { className: "px-4 py-8 text-center text-sm text-muted-foreground", children: "You\u2019re all caught up." }))
+                                    : items.map((item) => (_jsxs("div", { className: cn("flex gap-3 px-4 py-3 transition-colors hover:bg-muted/30", !item.isRead && "bg-primary/[0.035]"), children: [_jsx("div", { className: "mt-0.5 shrink-0 text-muted-foreground", children: item.icon ?? _jsx(Bell, { className: "h-4 w-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("p", { className: cn("min-w-0 flex-1 text-sm", item.isRead ? "font-medium" : "font-bold"), children: item.title }), !item.isRead ? (_jsx("span", { className: "mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary" })) : null] }), item.body ? (_jsx("p", { className: "mt-0.5 line-clamp-2 text-xs text-muted-foreground", children: item.body })) : null, _jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [item.createdAtLabel ? (_jsx("span", { className: "text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70", children: item.createdAtLabel })) : null, item.onOpen ? (_jsx("button", { type: "button", className: "text-[10px] font-black uppercase tracking-widest text-primary", onClick: item.onOpen, children: "Open" })) : null, item.onDismiss ? (_jsx("button", { type: "button", className: "text-[10px] font-black uppercase tracking-widest text-muted-foreground", onClick: item.onDismiss, children: "Dismiss" })) : null] })] })] }, item.id))) })] })] })) : null] }));
+}

package/dist/composites/PageHeader.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+export type PageHeaderProps = {
+    kicker?: string;
+    title: string;
+    description?: string;
+    actions?: ReactNode;
+    className?: string;
+};
+/** Page title block with optional kicker and action slot. */
+export declare function PageHeader({ kicker, title, description, actions, className }: PageHeaderProps): import("react").JSX.Element;
+//# sourceMappingURL=PageHeader.d.ts.map

package/dist/composites/PageHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../src/composites/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,6DAA6D;AAC7D,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,eAAe,+BAc7F"}

package/dist/composites/PageHeader.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+/** Page title block with optional kicker and action slot. */
+export function PageHeader({ kicker, title, description, actions, className }) {
+    return (_jsxs("div", { "data-slot": "page-header", className: cn("flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", className), children: [_jsxs("div", { className: "min-w-0", children: [kicker ? _jsx("p", { className: "app-section-kicker", children: kicker }) : null, _jsx("h1", { className: "app-title", children: title }), description ? _jsx("p", { className: "app-subtitle", children: description }) : null] }), actions ? _jsx("div", { className: "flex shrink-0 flex-wrap gap-2", children: actions }) : null] }));
+}

package/dist/composites/PageShell.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+export type PageShellProps = {
+    children: ReactNode;
+    className?: string;
+    /** Include .app-shell horizontal padding. */
+    padded?: boolean;
+};
+/**
+ * Full-page backdrop with theme accent washes (.app-page).
+ */
+export declare function PageShell({ children, className, padded }: PageShellProps): import("react").JSX.Element;
+//# sourceMappingURL=PageShell.d.ts.map

package/dist/composites/PageShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageShell.d.ts","sourceRoot":"","sources":["../../src/composites/PageShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAa,EAAE,EAAE,cAAc,+BAM/E"}

package/dist/composites/PageShell.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+/**
+ * Full-page backdrop with theme accent washes (.app-page).
+ */
+export function PageShell({ children, className, padded = true }) {
+    return (_jsx("div", { "data-slot": "page-shell", className: cn("app-page", className), children: _jsx("div", { className: cn(padded && "app-shell"), children: children }) }));
+}

package/dist/composites/PageStickyHeader.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import type { ReactNode } from "react";
+export type PageStickyHeaderProps = React.ComponentProps<"div"> & {
+    /** Offset below a fixed app bar (defaults to top-16 → --app-chrome-offset). */
+    offsetClassName?: string;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    count?: ReactNode;
+    leading?: ReactNode;
+    icon?: ReactNode;
+    search?: ReactNode;
+    actions?: ReactNode;
+    /** Full-width row under the main toolbar (mobile search / secondary actions). */
+    below?: ReactNode;
+    belowClassName?: string;
+    showBack?: boolean;
+    onBack?: () => void;
+    titleClassName?: string;
+    subtitleClassName?: string;
+    density?: "compact" | "comfortable";
+    mobileSearch?: ReactNode;
+};
+export declare function PageHeaderBadge({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Sticky glass page chrome — title, icon badge, search & action slots.
+ * Matches journalD PageHeader (density, count, below row, page-header-* type).
+ */
+declare const PageStickyHeader: React.ForwardRefExoticComponent<Omit<PageStickyHeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { PageStickyHeader };
+//# sourceMappingURL=PageStickyHeader.d.ts.map

package/dist/composites/PageStickyHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageStickyHeader.d.ts","sourceRoot":"","sources":["../../src/composites/PageStickyHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAChE,+EAA+E;IAC/E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBAYA;AAED;;;GAGG;AACH,QAAA,MAAM,gBAAgB,2GAsGrB,CAAC;AAGF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/composites/PageStickyHeader.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowLeft } from "lucide-react";
+import { cn } from "../lib/cn";
+import { Button } from "../primitives/Button";
+export function PageHeaderBadge({ children, className, }) {
+    return (_jsx("div", { className: cn("flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-primary/20 bg-primary/10 shadow-sm dark:border-primary/30 dark:bg-primary/15", className), "aria-hidden": true, children: children }));
+}
+/**
+ * Sticky glass page chrome — title, icon badge, search & action slots.
+ * Matches journalD PageHeader (density, count, below row, page-header-* type).
+ */
+const PageStickyHeader = React.forwardRef(({ className, offsetClassName = "top-16", title, subtitle, count, leading, icon, search, actions, below, belowClassName, showBack, onBack, titleClassName, subtitleClassName, density = "compact", mobileSearch, children, ...props }, ref) => {
+    const shouldShowBack = showBack ?? Boolean(onBack);
+    const belowRow = below ?? mobileSearch;
+    return (_jsx("div", { ref: ref, "data-slot": "page-sticky-header", className: cn("glass-header sticky z-30 shrink-0 border-b border-border/50", offsetClassName, className), ...props, children: children ?? (_jsxs("div", { className: cn("app-frame-pad", density === "comfortable" ? "py-2.5 sm:py-3" : "py-1.5 sm:py-2"), children: [_jsxs("div", { className: cn("flex w-full min-w-0 items-center", density === "comfortable" ? "gap-2.5 sm:gap-3" : "gap-2"), children: [shouldShowBack ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0 rounded-xl", onClick: onBack, "aria-label": "Go back", children: _jsx(ArrowLeft, { className: "h-4 w-4" }) })) : null, leading, icon ? _jsx(PageHeaderBadge, { children: icon }) : null, (title || subtitle || count != null) && (_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [title ? (_jsx("h1", { className: cn("page-header-title", titleClassName ?? "truncate"), children: title })) : null, count != null && count !== false ? (typeof count === "string" || typeof count === "number" ? (_jsx("span", { className: "page-header-count", children: count })) : (count)) : null] }), subtitle ? (_jsx("div", { className: cn("page-header-subtitle mt-0.5 truncate", subtitleClassName), children: subtitle })) : null] })), search ? (_jsx("div", { className: "hidden min-w-0 flex-1 md:block md:max-w-xs lg:max-w-sm", children: search })) : null, actions ? (_jsx("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: actions })) : null] }), belowRow ? _jsx("div", { className: cn("mt-2", belowClassName), children: belowRow }) : null] })) }));
+});
+PageStickyHeader.displayName = "PageStickyHeader";
+export { PageStickyHeader };

package/dist/composites/Pagination.d.ts

@@ -0,0 +1,7 @@
+export declare function Pagination({ page, pageCount, onPageChange, className, }: {
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/composites/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/composites/Pagination.tsx"],"names":[],"mappings":"AAGA,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,SAAS,GACV,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA2BA"}

package/dist/composites/Pagination.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+import { Button } from "../primitives/Button";
+export function Pagination({ page, pageCount, onPageChange, className, }) {
+    return (_jsxs("div", { "data-slot": "pagination", className: cn("flex items-center justify-center gap-2", className), children: [_jsx(Button, { variant: "outline", size: "sm", disabled: page <= 1, onClick: () => onPageChange(page - 1), children: "Prev" }), _jsxs("span", { className: "min-w-16 text-center text-xs font-bold text-muted-foreground", children: [page, " / ", pageCount] }), _jsx(Button, { variant: "outline", size: "sm", disabled: page >= pageCount, onClick: () => onPageChange(page + 1), children: "Next" })] }));
+}

package/dist/composites/PhotoViewer.d.ts

@@ -0,0 +1,18 @@
+export type PhotoViewerItem = {
+    src: string;
+    alt?: string;
+    caption?: string;
+};
+export type PhotoViewerProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    items: PhotoViewerItem[];
+    index?: number;
+    onIndexChange?: (index: number) => void;
+    className?: string;
+};
+/**
+ * Full-screen photo viewer / lightbox with zoom and prev/next.
+ */
+export declare function PhotoViewer({ open, onOpenChange, items, index: controlledIndex, onIndexChange, className, }: PhotoViewerProps): import("react").JSX.Element | null;
+//# sourceMappingURL=PhotoViewer.d.ts.map

package/dist/composites/PhotoViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhotoViewer.d.ts","sourceRoot":"","sources":["../../src/composites/PhotoViewer.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,SAAS,GACV,EAAE,gBAAgB,sCA+GlB"}

package/dist/composites/PhotoViewer.js

@@ -0,0 +1,37 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { ChevronLeft, ChevronRight, X, ZoomIn, ZoomOut } from "lucide-react";
+import { cn } from "../lib/cn";
+import { Button } from "../primitives/Button";
+/**
+ * Full-screen photo viewer / lightbox with zoom and prev/next.
+ */
+export function PhotoViewer({ open, onOpenChange, items, index: controlledIndex, onIndexChange, className, }) {
+    const [internalIndex, setInternalIndex] = useState(0);
+    const [zoom, setZoom] = useState(1);
+    const index = controlledIndex ?? internalIndex;
+    const setIndex = useCallback((next) => {
+        const clamped = Math.max(0, Math.min(items.length - 1, next));
+        setInternalIndex(clamped);
+        onIndexChange?.(clamped);
+        setZoom(1);
+    }, [items.length, onIndexChange]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onOpenChange(false);
+            if (e.key === "ArrowLeft")
+                setIndex(index - 1);
+            if (e.key === "ArrowRight")
+                setIndex(index + 1);
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [open, index, onOpenChange, setIndex]);
+    if (!open || items.length === 0)
+        return null;
+    const item = items[index];
+    return (_jsxs("div", { "data-slot": "photo-viewer", role: "dialog", "aria-modal": "true", "aria-label": item?.alt || "Photo viewer", className: cn("fixed inset-0 z-[60] flex flex-col bg-black/90", className), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2 text-white", children: [_jsxs("p", { className: "truncate text-sm font-bold", children: [index + 1, " / ", items.length, item?.caption ? ` · ${item.caption}` : ""] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "text-white hover:bg-white/10", onClick: () => setZoom((z) => Math.max(1, z - 0.25)), "aria-label": "Zoom out", children: _jsx(ZoomOut, { className: "size-4" }) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "text-white hover:bg-white/10", onClick: () => setZoom((z) => Math.min(3, z + 0.25)), "aria-label": "Zoom in", children: _jsx(ZoomIn, { className: "size-4" }) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "text-white hover:bg-white/10", onClick: () => onOpenChange(false), "aria-label": "Close", children: _jsx(X, { className: "size-4" }) })] })] }), _jsxs("div", { className: "relative flex flex-1 items-center justify-center overflow-hidden px-12", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "absolute left-2 text-white hover:bg-white/10", disabled: index <= 0, onClick: () => setIndex(index - 1), "aria-label": "Previous", children: _jsx(ChevronLeft, { className: "size-6" }) }), item ? (_jsx("img", { src: item.src, alt: item.alt || "", className: "max-h-full max-w-full object-contain transition-transform duration-200", style: { transform: `scale(${zoom})` }, draggable: false })) : null, _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "absolute right-2 text-white hover:bg-white/10", disabled: index >= items.length - 1, onClick: () => setIndex(index + 1), "aria-label": "Next", children: _jsx(ChevronRight, { className: "size-6" }) })] })] }));
+}