@vvedantb/ui 0.30.0 → 0.30.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.30.0",
+  "version": "0.30.1",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one main JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), a client entry without @vvedantb/server, convex or Clerk for Chrome extensions, design-token CSS, shared Tailwind v4 CSS, a Tailwind preset and packaged Instrument Sans fonts.",
   "type": "module",

package/src/client.ts

@@ -33,10 +33,16 @@ export { restoreModalScrollLock } from "./ui/overlay-a11y";
 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 { CountPop, countLabel, UnreadDot, CORNER_BADGE_CLASS, UnreadCornerBadge } from "./ui/count-pop";
 export { RollingNumber } from "./ui/rolling-number";
 export { ConfettiBurst } from "./ui/confetti-burst";
 export { SendQueueIcon } from "./ui/send-queue-icon";
+export { BulkActionBar } from "./ui/bulk-action-bar";
+export type { BulkActionBarProps, BulkBarAction } from "./ui/bulk-action-bar";
+export { CopyLinkMenuItem } from "./ui/copy-link-menu-item";
+export { ToggleSearch } from "./ui/toggle-search";
+export type { ToggleSearchProps, ToggleSearchVariant } from "./ui/toggle-search";
+export { MotionProvider } from "./motion/motion-provider";
 export { MarqueeOnHover } from "./ui/marquee-on-hover";
 export { RelativeDateTime } from "./ui/relative-date-time";
 export type { RelativeDateTimeProps } from "./ui/relative-date-time";

package/src/index.ts

@@ -29,10 +29,16 @@ export { restoreModalScrollLock } from "./ui/overlay-a11y";
 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 { CountPop, countLabel, UnreadDot, CORNER_BADGE_CLASS, UnreadCornerBadge } from "./ui/count-pop";
 export { RollingNumber } from "./ui/rolling-number";
 export { ConfettiBurst } from "./ui/confetti-burst";
 export { SendQueueIcon } from "./ui/send-queue-icon";
+export { BulkActionBar } from "./ui/bulk-action-bar";
+export type { BulkActionBarProps, BulkBarAction } from "./ui/bulk-action-bar";
+export { CopyLinkMenuItem } from "./ui/copy-link-menu-item";
+export { ToggleSearch } from "./ui/toggle-search";
+export type { ToggleSearchProps, ToggleSearchVariant } from "./ui/toggle-search";
+export { MotionProvider } from "./motion/motion-provider";
 export { MarqueeOnHover } from "./ui/marquee-on-hover";
 export { RelativeDateTime } from "./ui/relative-date-time";
 export type { RelativeDateTimeProps } from "./ui/relative-date-time";

package/src/motion/motion-provider.tsx

@@ -0,0 +1,29 @@
+import { LazyMotion, MotionConfig, domMax, type FeatureBundle } from "motion/react";
+import type { ReactNode } from "react";
+
+/**
+ * The app-wide Motion setup that `m.*` components (in this package and the
+ * app) need: one lazy feature bundle under `strict`, so a stray `motion.*`
+ * import throws instead of pulling the full bundle into the entry chunk.
+ *
+ * `features` defaults to `domMax`, which includes layout animations
+ * (`layoutId` shared highlights); `domAnimation` is smaller if the app has
+ * none. Under `strict` a missing feature silently skips the animation.
+ * `reducedMotion` defaults to `"user"` (follow the OS setting); pass `"never"`
+ * to always animate.
+ */
+export function MotionProvider({
+  children,
+  features = domMax,
+  reducedMotion = "user",
+}: {
+  children: ReactNode;
+  features?: FeatureBundle;
+  reducedMotion?: "user" | "always" | "never";
+}) {
+  return (
+    <LazyMotion features={features} strict>
+      <MotionConfig reducedMotion={reducedMotion}>{children}</MotionConfig>
+    </LazyMotion>
+  );
+}

package/src/motion/panel-transition.tsx

@@ -36,3 +36,42 @@ export function PanelTransition({
     </ViewTransition>
   );
 }
+
+export interface ViewTransitionSuspenseProps {
+  fallback: ReactNode;
+  children: ReactNode;
+  /** View transition class on the content as it arrives. Default `vt-enter`. */
+  enter?: string;
+  /** View transition class on the fallback as it leaves. Default `vt-exit`. */
+  exit?: string;
+}
+
+/**
+ * `<Suspense>` whose fallback fades out as the content comes in, through React
+ * `<ViewTransition>`. Suspense reveals commit on retry lanes, which React
+ * animates even outside `startTransition`. Needs a React build that exports
+ * `ViewTransition`; the app supplies the `::view-transition-old(.vt-exit)` and
+ * `::view-transition-new(.vt-enter)` CSS. Routers that commit route changes
+ * synchronously (through `useSyncExternalStore`) do not animate here; use the
+ * router's own view transition for pages.
+ */
+export function ViewTransitionSuspense({
+  fallback,
+  children,
+  enter = "vt-enter",
+  exit = "vt-exit",
+}: ViewTransitionSuspenseProps) {
+  return (
+    <React.Suspense
+      fallback={
+        <ViewTransition default="none" exit={exit}>
+          {fallback}
+        </ViewTransition>
+      }
+    >
+      <ViewTransition default="none" enter={enter}>
+        {children}
+      </ViewTransition>
+    </React.Suspense>
+  );
+}

package/src/ui/bulk-action-bar.tsx

@@ -0,0 +1,229 @@
+import { m, AnimatePresence } from "motion/react";
+import { ConfirmSkipHint, skipConfirmTitle } from "../../app/src/confirm/ConfirmSkipHint";
+import { tokenTransition } from "../motion/presets";
+import { CountPop } from "./count-pop";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+import { Separator } from "./separator";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+import { IconDots, IconX } from "@tabler/icons-react";
+import type { ComponentType } from "react";
+
+/**
+ * One control in the bar. The bar is deliberately dumb: each action carries the
+ * handler it should run, so confirm dialogs, Alt-to-skip and any per-surface
+ * bookkeeping stay with the caller that owns that state.
+ */
+export interface BulkBarAction {
+  key: string;
+  /** Full label used in the More menu and for accessibility. */
+  label: string;
+  /** Shorter label shown inline in the bar (defaults to `label`). */
+  shortLabel?: string;
+  icon: ComponentType<{ size: number; className?: string }>;
+  destructive?: boolean;
+  /** Shows the Alt-to-skip hint; the caller still owns the skip itself. */
+  showSkipHint?: boolean;
+  onClick: () => void;
+}
+
+export interface BulkActionBarProps {
+  isSelecting: boolean;
+  selectedCount: number;
+  totalCount: number;
+  onExitSelect: () => void;
+  onSelectAll: () => void;
+  onClearSelection: () => void;
+  primaryActions: ReadonlyArray<BulkBarAction>;
+  moreActions?: ReadonlyArray<BulkBarAction>;
+  destructiveAction?: BulkBarAction;
+  /** Motion key for the presence animation, e.g. "quick-tasks-bulk-bar". */
+  barKey: string;
+}
+
+/**
+ * A single labelled button inside the action bar. The label collapses to
+ * icon-only below the `sm` breakpoint (HeroUI "responsive labels" pattern).
+ */
+function BarButton({
+  action,
+  disabled,
+}: {
+  action: BulkBarAction;
+  disabled: boolean;
+}) {
+  const Icon = action.icon;
+  return (
+    <button
+      type="button"
+      aria-label={action.label}
+      title={
+        action.showSkipHint ? skipConfirmTitle(action.label) : action.label
+      }
+      onClick={action.onClick}
+      disabled={disabled}
+      // `motion-press`, not `transition-colors`: the destructive Delete takes
+      // this same branch, so the highest-consequence control in the bar was the
+      // one with no acknowledgement at all before its confirm dialog appeared.
+      className={`motion-press inline-flex h-9 shrink-0 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium active:scale-[0.96] disabled:pointer-events-none disabled:opacity-30 ${
+        action.destructive
+          ? "text-destructive hover:bg-destructive/10 hover:text-destructive"
+          : "text-muted-foreground hover:bg-surface-secondary hover:text-foreground"
+      }`}
+    >
+      <Icon size={17} />
+      <span className="hidden sm:inline">
+        {action.shortLabel ?? action.label}
+      </span>
+      {action.showSkipHint ? <ConfirmSkipHint /> : null}
+    </button>
+  );
+}
+
+/**
+ * The floating selection bar for any list with bulk actions. Render it inside
+ * a `relative` list container: it sits absolute at the bottom. It owns the shell only: presence
+ * motion, the count, select-all/clear, the primary buttons, the More menu and
+ * the destructive slot on the right. Behaviour arrives as `onClick` per action.
+ */
+export function BulkActionBar({
+  isSelecting,
+  selectedCount,
+  totalCount,
+  onExitSelect,
+  onSelectAll,
+  onClearSelection,
+  primaryActions,
+  moreActions,
+  destructiveAction,
+  barKey,
+}: BulkActionBarProps) {
+  const hasSelection = selectedCount > 0;
+  const allSelected = totalCount > 0 && selectedCount >= totalCount;
+
+  return (
+    <AnimatePresence initial={false}>
+      {isSelecting && (
+        <m.div
+          key={barKey}
+          className="absolute inset-x-0 bottom-3 z-20 flex justify-center px-4 pb-[env(safe-area-inset-bottom)]"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 20 }}
+          transition={tokenTransition.fast}
+        >
+          <TooltipProvider>
+            <div className="flex max-w-[calc(100vw-2rem)] items-center gap-1 overflow-x-auto rounded-surface bg-popover/95 px-2.5 py-2 backdrop-blur-md smooth-shadow-ring-lg scrollbar-none">
+              {/* Prefix: selection count */}
+              <div className="flex shrink-0 items-center gap-2 pl-1 pr-0.5">
+                <CountPop
+                  label={String(selectedCount)}
+                  className="rounded-md bg-surface-secondary px-2 py-0.5 text-xs font-semibold text-foreground tabular-nums"
+                />
+                <span className="hidden text-sm font-medium text-muted-foreground sm:inline">
+                  selected
+                </span>
+              </div>
+
+              {/* Reaching the whole list is the one action a selection bar can
+                  offer that the rows cannot: shift-clicking to the end of a
+                  long list is the alternative. */}
+              {totalCount > 0 && (
+                <button
+                  type="button"
+                  onClick={allSelected ? onClearSelection : onSelectAll}
+                  className="motion-press inline-flex h-9 shrink-0 items-center rounded-lg px-2 text-sm font-medium text-muted-foreground hover:bg-surface-secondary hover:text-foreground active:scale-[0.96]"
+                >
+                  {allSelected ? "Clear" : `Select all (${totalCount})`}
+                </button>
+              )}
+
+              <Separator
+                orientation="vertical"
+                className="mx-1.5 h-5 shrink-0 bg-border"
+              />
+
+              {/* Content: primary actions + More dropdown */}
+              {primaryActions.map((action) => (
+                <BarButton
+                  key={action.key}
+                  action={action}
+                  disabled={!hasSelection}
+                />
+              ))}
+
+              {moreActions && moreActions.length > 0 && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      type="button"
+                      aria-label="More actions"
+                      disabled={!hasSelection}
+                      className="inline-flex size-9 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-surface-secondary hover:text-foreground disabled:pointer-events-none disabled:opacity-30 data-[state=open]:bg-surface-secondary data-[state=open]:text-foreground"
+                    >
+                      <IconDots size={17} />
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="center" side="top" sideOffset={8}>
+                    {moreActions.map((action) => {
+                      const Icon = action.icon;
+                      return (
+                        <DropdownMenuItem
+                          key={action.key}
+                          disabled={!hasSelection}
+                          onClick={action.onClick}
+                        >
+                          <Icon size={16} />
+                          {action.label}
+                        </DropdownMenuItem>
+                      );
+                    })}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+
+              {destructiveAction && (
+                <>
+                  <Separator
+                    orientation="vertical"
+                    className="mx-1.5 h-5 shrink-0 bg-border"
+                  />
+                  <BarButton
+                    action={destructiveAction}
+                    disabled={!hasSelection}
+                  />
+                </>
+              )}
+
+              <Separator
+                orientation="vertical"
+                className="mx-1.5 h-5 shrink-0 bg-border"
+              />
+
+              {/* Suffix: dismiss selection */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    aria-label="Cancel selection"
+                    className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-surface-secondary hover:text-foreground"
+                    onClick={onExitSelect}
+                  >
+                    <IconX size={17} />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="top" className="text-xs" sideOffset={8}>
+                  Cancel selection
+                </TooltipContent>
+              </Tooltip>
+            </div>
+          </TooltipProvider>
+        </m.div>
+      )}
+    </AnimatePresence>
+  );
+}

package/src/ui/copy-link-menu-item.tsx

@@ -0,0 +1,29 @@
+import { IconLink } from "@tabler/icons-react";
+import { DropdownMenuItem } from "./dropdown-menu";
+
+/**
+ * A "Copy link" item for a More menu: copies the current page URL. Pass `path`
+ * when the current URL is not the link to share (a per-user route that shows
+ * different content to each person, say); it resolves against the origin.
+ */
+export function CopyLinkMenuItem({
+  iconSize = 14,
+  path,
+  label = "Copy link",
+}: {
+  iconSize?: number;
+  path?: string;
+  label?: string;
+}) {
+  return (
+    <DropdownMenuItem
+      onClick={() => {
+        const href = path ? new URL(path, window.location.origin).href : window.location.href;
+        void navigator.clipboard.writeText(href);
+      }}
+    >
+      <IconLink size={iconSize} />
+      {label}
+    </DropdownMenuItem>
+  );
+}

package/src/ui/count-pop.tsx

@@ -65,3 +65,21 @@ export function UnreadDot({ show, className }: { show: boolean; className?: stri
     </CountPop>
   );
 }
+
+/**
+ * Shape and placement of a count badge hung off a tile's bottom-right corner.
+ * Put the tile in a `relative` box; add one tone class (e.g. a live colour).
+ */
+export const CORNER_BADGE_CLASS =
+  "absolute -bottom-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-semibold leading-none";
+
+/** An unread count on a tile's corner: `CountPop` in the primary tone, "99+" above 99. */
+export function UnreadCornerBadge({ count, className }: { count: number | undefined; className?: string }) {
+  const cn = useCn();
+  return (
+    <CountPop
+      label={countLabel(count)}
+      className={cn(CORNER_BADGE_CLASS, "bg-primary text-primary-foreground", className)}
+    />
+  );
+}

package/src/ui/toggle-search.tsx

@@ -0,0 +1,138 @@
+import { useState, type KeyboardEventHandler } from "react";
+import { IconSearch } from "@tabler/icons-react";
+import { Button } from "./button";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { SearchInput } from "./search-input";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+
+// "compact" is the always-visible logs/toolbar field. "large" is the icon
+// button + popover, which keeps a crowded toolbar short.
+export type ToggleSearchVariant = "compact" | "large";
+
+export interface ToggleSearchProps {
+  value: string;
+  onChange: (value: string | null) => void;
+  placeholder?: string;
+  visible?: boolean;
+  variant?: ToggleSearchVariant;
+}
+
+function SearchField({
+  value,
+  onChange,
+  placeholder,
+  className,
+  onKeyDown,
+  autoFocus,
+}: {
+  value: string;
+  onChange: (value: string | null) => void;
+  placeholder: string;
+  className?: string;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+  autoFocus?: boolean;
+}) {
+  return (
+    <SearchInput
+      value={value}
+      onChange={(next) => onChange(next.length > 0 ? next : null)}
+      onClear={() => onChange(null)}
+      placeholder={placeholder}
+      className={className}
+      inputClassName="h-8"
+      autoFocus={autoFocus}
+      onKeyDown={onKeyDown}
+    />
+  );
+}
+
+/**
+ * Toolbar search. Compact stays an inline field; large collapses to an icon
+ * that opens a popover — a primary dot on the button means a query is applied.
+ * `large` uses a `Tooltip`, so render it under the app's `TooltipProvider`.
+ */
+export function ToggleSearch({
+  value,
+  onChange,
+  placeholder = "Search...",
+  visible = true,
+  variant = "compact",
+}: ToggleSearchProps) {
+  const [open, setOpen] = useState(false);
+  const hasQuery = value.trim().length > 0;
+
+  if (!visible) return null;
+
+  if (variant === "compact") {
+    return (
+      <SearchField
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        // `max-sm:min-w-0` + `sm:shrink-0`: on a phone the field yields to its
+        // toolbar siblings instead of forcing the row (and the page) to overflow.
+        className="w-36 max-w-none max-sm:min-w-0 sm:w-44 sm:shrink-0"
+        onKeyDown={(event) => {
+          if (event.key === "Escape") {
+            onChange(null);
+          }
+        }}
+      />
+    );
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <PopoverTrigger asChild>
+            <Button
+              size="icon-sm"
+              variant="secondary"
+              aria-label={hasQuery ? "Search, filter applied" : "Search"}
+              aria-pressed={open}
+              className="relative motion-press hover:scale-[1.01] active:scale-[0.96]"
+            >
+              <IconSearch size={16} />
+              {hasQuery ? (
+                <span
+                  aria-hidden
+                  className="pointer-events-none absolute -top-0.5 -right-0.5 z-10 size-2 rounded-full bg-primary ring-2 ring-background"
+                />
+              ) : null}
+            </Button>
+          </PopoverTrigger>
+        </TooltipTrigger>
+        <TooltipContent>Search</TooltipContent>
+      </Tooltip>
+      <PopoverContent
+        align="end"
+        className="w-72 p-2"
+        onOpenAutoFocus={(event) => {
+          // Radix types this as a plain `Event`, so the content element has to
+          // be narrowed before it can be searched for the field.
+          const content = event.currentTarget;
+          if (!(content instanceof HTMLElement)) return;
+          const input = content.querySelector("input");
+          if (input instanceof HTMLInputElement) {
+            event.preventDefault();
+            input.focus();
+          }
+        }}
+      >
+        <SearchField
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          className="w-full max-w-none"
+          autoFocus
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              setOpen(false);
+            }
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}