@open-mercato/ui 0.6.7-develop.6828.1.ab1620a63e → 0.6.7-develop.6842.1.8cd8a8883c

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

@@ -61,6 +61,41 @@ describe('ConfirmDialog', () => {
     expect(dialog.parentElement).toBe(document.body)
   })
 
+  it('renders the destructive confirmation as the solid variant', () => {
+    renderWithProviders(
+      <ConfirmDialog
+        open
+        variant="destructive"
+        onOpenChange={() => undefined}
+        onConfirm={() => undefined}
+        title="Delete customer?"
+        confirmText="Delete"
+        cancelText="Cancel"
+      />,
+    )
+
+    const classNames = screen.getByRole('button', { name: 'Delete' }).className.split(/\s+/)
+    expect(classNames).toContain('bg-destructive')
+    expect(classNames).toContain('text-white')
+  })
+
+  it('keeps the default confirmation on the primary variant', () => {
+    renderWithProviders(
+      <ConfirmDialog
+        open
+        onOpenChange={() => undefined}
+        onConfirm={() => undefined}
+        title="Publish article?"
+        confirmText="Publish"
+        cancelText="Cancel"
+      />,
+    )
+
+    const classNames = screen.getByRole('button', { name: 'Publish' }).className.split(/\s+/)
+    expect(classNames).toContain('bg-primary')
+    expect(classNames).not.toContain('bg-destructive')
+  })
+
   it('closes only the confirmation that owns an Escape event', () => {
     const firstOpenChange = jest.fn()
     const secondOpenChange = jest.fn()

package/src/backend/detail/AttachmentDeleteDialog.tsx

@@ -38,7 +38,7 @@ export function AttachmentDeleteDialog({ open, onOpenChange, fileName, onConfirm
           <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isDeleting}>
             {t('attachments.library.metadata.cancel', 'Cancel')}
           </Button>
-          <Button type="button" variant="destructive" onClick={onConfirm} disabled={isDeleting}>
+          <Button type="button" variant="destructive-solid" onClick={onConfirm} disabled={isDeleting}>
             {t('attachments.library.actions.delete', 'Delete')}
           </Button>
         </DialogFooter>

package/src/backend/detail/AttachmentsSection.tsx

@@ -256,7 +256,7 @@ function AttachmentsSectionImpl({
         </div>
       )}
 
-      {error ? <p className="text-xs font-medium text-red-600">{error}</p> : null}
+      {error ? <p className="text-xs font-medium text-status-error-text">{error}</p> : null}
 
       {loading ? (
         <div className="text-sm text-muted-foreground">{t('attachments.library.loading', 'Loading attachments…')}</div>

package/src/backend/detail/NotesSection.tsx

@@ -1256,7 +1256,7 @@ function NotesSectionImpl<C = unknown>({
                       editorWrapperClassName="w-full rounded-md border border-muted-foreground/20 bg-background p-2"
                       remarkPlugins={markdownPlugins}
                     />
-                    {contentError ? <p className="text-xs text-red-600">{contentError}</p> : null}
+                    {contentError ? <p className="text-xs text-status-error-text">{contentError}</p> : null}
                     <div className="flex flex-wrap items-center gap-2">
                       <Button type="button" size="sm" onClick={handleContentSave} disabled={contentSavingId === note.id}>
                         {contentSavingId === note.id ? (

package/src/backend/detail/TagsSection.tsx

@@ -387,7 +387,7 @@ function TagsSectionImpl({
                 loadSuggestions={loadSuggestions}
                 autoFocus={!autoSave}
               />
-              {error ? <p className="text-xs text-red-600">{error}</p> : null}
+              {error ? <p className="text-xs text-status-error-text">{error}</p> : null}
               {autoSave ? null : (
                 <div className="flex items-center gap-2 mt-3 mb-2">
                   <Button type="button" size="sm" onClick={handleSave} disabled={saving || isSubmitting}>

package/src/backend/forms/FormHeader.tsx

@@ -181,11 +181,10 @@ function DetailHeader({
               {onDelete ? (
                 <Button
                   type="button"
-                  variant="outline"
+                  variant="destructive"
                   size="sm"
                   onClick={onDelete}
                   disabled={isDeleting}
-                  className="text-red-600 border-red-200 hover:bg-red-50 rounded"
                 >
                   {isDeleting ? (
                     <Loader2 className="size-4 mr-2 animate-spin" />

package/src/backend/schedule/ScheduleAgenda.tsx

@@ -57,9 +57,9 @@ function getStatusLabel(status: ScheduleItem['status'], t: (key: string, fallbac
 }
 
 function getKindStyles(kind: ScheduleItem['kind']): string {
-  if (kind === 'event') return 'border-blue-500/40 bg-blue-500/10 text-blue-950'
-  if (kind === 'exception') return 'border-amber-500/40 bg-amber-500/10 text-amber-950'
-  return 'border-emerald-500/40 bg-emerald-500/10 text-emerald-950'
+  if (kind === 'event') return 'border-status-info-border bg-status-info-bg text-status-info-text'
+  if (kind === 'exception') return 'border-status-warning-border bg-status-warning-bg text-status-warning-text'
+  return 'border-status-success-border bg-status-success-bg text-status-success-text'
 }
 
 export type ScheduleAgendaProps = {

package/src/backend/schedule/ScheduleGrid.tsx

@@ -57,9 +57,9 @@ function getStatusLabel(status: ScheduleItem['status'], t: (key: string, fallbac
 }
 
 function getKindStyles(kind: ScheduleItem['kind']): string {
-  if (kind === 'event') return 'border-blue-500/40 bg-blue-500/10 text-blue-950'
-  if (kind === 'exception') return 'border-amber-500/40 bg-amber-500/10 text-amber-950'
-  return 'border-emerald-500/40 bg-emerald-500/10 text-emerald-950'
+  if (kind === 'event') return 'border-status-info-border bg-status-info-bg text-status-info-text'
+  if (kind === 'exception') return 'border-status-warning-border bg-status-warning-bg text-status-warning-text'
+  return 'border-status-success-border bg-status-success-bg text-status-success-text'
 }
 
 export type ScheduleGridProps = {

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

@@ -107,3 +107,64 @@ describe('readApiResultOrThrow', () => {
     expect(result).toBeNull()
   })
 })
+
+describe('aborted requests', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+  })
+
+  function createAbortedBodyResponse(): Response {
+    const abortError = new Error('The operation was aborted.')
+    abortError.name = 'AbortError'
+    const response = {
+      ok: true,
+      status: 200,
+      headers: new Map<string, string>(),
+      text: jest.fn(async () => { throw abortError }),
+      clone: () => response,
+    } as unknown as Response
+    return response
+  }
+
+  it('rejects with AbortError instead of reporting an empty payload', async () => {
+    ;(apiFetch as jest.Mock).mockResolvedValue(createAbortedBodyResponse())
+    const controller = new AbortController()
+    controller.abort()
+
+    await expect(
+      readApiResultOrThrow('/api/interactions', { signal: controller.signal }),
+    ).rejects.toMatchObject({ name: 'AbortError' })
+  })
+
+  it('does not mask a genuinely empty payload when the request was not aborted', async () => {
+    ;(apiFetch as jest.Mock).mockResolvedValue(createMockResponse('', { status: 200 }))
+    const controller = new AbortController()
+
+    await expect(
+      readApiResultOrThrow('/api/interactions', { signal: controller.signal }),
+    ).rejects.toThrow('Missing response payload (200)')
+  })
+
+  it('keeps the caller-provided fallback when one is configured', async () => {
+    ;(apiFetch as jest.Mock).mockResolvedValue(createAbortedBodyResponse())
+    const controller = new AbortController()
+    controller.abort()
+
+    const call = await apiCall<{ items: string[] }>(
+      '/api/interactions',
+      { signal: controller.signal },
+      { fallback: { items: [] } },
+    )
+    expect(call.result).toEqual({ items: [] })
+  })
+
+  it('propagates AbortError raised by a custom parser', async () => {
+    ;(apiFetch as jest.Mock).mockResolvedValue(createMockResponse('{}', { status: 200 }))
+    const abortError = new Error('The operation was aborted.')
+    abortError.name = 'AbortError'
+
+    await expect(
+      apiCall('/api/interactions', undefined, { parse: async () => { throw abortError } }),
+    ).rejects.toMatchObject({ name: 'AbortError' })
+  })
+})

package/src/backend/utils/apiCall.ts

@@ -19,6 +19,27 @@ export type ApiCallResult<TReturn> = {
 
 const scopedRequestHeaders = createScopedHeaderStack()
 
+function isAbortError(error: unknown): boolean {
+  return typeof error === 'object'
+    && error !== null
+    && (error as { name?: unknown }).name === 'AbortError'
+}
+
+function createAbortError(): Error {
+  if (typeof DOMException === 'function') {
+    return new DOMException('[internal] The operation was aborted.', 'AbortError')
+  }
+  const error = new Error('[internal] The operation was aborted.')
+  error.name = 'AbortError'
+  return error
+}
+
+function resolveAbortSignal(input: RequestInfo | URL, init?: RequestInit): AbortSignal | null {
+  if (init?.signal) return init.signal
+  if (typeof Request !== 'undefined' && input instanceof Request) return input.signal ?? null
+  return null
+}
+
 function mergeHeaders(base: HeadersInit | undefined, extra: Record<string, string>): HeadersInit {
   if (!base) return extra
   if (typeof Headers !== 'undefined' && base instanceof Headers) {
@@ -63,9 +84,16 @@ export async function apiCall<TReturn = Record<string, unknown>>(
       : response
     if (parser) result = await parser(source)
     else result = await readJsonSafe<TReturn>(source, fallback)
-  } catch {
+  } catch (err) {
+    if (isAbortError(err)) throw err
     result = fallback
   }
+  // `readJsonSafe` swallows the abort that cancels an in-flight body read, so a
+  // request aborted after its response headers arrived would otherwise look like
+  // a successful call that returned an empty payload.
+  if (result == null && resolveAbortSignal(input, init)?.aborted) {
+    throw createAbortError()
+  }
   return {
     ok: response.ok,
     status: response.status,

package/src/frontend/LanguageSwitcher.tsx

@@ -24,6 +24,7 @@ export function LanguageSwitcher() {
     pl: t('common.languages.polish', 'Polski'),
     es: t('common.languages.spanish', 'Español'),
     de: t('common.languages.german', 'Deutsch'),
+    ko: t('common.languages.korean', '한국어'),
   }
 
   async function setLocale(locale: Locale) {

package/src/primitives/__tests__/button.test.tsx

@@ -0,0 +1,70 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import { Button, buttonVariants } from '../button'
+
+type ButtonVariant = NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
+
+function classesOf(variant: ButtonVariant) {
+  return buttonVariants({ variant }).split(/\s+/).filter(Boolean)
+}
+
+describe('Button destructive variants', () => {
+  // The DS policy: `destructive` is the quiet trigger (red text on a calm
+  // surface) so a page full of delete buttons does not train users to ignore
+  // red; `destructive-solid` is the filled form, reserved for the single
+  // point-of-no-return confirmation inside a dialog. These tests pin both
+  // halves of that contract — swapping them back is a visual regression that
+  // no other test would catch.
+
+  it('destructive is quiet: destructive border and text on the page surface', () => {
+    const classes = classesOf('destructive')
+    expect(classes).toContain('border')
+    expect(classes).toContain('border-destructive')
+    expect(classes).toContain('bg-background')
+    expect(classes).toContain('text-destructive')
+  })
+
+  it('destructive does not fill with the destructive surface', () => {
+    const classes = classesOf('destructive')
+    expect(classes).not.toContain('bg-destructive')
+    expect(classes).not.toContain('text-white')
+  })
+
+  it('destructive-solid fills with the destructive surface and white glyph', () => {
+    const classes = classesOf('destructive-solid')
+    expect(classes).toContain('bg-destructive')
+    expect(classes).toContain('text-white')
+    expect(classes).not.toContain('border-destructive')
+  })
+
+  it('destructive-solid ships no dark background override', () => {
+    // `--destructive` is a semantic token that already resolves per theme; a
+    // `dark:bg-*` override on top of it is what broke IconButton in #3507.
+    const classes = classesOf('destructive-solid')
+    expect(classes.some((cls) => cls.startsWith('dark:bg-'))).toBe(false)
+  })
+
+  it('renders the quiet treatment on the element for variant="destructive"', () => {
+    const { getByRole } = render(<Button variant="destructive">Delete</Button>)
+    const className = getByRole('button').className
+    expect(className).toContain('text-destructive')
+    expect(className).toContain('border-destructive')
+    expect(className.split(/\s+/)).not.toContain('bg-destructive')
+  })
+
+  it('renders the filled treatment on the element for variant="destructive-solid"', () => {
+    const { getByRole } = render(<Button variant="destructive-solid">Delete permanently</Button>)
+    const classNames = getByRole('button').className.split(/\s+/)
+    expect(classNames).toContain('bg-destructive')
+    expect(classNames).toContain('text-white')
+  })
+
+  it('defaults to the primary variant when none is given', () => {
+    const { getByRole } = render(<Button>Save</Button>)
+    const classNames = getByRole('button').className.split(/\s+/)
+    expect(classNames).toContain('bg-primary')
+    expect(classNames).not.toContain('text-destructive')
+  })
+})

package/src/primitives/button.tsx

@@ -9,14 +9,20 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary-hover',
+        /* Destructive is quiet by design: red text on a calm surface. A wall
+           of solid red buttons trains users to ignore red. The filled form is
+           `destructive-solid`, reserved for the single point-of-no-return
+           confirmation inside a dialog — never for the button that opens it. */
         destructive:
-          'bg-destructive text-white shadow-xs hover:bg-destructive/90 aria-invalid:ring-destructive dark:aria-invalid:ring-destructive dark:bg-destructive/10',
+          'border border-destructive bg-background text-destructive shadow-xs hover:bg-destructive/10 aria-invalid:ring-destructive dark:aria-invalid:ring-destructive',
+        'destructive-solid':
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 aria-invalid:ring-destructive dark:aria-invalid:ring-destructive',
         'destructive-outline':
-          'border border-destructive/30 bg-background text-destructive shadow-xs hover:bg-destructive/10 dark:border-destructive/40 dark:hover:bg-destructive/15',
+          'border border-destructive bg-background text-destructive shadow-xs hover:bg-destructive/10',
         'destructive-soft':
-          'bg-destructive/10 text-destructive hover:bg-destructive/15 dark:bg-destructive/15 dark:hover:bg-destructive/20',
+          'bg-destructive/10 text-destructive hover:bg-destructive/15',
         'destructive-ghost':
-          'text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/15',
+          'text-destructive hover:bg-destructive/10',
         outline:
           'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',