@spatika/react 1.0.0

package/src/composites/HeaderIconButton.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+import { Button } from "../primitives/Button";
+
+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 function HeaderIconButton({
+  className,
+  active,
+  badge,
+  size = "md",
+  children,
+  ...props
+}: HeaderIconButtonProps) {
+  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 (
+    <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}
+      {showBadge ? (
+        <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">
+          {badge === true ? "" : badge}
+        </span>
+      ) : null}
+    </Button>
+  );
+}

package/src/composites/ListRow.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { listRowToggleClass } from "../lib/chips";
+
+export function ListRow({
+  active = false,
+  className,
+  children,
+  trailing,
+  onClick,
+}: {
+  active?: boolean;
+  className?: string;
+  children: ReactNode;
+  trailing?: ReactNode;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      data-slot="list-row"
+      className={cn(listRowToggleClass(active), className)}
+      onClick={onClick}
+    >
+      <span className="min-w-0 flex-1 text-left">{children}</span>
+      {trailing}
+    </button>
+  );
+}

package/src/composites/MediaEntryCard.tsx

@@ -0,0 +1,95 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+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 function MediaEntryCard({
+  title,
+  body,
+  imageUrl,
+  hideImage,
+  accentClassName = "bg-primary",
+  chips,
+  meta,
+  footerLeft,
+  footerRight,
+  menu,
+  highlighted,
+  onClick,
+  className,
+  mediaClassName,
+}: MediaEntryCardProps) {
+  const Comp = onClick ? "button" : "div";
+  return (
+    <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,
+      )}
+    >
+      {!hideImage && imageUrl ? (
+        <div
+          className={cn(
+            "relative hidden w-[38%] shrink-0 sm:block",
+            mediaClassName,
+          )}
+        >
+          <img src={imageUrl} alt="" className="absolute inset-0 size-full object-cover" />
+          <div className="absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-card/80 to-transparent" />
+        </div>
+      ) : (
+        <div className={cn("w-1 shrink-0 self-stretch opacity-80", accentClassName)} />
+      )}
+
+      <div className="flex min-h-[160px] min-w-0 flex-1 flex-col gap-3 p-4 sm:p-5">
+        <div className="flex items-start justify-between gap-2">
+          <div className="min-w-0">
+            <h3 className="text-base font-black tracking-tight text-foreground">{title}</h3>
+            {chips ? <div className="mt-1.5 flex flex-wrap gap-1.5">{chips}</div> : null}
+          </div>
+          {menu}
+        </div>
+        {meta ? (
+          <div className="flex flex-wrap items-center gap-2 text-xs font-medium text-muted-foreground">
+            {meta}
+          </div>
+        ) : null}
+        {body ? (
+          <p className="line-clamp-3 text-sm leading-relaxed text-muted-foreground">{body}</p>
+        ) : null}
+        {(footerLeft || footerRight) && (
+          <div className="mt-auto flex items-center justify-between gap-2 border-t border-border/20 pt-2">
+            <div className="min-w-0 flex flex-wrap gap-1.5">{footerLeft}</div>
+            <div className="shrink-0">{footerRight}</div>
+          </div>
+        )}
+      </div>
+    </Comp>
+  );
+}

package/src/composites/MobileTabBar.tsx

@@ -0,0 +1,130 @@
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+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 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 function MobileTabBar({
+  items,
+  className,
+  trailing,
+  ariaLabel = "Primary",
+  hidden = false,
+  contained = false,
+}: MobileTabBarProps) {
+  return (
+    <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,
+      )}
+    >
+      <div
+        data-app-tabbar-shell
+        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",
+        )}
+      >
+        <nav
+          data-app-tabbar
+          aria-label={ariaLabel}
+          className="glass-tabbar flex h-[var(--app-tabbar-height)] items-stretch gap-0.5 px-1.5"
+        >
+          {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 = (
+              <>
+                {item.active ? (
+                  <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
+                  />
+                ) : null}
+                <span className="relative">
+                  <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
+                  />
+                  {item.badge}
+                </span>
+                <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",
+                  )}
+                >
+                  {item.label}
+                </span>
+              </>
+            );
+            return item.href ? (
+              <a
+                key={item.id}
+                href={item.href}
+                className={classNameItem}
+                onClick={item.onClick}
+                aria-current={item.active ? "page" : undefined}
+              >
+                {body}
+              </a>
+            ) : (
+              <button key={item.id} type="button" className={classNameItem} onClick={item.onClick}>
+                {body}
+              </button>
+            );
+          })}
+          {trailing}
+        </nav>
+      </div>
+    </div>
+  );
+}

package/src/composites/NotificationBell.tsx

@@ -0,0 +1,164 @@
+import { useEffect, type ReactNode } from "react";
+import { Bell } from "lucide-react";
+import { cn } from "../lib/cn";
+import { Button } from "../primitives/Button";
+import { HeaderIconButton } from "./HeaderIconButton";
+
+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 function NotificationBell({
+  unreadCount = 0,
+  items = [],
+  open,
+  onOpenChange,
+  onMarkAll,
+  emptyState,
+  className,
+  panelClassName,
+  title = "Notifications",
+}: NotificationBellProps) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onOpenChange(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onOpenChange]);
+
+  return (
+    <div data-slot="notification-bell" className={cn("relative z-20", className)}>
+      <HeaderIconButton
+        badge={unreadCount > 0 ? (unreadCount > 99 ? "99+" : unreadCount) : undefined}
+        active={open}
+        aria-label={title}
+        aria-expanded={open}
+        onClick={() => onOpenChange(!open)}
+      >
+        <Bell className={cn("h-4 w-4", unreadCount > 0 && "text-primary")} />
+      </HeaderIconButton>
+
+      {open ? (
+        <>
+          <button
+            type="button"
+            className="fixed inset-0 z-[90]"
+            aria-label="Close notifications"
+            onClick={() => onOpenChange(false)}
+          />
+          <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,
+            )}
+          >
+            <div className="flex items-center justify-between gap-2 px-4 py-3.5">
+              <p className="text-[10px] font-black uppercase tracking-[0.2em] text-muted-foreground/60">
+                {title}
+              </p>
+              {onMarkAll && unreadCount > 0 ? (
+                <Button type="button" variant="ghost" size="sm" onClick={onMarkAll}>
+                  Mark all
+                </Button>
+              ) : null}
+            </div>
+            <div className="mx-4 h-px bg-border/40" />
+            <div className="max-h-80 overflow-y-auto py-2">
+              {items.length === 0
+                ? emptyState ?? (
+                    <p className="px-4 py-8 text-center text-sm text-muted-foreground">
+                      You’re all caught up.
+                    </p>
+                  )
+                : items.map((item) => (
+                    <div
+                      key={item.id}
+                      className={cn(
+                        "flex gap-3 px-4 py-3 transition-colors hover:bg-muted/30",
+                        !item.isRead && "bg-primary/[0.035]",
+                      )}
+                    >
+                      <div className="mt-0.5 shrink-0 text-muted-foreground">
+                        {item.icon ?? <Bell className="h-4 w-4" />}
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-start gap-2">
+                          <p
+                            className={cn(
+                              "min-w-0 flex-1 text-sm",
+                              item.isRead ? "font-medium" : "font-bold",
+                            )}
+                          >
+                            {item.title}
+                          </p>
+                          {!item.isRead ? (
+                            <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />
+                          ) : null}
+                        </div>
+                        {item.body ? (
+                          <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">
+                            {item.body}
+                          </p>
+                        ) : null}
+                        <div className="mt-2 flex flex-wrap items-center gap-2">
+                          {item.createdAtLabel ? (
+                            <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70">
+                              {item.createdAtLabel}
+                            </span>
+                          ) : null}
+                          {item.onOpen ? (
+                            <button
+                              type="button"
+                              className="text-[10px] font-black uppercase tracking-widest text-primary"
+                              onClick={item.onOpen}
+                            >
+                              Open
+                            </button>
+                          ) : null}
+                          {item.onDismiss ? (
+                            <button
+                              type="button"
+                              className="text-[10px] font-black uppercase tracking-widest text-muted-foreground"
+                              onClick={item.onDismiss}
+                            >
+                              Dismiss
+                            </button>
+                          ) : null}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+            </div>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}

package/src/composites/PageHeader.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export type PageHeaderProps = {
+  kicker?: string;
+  title: string;
+  description?: string;
+  actions?: ReactNode;
+  className?: string;
+};
+
+/** Page title block with optional kicker and action slot. */
+export function PageHeader({ kicker, title, description, actions, className }: PageHeaderProps) {
+  return (
+    <div
+      data-slot="page-header"
+      className={cn("flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", className)}
+    >
+      <div className="min-w-0">
+        {kicker ? <p className="app-section-kicker">{kicker}</p> : null}
+        <h1 className="app-title">{title}</h1>
+        {description ? <p className="app-subtitle">{description}</p> : null}
+      </div>
+      {actions ? <div className="flex shrink-0 flex-wrap gap-2">{actions}</div> : null}
+    </div>
+  );
+}

package/src/composites/PageShell.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export type PageShellProps = {
+  children: ReactNode;
+  className?: string;
+  /** Include .app-shell horizontal padding. */
+  padded?: boolean;
+};
+
+/**
+ * Full-page backdrop with theme accent washes (.app-page).
+ */
+export function PageShell({ children, className, padded = true }: PageShellProps) {
+  return (
+    <div data-slot="page-shell" className={cn("app-page", className)}>
+      <div className={cn(padded && "app-shell")}>{children}</div>
+    </div>
+  );
+}

package/src/composites/PageStickyHeader.tsx

@@ -0,0 +1,157 @@
+import * as React from "react";
+import type { ReactNode } from "react";
+import { ArrowLeft } from "lucide-react";
+import { cn } from "../lib/cn";
+import { Button } from "../primitives/Button";
+
+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 function PageHeaderBadge({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <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
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Sticky glass page chrome — title, icon badge, search & action slots.
+ * Matches journalD PageHeader (density, count, below row, page-header-* type).
+ */
+const PageStickyHeader = React.forwardRef<HTMLDivElement, PageStickyHeaderProps>(
+  (
+    {
+      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 (
+      <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 ?? (
+          <div
+            className={cn(
+              "app-frame-pad",
+              density === "comfortable" ? "py-2.5 sm:py-3" : "py-1.5 sm:py-2",
+            )}
+          >
+            <div
+              className={cn(
+                "flex w-full min-w-0 items-center",
+                density === "comfortable" ? "gap-2.5 sm:gap-3" : "gap-2",
+              )}
+            >
+              {shouldShowBack ? (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 shrink-0 rounded-xl"
+                  onClick={onBack}
+                  aria-label="Go back"
+                >
+                  <ArrowLeft className="h-4 w-4" />
+                </Button>
+              ) : null}
+              {leading}
+              {icon ? <PageHeaderBadge>{icon}</PageHeaderBadge> : null}
+              {(title || subtitle || count != null) && (
+                <div className="min-w-0 flex-1">
+                  <div className="flex min-w-0 items-center gap-2">
+                    {title ? (
+                      <h1 className={cn("page-header-title", titleClassName ?? "truncate")}>
+                        {title}
+                      </h1>
+                    ) : null}
+                    {count != null && count !== false ? (
+                      typeof count === "string" || typeof count === "number" ? (
+                        <span className="page-header-count">{count}</span>
+                      ) : (
+                        count
+                      )
+                    ) : null}
+                  </div>
+                  {subtitle ? (
+                    <div className={cn("page-header-subtitle mt-0.5 truncate", subtitleClassName)}>
+                      {subtitle}
+                    </div>
+                  ) : null}
+                </div>
+              )}
+              {search ? (
+                <div className="hidden min-w-0 flex-1 md:block md:max-w-xs lg:max-w-sm">{search}</div>
+              ) : null}
+              {actions ? (
+                <div className="ml-auto flex shrink-0 items-center gap-1.5">{actions}</div>
+              ) : null}
+            </div>
+            {belowRow ? <div className={cn("mt-2", belowClassName)}>{belowRow}</div> : null}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+PageStickyHeader.displayName = "PageStickyHeader";
+
+export { PageStickyHeader };