@tuturuuu/ui 0.18.0 → 0.19.1

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

@@ -7,7 +7,7 @@ import type {
   InventoryStorefrontListing,
 } from '@tuturuuu/internal-api/inventory';
 import { cn } from '@tuturuuu/utils/format';
-import { type ReactNode, useState } from 'react';
+import { type ReactNode, useMemo, useState } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -29,6 +29,7 @@ import { StorefrontProductDialog } from './product-dialog';
 import type {
   StorefrontBuyerDefaults,
   StorefrontCartLine,
+  StorefrontLinkComponent,
   StorefrontSurfaceLabels,
   StorefrontSurfaceMode,
 } from './types';
@@ -59,6 +60,7 @@ export function StorefrontSurface({
   isDemo: _isDemo = false,
   isRedirecting = false,
   isSubmitting = false,
+  linkComponent,
   labels: labelOverrides,
   listings,
   mode,
@@ -75,6 +77,7 @@ export function StorefrontSurface({
   selectedListingId,
   storefront,
   storefrontHref,
+  withinSharedShell = false,
 }: {
   bundles?: InventoryBundle[];
   buyerDefaults?: StorefrontBuyerDefaults;
@@ -90,6 +93,7 @@ export function StorefrontSurface({
   isDemo?: boolean;
   isRedirecting?: boolean;
   isSubmitting?: boolean;
+  linkComponent?: StorefrontLinkComponent;
   labels?: Partial<StorefrontSurfaceLabels>;
   listings: InventoryStorefrontListing[];
   mode: StorefrontSurfaceMode;
@@ -110,77 +114,112 @@ export function StorefrontSurface({
   selectedListingId?: string;
   storefront: InventoryStorefront;
   storefrontHref?: string;
+  withinSharedShell?: boolean;
 }) {
   const labels = mergeStorefrontSurfaceLabels(labelOverrides);
+  const NavigationLink = linkComponent ?? 'a';
   const [isCartPopoverOpen, setIsCartPopoverOpen] = useState(false);
   const [bundleSelectionListingId, setBundleSelectionListingId] = useState<
     string | null
   >(null);
   const accentColor = sanitizeStorefrontAccentColor(storefront.accentColor);
   const radius = storefrontRadiusClasses[storefront.cornerStyle];
-  const resolveVariant = (
-    listing: InventoryStorefrontListing,
-    variantId?: string | null
-  ) =>
-    variantId
-      ? (listing.variants ?? []).find((variant) => variant.id === variantId)
-      : undefined;
-  const cartEntries = cartLines.flatMap((line) => {
-    const listing = listings.find((item) => item.id === line.listingId);
-    if (!listing) return [];
-    return [
-      {
-        bundle: listing.bundleId
-          ? bundles.find((bundle) => bundle.id === listing.bundleId)
-          : undefined,
-        line,
-        listing,
-        variant: resolveVariant(listing, line.variantId),
-      },
-    ];
-  });
-  const lineLimit = (entry: (typeof cartEntries)[number]) =>
-    entry.variant
-      ? getStorefrontVariantLimit(entry.listing, entry.variant)
-      : getStorefrontListingLimit(entry.listing);
-  const checkoutEntries = cartEntries.filter(
-    (entry) => Math.min(entry.line.quantity, lineLimit(entry)) > 0
+  const listingsById = useMemo(
+    () => new Map(listings.map((listing) => [listing.id, listing])),
+    [listings]
+  );
+  const bundlesById = useMemo(
+    () => new Map(bundles.map((bundle) => [bundle.id, bundle])),
+    [bundles]
+  );
+  const cartEntries = useMemo(
+    () =>
+      cartLines.flatMap((line) => {
+        const listing = listingsById.get(line.listingId);
+        if (!listing) return [];
+        return [
+          {
+            bundle: listing.bundleId
+              ? bundlesById.get(listing.bundleId)
+              : undefined,
+            line,
+            listing,
+            variant: line.variantId
+              ? (listing.variants ?? []).find(
+                  (variant) => variant.id === line.variantId
+                )
+              : undefined,
+          },
+        ];
+      }),
+    [bundlesById, cartLines, listingsById]
+  );
+  const checkoutEntries = useMemo(
+    () =>
+      cartEntries.filter((entry) => {
+        const limit = entry.variant
+          ? getStorefrontVariantLimit(entry.listing, entry.variant)
+          : getStorefrontListingLimit(entry.listing);
+        return Math.min(entry.line.quantity, limit) > 0;
+      }),
+    [cartEntries]
+  );
+  const total = useMemo(
+    () =>
+      checkoutEntries.reduce((sum, entry) => {
+        const limit = entry.variant
+          ? getStorefrontVariantLimit(entry.listing, entry.variant)
+          : getStorefrontListingLimit(entry.listing);
+        const quantity = Math.min(entry.line.quantity, limit);
+        return (
+          sum +
+          getStorefrontCartLineSubtotal({
+            bundle: entry.bundle,
+            line: { ...entry.line, quantity },
+            listing: entry.listing,
+            variant: entry.variant,
+          })
+        );
+      }, 0),
+    [checkoutEntries]
+  );
+  const cartQuantityByListing = useMemo(() => {
+    const quantities = new Map<string, number>();
+
+    for (const line of cartLines) {
+      quantities.set(
+        line.listingId,
+        (quantities.get(line.listingId) ?? 0) + line.quantity
+      );
+    }
+
+    return quantities;
+  }, [cartLines]);
+  const cartQuantity = useMemo(
+    () => cartLines.reduce((sum, line) => sum + line.quantity, 0),
+    [cartLines]
   );
-  const total = checkoutEntries.reduce((sum, entry) => {
-    const quantity = Math.min(entry.line.quantity, lineLimit(entry));
-    return (
-      sum +
-      getStorefrontCartLineSubtotal({
-        bundle: entry.bundle,
-        line: { ...entry.line, quantity },
-        listing: entry.listing,
-        variant: entry.variant,
-      })
-    );
-  }, 0);
-  const cartQuantity = cartLines.reduce((sum, line) => sum + line.quantity, 0);
   const detailListing = detailListingId
-    ? listings.find((listing) => listing.id === detailListingId)
+    ? listingsById.get(detailListingId)
     : undefined;
   const selectedListing = selectedListingId
-    ? listings.find((listing) => listing.id === selectedListingId)
+    ? listingsById.get(selectedListingId)
     : undefined;
   const isProductDetail = mode === 'product' && Boolean(selectedListing);
-  const visibleListings =
-    mode === 'product' && selectedListingId
-      ? listings.filter((listing) => listing.id === selectedListingId)
-      : listings;
+  const visibleListings = useMemo(
+    () =>
+      mode === 'product' && selectedListing ? [selectedListing] : listings,
+    [listings, mode, selectedListing]
+  );
   const isCheckout = mode === 'checkout';
   const isCheckoutDialogOpen = checkoutOpen ?? isCheckout;
   const isPreview = mode === 'preview';
   const isCartPage = mode === 'cart';
   const bundleSelectionListing = bundleSelectionListingId
-    ? listings.find((listing) => listing.id === bundleSelectionListingId)
+    ? listingsById.get(bundleSelectionListingId)
     : null;
   const bundleSelectionBundle = bundleSelectionListing?.bundleId
-    ? (bundles.find(
-        (bundle) => bundle.id === bundleSelectionListing.bundleId
-      ) ?? null)
+    ? (bundlesById.get(bundleSelectionListing.bundleId) ?? null)
     : null;
   const currency = storefront.currency ?? 'USD';
   const handleCheckoutOpen = () => {
@@ -198,6 +237,7 @@ export function StorefrontSurface({
       isPreview={isPreview}
       isSubmitting={isSubmitting}
       labels={labels}
+      linkComponent={linkComponent}
       onCheckoutOpen={handleCheckoutOpen}
       onCheckoutSubmit={onCheckoutSubmit}
       onInstantCheckout={mode === 'cart' ? onInstantCheckout : undefined}
@@ -216,6 +256,7 @@ export function StorefrontSurface({
       isPreview={isPreview}
       isSubmitting={isSubmitting}
       labels={labels}
+      linkComponent={linkComponent}
       onCheckoutOpen={handleCheckoutOpen}
       onCheckoutSubmit={onCheckoutSubmit}
       radius={radius}
@@ -234,6 +275,7 @@ export function StorefrontSurface({
       isPreview={isPreview}
       isSubmitting={isSubmitting}
       labels={labels}
+      linkComponent={linkComponent}
       onCheckoutSubmit={onCheckoutSubmit}
       radius={radius}
       storefront={storefront}
@@ -244,7 +286,9 @@ export function StorefrontSurface({
   return (
     <main
       className={cn(
-        'min-h-dvh bg-background text-foreground',
+        withinSharedShell
+          ? 'min-h-[calc(100dvh-4.3125rem)] bg-background text-foreground'
+          : 'min-h-dvh bg-background text-foreground',
         storefrontThemeClasses[storefront.themePreset],
         className
       )}
@@ -256,51 +300,53 @@ export function StorefrontSurface({
         </div>
       ) : null}
 
-      <header className="sticky top-0 z-30 border-border border-b bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/85">
-        <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-5 py-3 sm:px-6">
-          <div className="min-w-0">
-            <h1 className="truncate font-semibold text-base tracking-tight">
-              {storefrontHref ? (
-                <a
-                  className="flex min-w-0 items-center gap-3 rounded-sm transition hover:text-[var(--storefront-accent-text,var(--primary))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
-                  href={storefrontHref}
-                  title={storefront.name}
-                >
-                  <span
-                    aria-hidden
-                    className="grid size-8 shrink-0 place-items-center rounded-lg border border-border bg-muted/35 font-mono text-xs uppercase"
-                  >
-                    {storefront.name.slice(0, 1)}
-                  </span>
-                  <span className="truncate">{storefront.name}</span>
-                </a>
-              ) : (
-                <span className="flex min-w-0 items-center gap-3">
-                  <span
-                    aria-hidden
-                    className="grid size-8 shrink-0 place-items-center rounded-lg border border-border bg-muted/35 font-mono text-xs uppercase"
+      {withinSharedShell ? null : (
+        <header className="sticky top-0 z-30 border-border border-b bg-background/95 backdrop-blur-md supports-[backdrop-filter]:bg-background/85">
+          <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-5 py-3 sm:px-6">
+            <div className="min-w-0">
+              <h1 className="truncate font-semibold text-base tracking-tight">
+                {storefrontHref ? (
+                  <NavigationLink
+                    className="flex min-w-0 items-center gap-3 rounded-sm transition hover:text-[var(--storefront-accent-text,var(--primary))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+                    href={storefrontHref}
+                    title={storefront.name}
                   >
-                    {storefront.name.slice(0, 1)}
+                    <span
+                      aria-hidden
+                      className="grid size-8 shrink-0 place-items-center rounded-lg border border-border bg-muted/35 font-mono text-xs uppercase"
+                    >
+                      {storefront.name.slice(0, 1)}
+                    </span>
+                    <span className="truncate">{storefront.name}</span>
+                  </NavigationLink>
+                ) : (
+                  <span className="flex min-w-0 items-center gap-3">
+                    <span
+                      aria-hidden
+                      className="grid size-8 shrink-0 place-items-center rounded-lg border border-border bg-muted/35 font-mono text-xs uppercase"
+                    >
+                      {storefront.name.slice(0, 1)}
+                    </span>
+                    <span className="truncate">{storefront.name}</span>
                   </span>
-                  <span className="truncate">{storefront.name}</span>
-                </span>
-              )}
-            </h1>
+                )}
+              </h1>
+            </div>
+            <div className="flex items-center gap-2">
+              {headerActions}
+              <StorefrontCartPopover
+                cartQuantity={cartQuantity}
+                labels={labels}
+                onOpenChange={setIsCartPopoverOpen}
+                open={isCartPopoverOpen}
+                radius={radius}
+              >
+                {cartPopoverSummary}
+              </StorefrontCartPopover>
+            </div>
           </div>
-          <div className="flex items-center gap-2">
-            {headerActions}
-            <StorefrontCartPopover
-              cartQuantity={cartQuantity}
-              labels={labels}
-              onOpenChange={setIsCartPopoverOpen}
-              open={isCartPopoverOpen}
-              radius={radius}
-            >
-              {cartPopoverSummary}
-            </StorefrontCartPopover>
-          </div>
-        </div>
-      </header>
+        </header>
+      )}
 
       <section
         className={cn(
@@ -315,13 +361,13 @@ export function StorefrontSurface({
             {isProductDetail && selectedListing ? (
               <>
                 {storefrontHref ? (
-                  <a
+                  <NavigationLink
                     className="mb-4 inline-flex items-center gap-1.5 text-muted-foreground text-sm transition hover:text-foreground"
                     href={storefrontHref}
                   >
                     <ArrowLeft aria-hidden className="size-4" />
                     {labels.browse}
-                  </a>
+                  </NavigationLink>
                 ) : null}
                 <StorefrontProductDetail
                   cartHref={cartHref}
@@ -330,6 +376,7 @@ export function StorefrontSurface({
                   currency={currency}
                   isSubmitting={isSubmitting}
                   labels={labels}
+                  linkComponent={linkComponent}
                   listing={selectedListing}
                   onBuyNow={onBuyNow}
                   onDecrement={onDecrement}
@@ -370,15 +417,18 @@ export function StorefrontSurface({
                       radius={radius}
                     />
                   }
+                  flushTop={
+                    !storefront.coverImageUrl &&
+                    !storefront.heroImageUrl &&
+                    (storefront.sections?.length ?? 0) === 0
+                  }
                   labels={labels}
                   listings={visibleListings}
                   renderListing={(listing) => {
                     const listingBundle = listing.bundleId
-                      ? bundles.find((bundle) => bundle.id === listing.bundleId)
+                      ? bundlesById.get(listing.bundleId)
                       : undefined;
-                    const quantity = cartLines
-                      .filter((item) => item.listingId === listing.id)
-                      .reduce((sum, item) => sum + item.quantity, 0);
+                    const quantity = cartQuantityByListing.get(listing.id) ?? 0;
 
                     return (
                       <StorefrontListingCard
@@ -422,6 +472,7 @@ export function StorefrontSurface({
         currency={currency}
         isSubmitting={isSubmitting}
         labels={labels}
+        linkComponent={linkComponent}
         listing={detailListing ?? null}
         onBuyNow={onBuyNow}
         onDecrement={onDecrement}

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

@@ -4,6 +4,9 @@ import type {
   InventoryListingVariant,
   InventoryStorefrontListing,
 } from '@tuturuuu/internal-api/inventory';
+import type { ElementType } from 'react';
+
+export type StorefrontLinkComponent = ElementType<{ href: string }>;
 
 export type StorefrontCartLine = {
   listingId: string;

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

@@ -187,7 +187,11 @@ export function getStorefrontBundleSelectionSubtotal(
   bundle: InventoryBundle | undefined,
   line: StorefrontCartLine
 ) {
-  if (!bundle?.categoryComponents?.length || !line.bundleSelections) {
+  if (
+    !bundle?.categoryComponents?.length ||
+    !line.bundleSelections ||
+    bundle.pricingMode === 'fixed_price'
+  ) {
     return null;
   }
 

package/src/components/ui/text-editor/__tests__/task-mention-checkbox.test.ts

@@ -1,5 +1,13 @@
 import { describe, expect, it, vi } from 'vitest';
 
+function resolveMentionChecked(
+  manualOverride: boolean | null,
+  nodeChecked: boolean | undefined,
+  allMentionedTasksCompleted: boolean
+) {
+  return manualOverride ?? nodeChecked ?? allMentionedTasksCompleted;
+}
+
 // Mock the Supabase client
 vi.mock('@tuturuuu/supabase/next/client', () => ({
   createClient: () => ({
@@ -220,8 +228,11 @@ describe('Task Mention Detection', () => {
       const nodeChecked: boolean | undefined = false;
       const allMentionedTasksCompleted = false;
 
-      const result =
-        manualOverride ?? nodeChecked ?? allMentionedTasksCompleted;
+      const result = resolveMentionChecked(
+        manualOverride,
+        nodeChecked,
+        allMentionedTasksCompleted
+      );
 
       expect(result).toBe(true);
     });
@@ -231,8 +242,11 @@ describe('Task Mention Detection', () => {
       const nodeChecked: boolean | undefined = true;
       const allMentionedTasksCompleted = false;
 
-      const result =
-        manualOverride ?? nodeChecked ?? allMentionedTasksCompleted;
+      const result = resolveMentionChecked(
+        manualOverride,
+        nodeChecked,
+        allMentionedTasksCompleted
+      );
 
       expect(result).toBe(true);
     });
@@ -242,8 +256,11 @@ describe('Task Mention Detection', () => {
       const nodeChecked: boolean | undefined = undefined;
       const allMentionedTasksCompleted = true;
 
-      const result =
-        manualOverride ?? nodeChecked ?? allMentionedTasksCompleted;
+      const result = resolveMentionChecked(
+        manualOverride,
+        nodeChecked,
+        allMentionedTasksCompleted
+      );
 
       expect(result).toBe(true);
     });

package/src/components/ui/text-editor/__tests__/upload-placeholder.test.ts

@@ -1,5 +1,5 @@
 import { PluginKey } from '@tiptap/pm/state';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import {
   createLoadingPlaceholder,
   findUploadPlaceholder,
@@ -68,19 +68,10 @@ describe('upload-placeholder', () => {
   });
 
   describe('createLoadingPlaceholder', () => {
-    let styleElement: HTMLStyleElement | null;
-
     beforeEach(() => {
       // Clean up any existing style elements
       const existing = document.querySelector('#upload-spinner-styles');
       if (existing) existing.remove();
-      styleElement = null;
-    });
-
-    afterEach(() => {
-      if (styleElement) {
-        styleElement.remove();
-      }
     });
 
     it('should create placeholder for image', () => {

package/src/components/ui/text-editor/color-controls.tsx

@@ -269,7 +269,7 @@ function SwatchButton({
       type="button"
       variant="ghost"
     >
-      {swatchKind === 'text' ? (
+      {swatchKind === 'text' || swatchKind === 'highlight' ? (
         <TextIcon className="size-4" />
       ) : (
         <span

package/src/globals.css

@@ -29,6 +29,26 @@
   }
 }
 
+/*
+ * iOS Safari zooms the viewport when a focused editable control computes below
+ * 16px. Protect touch forms across every app that consumes the shared UI styles
+ * without disabling the user's normal pinch-to-zoom controls.
+ */
+@supports (-webkit-touch-callout: none) {
+  @media (pointer: coarse) {
+    input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not(
+        [type="file"]
+      ):not([type="hidden"]):not([type="image"]):not([type="radio"]):not(
+        [type="range"]
+      ):not([type="reset"]):not([type="submit"]),
+    select[class],
+    textarea[class],
+    [contenteditable="true"][class] {
+      font-size: 16px;
+    }
+  }
+}
+
 @layer utilities {
   body {
     font-family: Arial, Helvetica, sans-serif;

package/src/globals.test.ts

@@ -0,0 +1,75 @@
+import { existsSync, readdirSync, readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+const repoRoot = existsSync(resolve(process.cwd(), 'packages/ui/package.json'))
+  ? process.cwd()
+  : resolve(process.cwd(), '../..');
+
+function readRepoFile(path: string) {
+  return readFileSync(resolve(repoRoot, path), 'utf8');
+}
+
+function sourceFiles(directory: string): string[] {
+  if (!existsSync(directory)) return [];
+
+  return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const path = resolve(directory, entry.name);
+    if (entry.isDirectory()) return sourceFiles(path);
+    return /\.(css|ts|tsx)$/u.test(entry.name) ? [path] : [];
+  });
+}
+
+describe('shared mobile form ergonomics', () => {
+  it('exports an iOS focus-zoom guard without disabling pinch zoom', () => {
+    const packageJson = JSON.parse(
+      readRepoFile('packages/ui/package.json')
+    ) as {
+      exports: Record<string, string>;
+    };
+    const styles = readRepoFile('packages/ui/src/globals.css');
+
+    expect(packageJson.exports['./globals.css']).toBe('./src/globals.css');
+    expect(styles).toContain('@supports (-webkit-touch-callout: none)');
+    expect(styles).toContain('@media (pointer: coarse)');
+    expect(styles).toContain('input:not([type="button"])');
+    expect(styles).toContain('select[class],');
+    expect(styles).toContain('textarea[class],');
+    expect(styles).toContain('[contenteditable="true"][class]');
+    expect(styles).toMatch(/font-size:\s*16px/u);
+    expect(styles).not.toMatch(/user-scalable|maximum-scale/iu);
+  });
+
+  it('reaches every web app that consumes the shared UI package', () => {
+    const appsDirectory = resolve(repoRoot, 'apps');
+    const appNames = readdirSync(appsDirectory, { withFileTypes: true })
+      .filter((entry) => entry.isDirectory())
+      .map((entry) => entry.name)
+      .filter((appName) => {
+        const manifestPath = resolve(appsDirectory, appName, 'package.json');
+        if (!existsSync(manifestPath)) return false;
+
+        const manifest = JSON.parse(readFileSync(manifestPath, 'utf8')) as {
+          dependencies?: Record<string, string>;
+        };
+        return Boolean(manifest.dependencies?.['@tuturuuu/ui']);
+      });
+
+    expect(appNames.length).toBeGreaterThan(0);
+
+    for (const appName of appNames) {
+      const appSources = sourceFiles(resolve(appsDirectory, appName, 'src'));
+      const importsSharedStyles = appSources.some((path) => {
+        const source = readFileSync(path, 'utf8');
+        return (
+          source.includes('@tuturuuu/ui/globals.css') ||
+          source.includes('@tuturuuu/tasks-ui/globals.css')
+        );
+      });
+
+      expect(importsSharedStyles, `${appName} must load shared UI styles`).toBe(
+        true
+      );
+    }
+  });
+});