@open-mercato/ui 0.5.1-develop.2663.2c29774b5b → 0.5.1-develop.2681.c559bb2bc3

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

@@ -0,0 +1,171 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { CollapsibleZoneLayout } from '../crud/CollapsibleZoneLayout'
+
+let currentWidth = 1400
+let resizeObserverTarget: Element | null = null
+let resizeObserverInstance: ResizeObserverMock | null = null
+let desktopViewport = true
+const mediaQueryListeners = new Set<() => void>()
+
+function createResizeEntry(target: Element, width: number): ResizeObserverEntry {
+  return {
+    target,
+    contentRect: {
+      width,
+      height: 0,
+      x: 0,
+      y: 0,
+      top: 0,
+      right: width,
+      bottom: 0,
+      left: 0,
+      toJSON: () => ({}),
+    } as DOMRectReadOnly,
+  } as ResizeObserverEntry
+}
+
+class ResizeObserverMock {
+  readonly callback: ResizeObserverCallback
+
+  constructor(callback: ResizeObserverCallback) {
+    this.callback = callback
+    resizeObserverInstance = this
+  }
+
+  observe(target: Element) {
+    resizeObserverTarget = target
+    this.callback([createResizeEntry(target, currentWidth)], this as unknown as ResizeObserver)
+  }
+
+  unobserve() {}
+
+  disconnect() {
+    resizeObserverTarget = null
+  }
+}
+
+function setContainerWidth(width: number) {
+  currentWidth = width
+  Object.defineProperty(window, 'innerWidth', {
+    configurable: true,
+    writable: true,
+    value: width,
+  })
+  if (!resizeObserverTarget || !resizeObserverInstance) return
+  resizeObserverInstance.callback(
+    [createResizeEntry(resizeObserverTarget, width)],
+    resizeObserverInstance as unknown as ResizeObserver,
+  )
+}
+
+describe('CollapsibleZoneLayout', () => {
+  beforeEach(() => {
+    currentWidth = 1400
+    desktopViewport = true
+    resizeObserverTarget = null
+    resizeObserverInstance = null
+    mediaQueryListeners.clear()
+    localStorage.clear()
+
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      writable: true,
+      value: currentWidth,
+    })
+
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      writable: true,
+      value: jest.fn().mockImplementation(() => ({
+        matches: desktopViewport,
+        media: '(min-width: 1024px)',
+        onchange: null,
+        addEventListener: (_event: string, listener: () => void) => {
+          mediaQueryListeners.add(listener)
+        },
+        removeEventListener: (_event: string, listener: () => void) => {
+          mediaQueryListeners.delete(listener)
+        },
+        addListener: (listener: () => void) => {
+          mediaQueryListeners.add(listener)
+        },
+        removeListener: (listener: () => void) => {
+          mediaQueryListeners.delete(listener)
+        },
+        dispatchEvent: () => true,
+      })),
+    })
+
+    ;(globalThis as typeof globalThis & { ResizeObserver?: typeof ResizeObserverMock }).ResizeObserver = ResizeObserverMock
+  })
+
+  it('auto-collapses zone1 before the two-column layout becomes too narrow', async () => {
+    const { container } = renderWithProviders(
+      <CollapsibleZoneLayout
+        zone1={<div>Zone 1</div>}
+        zone2={<div>Zone 2</div>}
+        entityName="Brightside Solar"
+        pageType="company-v2"
+      />,
+      { dict: {} },
+    )
+
+    const layout = container.firstElementChild as HTMLElement
+
+    await waitFor(() => {
+      expect(layout).toHaveAttribute('data-zone-layout-mode', 'side-by-side')
+    })
+
+    act(() => {
+      setContainerWidth(1180)
+    })
+
+    await waitFor(() => {
+      expect(layout).toHaveAttribute('data-zone-layout-mode', 'collapsed')
+    })
+
+    expect(screen.queryByText('Zone 1')).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Expand form panel' })).toBeInTheDocument()
+  })
+
+  it('stacks zone1 above zone2 when the user expands it in constrained space', async () => {
+    currentWidth = 1180
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      writable: true,
+      value: currentWidth,
+    })
+
+    const { container } = renderWithProviders(
+      <CollapsibleZoneLayout
+        zone1={<div>Zone 1</div>}
+        zone2={<div>Zone 2</div>}
+        entityName="Brightside Solar"
+        pageType="person-v2"
+      />,
+      { dict: {} },
+    )
+
+    const layout = container.firstElementChild as HTMLElement
+
+    await waitFor(() => {
+      expect(layout).toHaveAttribute('data-zone-layout-mode', 'collapsed')
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Expand form panel' }))
+
+    await waitFor(() => {
+      expect(layout).toHaveAttribute('data-zone-layout-mode', 'stacked')
+    })
+
+    const zone1 = screen.getByText('Zone 1')
+    const zone2 = screen.getByText('Zone 2')
+
+    expect(zone1.compareDocumentPosition(zone2) & Node.DOCUMENT_POSITION_FOLLOWING).not.toBe(0)
+    expect(screen.getByRole('button', { name: 'Collapse form panel' })).toBeInTheDocument()
+  })
+})

package/src/backend/__tests__/CrudForm.validation.test.tsx

@@ -64,8 +64,8 @@ describe('CrudForm validation state', () => {
     })
 
     await waitFor(() => {
-      expect(nameField?.querySelector('.text-xs.text-red-600')).toHaveTextContent('This field is required')
-      expect(gatewayField?.querySelector('.text-xs.text-red-600')).toHaveTextContent('This field is required')
+      expect(nameField?.querySelector('.text-xs.text-status-error-text')).toHaveTextContent('This field is required')
+      expect(gatewayField?.querySelector('.text-xs.text-status-error-text')).toHaveTextContent('This field is required')
     })
 
     await act(async () => {
@@ -73,8 +73,8 @@ describe('CrudForm validation state', () => {
     })
 
     await waitFor(() => {
-      expect(nameField?.querySelector('.text-xs.text-red-600')).toBeNull()
-      expect(gatewayField?.querySelector('.text-xs.text-red-600')).toHaveTextContent('This field is required')
+      expect(nameField?.querySelector('.text-xs.text-status-error-text')).toBeNull()
+      expect(gatewayField?.querySelector('.text-xs.text-status-error-text')).toHaveTextContent('This field is required')
     })
     expect(container.textContent).toContain('Gateway provider')
   })

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

@@ -0,0 +1,63 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { NotesSection, type NotesDataAdapter } from '../detail/NotesSection'
+
+describe('NotesSection', () => {
+  beforeEach(() => {
+    Object.defineProperty(Element.prototype, 'scrollIntoView', {
+      configurable: true,
+      writable: true,
+      value: jest.fn(),
+    })
+    Object.defineProperty(window, 'requestAnimationFrame', {
+      configurable: true,
+      writable: true,
+      value: (callback: FrameRequestCallback) => {
+        callback(0)
+        return 0
+      },
+    })
+  })
+
+  it('keeps an add-note action visible after notes already exist', async () => {
+    const dataAdapter: NotesDataAdapter = {
+      list: jest.fn(async () => [
+        {
+          id: 'note-1',
+          body: 'Existing note',
+          createdAt: '2026-04-10T08:00:00.000Z',
+          authorName: 'Ada Lovelace',
+        },
+      ]),
+      create: jest.fn(async () => ({ id: 'note-2' })),
+      update: jest.fn(async () => undefined),
+      delete: jest.fn(async () => undefined),
+    }
+
+    const { container } = renderWithProviders(
+      <NotesSection
+        entityId="person-1"
+        emptyLabel="—"
+        viewerUserId="user-1"
+        viewerName="Ada Lovelace"
+        addActionLabel="Add note"
+        emptyState={{
+          title: 'No notes yet',
+          actionLabel: 'Add note',
+        }}
+        dataAdapter={dataAdapter}
+        disableMarkdown
+      />,
+    )
+
+    await screen.findByText('Existing note')
+    fireEvent.click(screen.getByRole('button', { name: 'Add note' }))
+
+    await waitFor(() => {
+      expect(container.querySelector('textarea')).not.toBeNull()
+    })
+  })
+})

package/src/backend/confirm-dialog/ConfirmDialog.tsx

@@ -53,6 +53,11 @@ export function ConfirmDialog({
   const [internalOpen, setInternalOpen] = React.useState(false);
   const cancelButtonRef = React.useRef<HTMLButtonElement>(null);
   const confirmButtonRef = React.useRef<HTMLButtonElement>(null);
+  // Unique IDs so multiple ConfirmDialog instances on the same page don't
+  // collide and make `aria-labelledby` resolve to the wrong dialog's title.
+  const reactId = React.useId();
+  const titleId = `confirm-dialog-title-${reactId}`;
+  const descriptionId = `confirm-dialog-description-${reactId}`;
 
   // Determine if we're in controlled mode (open prop provided) or declarative mode (trigger provided)
   const isControlled = controlledOpen !== undefined;
@@ -178,8 +183,8 @@ export function ConfirmDialog({
       <dialog
         ref={dialogRef}
         role="alertdialog"
-        aria-labelledby="confirm-dialog-title"
-        aria-describedby={text ? "confirm-dialog-description" : undefined}
+        aria-labelledby={titleId}
+        aria-describedby={text ? descriptionId : undefined}
         onClick={handleBackdropClick}
         className={cn(
           // Reset dialog defaults
@@ -222,7 +227,7 @@ export function ConfirmDialog({
 
           {/* Title */}
           <h2
-            id="confirm-dialog-title"
+            id={titleId}
             className={cn(
               "text-sm font-medium leading-snug tracking-tight pr-6",
               // Mobile: centered, Desktop: left-aligned
@@ -235,7 +240,7 @@ export function ConfirmDialog({
           {/* Description (optional) */}
           {text && (
             <p
-              id="confirm-dialog-description"
+              id={descriptionId}
               className="text-sm font-medium leading-snug text-muted-foreground"
             >
               {text}

package/src/backend/crud/CollapsibleGroup.tsx

@@ -0,0 +1,111 @@
+'use client'
+import * as React from 'react'
+import { ChevronDown } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '../../primitives/button'
+import { useGroupCollapse } from './useGroupCollapse'
+
+export interface CollapsibleGroupProps {
+  groupId: string
+  title?: string
+  pageType: string
+  defaultExpanded?: boolean
+  errorCount?: number
+  fieldCount?: number
+  chevronPosition?: 'left' | 'right'
+  icon?: React.ReactNode
+  children: React.ReactNode
+}
+
+export interface CollapsibleGroupHandle {
+  expand: () => void
+}
+
+export const CollapsibleGroup = React.forwardRef<CollapsibleGroupHandle, CollapsibleGroupProps>(
+  function CollapsibleGroup({ groupId, title, pageType, defaultExpanded = true, errorCount = 0, fieldCount, chevronPosition = 'right', icon, children }, ref) {
+    const t = useT()
+    const { expanded, toggle, setExpanded } = useGroupCollapse(pageType, groupId, defaultExpanded)
+    const contentId = `collapsible-group-${groupId}`
+
+    React.useImperativeHandle(ref, () => ({
+      expand: () => setExpanded(true),
+    }), [setExpanded])
+
+    const chevronIcon = (
+      <ChevronDown
+        className={cn(
+          'size-4 shrink-0 motion-safe:transition-transform motion-safe:duration-200',
+          expanded && 'rotate-180'
+        )}
+      />
+    )
+
+    const fieldCountLabel = typeof fieldCount === 'number' && fieldCount > 0 ? (
+      <span className="text-xs font-normal text-muted-foreground">
+        · {fieldCount} {fieldCount === 1
+          ? t('ui.collapsible.fieldSingular', 'field')
+          : t('ui.collapsible.fieldPlural', 'fields')}
+      </span>
+    ) : null
+
+    const errorBadge = errorCount > 0 ? (
+      <span className="inline-flex items-center rounded-full bg-destructive/10 px-2 py-0.5 text-xs font-medium text-destructive">
+        {errorCount === 1
+          ? t('ui.collapsible.errorSingular', '{{count}} error', { count: errorCount })
+          : t('ui.collapsible.errorPlural', '{{count}} errors', { count: errorCount })}
+      </span>
+    ) : null
+
+    return (
+      <div className={cn('rounded-lg border bg-card', errorCount > 0 && 'border-destructive')}>
+        {title && (
+          <Button
+            type="button"
+            variant="muted"
+            onClick={toggle}
+            className={cn(
+              'w-full px-4 py-3 text-sm font-medium hover:bg-accent/50 rounded-lg',
+              chevronPosition === 'left' ? 'justify-start gap-2' : 'justify-between',
+            )}
+            aria-expanded={expanded}
+            aria-controls={contentId}
+          >
+            {chevronPosition === 'left' ? (
+              <>
+                {chevronIcon}
+                <span className="flex items-center gap-2">
+                  {icon && <span className="relative shrink-0 text-muted-foreground">{icon}{!expanded && errorCount > 0 && <span className="absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive" />}</span>}
+                  <span>{title}</span>
+                  {fieldCountLabel}
+                  {errorBadge}
+                </span>
+              </>
+            ) : (
+              <>
+                <span className="flex items-center gap-2">
+                  {icon && <span className="relative shrink-0 text-muted-foreground">{icon}{!expanded && errorCount > 0 && <span className="absolute -right-0.5 -top-0.5 size-2 rounded-full bg-destructive" />}</span>}
+                  <span>{title}</span>
+                  {fieldCountLabel}
+                  {errorBadge}
+                </span>
+                {chevronIcon}
+              </>
+            )}
+          </Button>
+        )}
+        <div
+          id={contentId}
+          className={cn(
+            'motion-safe:transition-all motion-safe:duration-200 overflow-hidden',
+            expanded ? 'max-h-[5000px] opacity-100' : 'max-h-0 opacity-0'
+          )}
+        >
+          <div className="px-4 py-3">
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  }
+)

package/src/backend/crud/CollapsibleZoneLayout.tsx

@@ -0,0 +1,234 @@
+'use client'
+import * as React from 'react'
+import { ChevronsLeft, ChevronsRight } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Button } from '../../primitives/button'
+import { useZoneCollapse } from './useZoneCollapse'
+import type { LucideIcon } from 'lucide-react'
+
+const SIDE_BY_SIDE_MIN_WIDTH = 1280
+
+export interface ZoneSectionDescriptor {
+  id: string
+  icon: LucideIcon
+  label: string
+  errorCount?: number
+}
+
+export interface CollapsibleZoneLayoutProps {
+  zone1: React.ReactNode
+  zone2: React.ReactNode
+  entityName: string
+  pageType: string
+  zone1DefaultWidth?: string
+  errorCount?: number
+  isDirty?: boolean
+  /** Section descriptors for the collapsed rail icon sidebar. When omitted the rail shows the legacy minimal view. */
+  sections?: ZoneSectionDescriptor[]
+}
+
+function subscribeViewport(callback: () => void) {
+  const mediaQuery = window.matchMedia('(min-width: 1024px)')
+  mediaQuery.addEventListener('change', callback)
+  return () => mediaQuery.removeEventListener('change', callback)
+}
+
+function getViewportSnapshot() {
+  return window.matchMedia('(min-width: 1024px)').matches
+}
+
+function getViewportServerSnapshot() {
+  return false
+}
+
+export function CollapsibleZoneLayout({
+  zone1,
+  zone2,
+  entityName,
+  pageType,
+  zone1DefaultWidth,
+  errorCount = 0,
+  isDirty = false,
+  sections,
+}: CollapsibleZoneLayoutProps) {
+  const t = useT()
+  const { collapsed, setCollapsed } = useZoneCollapse(pageType)
+  const canCollapse = React.useSyncExternalStore(
+    subscribeViewport,
+    getViewportSnapshot,
+    getViewportServerSnapshot,
+  )
+  const layoutRef = React.useRef<HTMLDivElement>(null)
+  const expandButtonRef = React.useRef<HTMLButtonElement>(null)
+  const [containerWidth, setContainerWidth] = React.useState(() => (typeof window === 'undefined' ? 0 : window.innerWidth))
+  const [expandedWhileConstrained, setExpandedWhileConstrained] = React.useState(false)
+
+  React.useEffect(() => {
+    const node = layoutRef.current
+    if (!node) return
+
+    const updateWidth = (nextWidth: number) => {
+      setContainerWidth((prev) => (Math.abs(prev - nextWidth) < 1 ? prev : nextWidth))
+    }
+
+    const measure = () => {
+      updateWidth(node.getBoundingClientRect().width || window.innerWidth)
+    }
+
+    measure()
+
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', measure)
+      return () => window.removeEventListener('resize', measure)
+    }
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (!entry) return
+      updateWidth(entry.contentRect.width)
+    })
+
+    observer.observe(node)
+    return () => observer.disconnect()
+  }, [])
+
+  const canShowSideBySide = containerWidth >= SIDE_BY_SIDE_MIN_WIDTH
+
+  React.useEffect(() => {
+    if (canShowSideBySide) {
+      setExpandedWhileConstrained(false)
+    }
+  }, [canShowSideBySide])
+
+  const showCollapsedRail = canCollapse && (collapsed || (!canShowSideBySide && !expandedWhileConstrained))
+  const showStackedExpanded = !showCollapsedRail && !canShowSideBySide
+  const layoutMode = showCollapsedRail ? 'collapsed' : showStackedExpanded ? 'stacked' : 'side-by-side'
+  const zone1SideBySideStyle = zone1DefaultWidth
+    ? { width: zone1DefaultWidth, flexBasis: zone1DefaultWidth }
+    : undefined
+
+  const handleExpand = React.useCallback(() => {
+    if (!canCollapse) return
+    setCollapsed(false)
+    setExpandedWhileConstrained(!canShowSideBySide)
+  }, [canCollapse, canShowSideBySide, setCollapsed])
+
+  const handleCollapse = React.useCallback(() => {
+    if (!canCollapse) return
+    setExpandedWhileConstrained(false)
+    setCollapsed(true)
+    requestAnimationFrame(() => {
+      expandButtonRef.current?.focus()
+    })
+  }, [canCollapse, setCollapsed])
+
+  return (
+    <div
+      ref={layoutRef}
+      data-zone-layout-mode={layoutMode}
+      className={cn(
+        'flex gap-4',
+        showStackedExpanded ? 'flex-col' : 'flex-col lg:flex-row',
+      )}
+    >
+      {showCollapsedRail ? (
+        <>
+          <div className="hidden lg:flex shrink-0 flex-col items-center gap-3">
+            <Button
+              ref={expandButtonRef}
+              type="button"
+              variant="default"
+              size="sm"
+              onClick={handleExpand}
+              className="h-auto rounded-[10px] px-1.5 py-2 shadow-sm"
+              aria-label={t('ui.zone.expand', 'Expand form panel')}
+            >
+              <ChevronsRight className="size-4" />
+            </Button>
+            {sections?.length ? (
+              <div className="flex flex-col items-center gap-2 rounded-[14px] border border-border/70 bg-card px-2 py-3">
+                {sections.map((section) => {
+                  const SectionIcon = section.icon
+                  const hasErrors = Boolean(section.errorCount && section.errorCount > 0)
+                  return (
+                    <div
+                      key={section.id}
+                      className="relative flex size-9 items-center justify-center rounded-[10px] border border-transparent bg-muted/70 text-muted-foreground"
+                      title={section.label}
+                    >
+                      <SectionIcon className="size-4" />
+                      {hasErrors ? (
+                        <span className="absolute right-1.5 top-1.5 size-1.5 rounded-full bg-destructive" />
+                      ) : null}
+                    </div>
+                  )
+                })}
+              </div>
+            ) : null}
+          </div>
+          {/* Zone 2 takes full width */}
+          <div className="min-w-0 flex-1">
+            {zone2}
+          </div>
+        </>
+      ) : showStackedExpanded ? (
+        <>
+          <div className="w-full space-y-2">
+            {canCollapse ? (
+              <div className="flex justify-end">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={handleCollapse}
+                  className="h-auto rounded-[6px] border bg-card px-1.5 py-2"
+                  aria-label={t('ui.zone.collapse', 'Collapse form panel')}
+                >
+                  <ChevronsLeft className="size-4" />
+                </Button>
+              </div>
+            ) : null}
+            <div className="w-full">
+              {zone1}
+            </div>
+          </div>
+
+          <div className="min-w-0 w-full">
+            {zone2}
+          </div>
+        </>
+      ) : (
+        <>
+          {/* Zone 1 — CrudForm area */}
+          <div
+            className={cn('w-full lg:shrink-0', zone1DefaultWidth ? undefined : 'lg:w-[40%]')}
+            style={zone1SideBySideStyle}
+          >
+            {zone1}
+          </div>
+
+          {/* Divider with collapse toggle */}
+          <div className="hidden lg:flex relative shrink-0 w-8 items-start justify-center pt-4">
+            <div className="absolute inset-y-0 left-1/2 w-px -translate-x-1/2 bg-border" />
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={handleCollapse}
+              className="relative z-10 h-auto rounded-[6px] border bg-card px-1.5 py-2"
+              aria-label={t('ui.zone.collapse', 'Collapse form panel')}
+            >
+              <ChevronsLeft className="size-4" />
+            </Button>
+          </div>
+
+          {/* Zone 2 — Tabs / related data area */}
+          <div className="min-w-0 w-full lg:flex-1">
+            {zone2}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

package/src/backend/crud/__tests__/useGroupCollapse.test.ts

@@ -0,0 +1,38 @@
+/** @jest-environment jsdom */
+import { act, renderHook } from '@testing-library/react'
+import { useGroupCollapse } from '../useGroupCollapse'
+
+describe('useGroupCollapse', () => {
+  beforeEach(() => { localStorage.clear() })
+
+  it('defaults to expanded=true', () => {
+    const { result } = renderHook(() => useGroupCollapse('page', 'grp1'))
+    expect(result.current.expanded).toBe(true)
+  })
+
+  it('honors explicit defaultExpanded=false', () => {
+    const { result } = renderHook(() => useGroupCollapse('page', 'grp2', false))
+    expect(result.current.expanded).toBe(false)
+  })
+
+  it('writes collapsed state to om:collapsible:<page>:<group>', () => {
+    const { result } = renderHook(() => useGroupCollapse('people', 'basics'))
+    act(() => { result.current.toggle() })
+    expect(result.current.expanded).toBe(false)
+    expect(localStorage.getItem('om:collapsible:people:basics')).toBe(JSON.stringify('0'))
+  })
+
+  it('accepts functional setExpanded', () => {
+    const { result } = renderHook(() => useGroupCollapse('page', 'grp3'))
+    act(() => { result.current.setExpanded((prev) => !prev) })
+    expect(result.current.expanded).toBe(false)
+  })
+
+  it('scopes state per (pageType, groupId) pair', () => {
+    localStorage.setItem('om:collapsible:p1:g', JSON.stringify('0'))
+    const { result: a } = renderHook(() => useGroupCollapse('p1', 'g'))
+    const { result: b } = renderHook(() => useGroupCollapse('p2', 'g'))
+    expect(a.current.expanded).toBe(false)
+    expect(b.current.expanded).toBe(true)
+  })
+})