@tuturuuu/ui 0.6.1 → 0.7.0

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,6 +1,6 @@
 'use client';
 
-import { ArrowRight, TriangleAlert } from '@tuturuuu/icons';
+import { ArrowRight, Tag, TriangleAlert } from '@tuturuuu/icons';
 import type { InventoryStorefront } from '@tuturuuu/internal-api/inventory';
 import { cn } from '@tuturuuu/utils/format';
 import type { FormEvent } from 'react';
@@ -37,7 +37,9 @@ export function StorefrontCartSummary({
 }) {
   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);
 
   return (
     <aside
@@ -77,6 +79,12 @@ export function StorefrontCartSummary({
           {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" />
@@ -91,24 +99,6 @@ export function StorefrontCartSummary({
             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}
-          />
           <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"
             name="note"
@@ -123,17 +113,18 @@ export function StorefrontCartSummary({
         <Button className={cn('mt-4 w-full', radius)} disabled type="button">
           {labels.checkoutDisabled}
         </Button>
-      ) : (
-        <Button
-          asChild
-          className={cn('mt-4 w-full', radius)}
-          disabled={!hasCart}
-        >
-          <a aria-disabled={!hasCart} href={hasCart ? checkoutHref : undefined}>
+      ) : canOpenCheckout ? (
+        <Button asChild className={cn('mt-4 w-full', radius)}>
+          <a href={checkoutHref}>
             {labels.checkout}
             <ArrowRight className="h-4 w-4" />
           </a>
         </Button>
+      ) : (
+        <Button className={cn('mt-4 w-full', radius)} disabled type="button">
+          {labels.checkout}
+          <ArrowRight className="h-4 w-4" />
+        </Button>
       )}
     </aside>
   );

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

@@ -19,18 +19,33 @@ 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}
+          />
+        ) : (
+          <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" />
@@ -38,7 +53,7 @@ export function StorefrontHeroPanel({
           </div>
           <h2
             className={cn(
-              'mt-3 text-balance font-semibold tracking-normal',
+              'mt-2 text-balance font-semibold tracking-normal',
               storefront.themePreset === 'editorial'
                 ? 'text-3xl md:text-4xl'
                 : 'text-2xl'
@@ -59,12 +74,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/storefront-surface.test.tsx

@@ -6,7 +6,9 @@ import { sanitizeStorefrontAccentColor } from './utils';
 
 const storefront: InventoryStorefront = {
   accentColor: '#abc',
+  analyticsEnabled: true,
   cornerStyle: 'rounded',
+  coverImageUrl: null,
   createdAt: '2026-06-12T00:00:00.000Z',
   currency: 'USD',
   checkoutMode: 'polar',
@@ -16,6 +18,7 @@ const storefront: InventoryStorefront = {
   layoutStyle: 'grid',
   listingsCount: 0,
   name: 'Preview Store',
+  sections: [],
   showInventoryBadges: true,
   slug: 'preview-store',
   status: 'published',
@@ -53,7 +56,7 @@ describe('StorefrontSurface', () => {
     expect(screen.getByText('Preview checkout disabled')).toBeDisabled();
   });
 
-  it('shows simulated checkout mode badges', () => {
+  it('keeps simulated storefront chrome customer-facing', () => {
     render(
       <StorefrontSurface
         labels={{ simulatedBadge: 'Simulated checkout' }}
@@ -63,10 +66,11 @@ describe('StorefrontSurface', () => {
       />
     );
 
-    expect(screen.getByText('Simulated checkout')).toBeInTheDocument();
+    expect(screen.queryByText('Simulated checkout')).not.toBeInTheDocument();
+    expect(screen.getAllByText('Preview Store')).toHaveLength(2);
   });
 
-  it('shows disabled checkout mode badges and blocks checkout', () => {
+  it('blocks disabled checkout without showing checkout mode badges', () => {
     render(
       <StorefrontSurface
         labels={{
@@ -79,7 +83,7 @@ describe('StorefrontSurface', () => {
       />
     );
 
-    expect(screen.getByText('Checkout disabled')).toBeInTheDocument();
+    expect(screen.queryByText('Checkout disabled')).not.toBeInTheDocument();
     expect(screen.getByText('Checkout unavailable')).toBeDisabled();
   });
 });

package/src/components/ui/storefront/storefront-surface.tsx

@@ -4,13 +4,14 @@ import { ShoppingCart } from '@tuturuuu/icons';
 import type {
   InventoryStorefront,
   InventoryStorefrontListing,
+  InventoryStorefrontSection,
 } from '@tuturuuu/internal-api/inventory';
 import { cn } from '@tuturuuu/utils/format';
 import type { ReactNode } from 'react';
-import { Badge } from '../badge';
 import { StorefrontCartSummary } from './cart-summary';
 import { StorefrontEmptyListings } from './empty-listings';
 import { StorefrontHeroPanel } from './hero-panel';
+import { StorefrontImagePanel } from './image-panel';
 import { StorefrontListingCard } from './listing-card';
 import type {
   StorefrontCartLine,
@@ -24,15 +25,17 @@ import {
   sanitizeStorefrontAccentColor,
   storefrontRadiusClasses,
   storefrontSurfaceClasses,
+  storefrontThemeClasses,
 } from './utils';
 
 export function StorefrontSurface({
   cartLines = [],
   checkoutHref,
   className,
+  compactLayout = false,
   emptyAction,
   headerActions,
-  isDemo = false,
+  isDemo: _isDemo = false,
   isSubmitting = false,
   labels: labelOverrides,
   listings,
@@ -47,6 +50,7 @@ export function StorefrontSurface({
   cartLines?: StorefrontCartLine[];
   checkoutHref?: string;
   className?: string;
+  compactLayout?: boolean;
   emptyAction?: ReactNode;
   headerActions?: ReactNode;
   isDemo?: boolean;
@@ -97,7 +101,11 @@ export function StorefrontSurface({
 
   return (
     <main
-      className={cn('min-h-dvh bg-background text-foreground', className)}
+      className={cn(
+        'min-h-dvh bg-background text-foreground',
+        storefrontThemeClasses[storefront.themePreset],
+        className
+      )}
       style={getAccentStyle(accentColor)}
     >
       {notice ? (
@@ -109,43 +117,14 @@ export function StorefrontSurface({
       <header className="border-border border-b bg-background/90 backdrop-blur">
         <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-3 px-4 py-3">
           <div className="min-w-0">
-            <div className="flex flex-wrap items-center gap-2 text-muted-foreground text-xs">
-              <span>
-                {storefront.visibility === 'private'
-                  ? labels.privateStore
-                  : labels.publicStore}
-              </span>
-              {isDemo ? (
-                <Badge variant="secondary">{labels.demoBadge}</Badge>
-              ) : null}
-              {isPreview ? (
-                <Badge
-                  className="border-border bg-background"
-                  variant="outline"
-                >
-                  {labels.previewBadge}
-                </Badge>
-              ) : null}
-              {storefront.checkoutMode === 'simulated' ? (
-                <Badge
-                  className="border-border bg-background"
-                  variant="outline"
-                >
-                  {labels.simulatedBadge}
-                </Badge>
-              ) : null}
-              {storefront.checkoutMode === 'disabled' ? (
-                <Badge
-                  className="border-border bg-background"
-                  variant="outline"
-                >
-                  {labels.checkoutDisabledBadge}
-                </Badge>
-              ) : null}
-            </div>
-            <h1 className="mt-0.5 truncate font-semibold text-xl">
+            <h1 className="truncate font-semibold text-xl">
               {storefront.name}
             </h1>
+            {storefront.description ? (
+              <p className="mt-0.5 line-clamp-1 text-muted-foreground text-sm">
+                {storefront.description}
+              </p>
+            ) : null}
           </div>
           <div className="flex items-center gap-2">
             {headerActions}
@@ -162,7 +141,12 @@ export function StorefrontSurface({
         </div>
       </header>
 
-      <section className="mx-auto grid max-w-7xl gap-4 px-4 py-5 lg:grid-cols-[minmax(0,1fr)_340px]">
+      <section
+        className={cn(
+          'mx-auto grid max-w-7xl gap-4 px-4 py-5',
+          compactLayout ? 'grid-cols-1' : 'lg:grid-cols-[minmax(0,1fr)_340px]'
+        )}
+      >
         <div className="min-w-0">
           <StorefrontHeroPanel
             currency={currency}
@@ -172,13 +156,19 @@ export function StorefrontSurface({
             storefront={storefront}
           />
 
+          <StorefrontMerchSections
+            radius={radius}
+            sections={storefront.sections ?? []}
+          />
+
           <div
             className={cn(
               'mt-4',
-              storefront.layoutStyle === 'list'
+              compactLayout || storefront.layoutStyle === 'list'
                 ? 'grid gap-3'
                 : 'grid gap-3 sm:grid-cols-2 xl:grid-cols-3',
-              storefront.layoutStyle === 'feature' &&
+              !compactLayout &&
+                storefront.layoutStyle === 'feature' &&
                 '[&>article:first-child]:sm:col-span-2'
             )}
           >
@@ -233,3 +223,56 @@ export function StorefrontSurface({
     </main>
   );
 }
+
+function StorefrontMerchSections({
+  radius,
+  sections,
+}: {
+  radius: string;
+  sections: InventoryStorefrontSection[];
+}) {
+  const visibleSections = sections
+    .filter((section) => section.status === 'published')
+    .filter((section) => section.sectionType !== 'cover')
+    .sort((a, b) => a.sortOrder - b.sortOrder);
+
+  if (visibleSections.length === 0) return null;
+
+  return (
+    <div className="mt-4 grid gap-3">
+      {visibleSections.map((section) => (
+        <section
+          className={cn(
+            'grid overflow-hidden border border-border bg-card md:grid-cols-[minmax(0,1fr)_280px]',
+            radius
+          )}
+          key={section.id}
+        >
+          <div className="flex min-w-0 flex-col justify-center gap-2 p-4">
+            {section.title ? (
+              <h2 className="font-semibold text-lg">{section.title}</h2>
+            ) : null}
+            {section.description ? (
+              <p className="text-muted-foreground text-sm leading-6">
+                {section.description}
+              </p>
+            ) : null}
+            {section.href ? (
+              <a
+                className="mt-1 w-fit font-medium text-sm underline-offset-4 hover:underline"
+                href={section.href}
+              >
+                {section.href.replace(/^https?:\/\//u, '')}
+              </a>
+            ) : null}
+          </div>
+          <StorefrontImagePanel
+            className="min-h-36 md:min-h-full"
+            imageUrl={section.imageUrl}
+            label={section.title ?? 'Storefront section'}
+          />
+        </section>
+      ))}
+    </div>
+  );
+}

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

@@ -26,6 +26,7 @@ export type StorefrontSurfaceLabels = {
   checkout: string;
   checkoutDisabled: string;
   checkoutDisabledBadge: string;
+  couponNote: string;
   demoBadge: string;
   emptyCart: string;
   emptyListingsDescription: string;
@@ -59,6 +60,7 @@ export const defaultStorefrontSurfaceLabels: StorefrontSurfaceLabels = {
   checkout: 'Checkout',
   checkoutDisabled: 'Checkout is disabled in preview',
   checkoutDisabledBadge: 'Checkout disabled',
+  couponNote: 'Have a coupon? You can apply it at checkout.',
   demoBadge: 'Demo',
   emptyCart: 'Add a listing to start checkout.',
   emptyListingsDescription:

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

@@ -23,6 +23,27 @@ export const storefrontSurfaceClasses: Record<
   solid: 'border border-border bg-card shadow-sm shadow-foreground/5',
 };
 
+/**
+ * Theme presets change the storefront's typographic personality so the choice
+ * is actually visible to shoppers. Applied at the surface root and inherited by
+ * headings/body inside.
+ */
+export const storefrontThemeClasses: Record<
+  InventoryStorefront['themePreset'],
+  string
+> = {
+  // Spacious, headline-led magazine feel with serif headings.
+  editorial:
+    'font-sans [&_h1]:font-serif [&_h1]:tracking-tight [&_h2]:font-serif [&_h2]:tracking-tight',
+  // Refined boutique look: airy, wide-tracked uppercase headings.
+  boutique:
+    'font-sans [&_h1]:uppercase [&_h1]:tracking-[0.12em] [&_h2]:tracking-wide',
+  // Dense, scannable product-catalog density.
+  catalog: 'font-sans text-[0.95rem] [&_h1]:tracking-tight',
+  // Clean default.
+  minimal: 'font-sans',
+};
+
 export type StorefrontAccentStyle = CSSProperties & {
   '--storefront-accent'?: string;
   '--storefront-accent-foreground'?: string;