@open-mercato/ui 0.6.4-develop.4121.1.0d7f20d229 → 0.6.4-develop.4133.1.48fc6c8f7b

package/dist/primitives/date-picker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/primitives/date-picker.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport type { Locale } from 'date-fns/locale'\nimport { CalendarIcon } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Popover, PopoverContent, PopoverTrigger } from './popover'\nimport { Calendar } from './calendar'\nimport { Button } from './button'\nimport { LinkButton } from './link-button'\nimport { TimeInput } from '../backend/inputs/TimeInput'\nimport { formatWithPublicDateFormat, resolvePublicDateFormat, resolvePublicDateTimeFormat } from './date-format'\n\nexport type DatePickerFooter = 'apply-cancel' | 'today-clear' | 'none'\n\nexport type DatePickerProps = {\n  value?: Date | null\n  onChange: (value: Date | null) => void\n  placeholder?: string\n  size?: 'sm' | 'default'\n  disabled?: boolean\n  readOnly?: boolean\n  /**\n   * Footer mode in the popover.\n   * - `'apply-cancel'` (default, Figma-aligned): selecting a day stages a draft;\n   *   Apply commits and closes; Cancel reverts and closes.\n   * - `'today-clear'`: legacy behavior \u2014 Today commits today, Clear sets null.\n   * - `'none'`: no footer; selecting a day commits immediately and closes.\n   */\n  footer?: DatePickerFooter\n  /**\n   * Whether selecting a day commits the value and closes the popover.\n   * - In `footer='apply-cancel'`: ignored (commit happens via Apply).\n   * - In `footer='today-clear'`: default `true` for backward compatibility.\n   * - In `footer='none'`: always `true` (popover always closes after selection).\n   */\n  closeOnSelect?: boolean\n  /**\n   * Whether to show the \"Today\" link in `footer='today-clear'` mode. Default `true`.\n   * Only meaningful when `footer='today-clear'`.\n   */\n  showTodayButton?: boolean\n  /**\n   * Whether to show the \"Clear\" link in `footer='today-clear'` mode. Default `true`.\n   * Only meaningful when `footer='today-clear'`.\n   */\n  showClearButton?: boolean\n  withTime?: boolean\n  minuteStep?: number\n  align?: 'start' | 'center' | 'end'\n  minDate?: Date\n  maxDate?: Date\n  locale?: Locale\n  displayFormat?: string\n  className?: string\n  popoverClassName?: string\n  id?: string\n  name?: string\n  required?: boolean\n  'aria-label'?: string\n  'aria-describedby'?: string\n}\n\nfunction extractTime(date: Date): string {\n  return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`\n}\n\nfunction applyTimeToDate(base: Date, time: string): Date {\n  const [hourStr = '0', minuteStr = '0'] = time.split(':')\n  const hour = parseInt(hourStr, 10)\n  const minute = parseInt(minuteStr, 10)\n  const next = new Date(base)\n  next.setHours(isNaN(hour) ? 0 : hour, isNaN(minute) ? 0 : minute, 0, 0)\n  return next\n}\n\nfunction startOfDay(date: Date): Date {\n  const next = new Date(date)\n  next.setHours(0, 0, 0, 0)\n  return next\n}\n\nexport function DatePicker({\n  value,\n  onChange,\n  placeholder,\n  size = 'default',\n  disabled = false,\n  readOnly = false,\n  footer = 'apply-cancel',\n  closeOnSelect,\n  showTodayButton = true,\n  showClearButton = true,\n  withTime = false,\n  minuteStep = 1,\n  align = 'start',\n  minDate,\n  maxDate,\n  locale,\n  displayFormat,\n  className,\n  popoverClassName,\n  id,\n  name,\n  required,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n}: DatePickerProps) {\n  const resolvedCloseOnSelect = closeOnSelect ?? footer === 'today-clear'\n  const t = useT()\n  const [open, setOpen] = React.useState(false)\n  const [draft, setDraft] = React.useState<Date | null>(value ?? null)\n\n  const isInteractive = !disabled && !readOnly\n  const useDraft = footer === 'apply-cancel'\n\n  React.useEffect(() => {\n    if (open) setDraft(value ?? null)\n  }, [open, value])\n\n  const resolvedFormat = withTime\n    ? resolvePublicDateTimeFormat(locale, displayFormat)\n    : resolvePublicDateFormat(locale, displayFormat)\n  const placeholderText = placeholder ?? (\n    withTime\n      ? t('ui.dateTimePicker.placeholder', 'Pick date and time')\n      : t('ui.datePicker.placeholder', 'Pick a date')\n  )\n\n  const formattedValue = React.useMemo(() => {\n    if (!value) return null\n    return formatWithPublicDateFormat(value, resolvedFormat, locale)\n  }, [value, resolvedFormat, locale])\n\n  const handleDaySelect = React.useCallback(\n    (day: Date | undefined) => {\n      if (!day || !isInteractive) return\n      const reference = withTime ? (useDraft ? draft : value) : null\n      const base = withTime\n        ? applyTimeToDate(day, reference ? extractTime(reference) : '00:00')\n        : startOfDay(day)\n      if (useDraft) {\n        setDraft(base)\n      } else {\n        onChange(base)\n        if (footer === 'none' || resolvedCloseOnSelect) setOpen(false)\n      }\n    },\n    [isInteractive, withTime, useDraft, draft, value, footer, resolvedCloseOnSelect, onChange],\n  )\n\n  const handleTimeChange = React.useCallback(\n    (time: string) => {\n      const target = useDraft ? draft : value\n      if (!target) return\n      const next = applyTimeToDate(target, time)\n      if (useDraft) setDraft(next)\n      else onChange(next)\n    },\n    [useDraft, draft, value, onChange],\n  )\n\n  const handleApply = React.useCallback(() => {\n    onChange(draft)\n    setOpen(false)\n  }, [draft, onChange])\n\n  const handleCancel = React.useCallback(() => {\n    setDraft(value ?? null)\n    setOpen(false)\n  }, [value])\n\n  const handleToday = React.useCallback(() => {\n    const today = withTime ? new Date() : startOfDay(new Date())\n    onChange(today)\n    setOpen(false)\n  }, [withTime, onChange])\n\n  const handleClear = React.useCallback(() => {\n    onChange(null)\n    setOpen(false)\n  }, [onChange])\n\n  const disabledMatcher = React.useMemo(() => {\n    if (!minDate && !maxDate) return undefined\n    const matchers: import('react-day-picker').Matcher[] = []\n    if (minDate) matchers.push({ before: minDate })\n    if (maxDate) matchers.push({ after: maxDate })\n    return matchers\n  }, [minDate, maxDate])\n\n  const heightClass = size === 'sm' ? 'h-8 px-2.5 text-xs' : 'h-9 px-3 text-sm'\n  const selectedDate = useDraft ? draft : value\n\n  return (\n    <Popover open={open} onOpenChange={isInteractive ? setOpen : undefined}>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          id={id}\n          name={name}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedBy}\n          aria-haspopup=\"dialog\"\n          aria-required={required ? true : undefined}\n          data-crud-focus-target=\"\"\n          data-slot=\"date-picker-trigger\"\n          disabled={disabled}\n          className={cn(\n            'w-full inline-flex items-center gap-2 rounded-md border border-input bg-background shadow-xs transition-colors text-left',\n            'focus-visible:outline-none focus-visible:shadow-focus focus-visible:border-foreground',\n            'hover:bg-muted/40',\n            'disabled:bg-bg-disabled disabled:border-border-disabled disabled:shadow-none disabled:hover:bg-bg-disabled disabled:cursor-not-allowed',\n            'aria-invalid:border-destructive',\n            heightClass,\n            readOnly && 'cursor-default opacity-70',\n            !formattedValue && 'text-muted-foreground',\n            className,\n          )}\n          onClick={isInteractive ? undefined : (event) => event.preventDefault()}\n        >\n          <CalendarIcon className=\"h-4 w-4 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n          <span className=\"flex-1 truncate\">\n            {formattedValue ?? placeholderText}\n          </span>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align={align} className={cn('w-auto p-0', popoverClassName)}>\n        <Calendar\n          mode=\"single\"\n          selected={selectedDate ?? undefined}\n          onSelect={handleDaySelect}\n          locale={locale}\n          disabled={disabledMatcher}\n          autoFocus\n        />\n        {withTime && (\n          <div className=\"flex items-center gap-2 border-t px-3 py-2\">\n            <span className=\"text-sm text-muted-foreground shrink-0\">\n              {t('ui.datePicker.timeLabel', 'Time')}:\n            </span>\n            <TimeInput\n              value={selectedDate ? extractTime(selectedDate) : undefined}\n              onChange={handleTimeChange}\n              minuteStep={minuteStep}\n              disabled={!isInteractive || !selectedDate}\n            />\n          </div>\n        )}\n        {footer === 'apply-cancel' && (\n          <div className=\"flex items-center justify-end gap-2 border-t px-3 py-2\">\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={handleCancel}>\n              {t('ui.datePicker.cancelButton', 'Cancel')}\n            </Button>\n            <Button type=\"button\" size=\"sm\" onClick={handleApply}>\n              {t('ui.datePicker.applyButton', 'Apply')}\n            </Button>\n          </div>\n        )}\n        {footer === 'today-clear' && (showTodayButton || showClearButton) && (\n          <div className=\"flex items-center justify-between gap-2 border-t px-3 py-2\">\n            {showTodayButton ? (\n              <LinkButton type=\"button\" variant=\"primary\" onClick={handleToday}>\n                {t('ui.datePicker.todayButton', 'Today')}\n              </LinkButton>\n            ) : null}\n            {showClearButton ? (\n              <LinkButton type=\"button\" variant=\"gray\" onClick={handleClear} className=\"ml-auto\">\n                {t('ui.datePicker.clearButton', 'Clear')}\n              </LinkButton>\n            ) : null}\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport type { Locale } from 'date-fns/locale'\nimport { CalendarIcon } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Popover, PopoverContent, PopoverTrigger } from './popover'\nimport { Calendar } from './calendar'\nimport { Button } from './button'\nimport { LinkButton } from './link-button'\nimport { TimeInput } from '../backend/inputs/TimeInput'\nimport { formatWithPublicDateFormat, resolvePublicDateFormat, resolvePublicDateTimeFormat } from './date-format'\n\nexport type DatePickerFooter = 'apply-cancel' | 'today-clear' | 'none'\n\nexport type DatePickerProps = {\n  value?: Date | null\n  onChange: (value: Date | null) => void\n  placeholder?: string\n  size?: 'sm' | 'default'\n  disabled?: boolean\n  readOnly?: boolean\n  /**\n   * Footer mode in the popover.\n   * - `'apply-cancel'` (default, Figma-aligned): selecting a day stages a draft;\n   *   Apply commits and closes; Cancel reverts and closes.\n   * - `'today-clear'`: legacy behavior \u2014 Today commits today, Clear sets null.\n   * - `'none'`: no footer; selecting a day commits immediately and closes.\n   */\n  footer?: DatePickerFooter\n  /**\n   * Whether selecting a day commits the value and closes the popover.\n   * - In `footer='apply-cancel'`: ignored (commit happens via Apply).\n   * - In `footer='today-clear'`: default `true` for backward compatibility.\n   * - In `footer='none'`: always `true` (popover always closes after selection).\n   */\n  closeOnSelect?: boolean\n  /**\n   * Whether to show the \"Today\" link in `footer='today-clear'` mode. Default `true`.\n   * Only meaningful when `footer='today-clear'`.\n   */\n  showTodayButton?: boolean\n  /**\n   * Whether to show the \"Clear\" link in `footer='today-clear'` mode. Default `true`.\n   * Only meaningful when `footer='today-clear'`.\n   */\n  showClearButton?: boolean\n  withTime?: boolean\n  minuteStep?: number\n  align?: 'start' | 'center' | 'end'\n  minDate?: Date\n  maxDate?: Date\n  locale?: Locale\n  displayFormat?: string\n  className?: string\n  popoverClassName?: string\n  id?: string\n  name?: string\n  required?: boolean\n  'aria-label'?: string\n  'aria-describedby'?: string\n}\n\nfunction extractTime(date: Date): string {\n  return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`\n}\n\nfunction applyTimeToDate(base: Date, time: string): Date {\n  const [hourStr = '0', minuteStr = '0'] = time.split(':')\n  const hour = parseInt(hourStr, 10)\n  const minute = parseInt(minuteStr, 10)\n  const next = new Date(base)\n  next.setHours(isNaN(hour) ? 0 : hour, isNaN(minute) ? 0 : minute, 0, 0)\n  return next\n}\n\nfunction startOfDay(date: Date): Date {\n  const next = new Date(date)\n  next.setHours(0, 0, 0, 0)\n  return next\n}\n\nexport function DatePicker({\n  value,\n  onChange,\n  placeholder,\n  size = 'default',\n  disabled = false,\n  readOnly = false,\n  footer = 'apply-cancel',\n  closeOnSelect,\n  showTodayButton = true,\n  showClearButton = true,\n  withTime = false,\n  minuteStep = 1,\n  align = 'start',\n  minDate,\n  maxDate,\n  locale,\n  displayFormat,\n  className,\n  popoverClassName,\n  id,\n  name,\n  required,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n}: DatePickerProps) {\n  const resolvedCloseOnSelect = closeOnSelect ?? footer === 'today-clear'\n  const t = useT()\n  const [open, setOpen] = React.useState(false)\n  const [draft, setDraft] = React.useState<Date | null>(value ?? null)\n\n  const isInteractive = !disabled && !readOnly\n  const useDraft = footer === 'apply-cancel'\n\n  React.useEffect(() => {\n    if (open) setDraft(value ?? null)\n  }, [open, value])\n\n  const resolvedFormat = withTime\n    ? resolvePublicDateTimeFormat(locale, displayFormat)\n    : resolvePublicDateFormat(locale, displayFormat)\n  const placeholderText = placeholder ?? (\n    withTime\n      ? t('ui.dateTimePicker.placeholder', 'Pick date and time')\n      : t('ui.datePicker.placeholder', 'Pick a date')\n  )\n\n  const formattedValue = React.useMemo(() => {\n    if (!value) return null\n    return formatWithPublicDateFormat(value, resolvedFormat, locale)\n  }, [value, resolvedFormat, locale])\n\n  const handleDaySelect = React.useCallback(\n    (day: Date | undefined) => {\n      if (!day || !isInteractive) return\n      const reference = withTime ? (useDraft ? draft : value) : null\n      const base = withTime\n        ? applyTimeToDate(day, reference ? extractTime(reference) : '00:00')\n        : startOfDay(day)\n      if (useDraft) {\n        setDraft(base)\n      } else {\n        onChange(base)\n        if (footer === 'none' || resolvedCloseOnSelect) setOpen(false)\n      }\n    },\n    [isInteractive, withTime, useDraft, draft, value, footer, resolvedCloseOnSelect, onChange],\n  )\n\n  const handleTimeChange = React.useCallback(\n    (time: string) => {\n      const target = useDraft ? draft : value\n      if (!target) return\n      const next = applyTimeToDate(target, time)\n      if (useDraft) setDraft(next)\n      else onChange(next)\n    },\n    [useDraft, draft, value, onChange],\n  )\n\n  const handleApply = React.useCallback(() => {\n    onChange(draft)\n    setOpen(false)\n  }, [draft, onChange])\n\n  const handleCancel = React.useCallback(() => {\n    setDraft(value ?? null)\n    setOpen(false)\n  }, [value])\n\n  const handleToday = React.useCallback(() => {\n    const today = withTime ? new Date() : startOfDay(new Date())\n    onChange(today)\n    setOpen(false)\n  }, [withTime, onChange])\n\n  const handleClear = React.useCallback(() => {\n    onChange(null)\n    setOpen(false)\n  }, [onChange])\n\n  const disabledMatcher = React.useMemo(() => {\n    if (!minDate && !maxDate) return undefined\n    const matchers: import('react-day-picker').Matcher[] = []\n    if (minDate) matchers.push({ before: minDate })\n    if (maxDate) matchers.push({ after: maxDate })\n    return matchers\n  }, [minDate, maxDate])\n\n  const heightClass = size === 'sm' ? 'h-8 px-2.5 text-xs' : 'h-9 px-3 text-sm'\n  const selectedDate = useDraft ? draft : value\n\n  return (\n    <Popover open={open} onOpenChange={isInteractive ? setOpen : undefined}>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          id={id}\n          name={name}\n          aria-label={ariaLabel}\n          aria-describedby={ariaDescribedBy}\n          aria-haspopup=\"dialog\"\n          aria-required={required ? true : undefined}\n          data-crud-focus-target=\"\"\n          data-slot=\"date-picker-trigger\"\n          disabled={disabled}\n          className={cn(\n            'w-full inline-flex items-center gap-2 rounded-md border border-input bg-background shadow-xs transition-colors text-left',\n            'focus-visible:outline-none focus-visible:shadow-focus focus-visible:border-foreground',\n            'hover:bg-muted/40',\n            'disabled:bg-bg-disabled disabled:border-border-disabled disabled:shadow-none disabled:hover:bg-bg-disabled disabled:cursor-not-allowed',\n            'aria-invalid:border-destructive',\n            heightClass,\n            readOnly && 'cursor-default opacity-70',\n            !formattedValue && 'text-muted-foreground',\n            className,\n          )}\n          onClick={isInteractive ? undefined : (event) => event.preventDefault()}\n        >\n          <CalendarIcon className=\"h-4 w-4 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n          <span className=\"flex-1 truncate\">\n            {formattedValue ?? placeholderText}\n          </span>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align={align} className={cn('w-auto p-0', popoverClassName)}>\n        <Calendar\n          mode=\"single\"\n          selected={selectedDate ?? undefined}\n          defaultMonth={selectedDate ?? undefined}\n          onSelect={handleDaySelect}\n          locale={locale}\n          disabled={disabledMatcher}\n          autoFocus\n        />\n        {withTime && (\n          <div className=\"flex items-center gap-2 border-t px-3 py-2\">\n            <span className=\"text-sm text-muted-foreground shrink-0\">\n              {t('ui.datePicker.timeLabel', 'Time')}:\n            </span>\n            <TimeInput\n              value={selectedDate ? extractTime(selectedDate) : undefined}\n              onChange={handleTimeChange}\n              minuteStep={minuteStep}\n              disabled={!isInteractive || !selectedDate}\n            />\n          </div>\n        )}\n        {footer === 'apply-cancel' && (\n          <div className=\"flex items-center justify-end gap-2 border-t px-3 py-2\">\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={handleCancel}>\n              {t('ui.datePicker.cancelButton', 'Cancel')}\n            </Button>\n            <Button type=\"button\" size=\"sm\" onClick={handleApply}>\n              {t('ui.datePicker.applyButton', 'Apply')}\n            </Button>\n          </div>\n        )}\n        {footer === 'today-clear' && (showTodayButton || showClearButton) && (\n          <div className=\"flex items-center justify-between gap-2 border-t px-3 py-2\">\n            {showTodayButton ? (\n              <LinkButton type=\"button\" variant=\"primary\" onClick={handleToday}>\n                {t('ui.datePicker.todayButton', 'Today')}\n              </LinkButton>\n            ) : null}\n            {showClearButton ? (\n              <LinkButton type=\"button\" variant=\"gray\" onClick={handleClear} className=\"ml-auto\">\n                {t('ui.datePicker.clearButton', 'Clear')}\n              </LinkButton>\n            ) : null}\n          </div>\n        )}\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.4-develop.4121.1.0d7f20d229",
+  "version": "0.6.4-develop.4133.1.48fc6c8f7b",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -141,13 +141,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.4-develop.4121.1.0d7f20d229",
+    "@open-mercato/shared": "0.6.4-develop.4133.1.48fc6c8f7b",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.4-develop.4121.1.0d7f20d229",
+    "@open-mercato/shared": "0.6.4-develop.4133.1.48fc6c8f7b",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/AppShell.tsx

@@ -111,6 +111,11 @@ export type AppShellProps = {
   profileSectionTitle?: string
   profilePathPrefixes?: string[]
   mobileSidebarSlot?: React.ReactNode
+  /**
+   * How long (ms) to keep successfully completed progress operations visible
+   * before auto-hiding. Pass `false` or `0` to disable. Defaults to 10 000 ms.
+   */
+  progressCompletedAutoHideMs?: number | false
 }
 
 type Breadcrumb = Array<{ label: string; href?: string }>
@@ -417,7 +422,7 @@ export function AppShell(props: AppShellProps) {
   )
 }
 
-function AppShellBody({ productName, logo, email, canManageUpgradeActions = false, groups, rightHeaderSlot, children, sidebarCollapsedDefault = false, currentTitle, breadcrumb, version, settingsSectionTitle, settingsPathPrefixes = [], settingsSections, profileSections, profileSectionTitle, profilePathPrefixes = [], mobileSidebarSlot }: AppShellProps) {
+function AppShellBody({ productName, logo, email, canManageUpgradeActions = false, groups, rightHeaderSlot, children, sidebarCollapsedDefault = false, currentTitle, breadcrumb, version, settingsSectionTitle, settingsPathPrefixes = [], settingsSections, profileSections, profileSectionTitle, profilePathPrefixes = [], mobileSidebarSlot, progressCompletedAutoHideMs }: AppShellProps) {
   const pathname = usePathname()
   const searchParams = useSearchParams()
   const t = useT()
@@ -1337,7 +1342,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
             )}
           </div>
         </header>
-        <ProgressTopBar t={t} className="sticky top-0 z-sticky" />
+        <ProgressTopBar t={t} className="sticky top-0 z-sticky" completedAutoHideMs={progressCompletedAutoHideMs} />
         <main className="flex-1 p-4 lg:p-6 mx-auto w-full max-w-screen-2xl">
           <InjectionSpot spotId={BACKEND_LAYOUT_TOP_INJECTION_SPOT_ID} context={injectionContext} />
           <FlashMessages />

package/src/backend/__tests__/useAutoHideCompletedJobs.test.tsx

@@ -0,0 +1,179 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { renderHook, act } from '@testing-library/react'
+import { useAutoHideCompletedJobs } from '../progress/useAutoHideCompletedJobs'
+import type { ProgressJobDto } from '../progress/useProgressPoll'
+
+function makeJob(overrides: Partial<ProgressJobDto> = {}): ProgressJobDto {
+  return {
+    id: 'job-1',
+    jobType: 'bulk-delete',
+    name: 'Delete selected',
+    status: 'completed',
+    progressPercent: 100,
+    processedCount: 5,
+    cancellable: false,
+    finishedAt: new Date().toISOString(),
+    ...overrides,
+  }
+}
+
+describe('useAutoHideCompletedJobs', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('hides a completed job after the timeout elapses', () => {
+    const jobs = [makeJob({ id: 'j1', finishedAt: new Date().toISOString() })]
+    const { result } = renderHook(() => useAutoHideCompletedJobs(jobs, 10_000))
+
+    expect(result.current).toHaveLength(1)
+
+    act(() => { jest.advanceTimersByTime(10_000) })
+
+    expect(result.current).toHaveLength(0)
+  })
+
+  it('keeps failed jobs visible after the timeout', () => {
+    const jobs = [
+      makeJob({ id: 'j-ok', status: 'completed', finishedAt: new Date().toISOString() }),
+      makeJob({ id: 'j-fail', status: 'failed', finishedAt: new Date().toISOString() }),
+    ]
+    const { result } = renderHook(() => useAutoHideCompletedJobs(jobs, 10_000))
+
+    act(() => { jest.advanceTimersByTime(10_000) })
+
+    expect(result.current).toHaveLength(1)
+    expect(result.current[0].id).toBe('j-fail')
+  })
+
+  it('keeps cancelled jobs visible after the timeout', () => {
+    const jobs = [
+      makeJob({ id: 'j-cancel', status: 'cancelled', finishedAt: new Date().toISOString() }),
+    ]
+    const { result } = renderHook(() => useAutoHideCompletedJobs(jobs, 10_000))
+
+    act(() => { jest.advanceTimersByTime(10_000) })
+
+    expect(result.current).toHaveLength(1)
+  })
+
+  it('hides each job based on its own finishedAt (no false-positive cascade)', () => {
+    const now = Date.now()
+    const jobs = [
+      makeJob({ id: 'j-early', finishedAt: new Date(now - 8_000).toISOString() }), // finished 8s ago
+      makeJob({ id: 'j-late', finishedAt: new Date(now).toISOString() }),           // just finished
+    ]
+    const { result } = renderHook(() => useAutoHideCompletedJobs(jobs, 10_000))
+
+    // After 2s more, the early job (8s+2s=10s) should expire
+    act(() => { jest.advanceTimersByTime(2_000) })
+    expect(result.current.map((j) => j.id)).toEqual(['j-late'])
+
+    // After another 8s, the late job expires too
+    act(() => { jest.advanceTimersByTime(8_000) })
+    expect(result.current).toHaveLength(0)
+  })
+
+  it('immediately hides completed jobs whose finishedAt is already past the timeout', () => {
+    const pastFinishedAt = new Date(Date.now() - 15_000).toISOString() // finished 15s ago
+    const jobs = [makeJob({ id: 'j-old', finishedAt: pastFinishedAt })]
+    const { result } = renderHook(() => useAutoHideCompletedJobs(jobs, 10_000))
+
+    // No timer needed — should already be filtered out
+    expect(result.current).toHaveLength(0)
+  })
+
+  it('does not hide when timeoutMs is false', () => {
+    const jobs = [makeJob({ id: 'j1' })]
+    const { result } = renderHook(() => useAutoHideCompletedJobs(jobs, false))
+
+    act(() => { jest.advanceTimersByTime(60_000) })
+
+    expect(result.current).toHaveLength(1)
+  })
+
+  it('does not hide when timeoutMs is 0', () => {
+    const jobs = [makeJob({ id: 'j1' })]
+    const { result } = renderHook(() => useAutoHideCompletedJobs(jobs, 0))
+
+    act(() => { jest.advanceTimersByTime(60_000) })
+
+    expect(result.current).toHaveLength(1)
+  })
+
+  it('respects a custom timeout', () => {
+    const jobs = [makeJob({ id: 'j1', finishedAt: new Date().toISOString() })]
+    const { result } = renderHook(() => useAutoHideCompletedJobs(jobs, 3_000))
+
+    act(() => { jest.advanceTimersByTime(2_999) })
+    expect(result.current).toHaveLength(1)
+
+    act(() => { jest.advanceTimersByTime(1) })
+    expect(result.current).toHaveLength(0)
+  })
+
+  it('does not re-schedule a timer when jobs list updates with the same completed job', () => {
+    const job = makeJob({ id: 'j1', finishedAt: new Date().toISOString() })
+    const { result, rerender } = renderHook(
+      ({ jobs }: { jobs: ProgressJobDto[] }) => useAutoHideCompletedJobs(jobs, 10_000),
+      { initialProps: { jobs: [job] } },
+    )
+
+    act(() => { jest.advanceTimersByTime(5_000) })
+    // Simulate poll refresh — same job still in list
+    rerender({ jobs: [job] })
+
+    // Timer should expire at original 10s mark, not reset to 15s
+    act(() => { jest.advanceTimersByTime(5_000) })
+    expect(result.current).toHaveLength(0)
+  })
+
+  it('clears timers on unmount without errors', () => {
+    const jobs = [makeJob({ id: 'j1', finishedAt: new Date().toISOString() })]
+    const { unmount } = renderHook(() => useAutoHideCompletedJobs(jobs, 10_000))
+
+    expect(() => {
+      unmount()
+      jest.advanceTimersByTime(15_000)
+    }).not.toThrow()
+  })
+
+  it('treats a malformed finishedAt as "just finished" — does not error and hides after full timeout', () => {
+    const jobs = [makeJob({ id: 'j-bad', finishedAt: 'not-a-date' })]
+    const { result } = renderHook(() => useAutoHideCompletedJobs(jobs, 10_000))
+
+    // Should be visible initially (malformed → treated as now)
+    expect(result.current).toHaveLength(1)
+
+    act(() => { jest.advanceTimersByTime(10_000) })
+
+    expect(result.current).toHaveLength(0)
+  })
+
+  it('stays hidden when list cycles through empty — does not restart timer', () => {
+    const job = makeJob({ id: 'j1', finishedAt: new Date().toISOString() })
+    const { result, rerender } = renderHook(
+      ({ jobs }: { jobs: ProgressJobDto[] }) => useAutoHideCompletedJobs(jobs, 10_000),
+      { initialProps: { jobs: [job] } },
+    )
+
+    // Advance past the timeout so job expires
+    act(() => { jest.advanceTimersByTime(10_000) })
+    expect(result.current).toHaveLength(0)
+
+    // List goes empty then comes back with the same job
+    rerender({ jobs: [] })
+    rerender({ jobs: [job] })
+
+    // Job should stay hidden — scheduledRef prevents re-scheduling
+    expect(result.current).toHaveLength(0)
+  })
+})

package/src/backend/dashboard/DashboardScreen.tsx

@@ -14,6 +14,7 @@ import { GripVertical, Info, Plus, RefreshCw, Settings2, Trash2, X, Loader2 } fr
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
 import { InjectionSpot } from '../injection/InjectionSpot'
+import { WidgetDataBatchProvider } from './widgetData'
 
 type DashboardWidgetSize = 'sm' | 'md' | 'lg'
 
@@ -429,6 +430,7 @@ export function DashboardScreen() {
         </div>
       )}
 
+      <WidgetDataBatchProvider>
       <div className={cn(
         'grid gap-3 sm:gap-4 md:gap-6',
         'grid-cols-1',
@@ -493,6 +495,7 @@ export function DashboardScreen() {
           )
         })}
       </div>
+      </WidgetDataBatchProvider>
 
       {layout.length === 0 && (
         <div className="rounded-lg border border-dashed bg-muted/30 p-10 text-center text-sm text-muted-foreground">

package/src/backend/dashboard/__tests__/widgetDataBatcher.test.ts

@@ -0,0 +1,97 @@
+/**
+ * @jest-environment node
+ */
+import {
+  createWidgetDataBatcher,
+  type WidgetDataBatchRequestEntry,
+  type WidgetDataBatchResultEntry,
+} from '../widgetDataBatcher'
+
+describe('createWidgetDataBatcher', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  test('coalesces requests fired within the window into a single send', async () => {
+    const send = jest.fn(async (entries: WidgetDataBatchRequestEntry[]) =>
+      entries.map((entry): WidgetDataBatchResultEntry => ({ id: entry.id, ok: true, data: entry.request })),
+    )
+    const batcher = createWidgetDataBatcher({ send, windowMs: 16 })
+
+    const p1 = batcher.fetch<{ widget: number }>({ widget: 1 })
+    const p2 = batcher.fetch<{ widget: number }>({ widget: 2 })
+    const p3 = batcher.fetch<{ widget: number }>({ widget: 3 })
+
+    expect(send).not.toHaveBeenCalled()
+    jest.advanceTimersByTime(16)
+
+    await expect(p1).resolves.toEqual({ widget: 1 })
+    await expect(p2).resolves.toEqual({ widget: 2 })
+    await expect(p3).resolves.toEqual({ widget: 3 })
+
+    expect(send).toHaveBeenCalledTimes(1)
+    expect(send.mock.calls[0][0]).toHaveLength(3)
+  })
+
+  test('rejects only the failing widget and resolves the rest', async () => {
+    const send = jest.fn(async (entries: WidgetDataBatchRequestEntry[]) =>
+      entries.map((entry, index): WidgetDataBatchResultEntry =>
+        index === 1
+          ? { id: entry.id, ok: false, error: 'boom' }
+          : { id: entry.id, ok: true, data: entry.request },
+      ),
+    )
+    const batcher = createWidgetDataBatcher({ send, windowMs: 16 })
+
+    const ok = batcher.fetch({ widget: 'a' })
+    const bad = batcher.fetch({ widget: 'b' })
+    jest.advanceTimersByTime(16)
+
+    await expect(ok).resolves.toEqual({ widget: 'a' })
+    await expect(bad).rejects.toThrow('boom')
+  })
+
+  test('rejects a caller whose id is missing from the response', async () => {
+    const send = jest.fn(async () => [] as WidgetDataBatchResultEntry[])
+    const batcher = createWidgetDataBatcher({ send, windowMs: 16 })
+
+    const p = batcher.fetch({ widget: 1 })
+    jest.advanceTimersByTime(16)
+
+    await expect(p).rejects.toThrow('No result returned for widget')
+  })
+
+  test('rejects all callers when the batch send fails', async () => {
+    const send = jest.fn(async () => {
+      throw new Error('network down')
+    })
+    const batcher = createWidgetDataBatcher({ send, windowMs: 16 })
+
+    const p1 = batcher.fetch({ widget: 1 })
+    const p2 = batcher.fetch({ widget: 2 })
+    jest.advanceTimersByTime(16)
+
+    await expect(p1).rejects.toThrow('network down')
+    await expect(p2).rejects.toThrow('network down')
+    expect(send).toHaveBeenCalledTimes(1)
+  })
+
+  test('splits queues larger than maxBatchSize into multiple sends', async () => {
+    const send = jest.fn(async (entries: WidgetDataBatchRequestEntry[]) =>
+      entries.map((entry): WidgetDataBatchResultEntry => ({ id: entry.id, ok: true, data: entry.request })),
+    )
+    const batcher = createWidgetDataBatcher({ send, windowMs: 16, maxBatchSize: 2 })
+
+    const promises = [1, 2, 3, 4, 5].map((widget) => batcher.fetch({ widget }))
+    jest.advanceTimersByTime(16)
+
+    await Promise.all(promises)
+    expect(send).toHaveBeenCalledTimes(3)
+    expect(send.mock.calls[0][0]).toHaveLength(2)
+    expect(send.mock.calls[1][0]).toHaveLength(2)
+    expect(send.mock.calls[2][0]).toHaveLength(1)
+  })
+})

package/src/backend/dashboard/index.ts

@@ -1 +1,2 @@
 export { DashboardScreen } from './DashboardScreen'
+export { WidgetDataBatchProvider, useWidgetData, type WidgetDataFetcher } from './widgetData'

package/src/backend/dashboard/widgetData.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import * as React from 'react'
+import { apiCall } from '../utils/apiCall'
+import {
+  createWidgetDataBatcher,
+  type WidgetDataBatchResultEntry,
+  type WidgetDataBatchSender,
+} from './widgetDataBatcher'
+
+const SINGLE_ENDPOINT = '/api/dashboards/widgets/data'
+const BATCH_ENDPOINT = '/api/dashboards/widgets/data/batch'
+
+
+export type WidgetDataFetcher = <TResponse>(request: unknown) => Promise<TResponse>
+
+function readError(result: unknown, fallback: string): string {
+  const errorMsg = (result as Record<string, unknown> | null)?.error
+  return typeof errorMsg === 'string' ? errorMsg : fallback
+}
+
+/**
+ * Fallback used when a widget renders outside a {@link WidgetDataBatchProvider}
+ * (e.g. a standalone preview). Issues a single un-batched request so widgets
+ * keep working without the dashboard host.
+ */
+const singleWidgetDataFetch: WidgetDataFetcher = async (request) => {
+  const call = await apiCall(SINGLE_ENDPOINT, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(request),
+  })
+  if (!call.ok) {
+    throw new Error(readError(call.result, 'Failed to fetch widget data'))
+  }
+  return call.result as never
+}
+
+const WidgetDataContext = React.createContext<WidgetDataFetcher>(singleWidgetDataFetch)
+
+const batchSender: WidgetDataBatchSender = async (entries) => {
+  const call = await apiCall<{ results?: WidgetDataBatchResultEntry[] }>(BATCH_ENDPOINT, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ requests: entries }),
+  })
+  if (!call.ok || !call.result || !Array.isArray(call.result.results)) {
+    throw new Error(readError(call.result, 'Failed to fetch widget data'))
+  }
+  return call.result.results
+}
+
+export type WidgetDataBatchProviderProps = {
+  children: React.ReactNode
+  windowMs?: number
+  maxBatchSize?: number
+}
+
+/**
+ * Provides a batched widget-data fetcher to descendant dashboard widgets.
+ * Requests fired within a short window collapse into one POST to the batch
+ * endpoint, so a first dashboard render issues a single authenticated request
+ * instead of one per widget (see #2273).
+ */
+export function WidgetDataBatchProvider({
+  children,
+  windowMs,
+  maxBatchSize,
+}: WidgetDataBatchProviderProps): React.ReactElement {
+  const batcher = React.useMemo(
+    () => createWidgetDataBatcher({ send: batchSender, windowMs, maxBatchSize }),
+    [windowMs, maxBatchSize],
+  )
+  const fetcher = React.useCallback<WidgetDataFetcher>(
+    (request) => batcher.fetch(request),
+    [batcher],
+  )
+  return <WidgetDataContext.Provider value={fetcher}>{children}</WidgetDataContext.Provider>
+}
+
+/** Returns the active widget-data fetcher (batched when inside a provider). */
+export function useWidgetData(): WidgetDataFetcher {
+  return React.useContext(WidgetDataContext)
+}

package/src/backend/dashboard/widgetDataBatcher.ts

@@ -0,0 +1,100 @@
+export type WidgetDataBatchRequestEntry = { id: string; request: unknown }
+
+export type WidgetDataBatchResultEntry =
+  | { id: string; ok: true; data: unknown }
+  | { id: string; ok: false; error: string }
+
+export type WidgetDataBatchSender = (
+  entries: WidgetDataBatchRequestEntry[],
+) => Promise<WidgetDataBatchResultEntry[]>
+
+export type WidgetDataBatcherOptions = {
+  send: WidgetDataBatchSender
+  /** Coalescing window in ms. Widget requests fired within the window share one HTTP call. */
+  windowMs?: number
+  /** Upper bound on requests per HTTP call; larger queues are split into multiple sends. */
+  maxBatchSize?: number
+}
+
+export type WidgetDataBatcher = {
+  fetch: <TResponse>(request: unknown) => Promise<TResponse>
+}
+
+type PendingCall = {
+  id: string
+  request: unknown
+  resolve: (value: unknown) => void
+  reject: (error: unknown) => void
+}
+
+const DEFAULT_WINDOW_MS = 16
+const DEFAULT_MAX_BATCH_SIZE = 50
+
+/**
+ * Coalesces independent widget-data requests fired within a short window into a
+ * single batch call. Each call resolves with its own slice of the batch result,
+ * so callers stay decoupled from one another while collapsing N HTTP requests
+ * (and N server-side container/RBAC/org-scope rebuilds) into one (see #2273).
+ */
+export function createWidgetDataBatcher(options: WidgetDataBatcherOptions): WidgetDataBatcher {
+  const windowMs = options.windowMs ?? DEFAULT_WINDOW_MS
+  const maxBatchSize = options.maxBatchSize ?? DEFAULT_MAX_BATCH_SIZE
+
+  let queue: PendingCall[] = []
+  let timer: ReturnType<typeof setTimeout> | null = null
+  let counter = 0
+
+  const flush = () => {
+    timer = null
+    const pending = queue
+    queue = []
+    if (pending.length === 0) return
+
+    for (let start = 0; start < pending.length; start += maxBatchSize) {
+      const chunk = pending.slice(start, start + maxBatchSize)
+      void dispatchChunk(chunk)
+    }
+  }
+
+  const dispatchChunk = async (chunk: PendingCall[]) => {
+    try {
+      const results = await options.send(chunk.map((call) => ({ id: call.id, request: call.request })))
+      const byId = new Map<string, WidgetDataBatchResultEntry>()
+      for (const result of results) byId.set(result.id, result)
+
+      for (const call of chunk) {
+        const result = byId.get(call.id)
+        if (!result) {
+          call.reject(new Error('No result returned for widget'))
+        } else if (result.ok) {
+          call.resolve(result.data)
+        } else {
+          call.reject(new Error(result.error))
+        }
+      }
+    } catch (error) {
+      for (const call of chunk) call.reject(error)
+    }
+  }
+
+  const scheduleFlush = () => {
+    if (timer != null) return
+    timer = setTimeout(flush, windowMs)
+  }
+
+  return {
+    fetch<TResponse>(request: unknown): Promise<TResponse> {
+      counter += 1
+      const id = `w${counter}`
+      return new Promise<TResponse>((resolve, reject) => {
+        queue.push({
+          id,
+          request,
+          resolve: (value) => resolve(value as TResponse),
+          reject,
+        })
+        scheduleFlush()
+      })
+    },
+  }
+}