@tuturuuu/ui 0.16.0 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # Changelog
 
+## [0.18.0](https://github.com/tutur3u/platform/compare/ui-v0.17.0...ui-v0.18.0) (2026-07-18)
+
+
+### Features
+
+* **inventory:** complete Square commerce integration ([fe63eca](https://github.com/tutur3u/platform/commit/fe63eca7d02d94795f93fbbb471069b80c492020))
+* **tasks:** add autonomous progress intelligence ([ba35df5](https://github.com/tutur3u/platform/commit/ba35df5485fb01e709bf651cc2083b5fa877560f))
+* **tasks:** add leaderboard leave button and per-member sparklines ([5b65238](https://github.com/tutur3u/platform/commit/5b65238c5388345acebacc6cbc612c738cdc3079))
+* **tasks:** make task management autonomous ([431212d](https://github.com/tutur3u/platform/commit/431212d471425aba7fcffdd37d77039d64bec643))
+* **tasks:** revamp progress, goals, analytics & leaderboards with TrackBear parity ([d1bda0e](https://github.com/tutur3u/platform/commit/d1bda0e37a6ed45eb22aaa3bb20c4d62dc41a19f))
+
+
+### Bug Fixes
+
+* **tasks:** polish task card indicators ([d34966f](https://github.com/tutur3u/platform/commit/d34966fe8939dde56990718acada5a7899a990ed))
+* **tasks:** preserve bulk task list rows ([5aac158](https://github.com/tutur3u/platform/commit/5aac158d38969be83499a5fec114197d0378bac7))
+* **tasks:** repair task media permissions ([28a0bf1](https://github.com/tutur3u/platform/commit/28a0bf1f1ff11359828a335ac81bb20860062942))
+* **tasks:** show select all for empty lists ([485ccd7](https://github.com/tutur3u/platform/commit/485ccd737d93d63d00cf582871a9055d819ba694))
+* **tasks:** stabilize task card selection layout ([5754a9c](https://github.com/tutur3u/platform/commit/5754a9c9edcc1fdee5fff116cb809d3d2dc2bf8c))
+
+## [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/biome.json

@@ -1,5 +1,5 @@
 {
   "root": false,
-  "$schema": "https://biomejs.dev/schemas/2.5.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.5.4/schema.json",
   "extends": "//"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -59,38 +59,40 @@
     "@tanstack/react-pacer": "^0.22.1",
     "@tanstack/react-query": "^5.101.2",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.14.5",
-    "@tiptap/core": "3.27.3",
-    "@tiptap/extension-collaboration": "3.27.3",
-    "@tiptap/extension-collaboration-caret": "3.27.3",
-    "@tiptap/extension-color": "3.27.3",
-    "@tiptap/extension-drag-handle-react": "3.27.3",
-    "@tiptap/extension-highlight": "3.27.3",
-    "@tiptap/extension-horizontal-rule": "3.27.3",
-    "@tiptap/extension-image": "3.27.3",
-    "@tiptap/extension-link": "3.27.3",
-    "@tiptap/extension-list": "3.27.3",
-    "@tiptap/extension-placeholder": "3.27.3",
-    "@tiptap/extension-strike": "3.27.3",
-    "@tiptap/extension-subscript": "3.27.3",
-    "@tiptap/extension-superscript": "3.27.3",
-    "@tiptap/extension-table": "3.27.3",
-    "@tiptap/extension-table-cell": "3.27.3",
-    "@tiptap/extension-table-header": "3.27.3",
-    "@tiptap/extension-table-row": "3.27.3",
-    "@tiptap/extension-text-align": "3.27.3",
-    "@tiptap/extension-text-style": "3.27.3",
-    "@tiptap/extension-youtube": "3.27.3",
-    "@tiptap/pm": "3.27.3",
-    "@tiptap/react": "3.27.3",
-    "@tiptap/starter-kit": "3.27.3",
+    "@tanstack/react-virtual": "^3.14.6",
+    "@tiptap/core": "3.27.4",
+    "@tiptap/extension-collaboration": "3.27.4",
+    "@tiptap/extension-collaboration-caret": "3.27.4",
+    "@tiptap/extension-color": "3.27.4",
+    "@tiptap/extension-drag-handle": "3.27.4",
+    "@tiptap/extension-drag-handle-react": "3.27.4",
+    "@tiptap/extension-highlight": "3.27.4",
+    "@tiptap/extension-horizontal-rule": "3.27.4",
+    "@tiptap/extension-image": "3.27.4",
+    "@tiptap/extension-link": "3.27.4",
+    "@tiptap/extension-list": "3.27.4",
+    "@tiptap/extension-node-range": "3.27.4",
+    "@tiptap/extension-placeholder": "3.27.4",
+    "@tiptap/extension-strike": "3.27.4",
+    "@tiptap/extension-subscript": "3.27.4",
+    "@tiptap/extension-superscript": "3.27.4",
+    "@tiptap/extension-table": "3.27.4",
+    "@tiptap/extension-table-cell": "3.27.4",
+    "@tiptap/extension-table-header": "3.27.4",
+    "@tiptap/extension-table-row": "3.27.4",
+    "@tiptap/extension-text-align": "3.27.4",
+    "@tiptap/extension-text-style": "3.27.4",
+    "@tiptap/extension-youtube": "3.27.4",
+    "@tiptap/pm": "3.27.4",
+    "@tiptap/react": "3.27.4",
+    "@tiptap/starter-kit": "3.27.4",
     "@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.19.0",
     "@tuturuuu/supabase": "0.4.0",
-    "@tuturuuu/utils": "0.15.0",
+    "@tuturuuu/utils": "0.16.0",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
@@ -104,31 +106,33 @@
     "eventemitter3": "^5.0.4",
     "framer-motion": "^12.42.2",
     "gsap": "^3.15.0",
-    "html2canvas-pro": "^2.2.3",
+    "html2canvas-pro": "^2.2.4",
     "input-otp": "^1.4.2",
     "katex": "^0.17.0",
     "lodash": "4.18.1",
     "moment": "^2.30.1",
     "motion": "^12.42.2",
-    "next": "^16.3.0-preview.5",
+    "next": "^16.3.0-preview.6",
     "next-intl": "^4.13.2",
     "next-themes": "^0.4.6",
     "nuqs": "^2.9.0",
     "prosemirror-state": "^1.4.4",
+    "prosemirror-view": "1.41.9",
     "qrcode.react": "^4.2.0",
     "react": "^19.2.7",
-    "react-colorful": "^5.7.0",
+    "react-colorful": "^5.8.0",
     "react-day-picker": "^10.0.1",
     "react-dom": "^19.2.7",
-    "react-dropzone": "^15.0.0",
+    "react-dropzone": "^17.0.0",
     "react-hook-form": "^7.81.0",
     "react-markdown": "^10.1.0",
     "react-papaparse": "^4.4.0",
     "react-pdf": "^10.4.1",
     "react-resizable": "^4.0.2",
-    "react-resizable-panels": "^4.12.1",
+    "react-resizable-panels": "^4.12.2",
     "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 +153,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.18.0",
     "@tuturuuu/typescript-config": "0.1.1",
     "@types/html2canvas": "^1.0.0",
     "@types/lodash": "^4.17.24",
@@ -160,9 +164,9 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/uuid": "^11.0.0",
     "@vitejs/plugin-react": "^6.0.3",
-    "autoprefixer": "^10.5.2",
+    "autoprefixer": "^10.5.3",
     "jsdom": "^29.1.1",
-    "postcss": "^8.5.17",
+    "postcss": "^8.5.19",
     "postcss-load-config": "^6.0.1",
     "tailwindcss": "^4.3.2",
     "typescript": "7.0.2",
@@ -233,38 +237,6 @@
       "types": "./src/components/ui/text-editor/types.ts",
       "import": "./src/components/ui/text-editor/types.ts"
     },
-    "./tu-do/hooks/useTaskDialog": {
-      "types": "./src/components/ui/tu-do/hooks/useTaskDialog.ts",
-      "import": "./src/components/ui/tu-do/hooks/useTaskDialog.ts"
-    },
-    "./tu-do/providers/task-dialog-provider": {
-      "types": "./src/components/ui/tu-do/providers/task-dialog-provider.tsx",
-      "import": "./src/components/ui/tu-do/providers/task-dialog-provider.tsx"
-    },
-    "./tu-do/shared/task-dialog-manager": {
-      "types": "./src/components/ui/tu-do/shared/task-dialog-manager.tsx",
-      "import": "./src/components/ui/tu-do/shared/task-dialog-manager.tsx"
-    },
-    "./tu-do/shared/recent-sidebar-events": {
-      "types": "./src/components/ui/tu-do/shared/recent-sidebar-events.ts",
-      "import": "./src/components/ui/tu-do/shared/recent-sidebar-events.ts"
-    },
-    "./tu-do/shared/task-open-events": {
-      "types": "./src/components/ui/tu-do/shared/task-open-events.ts",
-      "import": "./src/components/ui/tu-do/shared/task-open-events.ts"
-    },
-    "./tu-do/hooks/*": "./src/components/ui/tu-do/hooks/*",
-    "./tu-do/providers/*": "./src/components/ui/tu-do/providers/*.tsx",
-    "./tu-do/shared/*": "./src/components/ui/tu-do/shared/*.tsx",
-    "./tu-do/shared/task-edit-dialog/*": "./src/components/ui/tu-do/shared/task-edit-dialog/*.tsx",
-    "./tu-do/shared/estimation-mapping": {
-      "types": "./src/components/ui/tu-do/shared/estimation-mapping.ts",
-      "import": "./src/components/ui/tu-do/shared/estimation-mapping.ts"
-    },
-    "./tu-do/utils/label-colors": {
-      "types": "./src/components/ui/tu-do/utils/label-colors.ts",
-      "import": "./src/components/ui/tu-do/utils/label-colors.ts"
-    },
     "./utils/label-colors": {
       "types": "./src/utils/label-colors.ts",
       "import": "./src/utils/label-colors.ts"
@@ -285,55 +257,6 @@
       "types": "./src/components/ui/finance/categories-tags-tabs.tsx",
       "import": "./src/components/ui/finance/categories-tags-tabs.tsx"
     },
-    "./tu-do/boards/*": "./src/components/ui/tu-do/boards/*.tsx",
-    "./tu-do/drafts/*": "./src/components/ui/tu-do/drafts/*.tsx",
-    "./tu-do/my-tasks/use-my-tasks-state": {
-      "types": "./src/components/ui/tu-do/my-tasks/use-my-tasks-state.ts",
-      "import": "./src/components/ui/tu-do/my-tasks/use-my-tasks-state.ts"
-    },
-    "./tu-do/my-tasks/*": "./src/components/ui/tu-do/my-tasks/*.tsx",
-    "./tu-do/habits/*": "./src/components/ui/tu-do/habits/*.tsx",
-    "./tu-do/notes/*": "./src/components/ui/tu-do/notes/*.tsx",
-    "./tu-do/labels/types": {
-      "types": "./src/components/ui/tu-do/labels/types.ts",
-      "import": "./src/components/ui/tu-do/labels/types.ts"
-    },
-    "./tu-do/labels/*": "./src/components/ui/tu-do/labels/*.tsx",
-    "./tu-do/labels/components/*": "./src/components/ui/tu-do/labels/components/*.tsx",
-    "./tu-do/labels/hooks/*": "./src/components/ui/tu-do/labels/hooks/*.ts",
-    "./tu-do/estimates/*": "./src/components/ui/tu-do/estimates/*.tsx",
-    "./tu-do/initiatives/*": "./src/components/ui/tu-do/initiatives/*.tsx",
-    "./tu-do/cycles/*": "./src/components/ui/tu-do/cycles/*.tsx",
-    "./tu-do/logs/*": "./src/components/ui/tu-do/logs/*.tsx",
-    "./tu-do/progress/*": "./src/components/ui/tu-do/progress/*.tsx",
-    "./tu-do/templates/types": {
-      "types": "./src/components/ui/tu-do/templates/types.ts",
-      "import": "./src/components/ui/tu-do/templates/types.ts"
-    },
-    "./tu-do/templates/*": "./src/components/ui/tu-do/templates/*.tsx",
-    "./tu-do/templates/marketplace/*": "./src/components/ui/tu-do/templates/marketplace/*.tsx",
-    "./tu-do/templates/templateId/*": "./src/components/ui/tu-do/templates/templateId/*.tsx",
-    "./tu-do/projects/types": {
-      "types": "./src/components/ui/tu-do/projects/types.ts",
-      "import": "./src/components/ui/tu-do/projects/types.ts"
-    },
-    "./tu-do/projects/*": "./src/components/ui/tu-do/projects/*.tsx",
-    "./tu-do/projects/components/*": "./src/components/ui/tu-do/projects/components/*.tsx",
-    "./tu-do/projects/dialogs/*": "./src/components/ui/tu-do/projects/dialogs/*.tsx",
-    "./tu-do/projects/hooks/*": "./src/components/ui/tu-do/projects/hooks/*.ts",
-    "./tu-do/projects/projectId/*": "./src/components/ui/tu-do/projects/projectId/*.tsx",
-    "./tu-do/projects/projectId/components/*": "./src/components/ui/tu-do/projects/projectId/components/*.tsx",
-    "./tu-do/projects/projectId/components/overview/*": "./src/components/ui/tu-do/projects/projectId/components/overview/*.tsx",
-    "./tu-do/projects/projectId/dialogs/*": "./src/components/ui/tu-do/projects/projectId/dialogs/*.tsx",
-    "./tu-do/projects/projectId/hooks/*": "./src/components/ui/tu-do/projects/projectId/hooks/*.ts",
-    "./tu-do/shared/task-detail-page": {
-      "types": "./src/components/ui/tu-do/shared/task-detail-page.tsx",
-      "import": "./src/components/ui/tu-do/shared/task-detail-page.tsx"
-    },
-    "./tu-do/shared/text-diff-viewer": {
-      "types": "./src/components/ui/tu-do/shared/text-diff-viewer.tsx",
-      "import": "./src/components/ui/tu-do/shared/text-diff-viewer.tsx"
-    },
     "./lib/template-background": {
       "types": "./src/lib/template-background.ts",
       "import": "./src/lib/template-background.ts"
@@ -466,7 +389,43 @@
       "types": "./src/components/ui/finance/debts/index.ts",
       "import": "./src/components/ui/finance/debts/index.ts"
     },
-    "./*": "./src/components/ui/*.tsx"
+    "./*": "./src/components/ui/*.tsx",
+    "./lib/task-personal-external": {
+      "types": "./src/lib/task-personal-external.ts",
+      "import": "./src/lib/task-personal-external.ts"
+    },
+    "./lib/tasks-app-url": {
+      "types": "./src/lib/tasks-app-url.ts",
+      "import": "./src/lib/tasks-app-url.ts"
+    },
+    "./lib/task-open-events": {
+      "types": "./src/lib/task-open-events.ts",
+      "import": "./src/lib/task-open-events.ts"
+    },
+    "./lib/calendar/planning-query-client": {
+      "types": "./src/lib/calendar/planning-query-client.ts",
+      "import": "./src/lib/calendar/planning-query-client.ts"
+    },
+    "./lib/calendar/preview-engine": {
+      "types": "./src/lib/calendar/preview-engine.ts",
+      "import": "./src/lib/calendar/preview-engine.ts"
+    },
+    "./time-tracker/types": {
+      "types": "./src/components/ui/time-tracker/types.ts",
+      "import": "./src/components/ui/time-tracker/types.ts"
+    },
+    "./text-editor/editor": {
+      "types": "./src/components/ui/text-editor/editor.tsx",
+      "import": "./src/components/ui/text-editor/editor.tsx"
+    },
+    "./text-editor/mention-extension": {
+      "types": "./src/components/ui/text-editor/mention-extension.tsx",
+      "import": "./src/components/ui/text-editor/mention-extension.tsx"
+    },
+    "./text-editor/text-replacements": {
+      "types": "./src/components/ui/text-editor/text-replacements.ts",
+      "import": "./src/components/ui/text-editor/text-replacements.ts"
+    }
   },
   "packageManager": "bun@1.3.14"
 }

package/src/components/ui/calendar-app/calendar-client-page.tsx

@@ -7,12 +7,20 @@ import type {
 } from '@tuturuuu/types';
 import { SmartCalendar } from '@tuturuuu/ui/legacy/calendar/smart-calendar';
 import { useLocale, useTranslations } from 'next-intl';
-import { useState } from 'react';
-import { CalendarHeaderActions } from './components/calendar-header-actions';
+import { type ComponentType, useState } from 'react';
 import { RequireWorkspaceTimezoneDialog } from './components/require-workspace-timezone-dialog';
 import { useCalendarSettings } from './hooks';
 
+export interface CalendarHeaderActionsProps {
+  enableSmartScheduling: boolean;
+  workspaceId: string;
+}
+
+export type CalendarHeaderActionsComponent =
+  ComponentType<CalendarHeaderActionsProps>;
+
 interface CalendarClientPageProps {
+  HeaderActions: CalendarHeaderActionsComponent;
   experimentalGoogleToken?: WorkspaceCalendarGoogleTokenClient | null;
   workspace: Workspace;
   enableSmartScheduling: boolean;
@@ -22,6 +30,7 @@ export function CalendarClientPage({
   experimentalGoogleToken,
   workspace,
   enableSmartScheduling,
+  HeaderActions,
 }: CalendarClientPageProps) {
   const t = useTranslations('calendar');
   const locale = useLocale();
@@ -34,7 +43,7 @@ export function CalendarClientPage({
   const needsCalendarGate = !calendarGateCompleted && settingsNeedGate;
 
   const extras = (
-    <CalendarHeaderActions
+    <HeaderActions
       workspaceId={workspace.id}
       enableSmartScheduling={enableSmartScheduling}
     />

package/src/components/ui/calendar-app/calendar-page-shell.tsx

@@ -4,59 +4,69 @@ import type {
   WorkspaceCalendarGoogleTokenClient,
 } from '@tuturuuu/types';
 import { CalendarSyncProvider } from '@tuturuuu/ui/hooks/use-calendar-sync';
-import { TaskDialogWrapper } from '@tuturuuu/ui/tu-do/shared/task-dialog-wrapper';
+import type { ComponentType } from 'react';
 import type { ExtendedWorkspaceTask } from '../time-tracker/types';
-import { CalendarClientPage } from './calendar-client-page';
-import TasksSidebar from './components/tasks-sidebar';
+import {
+  CalendarClientPage,
+  type CalendarHeaderActionsComponent,
+} from './calendar-client-page';
+
+export interface CalendarTasksSidebarProps {
+  locale: string;
+  resolvedWsId: string;
+  tasks?: ExtendedWorkspaceTask[];
+  userId: string;
+}
+
+export type CalendarTasksSidebarComponent =
+  ComponentType<CalendarTasksSidebarProps>;
 
 interface CalendarPageShellProps {
   calendarConnections: CalendarConnection[] | null;
   enableSmartScheduling: boolean;
   experimentalGoogleToken?: WorkspaceCalendarGoogleTokenClient | null;
-  isPersonalWorkspace: boolean;
+  HeaderActions: CalendarHeaderActionsComponent;
   locale: string;
   smartSchedulingTasks?: ExtendedWorkspaceTask[];
   userId: string;
   workspace: Workspace;
+  TasksSidebar: CalendarTasksSidebarComponent;
 }
 
 export function CalendarPageShell({
   calendarConnections,
   enableSmartScheduling,
   experimentalGoogleToken,
-  isPersonalWorkspace,
+  HeaderActions,
   locale,
   smartSchedulingTasks = [],
   userId,
   workspace,
+  TasksSidebar,
 }: CalendarPageShellProps) {
   return (
-    <TaskDialogWrapper
-      isPersonalWorkspace={isPersonalWorkspace}
+    <CalendarSyncProvider
       wsId={workspace.id}
+      experimentalGoogleToken={experimentalGoogleToken}
+      initialCalendarConnections={calendarConnections || []}
     >
-      <CalendarSyncProvider
-        wsId={workspace.id}
-        experimentalGoogleToken={experimentalGoogleToken}
-        initialCalendarConnections={calendarConnections || []}
-      >
-        <div className="flex h-[calc(100vh-2rem)]">
-          <CalendarClientPage
-            experimentalGoogleToken={experimentalGoogleToken}
-            workspace={workspace}
-            enableSmartScheduling={enableSmartScheduling}
+      <div className="flex h-[calc(100vh-2rem)]">
+        <CalendarClientPage
+          experimentalGoogleToken={experimentalGoogleToken}
+          workspace={workspace}
+          enableSmartScheduling={enableSmartScheduling}
+          HeaderActions={HeaderActions}
+        />
+        {enableSmartScheduling && (
+          <TasksSidebar
+            resolvedWsId={workspace.id}
+            locale={locale}
+            userId={userId}
+            tasks={smartSchedulingTasks}
           />
-          {enableSmartScheduling && (
-            <TasksSidebar
-              resolvedWsId={workspace.id}
-              locale={locale}
-              userId={userId}
-              tasks={smartSchedulingTasks}
-            />
-          )}
-        </div>
-      </CalendarSyncProvider>
-    </TaskDialogWrapper>
+        )}
+      </div>
+    </CalendarSyncProvider>
   );
 }
 

package/src/components/ui/custom/notification-popover-client.tsx

@@ -32,12 +32,12 @@ import {
   useUnreadCount,
   useUpdateNotification,
 } from '@tuturuuu/ui/hooks/use-notifications';
-import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
-import { toast } from '@tuturuuu/ui/sonner';
 import {
   dispatchRequestOpenTask,
   waitForTaskOpenResult,
-} from '@tuturuuu/ui/tu-do/shared/task-open-events';
+} from '@tuturuuu/ui/lib/task-open-events';
+import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
+import { toast } from '@tuturuuu/ui/sonner';
 import { cn } from '@tuturuuu/utils/format';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';

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>