@tuturuuu/ui 0.11.1 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [0.13.0](https://github.com/tutur3u/platform/compare/ui-v0.12.0...ui-v0.13.0) (2026-07-05)
+
+
+### Features
+
+* **satellite:** open settings on Cmd/Ctrl+, in satellite apps ([841f425](https://github.com/tutur3u/platform/commit/841f42557dd49eb31fd797900b1ec6ade6642dba))
+
+
+### Bug Fixes
+
+* **tasks:** harden satellite task route hydration ([9d51a38](https://github.com/tutur3u/platform/commit/9d51a38ad948ebb398bec794f082f2bbf8d466cc))
+* **tasks:** keep personal board moves on workspace route ([60e29b0](https://github.com/tutur3u/platform/commit/60e29b093314b3b185f3f63a69042a665644ed3d))
+* **tasks:** keep personal moves off placement API ([d8c41d7](https://github.com/tutur3u/platform/commit/d8c41d790f5edbe637b9ce71bbd5040b7fddbfa5))
+* **tasks:** restore satellite resource access ([ec5e0a8](https://github.com/tutur3u/platform/commit/ec5e0a8d75398047e0151ae2ac3cd9a25a4fd675))
+* **tasks:** route native personal task moves normally ([5bbba3c](https://github.com/tutur3u/platform/commit/5bbba3c3f193e722cc87cdfe2eb2734f61442cd0))
+
+## [0.12.0](https://github.com/tutur3u/platform/compare/ui-v0.11.1...ui-v0.12.0) (2026-07-03)
+
+
+### Features
+
+* **inventory:** add revenue share and category bundles ([20b2e1e](https://github.com/tutur3u/platform/commit/20b2e1e5302d1db275766b7b4b92d9bdf69de04a))
+
 ## [0.11.1](https://github.com/tutur3u/platform/compare/ui-v0.11.0...ui-v0.11.1) (2026-07-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.11.1",
+  "version": "0.13.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -85,12 +85,12 @@
     "@tiptap/react": "3.27.1",
     "@tiptap/starter-kit": "3.27.1",
     "@tuturuuu/ai": "0.2.2",
-    "@tuturuuu/apis": "0.7.0",
+    "@tuturuuu/apis": "0.7.1",
     "@tuturuuu/hooks": "0.0.2",
     "@tuturuuu/icons": "0.0.6",
-    "@tuturuuu/internal-api": "0.13.0",
+    "@tuturuuu/internal-api": "0.14.1",
     "@tuturuuu/supabase": "0.4.0",
-    "@tuturuuu/utils": "0.12.0",
+    "@tuturuuu/utils": "0.13.0",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
@@ -149,7 +149,7 @@
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@tuturuuu/types": "0.13.1",
+    "@tuturuuu/types": "0.14.0",
     "@tuturuuu/typescript-config": "0.1.1",
     "@types/html2canvas": "^1.0.0",
     "@types/lodash": "^4.17.24",

package/src/components/ui/calendar-app/components/habits-panel.tsx

@@ -15,6 +15,7 @@ import { getRecurrenceDescription } from '@tuturuuu/types/primitives/Habit';
 import { cn } from '@tuturuuu/utils/format';
 import Link from 'next/link';
 import { useState } from 'react';
+import { getTaskApiUrl, getTasksAppUrl } from '../../../../lib/tasks-app-url';
 import { Badge } from '../../badge';
 import { Button } from '../../button';
 import { Card, CardContent } from '../../card';
@@ -65,7 +66,9 @@ export function HabitsPanel({ wsId }: HabitsPanelProps) {
   } = useQuery({
     queryKey: ['habits', wsId],
     queryFn: async () => {
-      const response = await fetch(`/api/v1/workspaces/${wsId}/habits`);
+      const response = await fetch(
+        getTaskApiUrl(`/api/v1/workspaces/${wsId}/habits`)
+      );
       if (!response.ok) {
         throw new Error('Failed to fetch habits');
       }
@@ -308,7 +311,7 @@ export function HabitsPanel({ wsId }: HabitsPanelProps) {
 
       {/* Footer */}
       <div className="border-t p-3">
-        <Link href={`/${wsId}/tasks/habits`}>
+        <Link href={getTasksAppUrl(`/${wsId}/habits`)}>
           <Button variant="outline" size="sm" className="w-full">
             Manage Habits
           </Button>

package/src/components/ui/calendar-app/components/priority-view.tsx

@@ -32,6 +32,7 @@ import { useRouter } from 'next/navigation';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 import { useCalendar } from '../../../../hooks/use-calendar';
+import { getTaskApiUrl } from '../../../../lib/tasks-app-url';
 import { Progress } from '../../progress';
 import { toast } from '../../sonner';
 import type { ExtendedWorkspaceTask } from '../../time-tracker/types';
@@ -263,9 +264,11 @@ export default function PriorityView({
       const results = await Promise.allSettled(
         tasksToFetchSchedule.map(async (task) => {
           const response = await fetch(
-            isPersonalWorkspace
-              ? `/api/v1/users/me/tasks/${task.id}/schedule`
-              : `/api/v1/workspaces/${task.ws_id ?? wsId}/tasks/${task.id}/schedule`,
+            getTaskApiUrl(
+              isPersonalWorkspace
+                ? `/api/v1/users/me/tasks/${task.id}/schedule`
+                : `/api/v1/workspaces/${task.ws_id ?? wsId}/tasks/${task.id}/schedule`
+            ),
             { cache: 'no-store' }
           );
           if (!response.ok) {
@@ -378,10 +381,15 @@ export default function PriorityView({
     const task = combinedTasks.find((t) => t.id === taskId);
     const taskWsId = task?.ws_id ?? wsId;
 
-    const response = await fetch(`/api/${taskWsId}/task/${taskId}/edit`, {
-      method: 'PATCH',
-      body: JSON.stringify({ priority: newPriority }),
-    });
+    const response = await fetch(
+      getTaskApiUrl(`/api/${taskWsId}/task/${taskId}/edit`),
+      {
+        method: 'PATCH',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ priority: newPriority }),
+      }
+    );
 
     if (!response.ok) {
       throw new Error('Failed to update task priority');

package/src/components/ui/calendar-app/components/scheduling-dialog.tsx

@@ -17,6 +17,7 @@ import { createClient } from '@tuturuuu/supabase/next/client';
 import { cn } from '@tuturuuu/utils/format';
 import { useRouter } from 'next/navigation';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { getTaskApiUrl } from '../../../../lib/tasks-app-url';
 import { Button } from '../../button';
 import {
   Dialog,
@@ -226,9 +227,12 @@ export function SchedulingDialog({
     queryKey: ['task-personal-schedule', task?.id, open],
     enabled: open && !!task?.id,
     queryFn: async () => {
-      const res = await fetch(`/api/v1/users/me/tasks/${task!.id}/schedule`, {
-        cache: 'no-store',
-      });
+      const res = await fetch(
+        getTaskApiUrl(`/api/v1/users/me/tasks/${task!.id}/schedule`),
+        {
+          cache: 'no-store',
+        }
+      );
       if (!res.ok) return null;
       return (await res.json()) as null | {
         task: {

package/src/components/ui/calendar-app/components/task-scheduler-panel.tsx

@@ -15,6 +15,7 @@ import {
 import type { TaskWithScheduling } from '@tuturuuu/types';
 import { cn } from '@tuturuuu/utils/format';
 import { useState } from 'react';
+import { getTaskApiUrl } from '../../../../lib/tasks-app-url';
 import { Badge } from '../../badge';
 import { Button } from '../../button';
 import { Input } from '../../input';
@@ -147,11 +148,14 @@ export function TaskSchedulerPanel({
 
     try {
       const response = await fetch(
-        isPersonalWorkspace
-          ? `/api/v1/users/me/tasks/${task.id}/schedule`
-          : `/api/v1/workspaces/${wsId}/tasks/${task.id}/schedule`,
+        getTaskApiUrl(
+          isPersonalWorkspace
+            ? `/api/v1/users/me/tasks/${task.id}/schedule`
+            : `/api/v1/workspaces/${wsId}/tasks/${task.id}/schedule`
+        ),
         {
           method: 'POST',
+          credentials: 'include',
           headers: { 'Content-Type': 'application/json' },
         }
       );

package/src/components/ui/calendar-app/components/time-tracker/index.tsx

@@ -17,6 +17,7 @@ import {
 import type { TimeTrackingCategory } from '@tuturuuu/types';
 import { cn } from '@tuturuuu/utils/format';
 import { useCallback, useEffect, useState } from 'react';
+import { getTaskApiUrl } from '../../../../../lib/tasks-app-url';
 import { Badge } from '../../../badge';
 import { Button } from '../../../button';
 import { Card, CardContent, CardHeader, CardTitle } from '../../../card';
@@ -201,15 +202,19 @@ export default function TimeTracker({ wsId, tasks = [] }: TimeTrackerProps) {
     setIsCreatingTask(true);
 
     try {
-      const response = await fetch(`/api/v1/workspaces/${wsId}/tasks`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          name: newTaskName,
-          description: newTaskDescription || null,
-          listId: selectedListId,
-        }),
-      });
+      const response = await fetch(
+        getTaskApiUrl(`/api/v1/workspaces/${wsId}/tasks`),
+        {
+          method: 'POST',
+          credentials: 'include',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            name: newTaskName,
+            description: newTaskDescription || null,
+            listId: selectedListId,
+          }),
+        }
+      );
 
       if (!response.ok) throw new Error('Failed to create task');
 

package/src/components/ui/custom/settings/task-settings.tsx

@@ -27,6 +27,7 @@ import { toast } from '@tuturuuu/ui/sonner';
 import { Switch } from '@tuturuuu/ui/switch';
 import { useTranslations } from 'next-intl';
 import { useEffect } from 'react';
+import { getTaskApiUrl } from '../../../../lib/tasks-app-url';
 import {
   normalizeTaskDialogPresentation,
   TASK_DIALOG_DEFAULT_PRESENTATION_CONFIG_ID,
@@ -145,7 +146,9 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
   const { data: settings, isLoading } = useQuery({
     queryKey: ['user-task-settings'],
     queryFn: async (): Promise<TaskSettingsData> => {
-      const res = await fetch('/api/v1/users/task-settings');
+      const res = await fetch(getTaskApiUrl('/api/v1/users/task-settings'), {
+        credentials: 'include',
+      });
       if (!res.ok) throw new Error('Failed to fetch task settings');
       return res.json();
     },
@@ -162,8 +165,9 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
 
   const updateSettings = useMutation({
     mutationFn: async (data: Partial<TaskSettingsData>) => {
-      const res = await fetch('/api/v1/users/task-settings', {
+      const res = await fetch(getTaskApiUrl('/api/v1/users/task-settings'), {
         method: 'PATCH',
+        credentials: 'include',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(data),
       });

package/src/components/ui/custom/tables/data-table.tsx

@@ -9,6 +9,7 @@ import {
   getFacetedUniqueValues,
   getFilteredRowModel,
   getSortedRowModel,
+  type Row,
   type SortingState,
   useReactTable,
   type VisibilityState,
@@ -27,6 +28,15 @@ import {
 import { DataTablePagination } from './data-table-pagination';
 import { DataTableToolbar } from './data-table-toolbar';
 
+function isInteractiveTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) return false;
+  return Boolean(
+    target.closest(
+      'a, button, input, select, textarea, label, [role="menuitem"], [data-no-row-activate]'
+    )
+  );
+}
+
 /**
  * Options for column generator functions.
  * Using named parameters improves readability and maintainability.
@@ -79,6 +89,8 @@ export interface DataTableProps<TData, TValue> {
   /** Custom toolbar actions rendered directly (not wrapped in dialogs) */
   toolbarActions?: ReactNode;
   className?: string;
+  tableCardClassName?: string;
+  tableClassName?: string;
   preserveParams?: string[];
   onRefresh?: () => void;
   selectedRowsActions?: (selectedRows: TData[]) => ReactNode;
@@ -87,6 +99,7 @@ export interface DataTableProps<TData, TValue> {
 
   onRowClick?: (row: TData) => void;
   onRowDoubleClick?: (row: TData) => void;
+  getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
 
   setParams?: (params: {
     page?: number;
@@ -127,11 +140,14 @@ export function DataTable<TData, TValue>({
   toolbarExportContent,
   toolbarActions,
   className,
+  tableCardClassName,
+  tableClassName,
   onRefresh,
   selectedRowsActions,
   onSearch,
   onRowClick,
   onRowDoubleClick,
+  getRowId,
   setParams,
   resetParams,
   columnGenerator,
@@ -169,6 +185,7 @@ export function DataTable<TData, TValue>({
         : undefined,
     enableRowSelection: true,
     autoResetPageIndex: true,
+    getRowId,
     onRowSelectionChange: setRowSelection,
     onSortingChange: enableServerSideSorting
       ? (updaterOrValue) => {
@@ -232,16 +249,23 @@ export function DataTable<TData, TValue>({
           toolbarActions={toolbarActions}
         />
       )}
-      <Card>
-        <Table>
+      <Card className={tableCardClassName}>
+        <Table className={tableClassName}>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
+                  const meta = header.column.columnDef.meta as
+                    | { className?: string }
+                    | undefined;
+
                   return (
                     <TableHead
                       key={header.id}
-                      className="bg-foreground/5 font-semibold text-foreground/70 first:rounded-tl-xl last:rounded-tr-xl"
+                      className={cn(
+                        'bg-foreground/5 font-semibold text-foreground/70 first:rounded-tl-xl last:rounded-tr-xl',
+                        meta?.className
+                      )}
                     >
                       {header.isPlaceholder
                         ? null
@@ -258,16 +282,42 @@ export function DataTable<TData, TValue>({
           <TableBody>
             {table.getRowModel().rows?.length ? (
               table.getRowModel().rows.map((row) => {
+                const isInteractiveRow = Boolean(
+                  onRowClick || onRowDoubleClick
+                );
                 const tableRow = (
                   <TableRow
                     key={`${namespace}-${row.id}`}
                     data-state={row.getIsSelected() && 'selected'}
-                    className="cursor-pointer"
-                    onClick={() => onRowClick?.(row.original)}
-                    onDoubleClick={() => onRowDoubleClick?.(row.original)}
+                    className={cn(isInteractiveRow && 'cursor-pointer')}
+                    onClick={(event) => {
+                      if (isInteractiveTarget(event.target)) return;
+                      onRowClick?.(row.original);
+                    }}
+                    onDoubleClick={(event) => {
+                      if (isInteractiveTarget(event.target)) return;
+                      onRowDoubleClick?.(row.original);
+                    }}
+                    onKeyDown={(event) => {
+                      if (!onRowClick) return;
+                      if (event.key !== 'Enter' && event.key !== ' ') return;
+                      if (isInteractiveTarget(event.target)) return;
+                      event.preventDefault();
+                      onRowClick(row.original);
+                    }}
+                    tabIndex={onRowClick ? 0 : undefined}
                   >
                     {row.getVisibleCells().map((cell) => (
-                      <TableCell key={`${namespace}-${cell.id}`}>
+                      <TableCell
+                        key={`${namespace}-${cell.id}`}
+                        className={
+                          (
+                            cell.column.columnDef.meta as
+                              | { cellClassName?: string }
+                              | undefined
+                          )?.cellClassName
+                        }
+                      >
                         {flexRender(
                           cell.column.columnDef.cell,
                           cell.getContext()
@@ -293,7 +343,7 @@ export function DataTable<TData, TValue>({
                 >
                   {data
                     ? `${t?.('common.no-results')}.`
-                    : `${t?.('common.loading')}...`}
+                    : `${t?.('common.loading')}…`}
                 </TableCell>
               </TableRow>
             )}

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

@@ -0,0 +1,249 @@
+'use client';
+
+import { Check, PackagePlus, Search } from '@tuturuuu/icons';
+import type {
+  InventoryBundle,
+  InventoryBundleCategoryCandidate,
+  InventoryStorefrontListing,
+} from '@tuturuuu/internal-api/inventory';
+import { cn } from '@tuturuuu/utils/format';
+import { useMemo, useState } from 'react';
+import { Badge } from '../badge';
+import { Button } from '../button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../dialog';
+import { Input } from '../input';
+import type { StorefrontCartLine, StorefrontSurfaceLabels } from './types';
+import {
+  createStorefrontBundleSelectionKey,
+  formatStorefrontPrice,
+  getStorefrontBundleSelectionSubtotal,
+} from './utils';
+
+type BundleSelectionDialogProps = {
+  bundle: InventoryBundle | null;
+  currency: string;
+  labels: StorefrontSurfaceLabels;
+  listing: InventoryStorefrontListing | null;
+  onAdd?: (line: StorefrontCartLine) => void;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+  radius: string;
+};
+
+export function StorefrontBundleSelectionDialog({
+  bundle,
+  currency,
+  labels,
+  listing,
+  onAdd,
+  onOpenChange,
+  open,
+  radius,
+}: BundleSelectionDialogProps) {
+  const [query, setQuery] = useState('');
+  const [selected, setSelected] = useState<Record<string, string[]>>({});
+  const normalizedQuery = query.trim().toLowerCase();
+  const selections = useMemo(() => {
+    if (!bundle) return {};
+
+    return Object.fromEntries(
+      bundle.categoryComponents.map((component) => {
+        const candidates = component.candidates ?? [];
+        const items = (selected[component.id] ?? []).flatMap((key) => {
+          const candidate = candidates.find(
+            (item) => getCandidateKey(item) === key
+          );
+          return candidate ? [candidateToSelection(candidate)] : [];
+        });
+        return [component.id, items];
+      })
+    );
+  }, [bundle, selected]);
+  const selectionLine: StorefrontCartLine | null =
+    listing && bundle
+      ? {
+          bundleSelections: selections,
+          listingId: listing.id,
+          quantity: 1,
+          selectionKey: createStorefrontBundleSelectionKey(bundle, selections),
+        }
+      : null;
+  const subtotal =
+    bundle && selectionLine
+      ? getStorefrontBundleSelectionSubtotal(bundle, selectionLine)
+      : null;
+  const isComplete =
+    Boolean(bundle?.categoryComponents.length) &&
+    bundle?.categoryComponents.every(
+      (component) =>
+        (selected[component.id]?.length ?? 0) === component.quantityRequired
+    );
+
+  if (!bundle || !listing) return null;
+
+  return (
+    <Dialog
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          setQuery('');
+          setSelected({});
+        }
+        onOpenChange(nextOpen);
+      }}
+      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">
+        <DialogHeader className="text-left">
+          <DialogTitle>{labels.bundleSelectionTitle}</DialogTitle>
+          <p className="text-muted-foreground text-sm">{listing.title}</p>
+        </DialogHeader>
+        <div className="grid gap-2">
+          <label className="relative block">
+            <Search className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              className="h-10 pl-9"
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder={labels.searchBundleItems}
+              value={query}
+            />
+          </label>
+          <p className="rounded-md border border-border bg-muted/25 px-3 py-2 text-muted-foreground text-xs">
+            {labels.cheapestFreePreview}
+          </p>
+        </div>
+        <div className="-mr-1 grid gap-4 overflow-y-auto pr-1">
+          {bundle.categoryComponents.map((component) => {
+            const selectedKeys = selected[component.id] ?? [];
+            const filteredCandidates = (component.candidates ?? []).filter(
+              (candidate) =>
+                !normalizedQuery ||
+                candidate.title.toLowerCase().includes(normalizedQuery)
+            );
+
+            return (
+              <section className="grid gap-2" key={component.id}>
+                <div className="flex items-center justify-between gap-3">
+                  <div className="min-w-0">
+                    <p className="truncate font-medium text-sm">
+                      {component.categoryName}
+                    </p>
+                    <p className="text-muted-foreground text-xs">
+                      {labels.selectedItems
+                        .replace('{selected}', String(selectedKeys.length))
+                        .replace(
+                          '{required}',
+                          String(component.quantityRequired)
+                        )}
+                    </p>
+                  </div>
+                  <Badge
+                    className="border-border bg-background"
+                    variant="outline"
+                  >
+                    {labels.requiredItems.replace(
+                      '{count}',
+                      String(component.quantityRequired)
+                    )}
+                  </Badge>
+                </div>
+                <div className="grid gap-2 sm:grid-cols-2">
+                  {filteredCandidates.map((candidate) => {
+                    const key = getCandidateKey(candidate);
+                    const active = selectedKeys.includes(key);
+                    const full =
+                      !active &&
+                      selectedKeys.length >= component.quantityRequired;
+                    const disabled =
+                      full || candidate.availableQuantity === 0 || !onAdd;
+
+                    return (
+                      <button
+                        className={cn(
+                          'grid min-h-20 gap-1 rounded-lg border bg-background p-3 text-left text-sm transition',
+                          active
+                            ? 'border-[var(--storefront-accent,var(--primary))] bg-[var(--storefront-accent-soft,var(--muted))]'
+                            : 'border-border hover:border-foreground/35',
+                          disabled ? 'cursor-not-allowed opacity-60' : null
+                        )}
+                        disabled={disabled}
+                        key={key}
+                        onClick={() =>
+                          setSelected((current) => ({
+                            ...current,
+                            [component.id]: active
+                              ? selectedKeys.filter((item) => item !== key)
+                              : [...selectedKeys, key],
+                          }))
+                        }
+                        type="button"
+                      >
+                        <span className="flex min-w-0 items-center justify-between gap-2">
+                          <span className="line-clamp-2 font-medium">
+                            {candidate.title}
+                          </span>
+                          {active ? <Check className="h-4 w-4" /> : null}
+                        </span>
+                        <span className="text-muted-foreground text-xs">
+                          {candidate.unitName || candidate.unitId} /{' '}
+                          {candidate.warehouseName || candidate.warehouseId}
+                        </span>
+                        <span className="font-semibold tabular-nums">
+                          {formatStorefrontPrice(candidate.price, currency)}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </section>
+            );
+          })}
+        </div>
+        <div className="flex flex-wrap items-center justify-between gap-3 border-border border-t pt-4">
+          <div className="min-w-0">
+            <p className="text-muted-foreground text-xs">{labels.total}</p>
+            <p className="font-semibold tabular-nums">
+              {formatStorefrontPrice(subtotal ?? 0, currency)}
+            </p>
+          </div>
+          <Button
+            className={cn('min-w-36', radius)}
+            disabled={!isComplete || !selectionLine || !onAdd}
+            onClick={() => {
+              if (!selectionLine || !onAdd) return;
+              onAdd(selectionLine);
+              onOpenChange(false);
+              setQuery('');
+              setSelected({});
+            }}
+            type="button"
+          >
+            <PackagePlus className="h-4 w-4" />
+            {labels.add}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function candidateToSelection(candidate: InventoryBundleCategoryCandidate) {
+  return {
+    listingId: candidate.listingId,
+    productId: candidate.productId,
+    quantity: 1,
+    unitId: candidate.unitId,
+    variantId: candidate.variantId,
+    warehouseId: candidate.warehouseId,
+  };
+}
+
+function getCandidateKey(candidate: InventoryBundleCategoryCandidate) {
+  return [
+    candidate.selectionKind,
+    candidate.listingId ?? '',
+    candidate.variantId ?? '',
+    candidate.productId,
+    candidate.unitId,
+    candidate.warehouseId,
+  ].join(':');
+}