@open-mercato/ui 0.6.6-develop.6551.1.1511bfa890 → 0.6.6

package/src/backend/custom-fields/FieldDefinitionsEditor.tsx

@@ -15,7 +15,7 @@ import {
   SelectValue,
 } from '../../primitives/select'
 import { CUSTOM_FIELD_KINDS } from '@open-mercato/shared/modules/entities/kinds'
-import { useOptionalT, type TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import { useOptionalT } from '@open-mercato/shared/lib/i18n/context'
 import { FieldRegistry } from '../fields/registry'
 import { slugify } from '@open-mercato/shared/lib/slugify'
 import { useConfirmDialog } from '../confirm-dialog'
@@ -35,16 +35,6 @@ import {
 type FieldsetGroup = { code: string; title?: string; hint?: string }
 type FieldsetConfig = { code: string; label: string; icon?: string; description?: string; groups?: FieldsetGroup[] }
 
-function formatFallback(template: string, params?: Record<string, string | number>) {
-  if (!params) return template
-  return template.replace(/\{\{(\w+)\}\}|\{(\w+)\}/g, (match, doubleKey, singleKey) => {
-    const key = doubleKey ?? singleKey
-    if (!key) return match
-    const value = params[key]
-    return value === undefined ? match : String(value)
-  })
-}
-
 export type FieldDefinition = {
   key: string
   kind: string
@@ -78,7 +68,7 @@ export type FieldDefinitionsEditorProps = {
   listProps?: React.HTMLAttributes<HTMLDivElement>
   singleFieldsetPerRecord?: boolean
   onSingleFieldsetPerRecordChange?: (value: boolean) => void
-  translate?: TranslateFn
+  translate?: (key: string, fallback: string) => string
 }
 
 const DEFAULT_VALUE_NONE = '__open_mercato_no_default__'
@@ -190,13 +180,11 @@ export function FieldDefinitionsEditor({
   const dragIndex = React.useRef<number | null>(null)
   const hasFieldsets = fieldsets.length > 0
   const contextT = useOptionalT()
-  const t = React.useCallback<TranslateFn>(
-    (key, fallbackOrParams, params) => {
-      if (translate) return translate(key, fallbackOrParams, params)
-      if (contextT) return contextT(key, fallbackOrParams, params)
-      return typeof fallbackOrParams === 'string'
-        ? formatFallback(fallbackOrParams, params)
-        : key
+  const t = React.useCallback(
+    (key: string, fallback: string) => {
+      if (translate) return translate(key, fallback)
+      if (contextT) return contextT(key, fallback)
+      return fallback
     },
     [translate, contextT],
   )
@@ -276,9 +264,7 @@ export function FieldDefinitionsEditor({
     if (!onFieldsetsChange) return
     if (!resolvedActiveFieldset) return
     const confirmed = await confirm({
-      title: t('entities.customFields.editor.deleteFieldsetTitle', 'Delete fieldset "{code}"?', {
-        code: resolvedActiveFieldset,
-      }),
+      title: t('entities.customFields.editor.deleteFieldsetTitle', 'Delete fieldset "{code}"?').replace('{code}', resolvedActiveFieldset),
       text: t('entities.customFields.editor.deleteFieldsetText', 'This will move its fields to Unassigned.'),
       variant: 'destructive',
     })
@@ -555,7 +541,7 @@ type FieldDefinitionCardProps = {
   onRegisterGroup?: (fieldsetCode: string, group: FieldsetGroup) => void
   onRemoveGroup?: (fieldsetCode: string, groupCode: string) => void
   onTranslate?: () => void
-  translate?: TranslateFn
+  translate?: (key: string, fallback: string) => string
 }
 
 const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
@@ -587,15 +573,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
     () => (typeof local.configJson?.fieldset === 'string' ? local.configJson.fieldset : ''),
     [local.configJson?.fieldset],
   )
-  const t = React.useCallback<TranslateFn>(
-    (key, fallbackOrParams, params) => {
-      if (translate) return translate(key, fallbackOrParams, params)
-      return typeof fallbackOrParams === 'string'
-        ? formatFallback(fallbackOrParams, params)
-        : key
-    },
-    [translate],
-  )
+  const t = React.useCallback((key: string, fallback: string) => (translate ? translate(key, fallback) : fallback), [translate])
   React.useEffect(() => {
     localRef.current = definition
     setLocal(definition)
@@ -1115,29 +1093,23 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="required">{t('entities.customFields.editor.validation.required', 'required')}</SelectItem>
-                    <SelectItem value="date">{t('entities.customFields.editor.validation.date', 'date')}</SelectItem>
-                    <SelectItem value="integer">{t('entities.customFields.editor.validation.integer', 'integer')}</SelectItem>
-                    <SelectItem value="float">{t('entities.customFields.editor.validation.float', 'float')}</SelectItem>
-                    <SelectItem value="lt">{t('entities.customFields.editor.validation.lt', 'lt')}</SelectItem>
-                    <SelectItem value="lte">{t('entities.customFields.editor.validation.lte', 'lte')}</SelectItem>
-                    <SelectItem value="gt">{t('entities.customFields.editor.validation.gt', 'gt')}</SelectItem>
-                    <SelectItem value="gte">{t('entities.customFields.editor.validation.gte', 'gte')}</SelectItem>
-                    <SelectItem value="eq">{t('entities.customFields.editor.validation.eq', 'eq')}</SelectItem>
-                    <SelectItem value="ne">{t('entities.customFields.editor.validation.ne', 'ne')}</SelectItem>
-                    <SelectItem value="regex">{t('entities.customFields.editor.validation.regex', 'regex')}</SelectItem>
+                    <SelectItem value="required">required</SelectItem>
+                    <SelectItem value="date">date</SelectItem>
+                    <SelectItem value="integer">integer</SelectItem>
+                    <SelectItem value="float">float</SelectItem>
+                    <SelectItem value="lt">lt</SelectItem>
+                    <SelectItem value="lte">lte</SelectItem>
+                    <SelectItem value="gt">gt</SelectItem>
+                    <SelectItem value="gte">gte</SelectItem>
+                    <SelectItem value="eq">eq</SelectItem>
+                    <SelectItem value="ne">ne</SelectItem>
+                    <SelectItem value="regex">regex</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
               <div className="md:col-span-4">
                 <Input
-                  placeholder={
-                    rule?.rule === 'regex'
-                      ? t('entities.customFields.editor.rulePatternPlaceholder', 'Pattern (e.g. ^[a-z]+$)')
-                      : (['lt','lte','gt','gte'].includes(rule?.rule)
-                        ? t('entities.customFields.editor.ruleNumberPlaceholder', 'Number')
-                        : t('entities.customFields.editor.noParameterPlaceholder', '—'))
-                  }
+                  placeholder={rule?.rule === 'regex' ? t('entities.customFields.editor.rulePatternPlaceholder', 'Pattern (e.g. ^[a-z]+$)') : (['lt','lte','gt','gte'].includes(rule?.rule) ? t('entities.customFields.editor.ruleNumberPlaceholder', 'Number') : '—')}
                   value={rule?.param ?? ''}
                   onChange={(event) => {
                     const value = ['lt','lte','gt','gte'].includes(rule?.rule) ? Number(event.target.value) : event.target.value
@@ -1454,7 +1426,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                         size="xs"
                         className="text-muted-foreground hover:text-foreground"
                         onClick={() => handleEditGroupEntry(group)}
-                        aria-label={t('entities.customFields.editor.editGroupAria', 'Edit {code}', { code: group.code })}
+                        aria-label={t('entities.customFields.editor.editGroupAria', 'Edit {code}').replace('{code}', group.code)}
                       >
                         <Pencil className="h-4 w-4" />
                       </IconButton>
@@ -1463,7 +1435,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                         size="xs"
                         className="text-destructive hover:text-destructive/80"
                         onClick={() => handleRemoveGroupEntry(group.code)}
-                        aria-label={t('entities.customFields.editor.deleteGroupAria', 'Delete {code}', { code: group.code })}
+                        aria-label={t('entities.customFields.editor.deleteGroupAria', 'Delete {code}').replace('{code}', group.code)}
                       >
                         <Trash2 className="h-4 w-4" />
                       </IconButton>

package/src/backend/detail/AttachmentMetadataDialog.tsx

@@ -6,7 +6,6 @@ import { Button } from '../../primitives/button'
 import { IconButton } from '../../primitives/icon-button'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
 import { Input } from '@open-mercato/ui/primitives/input'
-import { Tabs, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
 import { TagsInput } from '@open-mercato/ui/backend/inputs/TagsInput'
 import { CrudForm, type CrudField, type CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'
 import { collectCustomFieldValues } from '@open-mercato/ui/backend/utils/customFieldValues'
@@ -577,21 +576,29 @@ export function AttachmentMetadataDialog({ open, onOpenChange, item, availableTa
             </div>
             {isImage ? (
               <div className="rounded border">
-                <Tabs
-                  value={imageTab}
-                  onValueChange={(value) => setImageTab(value as 'preview' | 'resize')}
-                  variant="underline"
-                >
-                  <TabsList className="w-full flex-wrap px-3">
-                    {(['preview', 'resize'] as const).map((tab) => (
-                      <TabsTrigger key={tab} value={tab}>
-                        {tab === 'preview'
-                          ? t('attachments.library.metadata.preview', 'Preview')
-                          : t('attachments.library.metadata.resizeTool.title', 'Generate resized URL')}
-                      </TabsTrigger>
-                    ))}
-                  </TabsList>
-                </Tabs>
+                <div className="flex flex-wrap gap-4 border-b px-3 py-2 text-sm font-medium" role="tablist">
+                  {(['preview', 'resize'] as const).map((tab) => (
+                    <Button
+                      key={tab}
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      role="tab"
+                      aria-selected={imageTab === tab}
+                      onClick={() => setImageTab(tab)}
+                      className={cn(
+                        'h-auto -mb-px rounded-none border-b-2 border-transparent px-0 py-1',
+                        imageTab === tab
+                          ? 'border-accent-indigo text-foreground'
+                          : 'text-muted-foreground hover:text-foreground',
+                      )}
+                    >
+                      {tab === 'preview'
+                        ? t('attachments.library.metadata.preview', 'Preview')
+                        : t('attachments.library.metadata.resizeTool.title', 'Generate resized URL')}
+                    </Button>
+                  ))}
+                </div>
                 <div className="space-y-3 p-3">
                   {imageTab === 'preview' ? (
                     previewUrl ? (

package/src/backend/filters/AdvancedFilterBuilder.tsx

@@ -332,7 +332,7 @@ function AndOrToggle({
   const andLabel = t('ui.advancedFilter.combinator.and', 'And')
   const orLabel = t('ui.advancedFilter.combinator.or', 'Or')
   const baseBtn = 'h-8 px-3 text-sm font-medium outline-none focus-visible:shadow-focus disabled:cursor-not-allowed'
-  const selBtn = 'bg-brand-violet text-brand-violet-foreground hover:bg-brand-violet/90'
+  const selBtn = 'bg-brand-violet text-white hover:bg-brand-violet/90'
   const unselBtn = 'bg-background text-foreground hover:bg-accent'
   return (
     <div

package/src/backend/messages/useMessageCompose.ts

@@ -413,10 +413,6 @@ export function useMessageCompose({
     const params = new URLSearchParams()
     params.set('page', '1')
     params.set('pageSize', '100')
-    // Scope suggestions to the composer's active organization: a message is stamped with
-    // that org and its detail endpoint denies cross-org recipients, so a recipient from
-    // another org could never open what they were sent.
-    params.set('scopeToActiveOrganization', '1')
     // Recipient lookup is filtered in TagsInput because incremental auth user search is unreliable.
 
     const call = await apiCall<{ items?: UserListItem[] }>(

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

@@ -86,8 +86,7 @@ describe('Drawer', () => {
     const content = document.querySelector('[data-slot="drawer-content"]') as HTMLElement
     expect(content.className).toContain('right-0')
     expect(content.className).toContain('inset-y-0')
-    // Figma Drawer [1.1] width contract: 400px
-    expect(content.className).toContain('max-w-[400px]')
+    expect(content.className).toContain('max-w-md')
     // Per Figma: inner edge rounded, no panel border on the seam.
     expect(content.className).toContain('rounded-l-xl')
     expect(content.className).not.toMatch(/\bborder-l\b/)

package/src/primitives/drawer.tsx

@@ -94,11 +94,10 @@ const drawerContentVariants = cva(
     variants: {
       side: {
         right:
-          // Figma Drawer [1.1] width: 400px (not the Tailwind max-w-md 448px)
-          'inset-y-0 right-0 h-full w-full max-w-[400px] rounded-l-xl ' +
+          'inset-y-0 right-0 h-full w-full max-w-md rounded-l-xl ' +
           'data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right',
         left:
-          'inset-y-0 left-0 h-full w-full max-w-[400px] rounded-r-xl ' +
+          'inset-y-0 left-0 h-full w-full max-w-md rounded-r-xl ' +
           'data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left',
         top:
           'inset-x-0 top-0 max-h-[80vh] w-full rounded-b-xl ' +
@@ -304,7 +303,7 @@ const DrawerTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     data-slot="drawer-title"
-    className={cn('text-lg font-semibold leading-tight text-foreground', className)}
+    className={cn('text-base font-semibold leading-tight text-foreground', className)}
     {...props}
   />
 ))

package/src/primitives/tabs.tsx

@@ -108,13 +108,9 @@ export function Tabs({
 export type TabsListProps = {
   children: React.ReactNode
   className?: string
-  /** Accessible name for the `role="tablist"` element. Set it when the
-   * surrounding context does not already label the strip (e.g. a bare
-   * detail-page section switcher). */
-  'aria-label'?: string
 }
 
-export function TabsList({ children, className, 'aria-label': ariaLabel }: TabsListProps) {
+export function TabsList({ children, className }: TabsListProps) {
   const { variant, orientation } = useTabsContext()
 
   const baseClasses =
@@ -134,7 +130,6 @@ export function TabsList({ children, className, 'aria-label': ariaLabel }: TabsL
       data-slot="tabs-list"
       className={cn(baseClasses, className)}
       role="tablist"
-      aria-label={ariaLabel}
       aria-orientation={orientation}
     >
       {children}

package/src/backend/messages/__tests__/useMessageCompose.test.tsx

@@ -1,60 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import * as React from 'react'
-import { renderHook } from '@testing-library/react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
-import { useMessageCompose } from '../useMessageCompose'
-import { apiCall } from '../../utils/apiCall'
-
-jest.mock('../../utils/apiCall', () => ({
-  apiCall: jest.fn(),
-}))
-
-jest.mock('../../FlashMessages', () => ({
-  flash: jest.fn(),
-}))
-
-function createWrapper() {
-  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
-  return function Wrapper({ children }: { children: React.ReactNode }) {
-    return (
-      <QueryClientProvider client={queryClient}>
-        {/* @ts-expect-error shared provider accepts a loose dict shape */}
-        <I18nProvider locale="en" dict={{}}>
-          {children}
-        </I18nProvider>
-      </QueryClientProvider>
-    )
-  }
-}
-
-describe('useMessageCompose recipient suggestions', () => {
-  beforeEach(() => {
-    jest.resetAllMocks()
-    ;(apiCall as jest.Mock).mockResolvedValue({
-      ok: true,
-      status: 200,
-      result: { items: [] },
-      response: { status: 200 },
-    })
-  })
-
-  it('scopes recipient suggestions to the composer active organization', async () => {
-    const { result } = renderHook(() => useMessageCompose({ variant: 'compose' }), {
-      wrapper: createWrapper(),
-    })
-
-    await result.current.loadRecipientSuggestions()
-
-    const authUsersCall = (apiCall as jest.Mock).mock.calls.find(
-      ([url]) => typeof url === 'string' && url.startsWith('/api/auth/users'),
-    )
-    expect(authUsersCall).toBeDefined()
-
-    const requestedUrl = new URL(`http://localhost${authUsersCall[0]}`)
-    expect(requestedUrl.searchParams.get('scopeToActiveOrganization')).toBe('1')
-  })
-})