@tuturuuu/ui 0.6.2 → 0.8.0

package/src/components/ui/quick-command-center.test.tsx

@@ -0,0 +1,90 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { QuickCommandCenter } from './quick-command-center';
+
+describe('QuickCommandCenter', () => {
+  beforeEach(() => {
+    globalThis.ResizeObserver = class ResizeObserver {
+      disconnect() {}
+      observe() {}
+      unobserve() {}
+    };
+    Element.prototype.scrollIntoView = vi.fn();
+  });
+
+  it('renders grouped commands and activates digit shortcuts', () => {
+    const first = vi.fn();
+    const second = vi.fn();
+
+    render(
+      <QuickCommandCenter
+        digitShortcuts
+        emptyLabel="No commands"
+        groups={[
+          {
+            heading: 'Create',
+            id: 'create',
+            items: [
+              {
+                id: 'transaction',
+                onSelect: first,
+                title: 'New transaction',
+              },
+              {
+                id: 'wallet',
+                onSelect: second,
+                title: 'New wallet',
+              },
+            ],
+          },
+        ]}
+        onOpenChange={() => undefined}
+        open
+        placeholder="Search commands"
+        title="Quick command center"
+      />
+    );
+
+    expect(screen.getByText('New transaction')).toBeVisible();
+    expect(screen.getByText('New wallet')).toBeVisible();
+
+    fireEvent.keyDown(window, { key: '2' });
+
+    expect(first).not.toHaveBeenCalled();
+    expect(second).toHaveBeenCalledTimes(1);
+  });
+
+  it('filters commands by search text', () => {
+    render(
+      <QuickCommandCenter
+        emptyLabel="No commands"
+        groups={[
+          {
+            heading: 'Create',
+            id: 'create',
+            items: [
+              {
+                id: 'transaction',
+                onSelect: vi.fn(),
+                title: 'New transaction',
+              },
+              {
+                id: 'wallet',
+                onSelect: vi.fn(),
+                title: 'New wallet',
+              },
+            ],
+          },
+        ]}
+        onOpenChange={() => undefined}
+        open
+        placeholder="Search commands"
+        searchValue="wallet"
+        title="Quick command center"
+      />
+    );
+
+    expect(screen.getByText('New wallet')).toBeVisible();
+    expect(screen.queryByText('New transaction')).not.toBeInTheDocument();
+  });
+});

package/src/components/ui/quick-command-center.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from './command';
+
+export interface QuickCommandCenterItem {
+  id: string;
+  title: string;
+  description?: string;
+  disabled?: boolean;
+  icon?: ReactNode;
+  keywords?: string[];
+  onSelect: () => void;
+  shortcut?: string;
+}
+
+export interface QuickCommandCenterGroup {
+  heading: string;
+  id: string;
+  items: QuickCommandCenterItem[];
+}
+
+interface QuickCommandCenterProps {
+  digitShortcuts?: boolean;
+  emptyLabel: string;
+  groups: QuickCommandCenterGroup[];
+  onOpenChange: (open: boolean) => void;
+  onSearchValueChange?: (value: string) => void;
+  open: boolean;
+  placeholder: string;
+  searchValue?: string;
+  title: string;
+  description?: string;
+}
+
+function matchesSearch(item: QuickCommandCenterItem, query: string) {
+  if (!query) return true;
+
+  const haystack = [
+    item.title,
+    item.description,
+    item.shortcut,
+    ...(item.keywords ?? []),
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .toLowerCase();
+
+  return haystack.includes(query.toLowerCase());
+}
+
+export function QuickCommandCenter({
+  digitShortcuts = false,
+  emptyLabel,
+  groups,
+  onOpenChange,
+  onSearchValueChange,
+  open,
+  placeholder,
+  searchValue,
+  title,
+  description,
+}: QuickCommandCenterProps) {
+  const [internalSearch, setInternalSearch] = useState('');
+  const query = searchValue ?? internalSearch;
+  const setQuery = onSearchValueChange ?? setInternalSearch;
+
+  const visibleGroups = useMemo(
+    () =>
+      groups
+        .map((group) => ({
+          ...group,
+          items: group.items.filter((item) => matchesSearch(item, query)),
+        }))
+        .filter((group) => group.items.length > 0),
+    [groups, query]
+  );
+  const visibleItems = visibleGroups.flatMap((group) => group.items);
+
+  useEffect(() => {
+    if (!(open && digitShortcuts)) return;
+
+    const handleDigitShortcut = (event: KeyboardEvent) => {
+      if (
+        event.metaKey ||
+        event.ctrlKey ||
+        event.altKey ||
+        event.isComposing ||
+        !/^[0-9]$/u.test(event.key)
+      ) {
+        return;
+      }
+
+      const index = event.key === '0' ? 9 : Number(event.key) - 1;
+      const item = visibleItems[index];
+
+      if (!item || item.disabled) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      item.onSelect();
+    };
+
+    window.addEventListener('keydown', handleDigitShortcut, {
+      capture: true,
+    });
+
+    return () =>
+      window.removeEventListener('keydown', handleDigitShortcut, {
+        capture: true,
+      });
+  }, [digitShortcuts, open, visibleItems]);
+
+  return (
+    <CommandDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={title}
+      description={description ?? title}
+      contentClassName="max-w-xl"
+    >
+      <CommandInput
+        placeholder={placeholder}
+        value={query}
+        onValueChange={setQuery}
+      />
+      <CommandList className="max-h-[min(70vh,28rem)]">
+        <CommandEmpty>{emptyLabel}</CommandEmpty>
+        {visibleGroups.map((group) => (
+          <CommandGroup heading={group.heading} key={group.id}>
+            {group.items.map((item) => {
+              const itemIndex = visibleItems.findIndex(
+                (visibleItem) => visibleItem.id === item.id
+              );
+              const digitShortcut =
+                digitShortcuts && itemIndex >= 0 && itemIndex < 10
+                  ? itemIndex === 9
+                    ? '0'
+                    : String(itemIndex + 1)
+                  : item.shortcut;
+
+              return (
+                <CommandItem
+                  disabled={item.disabled}
+                  key={item.id}
+                  onSelect={() => {
+                    if (!item.disabled) item.onSelect();
+                  }}
+                  value={[
+                    item.title,
+                    item.description,
+                    item.shortcut,
+                    ...(item.keywords ?? []),
+                  ]
+                    .filter(Boolean)
+                    .join(' ')}
+                >
+                  {item.icon}
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate font-medium">
+                      {item.title}
+                    </span>
+                    {item.description && (
+                      <span className="block truncate text-muted-foreground text-xs">
+                        {item.description}
+                      </span>
+                    )}
+                  </span>
+                  {digitShortcut && (
+                    <CommandShortcut>{digitShortcut}</CommandShortcut>
+                  )}
+                </CommandItem>
+              );
+            })}
+          </CommandGroup>
+        ))}
+      </CommandList>
+    </CommandDialog>
+  );
+}

package/src/components/ui/storefront/cart-summary.tsx

@@ -1,16 +1,28 @@
 'use client';
 
-import { ArrowRight, TriangleAlert } from '@tuturuuu/icons';
+import { ArrowRight, Tag, TriangleAlert, Zap } from '@tuturuuu/icons';
 import type { InventoryStorefront } from '@tuturuuu/internal-api/inventory';
 import { cn } from '@tuturuuu/utils/format';
 import type { FormEvent } from 'react';
 import { Badge } from '../badge';
 import { Button } from '../button';
 import { AccentButton } from './accent-button';
-import type { StorefrontCartEntry, StorefrontSurfaceLabels } from './types';
-import { formatStorefrontPrice, storefrontSurfaceClasses } from './utils';
+import { StorefrontImagePanel } from './image-panel';
+import type {
+  StorefrontBuyerDefaults,
+  StorefrontCartEntry,
+  StorefrontSurfaceLabels,
+} from './types';
+import {
+  formatStorefrontPrice,
+  getStorefrontLinePrice,
+  getStorefrontVariantLabel,
+  storefrontCartLineKey,
+  storefrontSurfaceClasses,
+} from './utils';
 
 export function StorefrontCartSummary({
+  buyerDefaults,
   cartEntries,
   checkoutHref,
   currency,
@@ -19,10 +31,12 @@ export function StorefrontCartSummary({
   isSubmitting,
   labels,
   onCheckoutSubmit,
+  onInstantCheckout,
   radius,
   storefront,
   total,
 }: {
+  buyerDefaults?: StorefrontBuyerDefaults;
   cartEntries: StorefrontCartEntry[];
   checkoutHref?: string;
   currency: string;
@@ -31,18 +45,27 @@ export function StorefrontCartSummary({
   isSubmitting: boolean;
   labels: StorefrontSurfaceLabels;
   onCheckoutSubmit?: (formData: FormData) => void;
+  onInstantCheckout?: () => void;
   radius: string;
   storefront: InventoryStorefront;
   total: number;
 }) {
   const hasCart = cartEntries.length > 0;
   const isCheckoutDisabled = storefront.checkoutMode === 'disabled';
-  const submitDisabled = !hasCart || isSubmitting || isCheckoutDisabled;
+  const submitDisabled =
+    !hasCart || isSubmitting || isCheckoutDisabled || !onCheckoutSubmit;
+  const canOpenCheckout = hasCart && Boolean(checkoutHref);
+  const buyerEmail = buyerDefaults?.email?.trim() || undefined;
+  const buyerName = buyerDefaults?.name?.trim() || undefined;
+  const inputClassName =
+    'h-11 rounded-md border border-input bg-background px-3 text-sm outline-none transition focus-visible:ring-2 focus-visible:ring-ring/40';
+  const labelClassName = 'grid gap-1.5 text-sm';
 
   return (
     <aside
       className={cn(
         'h-fit p-4 lg:sticky lg:top-4',
+        isCheckout ? 'p-5 sm:p-6' : null,
         storefrontSurfaceClasses[storefront.surfaceStyle],
         radius
       )}
@@ -56,27 +79,52 @@ export function StorefrontCartSummary({
       <p className="mt-2 text-muted-foreground text-sm leading-6">
         {labels.reservedCopy}
       </p>
-      <div className="mt-4 grid gap-2">
-        {cartEntries.map(({ line, listing }) => (
-          <div
-            className="flex items-center justify-between gap-3 text-sm"
-            key={line.listingId}
-          >
-            <span className="min-w-0 truncate">
-              {line.quantity} x {listing.title}
-            </span>
-            <span className="font-medium">
-              {formatStorefrontPrice(listing.price * line.quantity, currency)}
-            </span>
-          </div>
-        ))}
+      <div className="mt-4 -mr-1 grid max-h-72 gap-2.5 overflow-y-auto pr-1">
+        {cartEntries.map(({ line, listing, variant }) => {
+          const unitPrice = getStorefrontLinePrice(listing, variant);
+          const variantLabel = variant
+            ? getStorefrontVariantLabel(variant)
+            : null;
+          return (
+            <div
+              className="flex items-center gap-3 text-sm"
+              key={storefrontCartLineKey(line.listingId, line.variantId)}
+            >
+              <StorefrontImagePanel
+                className={cn('size-10 shrink-0 rounded-md', radius)}
+                imageUrl={variant?.imageUrl ?? listing.imageUrl}
+                label={listing.title}
+              />
+              <div className="min-w-0 flex-1">
+                <p className="truncate font-medium">{listing.title}</p>
+                {variantLabel ? (
+                  <p className="truncate text-muted-foreground text-xs">
+                    {variantLabel}
+                  </p>
+                ) : null}
+                <p className="truncate text-muted-foreground text-xs tabular-nums">
+                  {line.quantity} × {formatStorefrontPrice(unitPrice, currency)}
+                </p>
+              </div>
+              <span className="shrink-0 whitespace-nowrap font-medium tabular-nums">
+                {formatStorefrontPrice(unitPrice * line.quantity, currency)}
+              </span>
+            </div>
+          );
+        })}
       </div>
-      <div className="mt-4 flex items-center justify-between border-border border-t pt-4">
+      <div className="mt-4 flex items-center justify-between gap-2 border-border border-t pt-4">
         <span className="text-muted-foreground text-sm">{labels.total}</span>
-        <span className="font-semibold">
+        <span className="shrink-0 whitespace-nowrap font-semibold tabular-nums">
           {formatStorefrontPrice(total, currency)}
         </span>
       </div>
+      {hasCart && !isCheckoutDisabled ? (
+        <p className="mt-3 flex items-center gap-2 rounded-md border border-border border-dashed bg-muted/30 px-3 py-2 text-muted-foreground text-xs leading-5">
+          <Tag className="h-3.5 w-3.5 shrink-0" />
+          {labels.couponNote}
+        </p>
+      ) : null}
       {!hasCart ? (
         <p className="mt-4 flex items-center gap-2 rounded-md border border-border bg-muted/40 px-3 py-2 text-muted-foreground text-sm">
           <TriangleAlert className="h-4 w-4" />
@@ -85,54 +133,82 @@ export function StorefrontCartSummary({
       ) : null}
       {isCheckout ? (
         <form
-          className="mt-4 grid gap-2"
+          className="mt-5 grid gap-3"
           onSubmit={(event: FormEvent<HTMLFormElement>) => {
             event.preventDefault();
             onCheckoutSubmit?.(new FormData(event.currentTarget));
           }}
         >
-          <input
-            className="h-10 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
-            name="name"
-            placeholder={labels.form.name}
-            required
-          />
-          <input
-            className="h-10 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
-            name="email"
-            placeholder={labels.form.email}
-            required
-            type="email"
-          />
-          <input
-            className="h-10 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
-            name="phone"
-            placeholder={labels.form.phone}
-          />
+          <label className={labelClassName}>
+            <span className="font-medium text-xs">{labels.form.name}</span>
+            <input
+              autoComplete="name"
+              className={inputClassName}
+              defaultValue={buyerName}
+              name="customerName"
+              placeholder={labels.form.name}
+              required
+            />
+          </label>
+          <label className={labelClassName}>
+            <span className="font-medium text-xs">{labels.form.email}</span>
+            <input
+              autoComplete="email"
+              className={inputClassName}
+              defaultValue={buyerEmail}
+              name="customerEmail"
+              placeholder={labels.form.email}
+              required
+              type="email"
+            />
+          </label>
+          <label className={labelClassName}>
+            <span className="font-medium text-xs">{labels.form.phone}</span>
+            <input
+              autoComplete="tel"
+              className={inputClassName}
+              name="customerPhone"
+              placeholder={labels.form.phone}
+              type="tel"
+            />
+          </label>
           <textarea
-            className="min-h-20 rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+            className="min-h-24 rounded-md border border-input bg-background px-3 py-2.5 text-sm outline-none transition focus-visible:ring-2 focus-visible:ring-ring/40"
             name="note"
             placeholder={labels.form.note}
           />
           <AccentButton disabled={submitDisabled} radius={radius}>
             {isSubmitting ? labels.reserving : labels.reserve}
-            <ArrowRight className="h-4 w-4" />
+            <ArrowRight className="size-4 shrink-0" />
           </AccentButton>
         </form>
       ) : isPreview || isCheckoutDisabled ? (
         <Button className={cn('mt-4 w-full', radius)} disabled type="button">
           {labels.checkoutDisabled}
         </Button>
+      ) : canOpenCheckout ? (
+        <div className="mt-4 grid gap-2">
+          {onInstantCheckout ? (
+            <AccentButton
+              disabled={isSubmitting}
+              onClick={onInstantCheckout}
+              radius={radius}
+            >
+              <Zap className="size-4 shrink-0" />
+              {isSubmitting ? labels.reserving : labels.instantCheckout}
+            </AccentButton>
+          ) : null}
+          <Button asChild className={cn('w-full', radius)} variant="outline">
+            <a href={checkoutHref}>
+              {labels.checkout}
+              <ArrowRight className="size-4 shrink-0" />
+            </a>
+          </Button>
+        </div>
       ) : (
-        <Button
-          asChild
-          className={cn('mt-4 w-full', radius)}
-          disabled={!hasCart}
-        >
-          <a aria-disabled={!hasCart} href={hasCart ? checkoutHref : undefined}>
-            {labels.checkout}
-            <ArrowRight className="h-4 w-4" />
-          </a>
+        <Button className={cn('mt-4 w-full', radius)} disabled type="button">
+          {labels.checkout}
+          <ArrowRight className="size-4 shrink-0" />
         </Button>
       )}
     </aside>

package/src/components/ui/storefront/checkout-overlay.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { Loader2 } from '@tuturuuu/icons';
+
+/**
+ * Full-screen blocking overlay shown while a checkout session is being created
+ * and while the browser is redirecting to the Polar-hosted checkout. Kept
+ * visible across the redirect (the page is navigating away) so the buyer always
+ * sees progress instead of a frozen button.
+ */
+export function StorefrontCheckoutOverlay({ label }: { label: string }) {
+  return (
+    <div
+      aria-busy="true"
+      aria-live="assertive"
+      className="fixed inset-0 z-[100] grid place-items-center bg-background/80 backdrop-blur-sm"
+      role="status"
+    >
+      <div className="flex flex-col items-center gap-4 px-6 text-center">
+        <span className="grid size-14 place-items-center rounded-full bg-[var(--storefront-accent,var(--primary))]/10 text-[var(--storefront-accent,var(--primary))]">
+          <Loader2 className="size-7 animate-spin" />
+        </span>
+        <p className="font-medium text-sm">{label}</p>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/storefront/hero-panel.tsx

@@ -19,31 +19,40 @@ export function StorefrontHeroPanel({
   radius: string;
   storefront: InventoryStorefront;
 }) {
+  const heroImage = storefront.coverImageUrl ?? storefront.heroImageUrl;
+
   return (
     <section
       className={cn(
-        'grid min-h-44 overflow-hidden',
+        'relative isolate overflow-hidden',
         storefrontSurfaceClasses[storefront.surfaceStyle],
-        radius,
-        storefront.themePreset === 'editorial'
-          ? 'md:grid-cols-[minmax(0,1.15fr)_360px]'
-          : 'md:grid-cols-[minmax(0,1fr)_280px]'
+        radius
       )}
     >
-      <div className="flex min-w-0 flex-col justify-between gap-6 p-5">
+      {/* Full-width featured banner backdrop. */}
+      <div className="relative h-40 w-full sm:h-52 md:h-60">
+        {heroImage ? (
+          <StorefrontImagePanel
+            className="absolute inset-0 h-full w-full"
+            imageUrl={heroImage}
+            label={storefront.name}
+            priority
+          />
+        ) : (
+          <div className="absolute inset-0 bg-gradient-to-br from-muted via-muted/60 to-background" />
+        )}
+        {/* Scrim that fades the banner into the page so overlaid text stays legible. */}
+        <div className="absolute inset-0 bg-gradient-to-t from-background via-background/55 to-transparent" />
+      </div>
+
+      {/* Overlaid title block — pulled up onto the lower, faded part of the banner. */}
+      <div className="relative -mt-20 flex flex-col gap-4 p-5">
         <div>
           <div className="flex items-center gap-2 text-muted-foreground text-xs">
             <Store className="h-4 w-4" />
             <span>{labels.browse}</span>
           </div>
-          <h2
-            className={cn(
-              'mt-3 text-balance font-semibold tracking-normal',
-              storefront.themePreset === 'editorial'
-                ? 'text-3xl md:text-4xl'
-                : 'text-2xl'
-            )}
-          >
+          <h2 className="mt-2 text-balance font-semibold text-3xl tracking-tight md:text-4xl">
             {storefront.name}
           </h2>
           <p className="mt-2 max-w-2xl text-muted-foreground text-sm leading-6">
@@ -59,12 +68,6 @@ export function StorefrontHeroPanel({
           </Badge>
         </div>
       </div>
-
-      <StorefrontImagePanel
-        className="min-h-44 md:min-h-full"
-        imageUrl={storefront.heroImageUrl}
-        label={storefront.name}
-      />
     </section>
   );
 }

package/src/components/ui/storefront/image-panel.tsx

@@ -6,10 +6,13 @@ export function StorefrontImagePanel({
   className,
   imageUrl,
   label,
+  priority = false,
 }: {
   className?: string;
   imageUrl: string | null;
   label: string;
+  /** Eager-load above-the-fold images (e.g. the hero) to protect LCP. */
+  priority?: boolean;
 }) {
   if (imageUrl) {
     return (
@@ -17,6 +20,9 @@ export function StorefrontImagePanel({
       <img
         alt=""
         className={cn('w-full object-cover', className)}
+        decoding="async"
+        fetchPriority={priority ? 'high' : 'auto'}
+        loading={priority ? 'eager' : 'lazy'}
         src={imageUrl}
       />
     );

package/src/components/ui/storefront/index.ts

@@ -1,5 +1,9 @@
+export { StorefrontCheckoutOverlay } from './checkout-overlay';
+export { StorefrontProductDetail } from './product-detail';
+export { StorefrontProductDialog } from './product-dialog';
 export { StorefrontSurface } from './storefront-surface';
 export type {
+  StorefrontBuyerDefaults,
   StorefrontCartEntry,
   StorefrontCartLine,
   StorefrontSurfaceLabels,
@@ -7,6 +11,13 @@ export type {
 } from './types';
 export {
   formatStorefrontPrice,
+  getStorefrontLinePrice,
+  getStorefrontListingFromPrice,
   getStorefrontListingLimit,
+  getStorefrontListingVariants,
+  getStorefrontVariantLabel,
+  getStorefrontVariantLimit,
+  listingHasVariants,
   sanitizeStorefrontAccentColor,
+  storefrontCartLineKey,
 } from './utils';