@tuturuuu/ui 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [0.17.0](https://github.com/tutur3u/platform/compare/ui-v0.16.0...ui-v0.17.0) (2026-07-13)
+
+
+### Features
+
+* **storefront:** refine the buyer experience ([45d0e76](https://github.com/tutur3u/platform/commit/45d0e763ff2adc858aa7c76024eb4554879b3977))
+* **tasks:** promote progress tracking workspace ([058503a](https://github.com/tutur3u/platform/commit/058503a96c8df10725ecd3f88738d574760fc944))
+
+
+### Bug Fixes
+
+* **platform:** address attendance and invoice feedback ([8d2a537](https://github.com/tutur3u/platform/commit/8d2a53782d01427839607c7b0d90eaa3ecc5a1d8))
+
+
+### Performance Improvements
+
+* **web:** reduce dashboard request overhead ([93f4b2b](https://github.com/tutur3u/platform/commit/93f4b2b354286b33c5cf8ff9ee0e54a31b18a022))
+
 ## [0.16.0](https://github.com/tutur3u/platform/compare/ui-v0.15.0...ui-v0.16.0) (2026-07-11)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -85,12 +85,12 @@
     "@tiptap/react": "3.27.3",
     "@tiptap/starter-kit": "3.27.3",
     "@tuturuuu/ai": "0.2.2",
-    "@tuturuuu/apis": "0.9.0",
+    "@tuturuuu/apis": "0.9.1",
     "@tuturuuu/hooks": "0.0.2",
     "@tuturuuu/icons": "0.0.6",
-    "@tuturuuu/internal-api": "0.17.0",
+    "@tuturuuu/internal-api": "0.18.0",
     "@tuturuuu/supabase": "0.4.0",
-    "@tuturuuu/utils": "0.15.0",
+    "@tuturuuu/utils": "0.15.1",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
@@ -129,6 +129,7 @@
     "react-resizable-panels": "^4.12.1",
     "react-syntax-highlighter": "^16.1.1",
     "recharts": "3.9.2",
+    "slot-text": "^0.3.3",
     "sonner": "^2.0.7",
     "streamdown": "^2.5.0",
     "tailwind-scrollbar": "^4.0.2",
@@ -149,7 +150,7 @@
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@tuturuuu/types": "0.16.0",
+    "@tuturuuu/types": "0.17.0",
     "@tuturuuu/typescript-config": "0.1.1",
     "@types/html2canvas": "^1.0.0",
     "@types/lodash": "^4.17.24",

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

@@ -0,0 +1,161 @@
+'use client';
+
+import { Search } from '@tuturuuu/icons';
+import type { InventoryStorefrontListing } from '@tuturuuu/internal-api/inventory';
+import { cn } from '@tuturuuu/utils/format';
+import type { ReactNode } from 'react';
+import { useMemo, useState } from 'react';
+import { SlotText } from 'slot-text/react';
+import { Button } from '../button';
+import { Input } from '../input';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../tabs';
+import type { StorefrontSurfaceLabels } from './types';
+
+type BrowseFilter = 'all' | 'bundle' | 'product';
+
+export function StorefrontBrowsePanel({
+  compactLayout,
+  emptyListings,
+  labels,
+  listings,
+  renderListing,
+}: {
+  compactLayout: boolean;
+  emptyListings: ReactNode;
+  labels: StorefrontSurfaceLabels;
+  listings: InventoryStorefrontListing[];
+  renderListing: (listing: InventoryStorefrontListing) => ReactNode;
+}) {
+  const [filter, setFilter] = useState<BrowseFilter>('all');
+  const [query, setQuery] = useState('');
+  const visibleListings = useMemo(() => {
+    const normalizedQuery = query.trim().toLocaleLowerCase();
+
+    return listings.filter((listing) => {
+      if (filter !== 'all' && listing.listingType !== filter) return false;
+      if (!normalizedQuery) return true;
+
+      return [listing.title, listing.description]
+        .filter(Boolean)
+        .some((value) => value?.toLocaleLowerCase().includes(normalizedQuery));
+    });
+  }, [filter, listings, query]);
+  const resultLabel = labels.visibleItems.replace(
+    '{count}',
+    String(visibleListings.length)
+  );
+  const hasActiveFilters = filter !== 'all' || query.trim().length > 0;
+
+  return (
+    <section aria-labelledby="storefront-shop-heading" className="mt-10">
+      <div className="flex flex-col gap-5 border-border border-b pb-5 lg:flex-row lg:items-end lg:justify-between">
+        <div>
+          <p className="font-mono text-muted-foreground text-xs uppercase tracking-[0.16em]">
+            {labels.browse}
+          </p>
+          <h2
+            className="mt-2 font-semibold text-2xl tracking-tight"
+            id="storefront-shop-heading"
+          >
+            {labels.shopTitle}
+          </h2>
+        </div>
+        {listings.length ? (
+          <div className="grid gap-3 sm:grid-cols-[minmax(14rem,20rem)_auto] sm:items-center">
+            <label className="relative block">
+              <span className="sr-only">{labels.searchStore}</span>
+              <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                className="h-10 rounded-lg border-border bg-background pl-9 shadow-none"
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder={labels.searchStore}
+                type="search"
+                value={query}
+              />
+            </label>
+            <Tabs
+              onValueChange={(value) => setFilter(value as BrowseFilter)}
+              value={filter}
+            >
+              <TabsList className="grid h-10 w-full grid-cols-3 rounded-lg bg-muted/60 sm:w-auto">
+                <TabsTrigger onClick={() => setFilter('all')} value="all">
+                  {labels.allItems}
+                </TabsTrigger>
+                <TabsTrigger
+                  onClick={() => setFilter('product')}
+                  value="product"
+                >
+                  {labels.products}
+                </TabsTrigger>
+                <TabsTrigger onClick={() => setFilter('bundle')} value="bundle">
+                  {labels.bundles}
+                </TabsTrigger>
+              </TabsList>
+              <TabsContent className="sr-only" forceMount value="all">
+                {labels.allItems}
+              </TabsContent>
+              <TabsContent className="sr-only" forceMount value="product">
+                {labels.products}
+              </TabsContent>
+              <TabsContent className="sr-only" forceMount value="bundle">
+                {labels.bundles}
+              </TabsContent>
+            </Tabs>
+          </div>
+        ) : null}
+      </div>
+
+      <div className="sr-only" role="status">
+        {resultLabel}
+      </div>
+      <div
+        aria-hidden
+        className="mt-4 h-5 font-mono text-muted-foreground text-xs"
+      >
+        <SlotText
+          options={{ bounce: 0.12, duration: 220, stagger: 18 }}
+          text={resultLabel}
+        />
+      </div>
+
+      {listings.length === 0 ? (
+        <div className="mt-5">{emptyListings}</div>
+      ) : visibleListings.length === 0 ? (
+        <div className="mt-5 grid min-h-64 place-items-center rounded-xl border border-border border-dashed bg-muted/15 p-8 text-center">
+          <div className="max-w-sm">
+            <Search className="mx-auto size-5 text-muted-foreground" />
+            <h3 className="mt-4 font-semibold text-lg">
+              {labels.noResultsTitle}
+            </h3>
+            <p className="mt-2 text-muted-foreground text-sm leading-6">
+              {labels.noResultsDescription}
+            </p>
+            {hasActiveFilters ? (
+              <Button
+                className="mt-4"
+                onClick={() => {
+                  setFilter('all');
+                  setQuery('');
+                }}
+                size="sm"
+                type="button"
+                variant="outline"
+              >
+                {labels.clearFilters}
+              </Button>
+            ) : null}
+          </div>
+        </div>
+      ) : (
+        <div
+          className={cn(
+            'mt-5 grid gap-5',
+            compactLayout ? 'sm:grid-cols-2' : 'sm:grid-cols-2 xl:grid-cols-3'
+          )}
+        >
+          {visibleListings.map(renderListing)}
+        </div>
+      )}
+    </section>
+  );
+}

package/src/components/ui/storefront/bundle-selection-dialog.tsx

@@ -92,7 +92,7 @@ export function StorefrontBundleSelectionDialog({
       }}
       open={open}
     >
-      <DialogContent className="grid max-h-[90dvh] max-w-[min(42rem,calc(100vw-1rem))] grid-rows-[auto_auto_minmax(0,1fr)_auto] gap-4 overflow-hidden border-border/60 p-5 sm:rounded-2xl">
+      <DialogContent className="grid max-h-[90dvh] max-w-[min(42rem,calc(100vw-1rem))] grid-rows-[auto_auto_minmax(0,1fr)_auto] gap-4 overflow-hidden border-border p-5 shadow-sm sm:rounded-xl">
         <DialogHeader className="text-left">
           <DialogTitle>{labels.bundleSelectionTitle}</DialogTitle>
           <p className="text-muted-foreground text-sm">{listing.title}</p>

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

@@ -49,7 +49,7 @@ export function StorefrontCartPopover({
       <PopoverContent
         align="end"
         className={cn(
-          'w-[min(calc(100vw-2rem),24rem)] border-border/70 p-4 shadow-xl',
+          'w-[min(calc(100vw-2rem),24rem)] border-border p-4 shadow-sm',
           radius
         )}
         sideOffset={10}

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

@@ -24,13 +24,40 @@ export function StorefrontHeroPanel({
   return (
     <section
       className={cn(
-        'relative isolate overflow-hidden',
+        'grid overflow-hidden md:grid-cols-[minmax(0,1.08fr)_minmax(18rem,0.92fr)]',
         storefrontSurfaceClasses[storefront.surfaceStyle],
         radius
       )}
     >
-      {/* Full-width featured banner backdrop. */}
-      <div className="relative h-40 w-full sm:h-52 md:h-60">
+      <div className="flex min-h-80 flex-col justify-between gap-10 p-6 sm:p-8 lg:p-10">
+        <div className="flex items-center gap-2 font-mono text-muted-foreground text-xs uppercase tracking-[0.16em]">
+          <Store className="size-4" />
+          <span>{labels.browse}</span>
+        </div>
+        <div className="max-w-2xl">
+          <h2 className="text-balance font-semibold text-4xl tracking-[-0.035em] sm:text-5xl lg:text-6xl">
+            {storefront.name}
+          </h2>
+          <p className="mt-4 max-w-xl text-pretty text-muted-foreground leading-7">
+            {storefront.description ?? labels.fallbackDescription}
+          </p>
+          <div className="mt-6 flex flex-wrap gap-2">
+            <Badge className="border-border bg-background" variant="outline">
+              {listingsCount} {labels.product}
+            </Badge>
+            <Badge className="border-border bg-background" variant="outline">
+              {currency}
+            </Badge>
+            <Badge className="border-border bg-background" variant="outline">
+              {storefront.visibility === 'public'
+                ? labels.publicStore
+                : labels.privateStore}
+            </Badge>
+          </div>
+        </div>
+      </div>
+
+      <div className="relative min-h-64 border-border border-t md:min-h-full md:border-t-0 md:border-l">
         {heroImage ? (
           <StorefrontImagePanel
             className="absolute inset-0 h-full w-full"
@@ -39,34 +66,12 @@ export function StorefrontHeroPanel({
             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 className="absolute inset-0 grid place-items-center bg-muted/35">
+            <div className="grid size-24 place-items-center rounded-xl border border-border bg-background/80">
+              <Store className="size-8 text-muted-foreground" />
+            </div>
           </div>
-          <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">
-            {storefront.description ?? labels.fallbackDescription}
-          </p>
-        </div>
-        <div className="flex flex-wrap gap-2">
-          <Badge className="border-border bg-background" variant="outline">
-            {listingsCount} {labels.product}
-          </Badge>
-          <Badge className="border-border bg-background" variant="outline">
-            {currency}
-          </Badge>
-        </div>
+        )}
       </div>
     </section>
   );

package/src/components/ui/storefront/listing-card.tsx

@@ -59,10 +59,10 @@ export function StorefrontListingCard({
       className={cn(
         surfaceClassName,
         radius,
-        'group relative overflow-hidden transition duration-200 hover:-translate-y-0.5 hover:shadow-foreground/10 hover:shadow-md',
+        'group relative overflow-hidden transition duration-200 hover:border-foreground/20 hover:shadow-foreground/5 hover:shadow-sm',
         isList
           ? 'grid gap-4 p-3 sm:grid-cols-[112px_minmax(0,1fr)_auto] sm:items-center'
-          : 'flex min-h-full flex-col gap-4 p-3'
+          : 'flex min-h-full flex-col'
       )}
     >
       <div className="relative">
@@ -80,7 +80,7 @@ export function StorefrontListingCard({
             className={cn(
               'overflow-hidden transition duration-300 group-hover:scale-[1.02]',
               radius,
-              isList ? 'aspect-square' : 'aspect-[4/3]'
+              isList ? 'aspect-square' : 'aspect-[5/4] rounded-b-none'
             )}
             imageUrl={listing.imageUrl}
             label={listing.title}
@@ -92,7 +92,7 @@ export function StorefrontListingCard({
           </span>
         ) : null}
       </div>
-      <div className="min-w-0">
+      <div className={cn('min-w-0', isList ? null : 'px-5 pt-5')}>
         <div className="flex flex-wrap items-center gap-2">
           <button
             className="min-w-0 truncate text-left font-semibold transition hover:text-[var(--storefront-accent-text,var(--primary))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-default disabled:hover:text-foreground"
@@ -122,7 +122,12 @@ export function StorefrontListingCard({
         ) : null}
       </div>
 
-      <div className="mt-auto flex flex-wrap items-center justify-between gap-3">
+      <div
+        className={cn(
+          'mt-auto flex flex-wrap items-center justify-between gap-3',
+          isList ? null : 'px-5 pt-4 pb-5'
+        )}
+      >
         <div className="min-w-0">
           {hasVariants ? (
             <p className="truncate font-semibold tabular-nums">

package/src/components/ui/storefront/merch-sections.tsx

@@ -27,21 +27,23 @@ export function StorefrontMerchSections({
   if (visibleSections.length === 0) return null;
 
   return (
-    <div className="mt-4 grid gap-3">
+    <div className="mt-6 grid gap-4">
       {visibleSections.map((section) => {
         const sectionHref = getSafeStorefrontHttpUrl(section.href);
 
         return (
           <section
             className={cn(
-              'grid overflow-hidden border border-border bg-card md:grid-cols-[minmax(0,1fr)_280px]',
+              'grid overflow-hidden border border-border bg-card md:grid-cols-[minmax(0,1fr)_minmax(16rem,0.7fr)]',
               radius
             )}
             key={section.id}
           >
-            <div className="flex min-w-0 flex-col justify-center gap-2 p-4">
+            <div className="flex min-w-0 flex-col justify-center gap-3 p-6 sm:p-8">
               {section.title ? (
-                <h2 className="font-semibold text-lg">{section.title}</h2>
+                <h2 className="text-balance font-semibold text-2xl tracking-tight">
+                  {section.title}
+                </h2>
               ) : null}
               {section.description ? (
                 <p className="text-muted-foreground text-sm leading-6">
@@ -50,7 +52,7 @@ export function StorefrontMerchSections({
               ) : null}
               {sectionHref ? (
                 <a
-                  className="mt-1 w-fit font-medium text-sm underline-offset-4 hover:underline"
+                  className="mt-2 w-fit border-border border-b pb-1 font-medium text-sm transition hover:border-foreground"
                   href={sectionHref}
                 >
                   {sectionHref.replace(/^https?:\/\//u, '')}

package/src/components/ui/storefront/product-detail.tsx

@@ -1,8 +1,17 @@
 'use client';
 
-import { ArrowRight, Minus, Plus, ShoppingCart, Zap } from '@tuturuuu/icons';
+import {
+  ArrowRight,
+  Minus,
+  MonitorSmartphone,
+  Plus,
+  ShieldCheck,
+  ShoppingCart,
+  Zap,
+} from '@tuturuuu/icons';
 import type {
   InventoryListingVariant,
+  InventoryStorefront,
   InventoryStorefrontListing,
 } from '@tuturuuu/internal-api/inventory';
 import { cn } from '@tuturuuu/utils/format';
@@ -30,6 +39,7 @@ import {
 export function StorefrontProductDetail({
   cartHref,
   cartLines,
+  checkoutMode,
   currency,
   isSubmitting = false,
   labels,
@@ -39,11 +49,13 @@ export function StorefrontProductDetail({
   onIncrement,
   quantity,
   radius,
+  presentation = 'page',
   showInventoryBadges,
   surfaceClassName,
 }: {
   cartHref?: string;
   cartLines?: StorefrontCartLine[];
+  checkoutMode?: InventoryStorefront['checkoutMode'];
   currency: string;
   isSubmitting?: boolean;
   labels: StorefrontSurfaceLabels;
@@ -57,6 +69,7 @@ export function StorefrontProductDetail({
   ) => void;
   quantity: number;
   radius: string;
+  presentation?: 'dialog' | 'page';
   showInventoryBadges: boolean;
   surfaceClassName: string;
 }) {
@@ -114,19 +127,45 @@ export function StorefrontProductDetail({
     compareAtPrice && compareAtPrice > displayPrice
       ? Math.round((1 - displayPrice / compareAtPrice) * 100)
       : 0;
+  const isDialog = presentation === 'dialog';
+  const isSquareTerminal = checkoutMode === 'square_terminal';
+  const isPolar = checkoutMode === 'polar';
 
   return (
-    <div className="grid gap-6 lg:grid-cols-2">
-      <div className={cn('overflow-hidden', surfaceClassName, radius)}>
+    <div
+      className={cn(
+        'grid min-w-0',
+        isDialog
+          ? 'lg:grid-cols-[minmax(0,1.08fr)_minmax(22rem,0.92fr)]'
+          : 'gap-6 lg:grid-cols-2'
+      )}
+    >
+      <div
+        className={cn(
+          'overflow-hidden',
+          surfaceClassName,
+          isDialog ? 'border-border border-b lg:border-r lg:border-b-0' : radius
+        )}
+      >
         <StorefrontImagePanel
-          className="aspect-square"
+          className={cn(
+            isDialog
+              ? 'aspect-[4/3] min-h-72 lg:aspect-auto lg:h-full lg:min-h-[36rem]'
+              : 'aspect-square'
+          )}
           imageUrl={imageUrl}
           label={listing.title}
           priority
         />
       </div>
 
-      <div className="flex flex-col gap-5">
+      <div
+        className={cn(
+          'flex min-w-0 flex-col gap-5',
+          isDialog &&
+            'p-5 sm:p-7 lg:max-h-[min(44rem,90dvh)] lg:overflow-y-auto lg:p-9'
+        )}
+      >
         <div className="flex flex-wrap items-center gap-2">
           <Badge className="border-border bg-background" variant="outline">
             {listing.listingType === 'bundle' ? labels.bundle : labels.product}
@@ -141,7 +180,7 @@ export function StorefrontProductDetail({
           ) : null}
         </div>
 
-        <h2 className="text-balance font-semibold text-3xl tracking-tight md:text-4xl">
+        <h2 className="text-balance break-words font-semibold text-2xl tracking-tight sm:text-3xl lg:text-4xl">
           {listing.title}
         </h2>
 
@@ -218,6 +257,40 @@ export function StorefrontProductDetail({
           {listing.description ?? labels.fallbackDescription}
         </p>
 
+        {isSquareTerminal || isPolar ? (
+          <div
+            className={cn(
+              'flex items-start gap-3 border border-border bg-muted/25 p-3.5',
+              radius
+            )}
+          >
+            <span
+              className={cn(
+                'grid size-9 shrink-0 place-items-center border border-border bg-background',
+                radius
+              )}
+            >
+              {isSquareTerminal ? (
+                <MonitorSmartphone className="size-4" />
+              ) : (
+                <ShieldCheck className="size-4" />
+              )}
+            </span>
+            <div className="min-w-0">
+              <p className="font-medium text-sm">
+                {isSquareTerminal
+                  ? labels.squareTerminal
+                  : labels.onlineCheckout}
+              </p>
+              <p className="mt-0.5 text-muted-foreground text-xs leading-5">
+                {isSquareTerminal
+                  ? labels.squareTerminalDescription
+                  : labels.onlineCheckoutDescription}
+              </p>
+            </div>
+          </div>
+        ) : null}
+
         <div className="mt-auto flex flex-wrap items-center gap-3 border-border border-t pt-5">
           {canChange ? (
             needsSelection ? (

package/src/components/ui/storefront/product-dialog.tsx

@@ -13,6 +13,7 @@ import type { StorefrontCartLine, StorefrontSurfaceLabels } from './types';
 export function StorefrontProductDialog({
   cartHref,
   cartLines,
+  checkoutMode,
   currency,
   isSubmitting,
   labels,
@@ -27,6 +28,7 @@ export function StorefrontProductDialog({
 }: {
   cartHref?: string;
   cartLines?: StorefrontCartLine[];
+  checkoutMode?: Parameters<typeof StorefrontProductDetail>[0]['checkoutMode'];
   currency: string;
   isSubmitting?: boolean;
   labels: StorefrontSurfaceLabels;
@@ -45,13 +47,14 @@ export function StorefrontProductDialog({
 }) {
   return (
     <Dialog onOpenChange={onOpenChange} open={Boolean(listing)}>
-      <DialogContent className="max-h-[90vh] w-[calc(100%-1.5rem)] max-w-5xl overflow-y-auto sm:w-[calc(100%-2rem)]">
+      <DialogContent className="max-h-[92dvh] w-[calc(100%-1rem)] max-w-none overflow-hidden border-border p-0 shadow-2xl sm:w-[calc(100%-2rem)] sm:max-w-6xl">
         {listing ? (
           <>
             <DialogTitle className="sr-only">{listing.title}</DialogTitle>
             <StorefrontProductDetail
               cartHref={cartHref}
               cartLines={cartLines}
+              checkoutMode={checkoutMode}
               currency={currency}
               isSubmitting={isSubmitting}
               labels={labels}
@@ -61,6 +64,7 @@ export function StorefrontProductDialog({
               onIncrement={onIncrement}
               quantity={0}
               radius={radius}
+              presentation="dialog"
               showInventoryBadges={showInventoryBadges}
               surfaceClassName={surfaceClassName}
             />