@open-mercato/ui 0.6.1-develop.3256.1.fe3dec2464 → 0.6.1-develop.3260.1.dc719cac84

package/src/backend/inputs/TagsInput.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '../../primitives/button'
-import { IconButton } from '../../primitives/icon-button'
+import { Tag } from '../../primitives/tag'
 
 export type TagsInputOption = {
   value: string
@@ -208,24 +208,21 @@ export function TagsInput({
           const label = option?.label ?? tag
           const description = option?.description
           return (
-            <span key={tag} className="inline-flex items-center gap-2 rounded-sm bg-muted px-2 py-0.5 text-xs">
+            <Tag
+              key={tag}
+              shape="square"
+              variant="default"
+              disabled={disabled}
+              onRemove={() => removeTag(tag)}
+              removeAriaLabel={t('ui.inputs.tagsInput.removeTag', 'Remove {label}', { label })}
+            >
               <span className="flex flex-col items-start leading-tight">
                 <span className="whitespace-nowrap">{label}</span>
                 {description ? (
                   <span className="text-overline text-muted-foreground">{description}</span>
                 ) : null}
               </span>
-              <IconButton
-                type="button"
-                variant="ghost"
-                size="xs"
-                className="opacity-60 hover:opacity-100"
-                onClick={() => removeTag(tag)}
-                disabled={disabled}
-              >
-                ×
-              </IconButton>
-            </span>
+            </Tag>
           )
         })}
         <input

package/src/backend/inputs/TimeInput.tsx

@@ -109,7 +109,8 @@ export function TimeInput({
   )
 
   const wrapperClass = 'w-14'
-  const innerInputClass = 'text-center tabular-nums'
+  const innerInputClass =
+    'text-center tabular-nums leading-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0'
 
   return (
     <div className={cn('flex items-center gap-1', className)}>

package/src/backend/inputs/TimePicker.tsx

@@ -4,8 +4,10 @@ import * as React from 'react'
 import { ClockIcon } from 'lucide-react'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
-import { Popover, PopoverContent, PopoverTrigger } from '../../primitives/popover'
-import { TimeInput } from './TimeInput'
+import {
+  TimePicker as TimePickerPrimitive,
+  formatTimePickerDisplay,
+} from '../../primitives/time-picker'
 
 export type TimePickerProps = {
   value?: string | null
@@ -26,6 +28,14 @@ function currentHHMM(): string {
   return `${hour}:${minute}`
 }
 
+/**
+ * Legacy popover-anchored time picker. Preserved for backward compatibility with
+ * existing CrudForm `type: 'time'` consumers and DateTimePicker. Internally a shim
+ * over the new `<TimePicker>` primitive from `@open-mercato/ui/primitives/time-picker`.
+ *
+ * `minuteStep` maps to `intervalMinutes` (default 30 for sane slot list size).
+ * `showNowButton` / `showClearButton` render as `legacyFooterActions`.
+ */
 export function TimePicker({
   value,
   onChange,
@@ -33,9 +43,13 @@ export function TimePicker({
   disabled = false,
   readOnly = false,
   className,
-  minuteStep = 1,
+  minuteStep = 30,
   showNowButton = true,
-  showClearButton = true,
+  // Default changed 2026-05-11 from `true` → `false`: the new primitive's Cancel
+  // button already exits the popover without committing, which is what users mean
+  // by "Clear" in most flows. Pass `showClearButton={true}` to opt back in when
+  // you need an explicit "set value to null" action distinct from "dismiss".
+  showClearButton = false,
 }: TimePickerProps) {
   const t = useT()
   const [open, setOpen] = React.useState(false)
@@ -43,78 +57,93 @@ export function TimePicker({
   const placeholderText = placeholder ?? t('ui.timePicker.placeholder', 'Pick a time')
   const nowText = t('ui.timePicker.nowButton', 'Now')
   const clearText = t('ui.timePicker.clearButton', 'Clear')
+  const isInteractive = !disabled && !readOnly
+
+  // Render the trigger label in the same 12h "HH:MM AM/PM" format as the slot list
+  // inside the popover so users see one consistent representation.
+  const displayValue = value
+    ? (() => {
+        const { main, suffix } = formatTimePickerDisplay(value, '12h')
+        return suffix ? `${main} ${suffix}` : main
+      })()
+    : null
 
-  const handleTimeChange = React.useCallback(
-    (time: string) => {
-      onChange(time)
-    },
-    [onChange]
+  const triggerButton = (
+    <button
+      type="button"
+      data-crud-focus-target=""
+      disabled={disabled}
+      aria-haspopup="dialog"
+      className={cn(
+        'w-full h-10 flex items-center gap-2 rounded-md border bg-background px-3 text-sm text-left transition-colors',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
+        'disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed',
+        readOnly && 'cursor-default opacity-70',
+        !value && 'text-muted-foreground',
+        className,
+      )}
+      onClick={!isInteractive ? (event) => event.preventDefault() : undefined}
+    >
+      <ClockIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
+      <span className="flex-1 truncate">{displayValue ?? placeholderText}</span>
+    </button>
   )
 
-  const handleNow = React.useCallback(() => {
-    onChange(currentHHMM())
-    setOpen(false)
-  }, [onChange])
+  if (!isInteractive) {
+    return triggerButton
+  }
 
-  const handleClear = React.useCallback(() => {
-    onChange(null)
-    setOpen(false)
-  }, [onChange])
+  const pinnedTopActions: Array<{
+    label: string
+    onClick: () => void
+    icon?: React.ReactNode
+    rightText?: string
+  }> = []
+  if (showNowButton) {
+    const nowValue = currentHHMM()
+    const { main: nowMain, suffix: nowSuffix } = formatTimePickerDisplay(nowValue, '12h')
+    pinnedTopActions.push({
+      label: nowText,
+      icon: <ClockIcon aria-hidden="true" />,
+      rightText: nowSuffix ? `${nowMain} ${nowSuffix}` : nowMain,
+      onClick: () => {
+        onChange(nowValue)
+        setOpen(false)
+      },
+    })
+  }
 
-  const isInteractive = !disabled && !readOnly
+  const legacyFooterActions: Array<{ label: string; onClick: () => void; variant: 'link' | 'muted' }> = []
+  if (showClearButton) {
+    legacyFooterActions.push({
+      label: clearText,
+      onClick: () => {
+        onChange(null)
+        setOpen(false)
+      },
+      variant: 'muted',
+    })
+  }
 
   return (
-    <Popover open={open} onOpenChange={isInteractive ? setOpen : undefined}>
-      <PopoverTrigger asChild>
-        <button
-          type="button"
-          data-crud-focus-target=""
-          disabled={disabled}
-          aria-haspopup="dialog"
-          className={cn(
-            'w-full h-9 flex items-center gap-2 rounded border px-3 text-sm text-left',
-            'bg-background transition-colors',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
-            'disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed',
-            readOnly && 'cursor-default opacity-70',
-            !value && 'text-muted-foreground',
-            className
-          )}
-          onClick={isInteractive ? undefined : (e) => e.preventDefault()}
-        >
-          <ClockIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
-          <span className="flex-1 truncate">{value ?? placeholderText}</span>
-        </button>
-      </PopoverTrigger>
-      <PopoverContent className="p-3 w-auto min-w-[180px]">
-        <TimeInput
-          value={value}
-          onChange={handleTimeChange}
-          minuteStep={minuteStep}
-        />
-        {(showNowButton || showClearButton) && (
-          <div className="flex items-center justify-between gap-2 mt-3 pt-2 border-t">
-            {showNowButton && (
-              <button
-                type="button"
-                onClick={handleNow}
-                className="text-sm text-primary hover:underline focus-visible:outline-none"
-              >
-                {nowText}
-              </button>
-            )}
-            {showClearButton && (
-              <button
-                type="button"
-                onClick={handleClear}
-                className="text-sm text-muted-foreground hover:text-foreground hover:underline focus-visible:outline-none ml-auto"
-              >
-                {clearText}
-              </button>
-            )}
-          </div>
-        )}
-      </PopoverContent>
-    </Popover>
+    <TimePickerPrimitive
+      value={value ?? null}
+      onChange={(next) => onChange(next)}
+      onApply={(next) => {
+        onChange(next)
+      }}
+      intervalMinutes={Math.max(1, minuteStep)}
+      // Trigger button already displays current value — don't duplicate it
+      // inside the popover header.
+      showHeader={false}
+      showFooter
+      headerPlaceholder={placeholderText}
+      pinnedTopActions={pinnedTopActions.length > 0 ? pinnedTopActions : undefined}
+      legacyFooterActions={legacyFooterActions.length > 0 ? legacyFooterActions : undefined}
+      trigger={triggerButton}
+      open={open}
+      onOpenChange={setOpen}
+      disabled={disabled}
+    />
   )
 }

package/src/backend/inputs/__tests__/ComboboxInput.test.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react'
+import { act, render, fireEvent, waitFor } from '@testing-library/react'
+import { ComboboxInput } from '../ComboboxInput'
+
+function getInput(container: HTMLElement): HTMLInputElement {
+  const el = container.querySelector('input')
+  if (!el) throw new Error('input not found')
+  return el as HTMLInputElement
+}
+
+describe('ComboboxInput — eager label resolution', () => {
+  it('renders the raw value when nothing can resolve it', () => {
+    const { container } = render(<ComboboxInput value="uuid-123" onChange={() => {}} />)
+    expect(getInput(container).value).toBe('uuid-123')
+  })
+
+  it('hydrates the label from seedOptions without any interaction', () => {
+    const { container } = render(
+      <ComboboxInput
+        value="uuid-123"
+        onChange={() => {}}
+        seedOptions={[{ value: 'uuid-123', label: 'Acme Corp' }]}
+      />,
+    )
+    expect(getInput(container).value).toBe('Acme Corp')
+  })
+
+  it('resolves the label via resolveLabel (async) on mount', async () => {
+    const resolveLabel = jest.fn(async (value: string) => `Resolved ${value}`)
+    const { container } = render(
+      <ComboboxInput value="uuid-123" onChange={() => {}} resolveLabel={resolveLabel} />,
+    )
+    // before the promise resolves, falls back to the raw value
+    expect(getInput(container).value).toBe('uuid-123')
+    await waitFor(() => expect(getInput(container).value).toBe('Resolved uuid-123'))
+    expect(resolveLabel).toHaveBeenCalledWith('uuid-123')
+  })
+
+  it('resolves the label via a synchronous resolveLabel', () => {
+    const { container } = render(
+      <ComboboxInput
+        value="uuid-123"
+        onChange={() => {}}
+        resolveLabel={(value) => (value === 'uuid-123' ? 'Sync Label' : value)}
+      />,
+    )
+    expect(getInput(container).value).toBe('Sync Label')
+  })
+
+  it('does not call resolveLabel when the value is already covered by suggestions', () => {
+    const resolveLabel = jest.fn(() => 'should-not-be-used')
+    render(
+      <ComboboxInput
+        value="uuid-123"
+        onChange={() => {}}
+        suggestions={[{ value: 'uuid-123', label: 'Already Known' }]}
+        resolveLabel={resolveLabel}
+      />,
+    )
+    expect(resolveLabel).not.toHaveBeenCalled()
+  })
+
+  it('falls back to loadSuggestions() (no query) when resolveLabel is absent', async () => {
+    const loadSuggestions = jest.fn(async () => [{ value: 'uuid-123', label: 'From Loader' }])
+    const { container } = render(
+      <ComboboxInput value="uuid-123" onChange={() => {}} loadSuggestions={loadSuggestions} />,
+    )
+    await waitFor(() => expect(getInput(container).value).toBe('From Loader'))
+    expect(loadSuggestions).toHaveBeenCalledWith()
+  })
+
+  it('keeps the resolved label after a blur revert when custom values are disallowed', async () => {
+    const onChange = jest.fn()
+    const { container } = render(
+      <ComboboxInput
+        value="uuid-123"
+        onChange={onChange}
+        allowCustomValues={false}
+        resolveLabel={async () => 'Acme Corp'}
+      />,
+    )
+    await waitFor(() => expect(getInput(container).value).toBe('Acme Corp'))
+    const input = getInput(container)
+    act(() => {
+      fireEvent.change(input, { target: { value: 'partial typing' } })
+      fireEvent.blur(input)
+    })
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 250))
+    })
+    expect(getInput(container).value).toBe('Acme Corp')
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('does not bake a placeholder back into the input on blur while resolution is pending', async () => {
+    let resolve: (label: string) => void = () => {}
+    const resolveLabel = jest.fn(
+      () => new Promise<string>((res) => { resolve = res }),
+    )
+    const { container } = render(
+      <ComboboxInput
+        value="uuid-123"
+        onChange={() => {}}
+        allowCustomValues={false}
+        resolveLabel={resolveLabel}
+      />,
+    )
+    const input = getInput(container)
+    // user clears the field before resolution lands, then blurs
+    act(() => {
+      fireEvent.change(input, { target: { value: '' } })
+      fireEvent.blur(input)
+    })
+    await act(async () => {
+      await new Promise((res) => setTimeout(res, 250))
+    })
+    // the raw uuid must not have been written into the visible input
+    expect(getInput(container).value).not.toBe('uuid-123')
+    // once resolution arrives, the label shows up
+    act(() => resolve('Acme Corp'))
+    await waitFor(() => expect(getInput(container).value).toBe('Acme Corp'))
+  })
+
+  it('updates the displayed label when the value changes to one resolvable via resolveLabel', async () => {
+    const resolveLabel = jest.fn(async (value: string) => `Label-${value}`)
+    const { container, rerender } = render(
+      <ComboboxInput value="a" onChange={() => {}} resolveLabel={resolveLabel} />,
+    )
+    await waitFor(() => expect(getInput(container).value).toBe('Label-a'))
+    rerender(<ComboboxInput value="b" onChange={() => {}} resolveLabel={resolveLabel} />)
+    await waitFor(() => expect(getInput(container).value).toBe('Label-b'))
+  })
+})

package/src/backend/inputs/__tests__/TimePicker.test.tsx

@@ -23,9 +23,9 @@ describe('TimePicker SSR render', () => {
     expect(html).toContain('Pick a time')
   })
 
-  it('shows HH:MM value in trigger when value is provided', () => {
+  it('shows 12h-formatted value in trigger when value is provided (matches slot list)', () => {
     const html = render(<TimePicker value="14:30" onChange={jest.fn()} />)
-    expect(html).toContain('14:30')
+    expect(html).toContain('02:30 PM')
   })
 
   it('renders trigger button with aria-haspopup="dialog"', () => {

package/src/backend/utils/__tests__/richTextSanitizer.test.ts

@@ -8,9 +8,12 @@ describe('richTextSanitizer', () => {
   })
 
   it('removes executable content and unsafe attributes', () => {
+    // `<img>` is allowlisted (RichEditor `insertImage` toolbar action), so
+    // the tag stays but `onerror` is stripped and `color:red` (CSS keyword,
+    // not in the hex/rgb regex) falls away too.
     expect(
       sanitizeHtmlRichText('<p onclick="alert(1)" style="color:red">Hi<script>alert(1)</script><img src=x onerror=alert(2)>there</p>'),
-    ).toBe('<p>Hithere</p>')
+    ).toBe('<p>Hi<img src="x" />there</p>')
   })
 
   it('removes unsafe href values from links', () => {
@@ -40,7 +43,7 @@ describe('richTextSanitizer', () => {
       ),
     ).toEqual({
       command: 'insertHTML',
-      value: '<p>Safe text</p><a>Bad link</a>',
+      value: '<p>Safe text</p><img src="x" /><a>Bad link</a>',
     })
   })
 

package/src/backend/utils/customFieldForms.ts

@@ -85,7 +85,7 @@ export function buildFormFieldFromCustomFieldDef(
     case 'datetime':
       return { id, label, type: 'datetime', ...baseProps }
     case 'multiline': {
-      let editor: 'simple' | 'uiw' | 'html' = 'uiw'
+      let editor: 'simple' | 'uiw' | 'html' = 'html'
       if (def.editor === 'simpleMarkdown') editor = 'simple'
       else if (def.editor === 'htmlRichText') editor = 'html'
       return { id, label, type: 'richtext', ...baseProps, editor }
@@ -136,7 +136,7 @@ export function buildFormFieldFromCustomFieldDef(
         return base
       }
       if (def.kind === 'text' && typeof def.editor === 'string' && def.editor) {
-        let editor: 'simple' | 'uiw' | 'html' = 'uiw'
+        let editor: 'simple' | 'uiw' | 'html' = 'html'
         if (def.editor === 'simpleMarkdown') editor = 'simple'
         else if (def.editor === 'htmlRichText') editor = 'html'
         return { id, label, type: 'richtext', ...baseProps, editor }

package/src/portal/components/PortalEmptyState.tsx

@@ -1,32 +1,37 @@
+/**
+ * @deprecated Import `EmptyState` from `@open-mercato/ui/primitives/empty-state`
+ * directly with `variant="subtle"` and `size="lg"` (matches the previous
+ * portal layout). The standalone `PortalEmptyState` is replaced by the
+ * unified primitive in DS Foundation v3.
+ *
+ * This shim preserves the legacy import path
+ * `@open-mercato/ui/portal/components/PortalEmptyState` for existing
+ * portal consumers — it forwards to the primitive with the portal-style
+ * variant + size pre-set.
+ */
+
 "use client"
-import type { ReactNode } from 'react'
 
-type PortalEmptyStateProps = {
-  icon?: ReactNode
+import * as React from 'react'
+import { EmptyState } from '../../primitives/empty-state'
+
+export type PortalEmptyStateProps = {
+  icon?: React.ReactNode
   title: string
   description?: string
-  action?: ReactNode
+  action?: React.ReactNode
 }
 
-/**
- * Empty state placeholder for portal sections with no content.
- * Dashed border, centered layout, optional icon and CTA.
- */
+/** @deprecated Use `EmptyState` from `@open-mercato/ui/primitives/empty-state` with `variant="subtle"` and `size="lg"`. */
 export function PortalEmptyState({ icon, title, description, action }: PortalEmptyStateProps) {
   return (
-    <div className="flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed py-12 text-center">
-      {icon ? (
-        <div className="flex size-10 items-center justify-center rounded-lg bg-muted text-muted-foreground">
-          {icon}
-        </div>
-      ) : null}
-      <div>
-        <p className="text-sm font-medium text-foreground">{title}</p>
-        {description ? (
-          <p className="mt-0.5 max-w-sm text-sm text-muted-foreground">{description}</p>
-        ) : null}
-      </div>
-      {action ?? null}
-    </div>
+    <EmptyState
+      variant="subtle"
+      size="lg"
+      icon={icon}
+      title={title}
+      description={description}
+      actions={action}
+    />
   )
 }