@lindaui/blocks 0.4.2 → 0.5.1

package/src/analytics/top-entities-table.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { BarChart2 } from "lucide-react";
+import { Badge } from "@lindaui/ui/compat";
+import type { EntityCell, TopEntitiesTableProps } from "./types";
+
+export function TopEntitiesTable({ columns, rows, emptyLabel, showRank = true }: TopEntitiesTableProps) {
+  if (!rows.length) return <div className="flex flex-col items-center justify-center gap-2 py-12"><BarChart2 className="h-8 w-8 text-muted" /><p className="text-muted text-sm">{emptyLabel}</p></div>;
+  return <div className="overflow-x-auto"><table className="w-full text-sm">
+    <thead><tr className="border-border border-b">
+      {showRank ? <th className="pr-3 pb-3 text-left font-medium text-muted text-xs uppercase tracking-wider">#</th> : null}
+      {columns.map((col) => <th className={`pr-3 pb-3 font-medium text-muted text-xs uppercase tracking-wider ${col.align === "right" ? "text-right" : "text-left"}`} key={col.key}>{col.label}</th>)}
+    </tr></thead>
+    <tbody className="divide-y divide-border">{rows.map((row, i) => <tr className="group transition-colors duration-100 hover:bg-surface-secondary/60" key={row.id}>
+      {showRank ? <td className="py-3 pr-3"><span className="font-mono text-muted text-xs tabular-nums">{String(i + 1).padStart(2, "0")}</span></td> : null}
+      {row.cells.map((cell, ci) => <Cell cell={cell} key={columns[ci]?.key ?? String(ci)} />)}
+    </tr>)}</tbody>
+  </table></div>;
+}
+function Cell({ cell }: { cell: EntityCell }) {
+  const isRight = cell.align === "right";
+  if (cell.badge) return <td className={`py-3 ${isRight ? "text-right" : "pr-3"}`}><Badge color={cell.badge.color} size="sm" variant="flat">{cell.badge.label}</Badge></td>;
+  return <td className={`py-3 pr-3 text-sm ${isRight ? "text-right text-muted tabular-nums" : "font-medium text-foreground"}`}>{cell.value}</td>;
+}

package/src/analytics/types.ts

@@ -0,0 +1,43 @@
+import type { DateValue } from "@internationalized/date";
+import type { RangeValue } from "@react-types/shared";
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+/** Presentation-only analytics types. Domain mapping stays in the consumer. */
+export interface StatusDatum { color: string; count: number; key: string; label: string; }
+export interface StatusDistributionChartProps { data: StatusDatum[]; emptyLabel: string; height?: number; valueLabel: string; }
+export interface EntityCell {
+  align?: "left" | "right";
+  badge?: { color: "default" | "primary" | "secondary" | "success" | "warning" | "danger"; label: string };
+  value: string;
+}
+export interface TopEntityRow { cells: EntityCell[]; id: string; name: string; }
+export interface TopEntitiesColumn { align?: "left" | "right"; key: string; label: string; }
+export interface TopEntitiesTableProps { columns: TopEntitiesColumn[]; emptyLabel: string; rows: TopEntityRow[]; showRank?: boolean; }
+export type HealthStatus = "at_risk" | "critical" | "healthy";
+export interface HealthEntity { id: string; name: string; score: number; status: HealthStatus; }
+export interface HealthCardLabels {
+  allHealthy: string;
+  atRisk: string;
+  critical: string;
+  criticalBadge: (count: number) => string;
+  healthy: string;
+  idleNote: string;
+  scoreLabel: (score: number) => string;
+  statusLabel: (status: HealthStatus) => string;
+  title: string;
+}
+export interface EntityHealthCardProps { entities: HealthEntity[]; labels: HealthCardLabels; renderEntityLink?: (entity: HealthEntity, children: ReactNode) => ReactNode; }
+export interface AiVsHumanData { aiConverted: number; aiLeads: number; aiRate: number; humanConverted: number; humanLeads: number; humanRate: number; }
+export interface AiPerformanceCardProps { aiVsHuman: AiVsHumanData; avgResponseTimeMinutes: number; containmentRate: number; t: (key: string, opts?: Record<string, unknown>) => string; }
+export interface AiCostData { available: boolean; conversionsCount: number; costPerConversion: number; totalCostUsd: number; }
+export interface AiCostCardProps { aiCost: AiCostData | undefined; isLoading: boolean; t: (key: string, opts?: Record<string, unknown>) => string; }
+export type Preset = "24h" | "7d" | "30d" | "custom";
+export interface TimeRangePickerProps {
+  customRange: RangeValue<DateValue> | null;
+  onCustomRangeChange: (v: RangeValue<DateValue> | null) => void;
+  onPresetChange: (p: Preset) => void;
+  preset: Preset;
+  t: (key: string) => string;
+}
+export interface AnalyticsCardProps { action?: ReactNode; children: ReactNode; icon: LucideIcon; title: string; }

package/src/analytics.ts

@@ -0,0 +1,10 @@
+/** Generic analytics migration API; the existing individual blocks remain unchanged. */
+export { AiCostCard } from "./analytics/ai-cost-card";
+export { AiPerformanceCard } from "./analytics/ai-performance-card";
+export { AnalyticsCard } from "./analytics/analytics-card";
+export { AnalyticsSkeleton, FetchingIndicator } from "./analytics/analytics-skeleton";
+export { EntityHealthCard } from "./analytics/entity-health-card";
+export { StatusDistributionChart } from "./analytics/status-distribution-chart";
+export { TimeRangePicker } from "./analytics/time-range-picker";
+export { TopEntitiesTable } from "./analytics/top-entities-table";
+export type { AiCostCardProps, AiCostData, AiPerformanceCardProps, AiVsHumanData, AnalyticsCardProps, EntityCell, EntityHealthCardProps, HealthCardLabels, HealthEntity, HealthStatus, Preset, StatusDatum, StatusDistributionChartProps, TimeRangePickerProps, TopEntitiesColumn, TopEntitiesTableProps, TopEntityRow } from "./analytics/types";

package/src/app-shell/drawer-focus.ts

@@ -0,0 +1,42 @@
+import { useEffect, useRef } from "react";
+import type { KeyboardEvent } from "react";
+
+/** Add keyboard focus management without changing the original drawer DOM or animations. */
+export function useDrawerFocus(isOpen: boolean, onClose: () => void) {
+  const drawerRef = useRef<HTMLElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const wasOpen = useRef(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      drawerRef.current?.querySelector<HTMLButtonElement>("button")?.focus();
+    } else if (wasOpen.current) {
+      triggerRef.current?.focus();
+    }
+    wasOpen.current = isOpen;
+  }, [isOpen]);
+
+  const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    // React portals bubble through their owner: do not dismiss a drawer behind a menu/modal.
+    if (!isOpen || !event.currentTarget.contains(event.target as Node)) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      onClose();
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const focusable = Array.from(event.currentTarget.querySelectorAll<HTMLElement>(
+      'a[href], button:not(:disabled), input:not(:disabled), [tabindex="0"]'
+    )).filter((element) => !element.closest('[inert], [aria-hidden="true"]')
+      && element.getAttribute("aria-disabled") !== "true");
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const activeElement = event.currentTarget.ownerDocument.activeElement;
+    if ((event.shiftKey && activeElement === first)
+      || (!event.shiftKey && activeElement === last)) {
+      event.preventDefault();
+      (event.shiftKey ? last : first)?.focus();
+    }
+  };
+  return { drawerRef, triggerRef, onKeyDown };
+}

package/src/app-shell/footer.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { Avatar, Button, Tooltip } from "@lindaui/ui/compound";
+import { cn } from "@lindaui/ui/cn";
+import { Download, LogOut, Moon, Sun, Wifi, WifiOff } from "lucide-react";
+import { useLogoutDialog } from "./logout-dialog";
+
+export interface AppShellUser {
+  displayName?: string;
+  avatarSrc?: string;
+  avatarAlt?: string;
+  initials?: string;
+}
+
+export interface AppShellFooterLabels {
+  connected: string;
+  disconnected: string;
+  installApp: string;
+  lightTheme: string;
+  darkTheme: string;
+  lightThemeTooltip: string;
+  darkThemeTooltip: string;
+  logoutTrigger: string;
+  logoutTitle: string;
+  logoutDescription: string;
+  logoutCancel: string;
+  logoutConfirm: string;
+  logoutPending: string;
+  logoutError: string;
+}
+
+export interface AppShellFooterProps {
+  className?: string;
+  isCollapsed?: boolean;
+  isConnected?: boolean;
+  showConnectionStatus?: boolean;
+  isInstallable?: boolean;
+  onInstall?: () => void;
+  mounted?: boolean;
+  theme?: string;
+  onToggleTheme?: () => void;
+  user?: AppShellUser | null;
+  onSignOut: () => void | Promise<void>;
+  labels?: Partial<AppShellFooterLabels>;
+}
+
+const defaultLabels: AppShellFooterLabels = {
+  connected: "Connected",
+  disconnected: "Disconnected",
+  installApp: "Install app",
+  lightTheme: "Light mode",
+  darkTheme: "Dark mode",
+  lightThemeTooltip: "Light mode",
+  darkThemeTooltip: "Dark mode",
+  logoutTrigger: "Sign out",
+  logoutTitle: "Sign out?",
+  logoutDescription: "You will need to sign in again to access your account.",
+  logoutCancel: "Cancel",
+  logoutConfirm: "Sign out",
+  logoutPending: "Signing out…",
+  logoutError: "Unable to sign out. Please try again.",
+};
+
+/** Connection, installation, theme and account actions; all business effects are injected. */
+export function AppShellFooter({
+  className, isCollapsed = false, isConnected = false, showConnectionStatus = true,
+  isInstallable = false, onInstall, mounted = false, theme, onToggleTheme, user,
+  onSignOut, labels: labelOverrides,
+}: AppShellFooterProps) {
+  const labels = { ...defaultLabels, ...labelOverrides };
+  const logout = useLogoutDialog(onSignOut, labels);
+  const statusLabel = isConnected ? labels.connected : labels.disconnected;
+  const themeLabel = theme === "dark" ? labels.lightTheme : labels.darkTheme;
+  const themeTooltip = theme === "dark" ? labels.lightThemeTooltip : labels.darkThemeTooltip;
+
+  return (
+    <div className={cn("space-y-2 border-border border-t px-2 py-4", className)}>
+      {showConnectionStatus ? (
+        isCollapsed ? (
+          <Tooltip>
+            <Tooltip.Trigger aria-label={statusLabel}>
+              <div className={cn(
+                "mx-1 flex justify-center rounded-lg py-2",
+                isConnected ? "bg-success/10" : "bg-danger/10"
+              )}>
+                {isConnected ? <Wifi className="text-success" size={16} /> : <WifiOff className="text-danger" size={16} />}
+              </div>
+            </Tooltip.Trigger>
+            <Tooltip.Content placement="right">{statusLabel}</Tooltip.Content>
+          </Tooltip>
+        ) : (
+          <div className={cn(
+            "flex items-center justify-center gap-2 rounded-lg px-3 py-2.5",
+            isConnected ? "bg-success/10" : "bg-danger/10"
+          )}>
+            {isConnected ? (
+              <><Wifi className="text-success" size={16} /><span className="font-medium text-success text-xs">{statusLabel}</span></>
+            ) : (
+              <><WifiOff className="text-danger" size={16} /><span className="font-medium text-danger text-xs">{statusLabel}</span></>
+            )}
+          </div>
+        )
+      ) : null}
+
+      {isInstallable && !isCollapsed ? (
+        <Button className="w-full text-xs" onPress={onInstall} size="sm" variant="tertiary">
+          <Download size={14} />{labels.installApp}
+        </Button>
+      ) : null}
+
+      {mounted ? (
+        isCollapsed ? (
+          <Tooltip>
+            <Tooltip.Trigger>
+              <Button
+                aria-label={themeTooltip}
+                className="w-full text-muted hover:text-foreground"
+                isIconOnly onPress={onToggleTheme} size="sm" variant="ghost"
+              >{theme === "dark" ? <Sun size={16} /> : <Moon size={16} />}</Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content placement="right">{themeTooltip}</Tooltip.Content>
+          </Tooltip>
+        ) : (
+          <Button className="w-full text-xs" onPress={onToggleTheme} size="sm" variant="tertiary">
+            {theme === "dark" ? <Sun size={14} /> : <Moon size={14} />}{themeLabel}
+          </Button>
+        )
+      ) : null}
+
+      {isCollapsed ? (
+        <Tooltip>
+          <Tooltip.Trigger>
+            <Button
+              aria-label={labels.logoutTrigger}
+              className="w-full text-muted hover:text-danger"
+              isIconOnly onPress={logout.open} size="sm" variant="ghost"
+            ><LogOut size={16} /></Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content placement="right">{labels.logoutTrigger}</Tooltip.Content>
+        </Tooltip>
+      ) : (
+        <div className="flex items-center gap-2 px-2">
+          <Avatar className="flex-shrink-0" color="default" size="sm">
+            <Avatar.Image alt={user?.avatarAlt ?? ""} src={user?.avatarSrc} />
+            <Avatar.Fallback>{user?.initials}</Avatar.Fallback>
+          </Avatar>
+          <div className="min-w-0 flex-1">
+            <p className="truncate font-medium text-xs">{user?.displayName}</p>
+          </div>
+          <Button
+            aria-label={labels.logoutTrigger}
+            className="text-muted hover:text-danger"
+            isIconOnly onPress={logout.open} size="sm" variant="ghost"
+          ><LogOut size={14} /></Button>
+        </div>
+      )}
+      {logout.dialog}
+    </div>
+  );
+}

package/src/app-shell/logout-dialog.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { Button, Modal, Spinner } from "@lindaui/ui/compound";
+import { useRef, useState } from "react";
+import type { AppShellFooterLabels } from "./footer";
+
+export function useLogoutDialog(onSignOut: () => void | Promise<void>, labels: AppShellFooterLabels) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const pending = useRef(false);
+
+  const onOpenChange = (open: boolean) => {
+    if (pending.current) return;
+    setError(null);
+    setIsOpen(open);
+  };
+  const confirm = async () => {
+    if (pending.current) return;
+    pending.current = true;
+    setIsPending(true);
+    setError(null);
+    try {
+      await onSignOut();
+      setIsOpen(false);
+    } catch {
+      setError(labels.logoutError);
+    } finally {
+      pending.current = false;
+      setIsPending(false);
+    }
+  };
+
+  return {
+    open: () => onOpenChange(true),
+    dialog: (
+      <Modal.Backdrop
+        isDismissable={!isPending}
+        isKeyboardDismissDisabled={isPending}
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+      >
+        <Modal.Container>
+          <Modal.Dialog className="sm:max-w-md" role="alertdialog">
+            <Modal.Header><Modal.Heading>{labels.logoutTitle}</Modal.Heading></Modal.Header>
+            <Modal.Body>
+              <p className="text-muted text-sm leading-relaxed">{labels.logoutDescription}</p>
+              {error ? <p className="mt-3 text-danger text-sm" role="alert">{error}</p> : null}
+            </Modal.Body>
+            <Modal.Footer>
+              <Button autoFocus isDisabled={isPending} onPress={() => onOpenChange(false)} variant="tertiary">
+                {labels.logoutCancel}
+              </Button>
+              <Button isPending={isPending} onPress={confirm} variant="danger">
+                {({ isPending: buttonPending }) => (
+                  <>
+                    {buttonPending ? <Spinner color="current" size="sm" /> : null}
+                    {buttonPending ? labels.logoutPending : labels.logoutConfirm}
+                  </>
+                )}
+              </Button>
+            </Modal.Footer>
+          </Modal.Dialog>
+        </Modal.Container>
+      </Modal.Backdrop>
+    ),
+  };
+}

package/src/app-shell/navigation.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { Tooltip } from "@lindaui/ui/compound";
+import { cn } from "@lindaui/ui/cn";
+import type { AppShellLinkProps, AppShellNavItem, AppShellProps } from "./types";
+
+export function ShellLink({ renderLink, ...props }: AppShellLinkProps & Pick<AppShellProps, "renderLink">) {
+  return renderLink ? renderLink(props) : <a {...props} />;
+}
+
+export function SidebarNavLink({
+  item,
+  collapsed,
+  onClick,
+  renderLink,
+}: {
+  item: AppShellNavItem;
+  collapsed?: boolean;
+  onClick?: () => void;
+  renderLink?: AppShellProps["renderLink"];
+}) {
+  const Icon = item.icon;
+  const link = (
+    <ShellLink
+      aria-current={item.isActive ? "page" : "false"}
+      aria-label={item.label}
+      className={cn(
+        "relative flex items-center gap-3 rounded-lg px-3 py-2.5",
+        "transition-all duration-200 ease-out",
+        "text-muted hover:scale-[1.02] hover:bg-surface-secondary hover:text-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
+        item.isActive ? "bg-accent/10 font-semibold text-accent hover:bg-accent/15" : "",
+        collapsed ? "justify-center px-2" : ""
+      )}
+      href={item.href}
+      onClick={(event) => {
+        if (item.onAction) {
+          event.preventDefault();
+          item.onAction();
+        }
+        onClick?.();
+      }}
+      renderLink={renderLink}
+    >
+      {item.isActive ? (
+        <div className="absolute top-1/2 left-0 h-5 w-1 -translate-y-1/2 rounded-r-full bg-accent" />
+      ) : null}
+      <Icon
+        className={cn("flex-shrink-0 transition-transform duration-200", "group-hover:scale-110")}
+        size={18}
+      />
+      {collapsed ? null : <span className="text-sm">{item.label}</span>}
+    </ShellLink>
+  );
+
+  return collapsed ? (
+    <Tooltip>
+      <Tooltip.Trigger aria-label={item.label}>{link}</Tooltip.Trigger>
+      <Tooltip.Content placement="right">{item.label}</Tooltip.Content>
+    </Tooltip>
+  ) : link;
+}
+
+function BottomNavLink({ item, floating, hasCenterButton, renderLink }: {
+  item: AppShellNavItem;
+  floating?: boolean;
+  hasCenterButton: boolean;
+  renderLink?: AppShellProps["renderLink"];
+}) {
+  const Icon = item.icon;
+  return (
+    <ShellLink
+      aria-current={item.isActive ? "page" : undefined}
+      aria-label={item.label}
+      className={floating ? "absolute -top-5 left-1/2 -translate-x-1/2" : cn(
+        hasCenterButton
+          ? "flex flex-col items-center justify-center gap-1 px-4 py-2"
+          : "flex flex-col items-center justify-center gap-1 px-3 py-2",
+        "transition-all duration-200 ease-out",
+        hasCenterButton ? "min-w-[60px]" : "min-w-[52px]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+        item.isActive ? "text-accent" : "text-muted hover:text-foreground active:scale-95"
+      )}
+      href={item.href}
+      renderLink={renderLink}
+    >
+      {floating ? (
+        <div className={cn(
+          "flex h-14 w-14 items-center justify-center rounded-full",
+          "bg-accent shadow-accent/40 shadow-lg",
+          "ring-4 ring-background",
+          "transition-all duration-200 ease-out",
+          "hover:shadow-accent/50 hover:shadow-xl active:scale-95",
+          item.isActive ? "scale-105" : ""
+        )}>
+          <Icon className="text-white" size={24} />
+        </div>
+      ) : (
+        <>
+          <Icon className="transition-all duration-200" size={item.isActive ? 22 : 20} />
+          <span className={cn(
+            "text-[10px] transition-all duration-200",
+            item.isActive ? "font-semibold" : "font-medium"
+          )}>{item.label}</span>
+        </>
+      )}
+    </ShellLink>
+  );
+}
+
+export function MobileBottomNavigation({ navItems, isVisiting, label, renderLink }: {
+  navItems: AppShellNavItem[];
+  isVisiting: boolean;
+  label: string;
+  renderLink?: AppShellProps["renderLink"];
+}) {
+  const hasCenterButton = navItems.some((item) => item.isCenterButton);
+  const mobileItems = navItems.filter((item) => !item.hideOnMobile);
+  const centerItem = mobileItems.find((item) => item.isCenterButton);
+  const regularItems = mobileItems.filter((item) => !item.isCenterButton);
+  const link = (item: AppShellNavItem) => (
+    <BottomNavLink hasCenterButton={hasCenterButton} item={item} key={item.key} renderLink={renderLink} />
+  );
+
+  return (
+    <nav
+      aria-label={label}
+      className={hasCenterButton ? cn(
+        "fixed right-0 bottom-0 left-0 z-50 border-border border-t backdrop-blur backdrop-saturate-200 lg:hidden dark:border-white/10",
+        isVisiting ? "bg-warning-soft/80 dark:bg-warning/20" : "!bg-transparent"
+      ) : "fixed right-0 bottom-0 left-0 z-50 border-border border-t bg-background backdrop-blur backdrop-saturate-200 lg:hidden dark:border-white/10"}
+    >
+      <div className={hasCenterButton
+        ? "relative flex h-16 items-center justify-around px-2"
+        : "flex h-16 items-center justify-around px-2"}>
+        {hasCenterButton ? (
+          <>
+            {regularItems.slice(0, 2).map(link)}
+            {centerItem ? <BottomNavLink floating hasCenterButton item={centerItem} renderLink={renderLink} /> : null}
+            <div className="min-w-[60px]" />
+            {regularItems.slice(2, 4).map(link)}
+          </>
+        ) : mobileItems.map(link)}
+      </div>
+    </nav>
+  );
+}

package/src/app-shell/types.ts

@@ -0,0 +1,57 @@
+import type { AnchorHTMLAttributes, ComponentType, ReactNode } from "react";
+
+export interface AppShellNavItem {
+  key: string;
+  label: string;
+  href: string;
+  icon: ComponentType<{ className?: string; size?: number }>;
+  isActive?: boolean;
+  hideOnMobile?: boolean;
+  isCenterButton?: boolean;
+  /** Intercept sidebar/drawer navigation, for example to open a settings dialog. */
+  onAction?: () => void;
+}
+
+export interface AppShellBrand {
+  label: string;
+  href: string;
+  logoSrc?: string;
+}
+
+export type AppShellLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  href: string;
+  children: ReactNode;
+};
+
+export interface AppShellImageProps {
+  alt: string;
+  className: string;
+  height: number;
+  src: string;
+  width: number;
+}
+
+export interface AppShellLabels {
+  collapseSidebar: string;
+  expandSidebar: string;
+  openMenu: string;
+  closeMenu: string;
+  mainNavigation: string;
+  bottomNavigation: string;
+}
+
+export interface AppShellProps {
+  brand: AppShellBrand;
+  children: ReactNode;
+  navItems: AppShellNavItem[];
+  contentTopSlot?: ReactNode;
+  headerRightSlot?: ReactNode;
+  sidebarTopSlot?: ReactNode | ((isCollapsed: boolean) => ReactNode);
+  sidebarFooterSlot?: ReactNode | ((isCollapsed: boolean) => ReactNode);
+  isVisiting?: boolean;
+  defaultCollapsed?: boolean;
+  labels?: Partial<AppShellLabels>;
+  /** Inject a router link without coupling the block to any framework. */
+  renderLink?: (props: AppShellLinkProps) => ReactNode;
+  renderImage?: (props: AppShellImageProps) => ReactNode;
+}