@open-mercato/ui 0.6.4-develop.4178.1.aad9ddaa95 → 0.6.4-develop.4210.1.d412061cfe

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
 Generated lucide registry with 136 icons -> /home/runner/work/open-mercato/open-mercato/packages/ui/src/backend/icons/lucideRegistry.generated.tsx
-[build:ui] found 362 entry points
+[build:ui] found 374 entry points
 [build:ui] built successfully

package/AGENTS.md

@@ -78,6 +78,20 @@ When you need… use this. Details (variants, sizes, props, MUST rules) live in
 | Keyboard shortcut keys | `Kbd`, `KbdShortcut` | `@open-mercato/ui/primitives/kbd` |
 | Entity tag pill | `Tag` (with `TagMap`) | `@open-mercato/ui/primitives/tag` |
 | Breadcrumb navigation (DS-aligned, slash/arrow/dot divider, ARIA correct) | `Breadcrumb` (with `BreadcrumbList` / `BreadcrumbItem` / `BreadcrumbLink` / `BreadcrumbPage` / `BreadcrumbStatic` / `BreadcrumbSeparator` / `BreadcrumbEllipsis`) | `@open-mercato/ui/primitives/breadcrumb` |
+| Scrollable container with DS-styled scrollbars | `ScrollArea` (compound: `ScrollAreaRoot` / `Viewport` / `Scrollbar` / `Thumb` / `Corner`) | `@open-mercato/ui/primitives/scroll-area` |
+| Joined buttons sharing outer border (Save / Save & New / overflow) | `ButtonGroup` (NOT for selection — use `SegmentedControl`) | `@open-mercato/ui/primitives/button-group` |
+| Mutually-exclusive view toggle (All / Active / Archived, 1D / 1W / 1M) | `SegmentedControl` (with `SegmentedControlItem`) | `@open-mercato/ui/primitives/segmented-control` |
+| Continuous numeric selector — single or two-thumb range | `Slider` (`value` MUST be `[number]` or `[number, number]`) | `@open-mercato/ui/primitives/slider` |
+| 1-N star / heart / dot rating (read-only display OR interactive input) | `Rating` (no `onChange` = read-only; `onChange` = interactive) | `@open-mercato/ui/primitives/rating` |
+| Multi-step progress (wizard / onboarding / checkout) | `StepIndicator` (steps[] with `status` per step) | `@open-mercato/ui/primitives/step-indicator` |
+| Color selection (tag color, brand color, category) | `ColorPicker` (swatch popover + optional hex input) | `@open-mercato/ui/primitives/color-picker` |
+| Page navigation for lists outside DataTable | `Pagination` (1-indexed, `total` not `totalPages`) | `@open-mercato/ui/primitives/pagination` |
+| Side sheet / non-blocking overlay (detail pane, secondary form) | `Drawer` (with `DrawerContent` / `DrawerHeader` / `DrawerBody` / `DrawerFooter` / `DrawerClose`) | `@open-mercato/ui/primitives/drawer` |
+| Cmd+K spotlight palette (global navigation / quick actions / universal search) | `CommandMenu` (compound: `CommandMenuContent` / `Input` / `List` / `Group` / `Item` / `Separator` / `Footer`) — auto-filter via `cmdk` | `@open-mercato/ui/primitives/command-menu` |
+| Chronological actor-action timeline (detail panes, audit feeds, customer activity logs) | `ActivityFeed` (compound: `ActivityFeedItem` / `ActivityFeedFileChip` / `ActivityFeedComment` / `ActivityFeedStatusChip`) | `@open-mercato/ui/primitives/activity-feed` |
+| Bell-icon inbox / notification panel (the dropdown that opens from the app shell bell affordance) | `NotificationFeed` (compound: `NotificationFeedHeader` / `NotificationFeedList` / `NotificationFeedItem` / `NotificationFeedFooter` / `NotificationFeedIconBadge`) | `@open-mercato/ui/primitives/notification-feed` |
+| Determinate linear progress bar (job percentage, file upload, onboarding) | `Progress` (`size`: `sm`/`default`/`lg`, `tone`: `accent`/`success`/`warning`/`destructive`/`muted`, optional `label`/`showValue`/`description` slots) | `@open-mercato/ui/primitives/progress` |
+| Determinate circular progress (compact KPI dial, attachment upload thumbnail, sprint completion %) | `CircularProgress` (same `tone`s; `size`: `xs` / `sm` / `default` / `lg`; optional center `showValue` or custom `children`) | `@open-mercato/ui/primitives/progress` |
 | Wrap a `<Link>` as button | `Button asChild` / `IconButton asChild` | — |
 
 ## Critical Primitive Rules

package/dist/backend/DataTable.js

@@ -15,7 +15,7 @@ import {
   SelectTrigger,
   SelectValue
 } from "../primitives/select.js";
-import { CompactSelectTrigger } from "../primitives/compact-select.js";
+import { Pagination } from "../primitives/pagination.js";
 import { Spinner } from "../primitives/spinner.js";
 import { EmptyState } from "../primitives/empty-state.js";
 import { TooltipProvider } from "../primitives/tooltip.js";
@@ -131,6 +131,8 @@ const EXPORT_LABELS = {
 };
 const EMPTY_FILTER_DEFS = [];
 const EMPTY_FILTER_VALUES = Object.freeze({});
+const STICKY_RIGHT_SHADOW_CLASS = "before:absolute before:inset-y-0 before:-left-2 before:w-2 before:bg-gradient-to-l before:from-foreground/8 before:to-transparent before:pointer-events-none";
+const STICKY_LEFT_SHADOW_CLASS = "after:absolute after:inset-y-0 after:-right-2 after:w-2 after:bg-gradient-to-r after:from-foreground/8 after:to-transparent after:pointer-events-none";
 function collectUniqueById(entries, warningScope) {
   const byId = /* @__PURE__ */ new Map();
   for (const entry of entries) {
@@ -1463,7 +1465,7 @@ function DataTable({
           /* @__PURE__ */ jsx(
             Circle,
             {
-              className: `h-3.5 w-3.5 ${normalizedCacheStatus === "hit" ? "text-emerald-500" : "text-amber-500"}`,
+              className: `h-3.5 w-3.5 ${normalizedCacheStatus === "hit" ? "text-status-success-icon" : "text-status-warning-icon"}`,
               strokeWidth: 3
             }
           ),
@@ -1473,66 +1475,30 @@ function DataTable({
     ) : null;
     const pageSizeOptions = Array.isArray(pagination.pageSizeOptions) ? Array.from(new Set(
       [pagination.pageSize, ...pagination.pageSizeOptions].filter((size) => typeof size === "number" && Number.isFinite(size) && size > 0).map((size) => Math.max(1, Math.floor(size)))
-    )).sort((left, right) => left - right) : [];
-    const pageSizeSelect = pageSizeOptions.length > 0 && pagination.onPageSizeChange ? /* @__PURE__ */ jsxs("span", { className: "inline-flex flex-none items-center gap-1.5 whitespace-nowrap", children: [
-      /* @__PURE__ */ jsxs(
-        Select,
+    )).sort((left, right) => left - right) : [10, 25, 50, 100];
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-3 px-4 py-3 border-t", children: [
+      cacheBadge ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center sm:justify-start gap-2 text-sm text-muted-foreground", children: cacheBadge }) : null,
+      /* @__PURE__ */ jsx(
+        Pagination,
         {
-          value: String(pagination.pageSize),
-          onValueChange: (value) => {
-            pagination.onPageSizeChange(Number(value));
+          page,
+          pageSize: pagination.pageSize,
+          total: pagination.total,
+          onPageChange: (next) => {
+            onPageChange(next);
             scrollTableIntoView();
           },
-          children: [
-            /* @__PURE__ */ jsx(
-              CompactSelectTrigger,
-              {
-                className: "min-w-[4rem]",
-                "aria-label": t("ui.dataTable.pagination.rowsPerPage", "Rows per page"),
-                children: /* @__PURE__ */ jsx(SelectValue, {})
-              }
-            ),
-            /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: size }, size)) })
-          ]
+          onPageSizeChange: pagination.onPageSizeChange ? (next) => {
+            pagination.onPageSizeChange(next);
+            scrollTableIntoView();
+          } : void 0,
+          pageSizeOptions,
+          formatPageInfo: () => durationLabel ? t("ui.dataTable.pagination.resultsWithDuration", "Showing {start} to {end} of {total} results in {duration}", { start: startItem, end: endItem, total: pagination.total, duration: durationLabel }) : t("ui.dataTable.pagination.results", "Showing {start} to {end} of {total} results", { start: startItem, end: endItem, total: pagination.total }),
+          formatPageSizeLabel: (size) => `${size} ${t("ui.dataTable.pagination.perPage", "per page")}`,
+          "aria-label": t("ui.dataTable.pagination.navAriaLabel", "Table pagination"),
+          className: "flex-1"
         }
-      ),
-      /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-muted-foreground", children: t("ui.dataTable.pagination.perPage", "per page") })
-    ] }) : null;
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 px-4 py-3 border-t", children: [
-      /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground flex items-center justify-center sm:justify-start gap-2 flex-wrap", children: [
-        /* @__PURE__ */ jsx("span", { children: durationLabel ? t("ui.dataTable.pagination.resultsWithDuration", "Showing {start} to {end} of {total} results in {duration}", { start: startItem, end: endItem, total: pagination.total, duration: durationLabel }) : t("ui.dataTable.pagination.results", "Showing {start} to {end} of {total} results", { start: startItem, end: endItem, total: pagination.total }) }),
-        cacheBadge,
-        pageSizeSelect
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center sm:justify-end gap-2", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            onClick: () => {
-              onPageChange(page - 1);
-              scrollTableIntoView();
-            },
-            disabled: page <= 1,
-            children: t("ui.dataTable.pagination.previous", "Previous")
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "text-sm whitespace-nowrap", children: t("ui.dataTable.pagination.pageInfo", "Page {page} of {totalPages}", { page, totalPages }) }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            onClick: () => {
-              onPageChange(page + 1);
-              scrollTableIntoView();
-            },
-            disabled: page >= totalPages,
-            children: t("ui.dataTable.pagination.next", "Next")
-          }
-        )
-      ] })
+      )
     ] });
   }, [pagination, measuredDurationMs, scrollTableIntoView, t]);
   const resolvedEntityIds = React.useMemo(() => {
@@ -2076,7 +2042,7 @@ function DataTable({
               const columnMeta = header.column.columnDef?.meta;
               const priority = resolvePriority(header.column);
               const isFirstDataColumn = headerIndex === 0;
-              const stickyClass = stickyFirstColumn && isFirstDataColumn ? " sticky left-0 z-10 bg-background" : "";
+              const stickyClass = stickyFirstColumn && isFirstDataColumn ? ` sticky left-0 z-10 bg-background ${STICKY_LEFT_SHADOW_CLASS}` : "";
               const headerCellContent = header.isPlaceholder ? null : /* @__PURE__ */ jsxs(
                 Button,
                 {
@@ -2102,7 +2068,7 @@ function DataTable({
               {
                 className: cn(
                   "w-0 text-right",
-                  stickyActionsColumn && "sticky right-0 z-20 bg-background"
+                  stickyActionsColumn && `sticky right-0 z-20 bg-background ${STICKY_RIGHT_SHADOW_CLASS}`
                 ),
                 children: t("ui.dataTable.actionsColumn", "Actions")
               }
@@ -2178,14 +2144,14 @@ function DataTable({
                         tooltipText = cellValue != null ? String(cellValue) : void 0;
                       }
                       const wrappedContent = shouldTruncate ? /* @__PURE__ */ jsx(TruncatedCell, { maxWidth, tooltipContent: tooltipText, children: content }) : content;
-                      return /* @__PURE__ */ jsx(TableCell, { className: responsiveClass(priority, columnMeta?.hidden) + (isStickyCell ? " sticky left-0 z-10 bg-background" : ""), children: wrappedContent }, cell.id);
+                      return /* @__PURE__ */ jsx(TableCell, { className: responsiveClass(priority, columnMeta?.hidden) + (isStickyCell ? ` sticky left-0 z-10 bg-background ${STICKY_LEFT_SHADOW_CLASS}` : ""), children: wrappedContent }, cell.id);
                     }),
                     rowActions || injectedRowActions.length > 0 ? /* @__PURE__ */ jsx(
                       TableCell,
                       {
                         className: cn(
                           "text-right whitespace-nowrap",
-                          stickyActionsColumn && "sticky right-0 z-10 bg-background"
+                          stickyActionsColumn && `sticky right-0 z-10 bg-background ${STICKY_RIGHT_SHADOW_CLASS}`
                         ),
                         "data-actions-cell": true,
                         children: rowActionsElement