@vvedantb/ui 0.26.1 → 0.28.0

package/src/client.ts

@@ -0,0 +1,393 @@
+// @vvedantb/ui/client: the root without `@vvedantb/server`, convex or Clerk, for
+// Chrome extensions and other pages that cannot load them. It leaves out the
+// artifact viewers (`src/artifacts`), `ConvexClerkProvider`, `useStableAuth`
+// and `useEnsureUser`; everything else matches the root. Keep it in step with
+// src/index.ts: src/client-exports.test.ts compares the two, and
+// app/tests-node/client-graph.test.mjs checks the module graph.
+export { cn } from "./utils/cn";
+export { UiConfigProvider, useUiConfig } from "./ui/ui-config";
+export type { UiConfig, UiConfigProviderProps } from "./ui/ui-config";
+export { floatingSurfaceClass } from "./ui/_menu-classes";
+export { fieldFocusClass, fieldFocusWithinClass } from "./ui/_field-classes";
+export * from "./ui/surface-classes";
+export * from "./motion/presets";
+export * from "./motion/panel-transition";
+export { ListEnter, useFirstPaintGate } from "./motion/list-enter";
+export type { ListEnterProps } from "./motion/list-enter";
+// Gesture physics and animation budget helpers (shared clock, on-screen and
+// page-visibility pausing for infinite animations).
+export { DRAG_ACTIVATION_DISTANCE_PX, projectVelocity, rubberband } from "./utils/gesture";
+export {
+  bindRuntimeAnimation,
+  ensureRuntimeVisibility,
+  observeAnimVisibility,
+  useAnimOffscreenRef,
+} from "./utils/runtimeVisibility";
+export { msUntilNextBoundary, quantizedSnapshot, subscribeQuantized } from "./utils/sharedClock";
+export { CAT_SLOT_COUNT, catColorForId, catColorForSlot, catSlotForId } from "./utils/cat-color";
+export type { CatColorClasses, CatSlot } from "./utils/cat-color";
+export { CONTROL_RADIUS_CLASS, SURFACE_RADIUS_CLASS } from "./utils/surface-radius";
+export { restoreModalScrollLock } from "./ui/overlay-a11y";
+// Generic hooks: media query, page visibility, trailing debounce,
+// single-flight async calls and a persisted scroll container.
+export * from "./hooks";
+export { ErrorBoundary } from "./ui/error-boundary";
+export type { ErrorBoundaryProps } from "./ui/error-boundary";
+export { CountPop, countLabel, UnreadDot } from "./ui/count-pop";
+export { MarqueeOnHover } from "./ui/marquee-on-hover";
+export { RelativeDateTime } from "./ui/relative-date-time";
+export type { RelativeDateTimeProps } from "./ui/relative-date-time";
+export { ImageLightbox } from "./ui/image-lightbox";
+export type { GalleryImage } from "./ui/image-lightbox";
+export { ImageGalleryPreview, ScreenshotPreview, VideoPreview } from "./ui/media-preview";
+
+export * from "./ui/avatar";
+export * from "./ui/badge";
+export * from "./ui/border-beam";
+export * from "./ui/breadcrumb";
+export * from "./ui/button";
+export * from "./ui/button-group";
+export * from "./ui/card";
+export * from "./ui/carousel";
+export * from "./ui/centered-spinner";
+export * from "./ui/checkbox";
+export * from "./ui/collapsible";
+export * from "./ui/command";
+export * from "./ui/context-menu";
+export * from "./ui/crossfade-icon";
+export * from "./ui/dialog";
+export * from "./ui/alert-dialog";
+export * from "./ui/confirm-dialog";
+export * from "./ui/dropdown-menu";
+export * from "./ui/empty-state";
+export * from "./ui/hover-card";
+export * from "./ui/input";
+export * from "./ui/label";
+export * from "./ui/labeled-slider-row";
+export * from "./ui/labeled-switch-row";
+export * from "./ui/list-row";
+export * from "./ui/loading-state";
+export * from "./ui/pagination";
+export * from "./ui/popover";
+export * from "./ui/progress";
+export * from "./ui/refresh-spin-icon";
+export {
+  Select as RadixSelect,
+  SelectContent as RadixSelectContent,
+  SelectGroup as RadixSelectGroup,
+  SelectItem as RadixSelectItem,
+  SelectLabel as RadixSelectLabel,
+  SelectScrollDownButton as RadixSelectScrollDownButton,
+  SelectScrollUpButton as RadixSelectScrollUpButton,
+  SelectSeparator as RadixSelectSeparator,
+  SelectTrigger as RadixSelectTrigger,
+  SelectValue as RadixSelectValue,
+} from "./ui/radix-select";
+export * from "./ui/search-input";
+export * from "./ui/select";
+export * from "./ui/select-field";
+export * from "./ui/separator";
+export * from "./ui/skeleton";
+export * from "./ui/slide-over-panel";
+export * from "./ui/slider";
+export * from "./ui/sonner";
+export * from "./ui/spinner";
+export * from "./ui/status-dot";
+export * from "./ui/surface";
+export * from "./ui/switch";
+export * from "./ui/table";
+export * from "./ui/tabs";
+export * from "./ui/textarea";
+export * from "./ui/toolbar-search-input";
+export * from "./ui/time-picker";
+export * from "./ui/calendar";
+export * from "./ui/date-picker";
+export * from "./ui/tooltip";
+export * from "./ui/kbd";
+export * from "./ui/sheet";
+export * from "./ui/visually-hidden";
+export * from "./ui/clearInputDissolve";
+
+// Animated nav icons. Styles: `@vvedantb/ui/tokens/css/nav-icons.css`.
+export * from "./icons";
+
+// Dual copies: the richer file uses the plain name. The deprecated `Alt` exports
+// (accordion, clear input, input group) wrap the main parts with the old markup.
+export * from "./ui/accordion";
+export {
+  AccordionAlt,
+  AccordionItemAlt,
+  AccordionTriggerAlt,
+  AccordionContentAlt,
+} from "./ui/accordion.alt";
+export * from "./ui/clear-input";
+export { ClearInputAlt } from "./ui/clear-input.alt";
+export * from "./ui/input-group";
+export {
+  InputGroupAlt,
+  InputGroupAddonAlt,
+  InputGroupButtonAlt,
+  InputGroupTextAlt,
+  InputGroupInputAlt,
+  InputGroupTextareaAlt,
+} from "./ui/input-group.alt";
+export * from "./ui/scroll-area";
+export {
+  ScrollArea as ScrollAreaAlt,
+  ScrollBar as ScrollBarAlt,
+} from "./ui/scroll-area.alt";
+
+export * from "./ai-elements/artifact";
+export * from "./ai-elements/attachments";
+export * from "./ai-elements/chain-of-thought";
+export * from "./ai-elements/code-block";
+export * from "./ai-elements/conversation";
+export * from "./ai-elements/file-chip";
+export * from "./ai-elements/image";
+export * from "./ai-elements/inline-citation";
+export * from "./ai-elements/jump-rail";
+export * from "./ai-elements/jump-rail-geometry";
+export * from "./ai-elements/chat-jump-rail";
+export * from "./ai-elements/message";
+export * from "./ai-elements/model-selector";
+export * from "./ai-elements/prompt-input";
+export * from "./ai-elements/prompt-input-settings";
+export * from "./ai-elements/prompt-input-speech";
+export * from "./ai-elements/prompt-input-traits";
+export * from "./ai-elements/queue";
+export * from "./ai-elements/reasoning";
+export * from "./ai-elements/shimmer";
+export * from "./ai-elements/sources";
+export * from "./ai-elements/speech-input";
+export * from "./ai-elements/suggestion";
+
+// Agent activity and run surfaces (moved from an app): the activity timeline and
+// its step model, Trace lines, plan, test results, web preview, context usage
+// and the model picker.
+export * from "./ai-elements/activity-shared";
+export * from "./ai-elements/activity-question";
+export * from "./ai-elements/activity-tasks";
+export * from "./ai-elements/trace";
+export * from "./ai-elements/use-streaming-disclosure";
+export * from "./ai-elements/plan";
+export * from "./ai-elements/test-results";
+export * from "./ai-elements/web-preview";
+export * from "./ai-elements/context";
+export * from "./ai-elements/model-picker";
+export * from "./ai-elements/provider-icon";
+
+// Kibo UI blocks: gantt, kanban, list, contribution graph, video player,
+// cursor, avatar stack, theme switcher. Kanban, list and gantt drag with
+// `useDragSensors`, the shared dnd-kit sensor split.
+export * from "./kibo";
+export { useDragSensors } from "./utils/useDragSensors";
+
+// Markdown renderer (Streamdown + code blocks, callouts, links, KaTeX).
+// Styles: `@vvedantb/ui/tokens/css/markdown.css`.
+export * from "./markdown";
+
+export * from "./audio";
+
+export * from "./composer";
+export { toast } from "sonner";
+
+// Shell: router-free pieces. Shell's own `cn` and `ClassValue` are not re-exported;
+// use the root `cn` (clsx + tailwind-merge).
+export { SidebarHeader } from "../shell/src/SidebarHeader";
+export type { SidebarHeaderProps } from "../shell/src/SidebarHeader";
+export { SidebarUpgradeCard } from "../shell/src/SidebarUpgradeCard";
+export type { SidebarUpgradeCardProps } from "../shell/src/SidebarUpgradeCard";
+export { PillTabs } from "../shell/src/PillTabs";
+export type { PillTabItem, PillTabsProps } from "../shell/src/PillTabs";
+export { SessionsHoverCard } from "../shell/src/SessionsHoverCard";
+export type {
+  SessionsHoverCardContext,
+  SessionsHoverCardProps,
+  SessionsHoverCardSurface,
+} from "../shell/src/SessionsHoverCard";
+
+// App shell: sidebar and main page layout. Widths come from the
+// `--app-shell-*` CSS variables that `AppShell` sets.
+export { AppShell } from "../shell/src/AppShell";
+export type {
+  AppShellContentProps,
+  AppShellMainProps,
+  AppShellProps,
+  AppShellRootProps,
+  AppShellSkipLinkProps,
+} from "../shell/src/AppShell";
+export { AppSidebar } from "../shell/src/AppSidebar";
+export type { AppSidebarProps } from "../shell/src/AppSidebar";
+// Composable sidebar parts (`Sidebar.Root`, `Sidebar.Rail`, ...) and their prop types.
+export * from "../shell/src/Sidebar";
+export { SidebarRail, RailTile, RailDivider, RailCollapseTile } from "../shell/src/SidebarRail";
+export type {
+  SidebarRailProps,
+  RailTileProps,
+  RailDividerProps,
+  RailCollapseTileProps,
+} from "../shell/src/SidebarRail";
+export { SidebarResizeHandle, useAppShellResize } from "../shell/src/SidebarResize";
+export type {
+  AppShellResize,
+  SidebarResizeHandleProps,
+  SidebarResizeOptions,
+} from "../shell/src/SidebarResize";
+export { SidebarIconTooltip } from "../shell/src/SidebarIconTooltip";
+export type { SidebarIconTooltipProps } from "../shell/src/SidebarIconTooltip";
+export { SidebarPanel } from "../shell/src/SidebarPanel";
+export type { SidebarPanelProps } from "../shell/src/SidebarPanel";
+export { SidebarAccountMenu, SidebarAccountMenuPlaceholder } from "../shell/src/SidebarAccountMenu";
+export type {
+  SidebarAccountMenuProps,
+  SidebarAccountMenuPlaceholderProps,
+} from "../shell/src/SidebarAccountMenu";
+export { SignOutDialog } from "../shell/src/SignOutDialog";
+export type { SignOutDialogProps } from "../shell/src/SignOutDialog";
+export {
+  railBadgeClass,
+  railTileClass,
+  railTileStateClass,
+  sidebarNavIconClass,
+  sidebarNavItemActionsClass,
+  sidebarNavItemClass,
+  sidebarNavItemIndentStyle,
+  sidebarNavItemLabelClass,
+  sidebarNavItemLeadingClass,
+  sidebarNavItemSubtitleClass,
+  sidebarNavItemTrailingClass,
+  sidebarNavLinkTextClass,
+  sidebarNavRowClass,
+  sidebarSectionLabelClass,
+} from "../shell/src/app-shell-classes";
+export type { SidebarNavItemClassOptions } from "../shell/src/app-shell-classes";
+
+// Marketing: landing kit, site footer and pricing dialog. Router- and Motion-free;
+// `createLandingKit` takes the app's `motion`. Styles: `@vvedantb/ui/landing.css`.
+export {
+  LandingFeatureCard,
+  LandingFooter,
+  LandingLattice,
+  LandingNavMenu,
+  LandingPageLayout,
+  LandingSection,
+  LandingSectionHeading,
+  landingItemVariants,
+} from "./marketing/landing";
+export type {
+  LandingFeature,
+  LandingFooterProps,
+  LandingLatticeProps,
+  LandingLink,
+  LandingNavMenuProps,
+  LandingPageLayoutProps,
+  LandingSectionHeadingProps,
+  LandingSectionProps,
+} from "./marketing/landing";
+export { createLandingKit } from "./marketing/createLandingKit";
+export type {
+  LandingCtaProps,
+  LandingHeroProps,
+  LandingKit,
+  LandingKitOptions,
+  LandingMotion,
+  LandingNavProps,
+  LandingRevealItemProps,
+  LandingRevealProps,
+} from "./marketing/createLandingKit";
+export {
+  landingFooterButtonClass,
+  landingFooterLinkClass,
+  landingPanelClass,
+  landingShellClass,
+} from "./marketing/marketing-classes";
+export type { PricingModalTone, SiteFooterVariant } from "./marketing/marketing-classes";
+export { SiteFooter } from "./marketing/SiteFooter";
+export type { SiteFooterLink, SiteFooterProps, SiteFooterSocial } from "./marketing/SiteFooter";
+export { PricingModal, V_PRO_APP_BENEFITS } from "./marketing/PricingModal";
+export type {
+  PricingModalLegacyProps,
+  PricingModalMultiProps,
+  PricingModalPeriod,
+  PricingModalProps,
+  PricingPlan,
+  PricingPlanAppBenefit,
+  PricingPlanBenefit,
+} from "./marketing/PricingModal";
+
+// App helpers: confirm skip, update watcher, settings chrome, theme, page title,
+// page motion, time, VITE env and error messages. Not here: `ConvexClerkProvider`,
+// `useStableAuth` and `useEnsureUser`, which import convex or Clerk.
+export {
+  bindToWindow,
+  createAltHeldStore,
+  getAltHeld,
+  useAltHeld,
+  type AltHeldBinding,
+  type AltHeldSignals,
+  type AltHeldStore,
+  type AltKeyEvent,
+} from "../app/src/confirm/useAltHeld";
+export { requestConfirm, shouldSkipConfirm } from "../app/src/confirm/confirmSkip";
+export { useRequestConfirm } from "../app/src/confirm/useRequestConfirm";
+export { ConfirmSkipHint, skipConfirmTitle } from "../app/src/confirm/ConfirmSkipHint";
+export { fetchDeployFingerprint, fingerprintFromHtml } from "../app/src/update/deployFingerprint";
+export {
+  startUpdateAvailableWatcher,
+  type UpdateAvailableWatcherOptions,
+  type UpdateToastOptions,
+} from "../app/src/update/updateWatcher";
+export { SettingsSection, type SettingsSectionConfig } from "../app/src/settings/SettingsSection";
+export { SettingsField } from "../app/src/settings/SettingsField";
+export { SettingsStack } from "../app/src/settings/SettingsStack";
+export { SettingsToggleRow } from "../app/src/settings/SettingsToggleRow";
+export { SettingsEmptyState, type SettingsEmptyStateConfig } from "../app/src/settings/SettingsEmptyState";
+export {
+  DefaultSettingsLayout,
+  SettingsPage,
+  type SettingsLayoutProps,
+  type SettingsPageProps,
+} from "../app/src/settings/SettingsPage";
+export {
+  applyThemeClass,
+  createThemeProvider,
+  getSystemTheme,
+  type ThemeAttribute,
+  type ThemeProviderKit,
+  type ThemeProviderOptions,
+  type ThemeProviderProps,
+  type ThemeState,
+} from "../app/src/theme/createThemeProvider";
+export {
+  createPageTitleContext,
+  type DocumentTitleOptions,
+  type PageTitleContextKit,
+  type PageTitleContextOptions,
+  type PageTitleValue,
+} from "../app/src/page-title/createPageTitleContext";
+export {
+  PageMotionProvider,
+  useDisablePageMotion,
+  type PageMotionConfigProps,
+  type PageMotionProviderProps,
+} from "../app/src/page-motion/PageMotionProvider";
+export { formatCompactRelativeTime, type CompactRelativeTimeOptions } from "../app/src/time/compactRelativeTime";
+export {
+  parseClientEnv,
+  VITE_ENV_NAMES,
+  type ClientEnv,
+  type ClientEnvOptions,
+  type ClientEnvSource,
+  type ClientEnvWithoutViteEnv,
+  type ViteEnvMode,
+  type ViteEnvName,
+} from "../app/src/convex/env";
+export { convexErrorMessage, userFacingErrorMessage } from "../app/src/convex/errorMessage";
+export { useHeldResult } from "../app/src/convex/useHeldResult";
+
+// Family app marks (Icon* components, deprecated AppMark and raw SVG strings for favicons).
+export * from "./brand";
+
+// Native tokens (JS values that match tokens.css).
+export { tokens } from "../tokens/src/native";
+export type { Tokens } from "../tokens/src/native";

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+export { useMediaQuery } from "./use-media-query";
+export { useDocumentVisible } from "./use-document-visible";
+export { createIdleCallback, useIdleCallback } from "./use-idle-callback";
+export { useSingleFlight } from "./use-single-flight";
+export { usePersistedScrollParent } from "./use-persisted-scroll-parent";

package/src/hooks/use-document-visible.ts

@@ -0,0 +1,15 @@
+import { useSyncExternalStore } from "react";
+
+function subscribe(onStoreChange: () => void) {
+  document.addEventListener("visibilitychange", onStoreChange);
+  return () => document.removeEventListener("visibilitychange", onStoreChange);
+}
+
+/** True while the tab is visible. Server snapshot is `true`, so SSR renders as visible. */
+export function useDocumentVisible(): boolean {
+  return useSyncExternalStore(
+    subscribe,
+    () => document.visibilityState === "visible",
+    () => true,
+  );
+}

package/src/hooks/use-idle-callback.ts

@@ -0,0 +1,51 @@
+import { useState } from "react";
+
+/** Anything worth passing through a debounced callback. */
+type CallbackArgs = ReadonlyArray<string | number | boolean | null | object>;
+
+/**
+ * The debounce itself, free of React so it can be tested with fake timers.
+ * `getFn` is read at fire time rather than captured, so the caller always runs
+ * the latest render's closure.
+ */
+export function createIdleCallback<Args extends CallbackArgs>(
+  ms: number,
+  getFn: () => (...args: Args) => void,
+): (...args: Args) => void {
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  return (...args: Args) => {
+    if (timer !== null) clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = null;
+      getFn()(...args);
+    }, ms);
+  };
+}
+
+/**
+ * Returns a stable callback that runs `fn` once `ms` has passed since the last
+ * call; each call cancels the pending one. Trailing edge only — nothing fires
+ * until the caller goes quiet.
+ */
+export function useIdleCallback<Args extends CallbackArgs>(
+  ms: number,
+  fn: (...args: Args) => void,
+): (...args: Args) => void {
+  // No refs and no direct writes to state: the React Compiler skips a file
+  // that does either during render. The holder keeps the latest `fn` in a
+  // closure; the caller stores it on each call (always an event handler
+  // holding the current render's closure), and the timer reads it on fire.
+  const [idle] = useState(() => {
+    let current = fn;
+    return {
+      setFn: (next: (...args: Args) => void) => {
+        current = next;
+      },
+      run: createIdleCallback<Args>(ms, () => current),
+    };
+  });
+  return (...args: Args) => {
+    idle.setFn(fn);
+    idle.run(...args);
+  };
+}

package/src/hooks/use-media-query.ts

@@ -0,0 +1,17 @@
+import { useSyncExternalStore } from "react";
+
+/**
+ * Subscribe to a CSS media query without setState-in-effect.
+ * `useSyncExternalStore` is the React 18+ recommended pattern for browser APIs.
+ */
+export function useMediaQuery(query: string): boolean {
+  return useSyncExternalStore(
+    (onStoreChange) => {
+      const mql = window.matchMedia(query);
+      mql.addEventListener("change", onStoreChange);
+      return () => mql.removeEventListener("change", onStoreChange);
+    },
+    () => window.matchMedia(query).matches,
+    () => false,
+  );
+}

package/src/hooks/use-persisted-scroll-parent.ts

@@ -0,0 +1,70 @@
+import { useLayoutEffect, useState, type RefCallback } from "react";
+
+/** Re-apply after a virtualised list measures; first paint often resets scrollTop. */
+function applyScrollTop(el: HTMLElement, scrollTop: number): void {
+  el.scrollTop = scrollTop;
+  requestAnimationFrame(() => {
+    el.scrollTop = scrollTop;
+    requestAnimationFrame(() => {
+      el.scrollTop = scrollTop;
+    });
+  });
+}
+
+function readScrollTop(key: string): number {
+  try {
+    // Stored as JSON; a JSON number is also a plain numeric string.
+    const value = Number(sessionStorage.getItem(key) ?? 0);
+    return Number.isFinite(value) ? value : 0;
+  } catch {
+    return 0;
+  }
+}
+
+/** JSON, so a value written by an older `useSessionStorage` reads back. */
+function writeScrollTop(key: string, scrollTop: number): void {
+  try {
+    sessionStorage.setItem(key, JSON.stringify(Math.round(scrollTop)));
+  } catch {
+    // Ignore quota / private-mode failures.
+  }
+}
+
+/**
+ * Scroll-container ref that saves `scrollTop` to `sessionStorage` under
+ * `storageKey` and restores it when the container mounts again, so a list keeps
+ * its place when a route swaps it out for a detail page and back. Per tab:
+ * closing the tab clears it. Writes are throttled to one per frame and do not
+ * re-render.
+ */
+export function usePersistedScrollParent(storageKey: string): {
+  scrollParent: HTMLDivElement | null;
+  scrollRef: RefCallback<HTMLDivElement>;
+} {
+  const [scrollParent, scrollRef] = useState<HTMLDivElement | null>(null);
+
+  useLayoutEffect(() => {
+    if (!scrollParent) return;
+
+    const initial = readScrollTop(storageKey);
+    if (initial > 0) applyScrollTop(scrollParent, initial);
+
+    let rafId = 0;
+    const onScroll = () => {
+      if (rafId !== 0) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = 0;
+        writeScrollTop(storageKey, scrollParent.scrollTop);
+      });
+    };
+
+    scrollParent.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      if (rafId !== 0) cancelAnimationFrame(rafId);
+      writeScrollTop(storageKey, scrollParent.scrollTop);
+      scrollParent.removeEventListener("scroll", onScroll);
+    };
+  }, [scrollParent, storageKey]);
+
+  return { scrollParent, scrollRef };
+}

package/src/hooks/use-single-flight.ts

@@ -0,0 +1,59 @@
+import { useRef } from "react";
+
+type NoPending = { has: false };
+type HasPending<TArgs> = { has: true; args: TArgs };
+type Pending<TArgs> = NoPending | HasPending<TArgs>;
+
+const NO_PENDING: NoPending = { has: false };
+
+/**
+ * Wraps an async function so at most one invocation runs at a time.
+ * While a call is in flight, subsequent calls are coalesced — only the
+ * latest args are kept, and they run once the current invocation settles.
+ *
+ * Designed for autosave-on-keystroke: prevents stampeding mutations when
+ * the user types quickly, while ensuring the final state is always saved.
+ */
+export function useSingleFlight<TArgs, TRet>(
+  fn: (args: TArgs) => Promise<TRet>,
+): (args: TArgs) => Promise<TRet | undefined> {
+  const inFlight = useRef(false);
+  const pending = useRef<Pending<TArgs>>(NO_PENDING);
+
+  const invoke = async (args: TArgs): Promise<TRet | undefined> => {
+    const runPending = (): void => {
+      const next: Pending<TArgs> = pending.current;
+      pending.current = NO_PENDING;
+      if (next.has) {
+        // Recurse with the latest coalesced args — return value discarded
+        // intentionally since the original caller already received undefined.
+        void invoke(next.args);
+      }
+    };
+
+    if (inFlight.current) {
+      pending.current = { has: true, args };
+      return undefined;
+    }
+
+    inFlight.current = true;
+    pending.current = NO_PENDING;
+
+    // Avoid `finally` here: TypeScript narrows discriminated unions to `never`
+    // inside `finally` blocks when the try body is async, making `next.args`
+    // inaccessible. Use explicit try/catch instead.
+    let result: TRet | undefined;
+    try {
+      result = await fn(args);
+    } catch (err) {
+      inFlight.current = false;
+      runPending();
+      throw err;
+    }
+    inFlight.current = false;
+    runPending();
+    return result;
+  };
+
+  return invoke;
+}

package/src/index.ts

@@ -8,6 +8,8 @@ export { fieldFocusClass, fieldFocusWithinClass } from "./ui/_field-classes";
 export * from "./ui/surface-classes";
 export * from "./motion/presets";
 export * from "./motion/panel-transition";
+export { ListEnter, useFirstPaintGate } from "./motion/list-enter";
+export type { ListEnterProps } from "./motion/list-enter";
 // Gesture physics and animation budget helpers (shared clock, on-screen and
 // page-visibility pausing for infinite animations).
 export { DRAG_ACTIVATION_DISTANCE_PX, projectVelocity, rubberband } from "./utils/gesture";
@@ -22,6 +24,18 @@ export { CAT_SLOT_COUNT, catColorForId, catColorForSlot, catSlotForId } from "./
 export type { CatColorClasses, CatSlot } from "./utils/cat-color";
 export { CONTROL_RADIUS_CLASS, SURFACE_RADIUS_CLASS } from "./utils/surface-radius";
 export { restoreModalScrollLock } from "./ui/overlay-a11y";
+// Generic hooks: media query, page visibility, trailing debounce,
+// single-flight async calls and a persisted scroll container.
+export * from "./hooks";
+export { ErrorBoundary } from "./ui/error-boundary";
+export type { ErrorBoundaryProps } from "./ui/error-boundary";
+export { CountPop, countLabel, UnreadDot } from "./ui/count-pop";
+export { MarqueeOnHover } from "./ui/marquee-on-hover";
+export { RelativeDateTime } from "./ui/relative-date-time";
+export type { RelativeDateTimeProps } from "./ui/relative-date-time";
+export { ImageLightbox } from "./ui/image-lightbox";
+export type { GalleryImage } from "./ui/image-lightbox";
+export { ImageGalleryPreview, ScreenshotPreview, VideoPreview } from "./ui/media-preview";
 
 export * from "./ui/avatar";
 export * from "./ui/badge";