@tuturuuu/ui 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [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)
+
+
+### Bug Fixes
+
+* **cli:** preserve markdown tables in task descriptions ([9faf8ba](https://github.com/tutur3u/platform/commit/9faf8ba44b92565a9dfc2949c496654fc1fea9b3))
+* **tasks:** refresh task template placeholders ([0c3c309](https://github.com/tutur3u/platform/commit/0c3c30935f67e3e64d548c8a13584fd597e887b8))
+* **ui:** stabilize task property popover handoff ([8fb2e62](https://github.com/tutur3u/platform/commit/8fb2e62904d34a3ae7894bfbbb66c285fcf1a1bd))
+
 ## [0.11.0](https://github.com/tutur3u/platform/compare/ui-v0.10.0...ui-v0.11.0) (2026-06-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -24,42 +24,42 @@
     "@hookform/resolvers": "^5.4.0",
     "@json-render/core": "^0.19.0",
     "@json-render/react": "^0.19.0",
-    "@radix-ui/react-accordion": "^1.2.14",
-    "@radix-ui/react-alert-dialog": "^1.1.17",
-    "@radix-ui/react-aspect-ratio": "^1.1.10",
-    "@radix-ui/react-avatar": "^1.2.0",
-    "@radix-ui/react-checkbox": "^1.3.5",
-    "@radix-ui/react-collapsible": "^1.1.14",
-    "@radix-ui/react-context-menu": "^2.3.1",
-    "@radix-ui/react-dialog": "^1.1.17",
-    "@radix-ui/react-dropdown-menu": "^2.1.18",
-    "@radix-ui/react-hover-card": "^1.1.17",
-    "@radix-ui/react-label": "^2.1.10",
-    "@radix-ui/react-menubar": "^1.1.18",
-    "@radix-ui/react-navigation-menu": "^1.2.16",
-    "@radix-ui/react-popover": "^1.1.17",
-    "@radix-ui/react-progress": "^1.1.10",
-    "@radix-ui/react-radio-group": "^1.4.1",
-    "@radix-ui/react-scroll-area": "^1.2.12",
-    "@radix-ui/react-select": "^2.3.1",
-    "@radix-ui/react-separator": "^1.1.10",
-    "@radix-ui/react-slider": "^1.4.1",
+    "@radix-ui/react-accordion": "^1.2.15",
+    "@radix-ui/react-alert-dialog": "^1.1.18",
+    "@radix-ui/react-aspect-ratio": "^1.1.11",
+    "@radix-ui/react-avatar": "^1.2.1",
+    "@radix-ui/react-checkbox": "^1.3.6",
+    "@radix-ui/react-collapsible": "^1.1.15",
+    "@radix-ui/react-context-menu": "^2.3.2",
+    "@radix-ui/react-dialog": "^1.1.18",
+    "@radix-ui/react-dropdown-menu": "^2.1.19",
+    "@radix-ui/react-hover-card": "^1.1.18",
+    "@radix-ui/react-label": "^2.1.11",
+    "@radix-ui/react-menubar": "^1.1.19",
+    "@radix-ui/react-navigation-menu": "^1.2.17",
+    "@radix-ui/react-popover": "^1.1.18",
+    "@radix-ui/react-progress": "^1.1.11",
+    "@radix-ui/react-radio-group": "^1.4.2",
+    "@radix-ui/react-scroll-area": "^1.2.13",
+    "@radix-ui/react-select": "^2.3.2",
+    "@radix-ui/react-separator": "^1.1.11",
+    "@radix-ui/react-slider": "^1.4.2",
     "@radix-ui/react-slot": "^1.3.0",
-    "@radix-ui/react-switch": "^1.3.1",
-    "@radix-ui/react-tabs": "^1.1.15",
-    "@radix-ui/react-toast": "^1.2.17",
-    "@radix-ui/react-toggle": "^1.1.12",
-    "@radix-ui/react-toggle-group": "^1.1.13",
-    "@radix-ui/react-tooltip": "^1.2.10",
+    "@radix-ui/react-switch": "^1.3.2",
+    "@radix-ui/react-tabs": "^1.1.16",
+    "@radix-ui/react-toast": "^1.2.18",
+    "@radix-ui/react-toggle": "^1.1.13",
+    "@radix-ui/react-toggle-group": "^1.1.14",
+    "@radix-ui/react-tooltip": "^1.2.11",
     "@streamdown/cjk": "^1.0.3",
     "@streamdown/code": "^1.1.1",
     "@streamdown/math": "^1.0.2",
     "@streamdown/mermaid": "^1.0.2",
     "@tanstack/react-hotkeys": "^0.10.0",
     "@tanstack/react-pacer": "^0.22.1",
-    "@tanstack/react-query": "^5.101.1",
+    "@tanstack/react-query": "^5.101.2",
     "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.14.3",
+    "@tanstack/react-virtual": "^3.14.5",
     "@tiptap/core": "3.27.1",
     "@tiptap/extension-collaboration": "3.27.1",
     "@tiptap/extension-collaboration-caret": "3.27.1",
@@ -88,9 +88,9 @@
     "@tuturuuu/apis": "0.7.0",
     "@tuturuuu/hooks": "0.0.2",
     "@tuturuuu/icons": "0.0.6",
-    "@tuturuuu/internal-api": "0.12.0",
+    "@tuturuuu/internal-api": "0.14.0",
     "@tuturuuu/supabase": "0.4.0",
-    "@tuturuuu/utils": "0.11.0",
+    "@tuturuuu/utils": "0.12.1",
     "@types/debug": "^4.1.13",
     "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.1",
@@ -102,18 +102,18 @@
     "debug": "^4.4.3",
     "embla-carousel-react": "^8.6.0",
     "eventemitter3": "^5.0.4",
-    "framer-motion": "^12.41.0",
+    "framer-motion": "^12.42.2",
     "gsap": "^3.15.0",
-    "html2canvas-pro": "^2.1.1",
+    "html2canvas-pro": "^2.2.1",
     "input-otp": "^1.4.2",
     "katex": "^0.17.0",
     "lodash": "4.18.1",
     "moment": "^2.30.1",
-    "motion": "^12.41.0",
-    "next": "^16.2.9",
-    "next-intl": "^4.13.0",
+    "motion": "^12.42.2",
+    "next": "^16.3.0-preview.5",
+    "next-intl": "^4.13.1",
     "next-themes": "^0.4.6",
-    "nuqs": "^2.8.9",
+    "nuqs": "^2.9.0",
     "prosemirror-state": "^1.4.4",
     "qrcode.react": "^4.2.0",
     "react": "^19.2.7",
@@ -126,9 +126,9 @@
     "react-papaparse": "^4.4.0",
     "react-pdf": "^10.4.1",
     "react-resizable": "^4.0.2",
-    "react-resizable-panels": "^4.11.0",
+    "react-resizable-panels": "^4.12.0",
     "react-syntax-highlighter": "^16.1.1",
-    "recharts": "3.9.0",
+    "recharts": "3.9.1",
     "sonner": "^2.0.7",
     "streamdown": "^2.5.0",
     "tailwind-scrollbar": "^4.0.2",
@@ -143,34 +143,34 @@
     "zod": "^4.4.3"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.3.1",
+    "@tailwindcss/postcss": "^4.3.2",
     "@tailwindcss/typography": "^0.5.20",
-    "@tanstack/react-query": "^5.101.1",
+    "@tanstack/react-query": "^5.101.2",
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@tuturuuu/types": "0.13.0",
+    "@tuturuuu/types": "0.14.0",
     "@tuturuuu/typescript-config": "0.1.1",
     "@types/html2canvas": "^1.0.0",
     "@types/lodash": "^4.17.24",
-    "@types/node": "^26.0.0",
+    "@types/node": "^26.0.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/react-resizable": "^4.0.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/uuid": "^11.0.0",
     "@vitejs/plugin-react": "^6.0.3",
-    "autoprefixer": "^10.5.0",
+    "autoprefixer": "^10.5.2",
     "jsdom": "^29.1.1",
-    "postcss": "^8.5.14",
+    "postcss": "^8.5.16",
     "postcss-load-config": "^6.0.1",
-    "tailwindcss": "^4.3.1",
+    "tailwindcss": "^4.3.2",
     "typescript": "7.0.1-rc",
     "uuid": "^14.0.1",
     "vitest": "^4.1.9"
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^5.101.1",
+    "@tanstack/react-query": "^5.101.2",
     "@tanstack/react-table": "^8.21.3"
   },
   "exports": {

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(':');
+}

package/src/components/ui/storefront/cart-summary-parts.tsx

@@ -18,7 +18,8 @@ import type {
 } from './types';
 import {
   formatStorefrontPrice,
-  getStorefrontLinePrice,
+  getStorefrontBundleSelectionLabels,
+  getStorefrontCartLineSubtotal,
   getStorefrontVariantLabel,
   storefrontCartLineKey,
 } from './utils';
@@ -229,20 +230,30 @@ function CartLines({
 }) {
   return (
     <div className="-mr-1 grid max-h-72 gap-3 overflow-y-auto pr-1">
-      {cartEntries.map(({ line, listing, variant }) => {
-        const unitPrice = getStorefrontLinePrice(listing, variant);
+      {cartEntries.map(({ bundle, line, listing, variant }) => {
+        const selectedSubtotal = getStorefrontCartLineSubtotal({
+          bundle,
+          line,
+          listing,
+          variant,
+        });
         const variantLabel = variant
           ? getStorefrontVariantLabel(variant)
           : null;
-        const lineTotal = formatStorefrontPrice(
-          unitPrice * line.quantity,
-          currency
+        const selectionLabels = getStorefrontBundleSelectionLabels(
+          bundle,
+          line
         );
+        const lineTotal = formatStorefrontPrice(selectedSubtotal, currency);
 
         return (
           <div
             className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 gap-y-1 text-sm"
-            key={storefrontCartLineKey(line.listingId, line.variantId)}
+            key={storefrontCartLineKey(
+              line.listingId,
+              line.variantId,
+              line.selectionKey
+            )}
           >
             <div className="min-w-0">
               <p className="line-clamp-2 break-words font-medium leading-5">
@@ -253,8 +264,17 @@ function CartLines({
                   {variantLabel}
                 </p>
               ) : null}
+              {selectionLabels.length ? (
+                <p className="line-clamp-2 break-words text-muted-foreground text-xs">
+                  {selectionLabels.join(', ')}
+                </p>
+              ) : null}
               <p className="text-muted-foreground text-xs tabular-nums">
-                {line.quantity} × {formatStorefrontPrice(unitPrice, currency)}
+                {line.quantity} ×{' '}
+                {formatStorefrontPrice(
+                  Math.round(selectedSubtotal / Math.max(1, line.quantity)),
+                  currency
+                )}
               </p>
             </div>
             <span

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

@@ -21,6 +21,7 @@ export function StorefrontListingCard({
   labels,
   listing,
   onDecrement,
+  onConfigureBundle,
   onIncrement,
   onOpenDetail,
   quantity,
@@ -33,6 +34,7 @@ export function StorefrontListingCard({
   labels: StorefrontSurfaceLabels;
   listing: InventoryStorefrontListing;
   onDecrement?: (listingId: string, variantId?: string | null) => void;
+  onConfigureBundle?: () => void;
   onIncrement?: (
     listingId: string,
     maxQuantity: number,
@@ -45,6 +47,7 @@ export function StorefrontListingCard({
   surfaceClassName: string;
 }) {
   const hasVariants = listingHasVariants(listing);
+  const needsBundleConfiguration = Boolean(onConfigureBundle);
   const limit = getStorefrontListingLimit(listing);
   const disabled = limit === 0 || quantity >= limit;
   const canChange = Boolean(onIncrement || onDecrement);
@@ -139,10 +142,10 @@ export function StorefrontListingCard({
             </p>
           ) : null}
         </div>
-        {hasVariants ? (
+        {hasVariants || needsBundleConfiguration ? (
           <AccentButton
-            disabled={limit === 0 || !openDetail}
-            onClick={openDetail}
+            disabled={limit === 0 || (!openDetail && !onConfigureBundle)}
+            onClick={needsBundleConfiguration ? onConfigureBundle : openDetail}
             radius={radius}
           >
             <SlidersHorizontal className="h-4 w-4" />