@open-mercato/ui 0.6.1-develop.3256.1.fe3dec2464 → 0.6.1-develop.3276.1.1fcd145078

package/src/backend/FlashMessages.tsx

@@ -1,10 +1,16 @@
 "use client"
 import * as React from 'react'
-import { X } from 'lucide-react'
-import { IconButton } from '../primitives/icon-button'
+import { Alert, type AlertStatus } from '../primitives/alert'
 
 export type FlashKind = 'success' | 'error' | 'warning' | 'info'
 
+const flashKindToAlertStatus: Record<FlashKind, AlertStatus> = {
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  info: 'information',
+}
+
 // Programmatic API to show a flash message without navigation.
 // Consumers can import { flash } and call flash('text', 'error').
 export function flash(message: string, type: FlashKind = 'info') {
@@ -141,32 +147,25 @@ function FlashMessagesInner() {
     return () => window.removeEventListener('flash', handler as EventListener)
   }, [showFlash])
 
-  if (!msg) return null
+  const handleDismiss = React.useCallback(() => {
+    clearDismissTimer()
+    setMsg(null)
+  }, [clearDismissTimer])
 
-  const colorMap: Record<FlashKind, string> = {
-    success: 'bg-status-success-icon',
-    error: 'bg-status-error-icon',
-    warning: 'bg-status-warning-icon',
-    info: 'bg-status-info-icon',
-  }
-  const color = colorMap[kind]
+  if (!msg) return null
 
   return (
     <div className="pointer-events-none fixed left-3 right-3 top-3 z-toast sm:left-auto sm:right-4 sm:w-[380px]">
-      <div className={`pointer-events-auto rounded px-3 py-2 text-white shadow-md ${color}`}>
-        <div className="flex items-center justify-between gap-2">
-          <div className="text-sm">{msg}</div>
-          <IconButton
-            type="button"
-            variant="ghost"
-            size="sm"
-            className="text-white/90 hover:text-white hover:bg-white/10"
-            onClick={() => setMsg(null)}
-            aria-label="Dismiss"
-          >
-            <X size={16} />
-          </IconButton>
-        </div>
+      <div className="pointer-events-auto">
+        <Alert
+          status={flashKindToAlertStatus[kind]}
+          size="sm"
+          dismissible
+          onDismiss={handleDismiss}
+          className="shadow-md"
+        >
+          {msg}
+        </Alert>
       </div>
     </div>
   )

package/src/backend/JsonBuilder.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import { Button } from '../primitives/button'
 import { IconButton } from '../primitives/icon-button'
 import { Input } from '../primitives/input'
+import { InlineInput } from '../primitives/inline-input'
 import {
   Select,
   SelectContent,
@@ -327,8 +328,9 @@ function JsonNode({ data, onChange, onDelete, readOnly, label, isRoot }: JsonNod
                         <div key={idx} className="flex">
                             <div className="pt-2">
                                 {/* Key Renamer */}
-                                <input
-                                    className="w-full sm:w-[100px] text-xs font-mono border-b border-transparent hover:border-gray-300 focus-visible:border-ring bg-transparent focus-visible:outline-none text-right pr-1"
+                                <InlineInput
+                                    className="w-full sm:w-[100px]"
+                                    inputClassName="text-right text-xs font-mono pr-1"
                                     value={key}
                                     onChange={(e) => handleKeyRename(key, e.target.value)}
                                     disabled={readOnly}

package/src/backend/LogList.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@open-mercato/ui/primitives/accordion'
+import { Badge, type BadgeProps } from '@open-mercato/ui/primitives/badge'
+
+export type LogListLevel = 'info' | 'warn' | 'warning' | 'error' | 'debug' | string
+
+export type LogListEntry = {
+  id: string
+  /** Pre-formatted timestamp (consumer formats with `formatDateTime()` / locale). */
+  time: React.ReactNode
+  /** Raw level value — drives the badge color via the built-in map. */
+  level: LogListLevel
+  /** Optional translated label override; falls back to `level` verbatim. */
+  levelLabel?: React.ReactNode
+  /** Trigger message (one-liner — truncates in the trigger row, full text available inside `body`). */
+  message: React.ReactNode
+  /** Body content rendered inside `AccordionContent` when expanded — typically a metadata grid + JSON payload. */
+  body: React.ReactNode
+}
+
+type LogLevelBadgeVariant = NonNullable<BadgeProps['variant']>
+
+const LOG_LEVEL_BADGE_VARIANT: Record<string, LogLevelBadgeVariant> = {
+  info: 'info',
+  warn: 'warning',
+  warning: 'warning',
+  error: 'error',
+  debug: 'neutral',
+}
+
+export type LogLevelBadgeProps = {
+  level: LogListLevel
+  label?: React.ReactNode
+  className?: string
+}
+
+export function LogLevelBadge({ level, label, className }: LogLevelBadgeProps) {
+  const key = typeof level === 'string' ? level.toLowerCase() : ''
+  const variant = LOG_LEVEL_BADGE_VARIANT[key] ?? 'secondary'
+  return (
+    <Badge variant={variant} className={className} data-log-level={key || undefined}>
+      {label ?? level}
+    </Badge>
+  )
+}
+
+export type LogListProps = {
+  entries: LogListEntry[]
+  /** Optional message rendered when the list is empty. Pass through `useT()` for i18n. */
+  emptyMessage?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Unified `Accordion`-driven log list for admin "logs" tabs (integrations,
+ * data sync runs, payment gateway transactions, …). Replaces the per-module
+ * `<table>` + `expandedLogId` row-expand pattern with a Figma-aligned card
+ * list that uses the DS `Accordion` primitive under the hood. Each row
+ * shows time + level badge + message in the trigger; the consumer controls
+ * the expanded body content (metadata grid, JSON payload, etc.).
+ *
+ * `type='single' collapsible` matches the previous "one expanded row at a
+ * time" behaviour. Switch to `Accordion` directly if you need multi-open.
+ */
+export function LogList({ entries, emptyMessage, className }: LogListProps) {
+  if (entries.length === 0) {
+    return emptyMessage ? (
+      <p className={cn('py-4 text-sm text-muted-foreground', className)} data-slot="log-list-empty">
+        {emptyMessage}
+      </p>
+    ) : null
+  }
+
+  return (
+    <Accordion
+      type="single"
+      collapsible
+      className={cn('space-y-2', className)}
+      data-slot="log-list"
+    >
+      {entries.map((entry) => (
+        <AccordionItem key={entry.id} value={entry.id} data-log-entry-id={entry.id}>
+          <AccordionTrigger triggerIcon="chevron">
+            <span className="grid w-full items-center gap-3 sm:grid-cols-[10rem_5rem_minmax(0,1fr)]">
+              <span className="truncate whitespace-nowrap text-xs text-muted-foreground sm:text-sm">
+                {entry.time}
+              </span>
+              <span className="justify-self-start">
+                <LogLevelBadge level={entry.level} label={entry.levelLabel} />
+              </span>
+              <span className="min-w-0 truncate text-left text-sm font-normal">
+                {entry.message}
+              </span>
+            </span>
+          </AccordionTrigger>
+          <AccordionContent>{entry.body}</AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  )
+}

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

@@ -60,17 +60,20 @@ describe('CrudForm — datetime field types render correct picker component', ()
     expect(html).toContain('Pick a time')
   })
 
-  it('type: datetime-local renders raw <input> (backward compatibility)', () => {
+  it('type: datetime-local renders DateTimePicker trigger (DS unification — no native input)', () => {
     const fields: CrudField[] = [{ id: 'at', label: 'At', type: 'datetime-local' }]
     const html = renderForm(fields)
-    expect(html).toContain('type="datetime-local"')
-    expect(html).not.toContain('Pick date and time')
+    expect(html).toContain('aria-haspopup="dialog"')
+    expect(html).toContain('data-slot="date-picker-trigger"')
+    expect(html).not.toContain('type="datetime-local"')
   })
 
-  it('type: date renders raw <input type="date"> (backward compatibility)', () => {
+  it('type: date renders DatePicker trigger (DS unification — no native input)', () => {
     const fields: CrudField[] = [{ id: 'dt', label: 'Date', type: 'date' }]
     const html = renderForm(fields)
-    expect(html).toContain('type="date"')
+    expect(html).toContain('aria-haspopup="dialog"')
+    expect(html).toContain('data-slot="date-picker-trigger"')
+    expect(html).not.toContain('type="date"')
   })
 
   it('datepicker shows formatted date in trigger when initialValues provided', () => {
@@ -87,9 +90,11 @@ describe('CrudForm — datetime field types render correct picker component', ()
     expect(html).toContain('2026')
   })
 
-  it('time shows HH:MM in trigger when initialValues provided', () => {
+  it('time shows 12h-formatted value in trigger when initialValues provided', () => {
     const fields: CrudField[] = [{ id: 'sync_time', label: 'Sync Time', type: 'time' }]
     const html = renderForm(fields, { sync_time: '14:30' })
-    expect(html).toContain('14:30')
+    // Legacy TimePicker shim renders the trigger in 12h "HH:MM AM/PM" format to
+    // match the slot list inside the popover.
+    expect(html).toContain('02:30 PM')
   })
 })

package/src/backend/__tests__/FilterOverlay.dateRange.test.tsx

@@ -0,0 +1,89 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import { FilterOverlay, type FilterDef, type FilterValues } from '../FilterOverlay'
+
+function renderOverlay({
+  filters,
+  initialValues = {},
+  onApply = jest.fn(),
+  onClear = jest.fn(),
+}: {
+  filters: FilterDef[]
+  initialValues?: FilterValues
+  onApply?: (v: FilterValues) => void
+  onClear?: () => void
+}) {
+  return render(
+    <I18nProvider locale="en" dict={{}}>
+      <FilterOverlay
+        open={true}
+        onOpenChange={() => {}}
+        filters={filters}
+        initialValues={initialValues}
+        onApply={onApply}
+        onClear={onClear}
+      />
+    </I18nProvider>,
+  )
+}
+
+describe('FilterOverlay dateRange — DS unification (DateRangePicker swap)', () => {
+  const dateRangeFilter: FilterDef = {
+    id: 'createdRange',
+    label: 'Created',
+    type: 'dateRange',
+  }
+
+  it('renders the DateRangePicker primitive trigger (not raw <input type="date">)', () => {
+    renderOverlay({ filters: [dateRangeFilter] })
+    expect(document.querySelector('[data-slot="date-range-picker-trigger"]')).toBeInTheDocument()
+    expect(document.querySelector('input[type="date"]')).toBeNull()
+  })
+
+  it('preserves the existing { from, to } string output shape on Apply (BC for consumers)', async () => {
+    const onApply = jest.fn()
+    renderOverlay({
+      filters: [dateRangeFilter],
+      initialValues: { createdRange: { from: '2026-05-01', to: '2026-05-09' } },
+      onApply,
+    })
+    // Apply existing values — output shape stays as { from: 'YYYY-MM-DD', to: 'YYYY-MM-DD' }.
+    // Multiple Apply buttons may exist (FilterOverlay top + DateRangePicker popover);
+    // pick the FilterOverlay top one (always rendered, popover may or may not be open).
+    const applyBtns = screen.getAllByRole('button', { name: /^apply$/i })
+    const overlayApply = applyBtns[0]
+    await act(async () => {
+      fireEvent.click(overlayApply)
+    })
+    expect(onApply).toHaveBeenCalledTimes(1)
+    const applied = onApply.mock.calls[0][0]
+    expect(applied.createdRange).toBeDefined()
+    expect(typeof applied.createdRange.from).toBe('string')
+    expect(typeof applied.createdRange.to).toBe('string')
+    expect(applied.createdRange.from).toBe('2026-05-01')
+    expect(applied.createdRange.to).toBe('2026-05-09')
+  })
+
+  it('renders the formatted range in the trigger when initial { from, to } is provided', () => {
+    renderOverlay({
+      filters: [dateRangeFilter],
+      initialValues: { createdRange: { from: '2026-05-01', to: '2026-05-09' } },
+    })
+    const trigger = document.querySelector('[data-slot="date-range-picker-trigger"]')
+    expect(trigger).toBeInTheDocument()
+    expect(trigger!.textContent).toContain('May')
+    expect(trigger!.textContent).toContain('2026')
+  })
+
+  it('handles empty / undefined values gracefully (no crash)', () => {
+    expect(() => {
+      renderOverlay({ filters: [dateRangeFilter], initialValues: {} })
+    }).not.toThrow()
+    expect(document.querySelector('[data-slot="date-range-picker-trigger"]')).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,163 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { LogLevelBadge, LogList, type LogListEntry } from '../LogList'
+
+function makeEntry(over: Partial<LogListEntry> = {}): LogListEntry {
+  return {
+    id: 'log-1',
+    time: '2026-05-12 10:00',
+    level: 'info',
+    message: 'Sample log message',
+    body: <div data-testid="body-1">Body of log-1</div>,
+    ...over,
+  }
+}
+
+describe('LogLevelBadge', () => {
+  it('applies the info palette by default (semantic status tokens)', () => {
+    const { container } = render(<LogLevelBadge level="info" />)
+    const badge = container.firstElementChild as HTMLElement
+    expect(badge).toHaveAttribute('data-log-level', 'info')
+    expect(badge.className).toContain('bg-status-info-bg')
+    expect(badge.className).toContain('text-status-info-text')
+  })
+
+  it('maps warn / warning / error / debug to the matching semantic palette', () => {
+    const { rerender, container } = render(<LogLevelBadge level="warn" />)
+    expect(container.firstElementChild!).toHaveAttribute('data-log-level', 'warn')
+    expect(container.firstElementChild!.className).toContain('bg-status-warning-bg')
+
+    rerender(<LogLevelBadge level="warning" />)
+    expect(container.firstElementChild!).toHaveAttribute('data-log-level', 'warning')
+    expect(container.firstElementChild!.className).toContain('bg-status-warning-bg')
+
+    rerender(<LogLevelBadge level="error" />)
+    expect(container.firstElementChild!).toHaveAttribute('data-log-level', 'error')
+    expect(container.firstElementChild!.className).toContain('bg-status-error-bg')
+
+    rerender(<LogLevelBadge level="debug" />)
+    expect(container.firstElementChild!).toHaveAttribute('data-log-level', 'debug')
+    expect(container.firstElementChild!.className).toContain('bg-status-neutral-bg')
+  })
+
+  it('renders an unrecognized level without status palette classes (falls back to Badge secondary)', () => {
+    const { container } = render(<LogLevelBadge level="custom-level" />)
+    const badge = container.firstElementChild as HTMLElement
+    expect(badge).toHaveAttribute('data-log-level', 'custom-level')
+    expect(badge.className).not.toContain('bg-status-info-bg')
+    expect(badge.className).not.toContain('bg-status-warning-bg')
+    expect(badge.className).not.toContain('bg-status-error-bg')
+    expect(badge.className).not.toContain('bg-status-neutral-bg')
+    expect(badge.className).toContain('bg-secondary')
+  })
+
+  it('honors a custom label and falls back to level when label is omitted', () => {
+    const { rerender } = render(<LogLevelBadge level="info" label="Information" />)
+    expect(screen.getByText('Information')).toBeInTheDocument()
+
+    rerender(<LogLevelBadge level="error" />)
+    expect(screen.getByText('error')).toBeInTheDocument()
+  })
+})
+
+describe('LogList', () => {
+  it('renders the empty message when entries are empty', () => {
+    render(<LogList entries={[]} emptyMessage="No log entries" />)
+    expect(screen.getByText('No log entries')).toBeInTheDocument()
+    expect(screen.getByText('No log entries').getAttribute('data-slot')).toBe('log-list-empty')
+  })
+
+  it('renders nothing when entries are empty and no empty message is provided', () => {
+    const { container } = render(<LogList entries={[]} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders one accordion item per entry with time / level / message in the trigger', () => {
+    render(
+      <LogList
+        entries={[
+          makeEntry({ id: 'a', time: '10:00', level: 'info', message: 'Connected' }),
+          makeEntry({ id: 'b', time: '10:01', level: 'error', message: 'Timeout' }),
+        ]}
+      />,
+    )
+    expect(screen.getByText('Connected')).toBeInTheDocument()
+    expect(screen.getByText('Timeout')).toBeInTheDocument()
+    expect(screen.getByText('10:00')).toBeInTheDocument()
+    expect(screen.getByText('10:01')).toBeInTheDocument()
+    expect(screen.getByText('info')).toBeInTheDocument()
+    expect(screen.getByText('error')).toBeInTheDocument()
+  })
+
+  it('forwards the entry id as data-log-entry-id on the AccordionItem', () => {
+    const { container } = render(
+      <LogList entries={[makeEntry({ id: 'log-42' })]} />,
+    )
+    expect(container.querySelector('[data-log-entry-id="log-42"]')).not.toBeNull()
+  })
+
+  it('hides each entry body until the trigger is clicked, then reveals it (single + collapsible)', () => {
+    const { container } = render(
+      <LogList
+        entries={[
+          makeEntry({ id: 'a', message: 'A' }),
+          makeEntry({ id: 'b', message: 'B' }),
+        ]}
+      />,
+    )
+    const items = container.querySelectorAll('[data-slot="accordion-item"]')
+    expect(items[0]).toHaveAttribute('data-state', 'closed')
+    expect(items[1]).toHaveAttribute('data-state', 'closed')
+
+    fireEvent.click(screen.getByRole('button', { name: /A/ }))
+    expect(items[0]).toHaveAttribute('data-state', 'open')
+    expect(items[1]).toHaveAttribute('data-state', 'closed')
+
+    fireEvent.click(screen.getByRole('button', { name: /B/ }))
+    expect(items[0]).toHaveAttribute('data-state', 'closed')
+    expect(items[1]).toHaveAttribute('data-state', 'open')
+  })
+
+  it('uses the levelLabel override when provided (e.g. translated level text)', () => {
+    render(
+      <LogList
+        entries={[
+          makeEntry({ level: 'warn', levelLabel: 'Ostrzeżenie' }),
+        ]}
+      />,
+    )
+    expect(screen.getByText('Ostrzeżenie')).toBeInTheDocument()
+    expect(screen.queryByText('warn')).toBeNull()
+  })
+
+  it('supports ReactNode message + body slots (not just strings); body mounts on expand', () => {
+    render(
+      <LogList
+        entries={[
+          {
+            id: 'rich',
+            time: <span data-testid="time">10:00:01</span>,
+            level: 'info',
+            message: <span data-testid="message">Detailed event</span>,
+            body: <pre data-testid="body">JSON payload</pre>,
+          },
+        ]}
+      />,
+    )
+    expect(screen.getByTestId('time')).toBeInTheDocument()
+    expect(screen.getByTestId('message')).toBeInTheDocument()
+    // Radix lazy-mounts AccordionContent children — body appears only after the trigger is opened.
+    expect(screen.queryByTestId('body')).toBeNull()
+    fireEvent.click(screen.getByRole('button', { name: /Detailed event/ }))
+    expect(screen.getByTestId('body')).toBeInTheDocument()
+  })
+
+  it('marks the root with data-slot="log-list"', () => {
+    const { container } = render(<LogList entries={[makeEntry()]} />)
+    expect(container.querySelector('[data-slot="log-list"]')).not.toBeNull()
+  })
+})

package/src/backend/crud/CollapsibleGroup.tsx

@@ -75,11 +75,21 @@ export const CollapsibleGroup = React.forwardRef<CollapsibleGroupHandle, Collaps
       <div
         id={`collapsible-group-wrapper-${groupId}`}
         className={cn(
-          'rounded-lg border bg-card',
+          // Aligned with Figma Accordion `210:4022`: rounded-10, three visual
+          // states (closed = white card + soft border + x-small shadow,
+          // hover-while-closed = bg-muted + no border + no shadow,
+          // open = bg-muted + no border + no shadow). Destructive border
+          // wins over the Figma states when the group has validation errors.
+          'rounded-[10px] border bg-card transition-colors',
           !isHydrated && 'invisible',
-          errorCount > 0 && 'border-destructive',
+          errorCount > 0
+            ? 'border-destructive'
+            : expanded
+              ? 'border-transparent bg-muted shadow-none'
+              : 'border-border shadow-xs hover:border-transparent hover:bg-muted hover:shadow-none',
         )}
         data-collapsible-group-id={groupId}
+        data-state={expanded ? 'open' : 'closed'}
         data-persistence-hydrated={isHydrated ? 'true' : 'false'}
         aria-hidden={isHydrated ? undefined : true}
       >
@@ -96,7 +106,11 @@ export const CollapsibleGroup = React.forwardRef<CollapsibleGroupHandle, Collaps
               variant="muted"
               onClick={toggle}
               className={cn(
-                'flex-1 px-2 py-1 text-sm font-medium hover:bg-accent/50 rounded-md',
+                // Defer hover styling to the surrounding wrapper so the whole
+                // row toggles to `bg-muted` together (Figma Accordion behaviour)
+                // instead of stacking a second hover layer over the trigger
+                // button.
+                'flex-1 rounded-md px-2 py-1 text-sm font-medium hover:bg-transparent dark:hover:bg-transparent',
                 chevronPosition === 'left' ? 'justify-start gap-2' : 'justify-between',
               )}
               aria-expanded={expanded}

package/src/backend/detail/InlineEditors.tsx

@@ -14,8 +14,10 @@ import {
   SelectValue,
 } from '@open-mercato/ui/primitives/select'
 import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { DatePicker } from '@open-mercato/ui/primitives/date-picker'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { cn } from '@open-mercato/shared/lib/utils'
+import { format } from 'date-fns'
 import { LoadingMessage } from './LoadingMessage'
 import { mapCrudServerErrorToFormErrors } from '../utils/serverErrors'
 import { MarkdownPreview } from '../markdown'
@@ -317,33 +319,82 @@ export function InlineTextEditor({
                 }
               }}
             >
-              {resolvedType === 'tel' ? (
-                <PhoneNumberField
-                  value={draft.length ? draft : undefined}
-                  onValueChange={(next) => {
-                    if (error) setError(null)
-                    setDraft(next ?? '')
-                  }}
-                  placeholder={placeholder}
-                  autoFocus
-                  disabled={saving}
-                  minDigits={7}
-                />
-              ) : (
-              <input
-                className="w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                value={draft}
-                onChange={(event) => {
-                  if (error) setError(null)
-                  setDraft(event.target.value)
-                }}
-                placeholder={placeholder}
-                type={inputType ?? resolvedType}
-                autoFocus
-              />
-              )}
+              {(() => {
+                const lowerType = (inputType ?? resolvedType ?? '').toLowerCase()
+                const isDate = lowerType === 'date'
+                const isDateTime = lowerType === 'datetime-local' || lowerType === 'datetime'
+                if (resolvedType === 'tel') {
+                  return (
+                    <PhoneNumberField
+                      value={draft.length ? draft : undefined}
+                      onValueChange={(next) => {
+                        if (error) setError(null)
+                        setDraft(next ?? '')
+                      }}
+                      placeholder={placeholder}
+                      autoFocus
+                      disabled={saving}
+                      minDigits={7}
+                    />
+                  )
+                }
+                if (isDate || isDateTime) {
+                  let parsed: Date | null = null
+                  if (draft && draft.length) {
+                    const candidate = new Date(draft)
+                    if (!Number.isNaN(candidate.getTime())) parsed = candidate
+                  }
+                  return (
+                    <DatePicker
+                      value={parsed}
+                      onChange={(date) => {
+                        if (error) setError(null)
+                        const formatted = !date
+                          ? ''
+                          : isDateTime
+                            ? format(date, "yyyy-MM-dd'T'HH:mm")
+                            : format(date, 'yyyy-MM-dd')
+                        setDraft(formatted)
+                        setSaving(true)
+                        ;(async () => {
+                          try {
+                            await onSave(formatted.length ? formatted : null)
+                            setEditingSafe(false)
+                          } catch (err) {
+                            setError(resolveInlineErrorMessage(err, fallbackError))
+                          } finally {
+                            setSaving(false)
+                          }
+                        })()
+                      }}
+                      withTime={isDateTime}
+                      footer="apply-cancel"
+                      placeholder={placeholder}
+                      disabled={saving}
+                    />
+                  )
+                }
+                return (
+                  <input
+                    className="w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    value={draft}
+                    onChange={(event) => {
+                      if (error) setError(null)
+                      setDraft(event.target.value)
+                    }}
+                    placeholder={placeholder}
+                    type={inputType ?? resolvedType}
+                    autoFocus
+                  />
+                )
+              })()}
               {error ? <p className="text-xs text-destructive">{error}</p> : null}
               {renderBelowInput ? renderBelowInput({ draft, resolvedType, error, saving }) : null}
+              {(() => {
+                const lowerType = (inputType ?? resolvedType ?? '').toLowerCase()
+                const isDateLike = lowerType === 'date' || lowerType === 'datetime-local' || lowerType === 'datetime'
+                if (isDateLike) return null
+                return (
               <div className="flex items-center gap-2">
                 <Button type="submit" size="sm" disabled={saving}>
                   {saving ? <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" /> : null}
@@ -353,6 +404,8 @@ export function InlineTextEditor({
                   {t('ui.detail.inline.cancel', 'Cancel')}
                 </Button>
               </div>
+                )
+              })()}
             </form>
           ) : (
             <div className={variant === 'plain' ? '' : 'mt-1'}>{displayContent}</div>