@asteby/metacore-runtime-react 49.3.1 → 49.5.0

package/src/__tests__/document-editor-inline-selects.test.tsx

@@ -0,0 +1,202 @@
+// @vitest-environment happy-dom
+//
+// DocumentEditor — selects «pro» (feedback del dueño 2026-10-06):
+//   1. El buscador de producto vive DENTRO de la celda «Descripción» del
+//      renglón (no una barra a todo lo ancho) y siempre queda un renglón vacío
+//      al final; Enter elige y pasa el foco a «Cant.».
+//   2. La lista de resultados se monta en un portal: fuera del contenedor con
+//      overflow de la tabla, así no la recorta ni la tapa nada.
+//   3. Los dynamic_select con `ref` llevan crear/editar integrados al trigger:
+//      sin valor «+» abre el alta; con valor el lápiz abre la edición de ESE
+//      registro (y solo entonces). «Crear …» también al pie de la lista.
+import { useState } from 'react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (k: string, o?: any) => o?.defaultValue ?? k, i18n: { language: 'es' } }),
+}))
+
+import { DocumentLinesGrid } from '../business/line-items-editor'
+import { makeLine, type LineItem } from '../business/line-items'
+import type { ProductResult } from '../business/product-search'
+import { DynamicSelectField } from '../dynamic-select-field'
+import { EntitySelect } from '../entity-select'
+import { ApiProvider, type ApiClient } from '../api-context'
+import type { ActionFieldDef } from '../types'
+
+afterEach(cleanup)
+
+const tire: ProductResult = { id: 'p1', name: 'Llanta 205/55R16', sku: 'LL-205', price: 1500, tax_rate: 0.16 }
+const valve: ProductResult = { id: 'p2', name: 'Válvula', sku: 'VAL', price: 40, tax_rate: 0.16 }
+
+function Grid({ initial = [], search }: { initial?: LineItem[]; search: (q: any, s: AbortSignal) => Promise<ProductResult[]> }) {
+    const [lines, setLines] = useState(initial)
+    return (
+        <>
+            <DocumentLinesGrid value={lines} onChange={setLines} search={search} columns={['discount', 'tax']} currency="MXN" />
+            <output data-testid="state">{JSON.stringify(lines)}</output>
+        </>
+    )
+}
+const state = () => JSON.parse(screen.getByTestId('state').textContent ?? '[]') as LineItem[]
+
+describe('DocumentLinesGrid — select de producto en la celda', () => {
+    it('el buscador vive en la celda «Descripción» del renglón vacío, no en una fila a todo lo ancho', () => {
+        render(<Grid search={vi.fn(async () => [tire])} />)
+        const input = screen.getByRole('combobox', { name: 'Buscar producto' })
+        const td = input.closest('td')!
+        expect(td).toBeTruthy()
+        // Ocupa solo su celda: no hay colSpan sobre toda la fila.
+        expect(td.colSpan).toBe(1)
+        expect(td.closest('tr')!.getAttribute('data-slot')).toBe('line-draft-row')
+        expect(td.closest('tr')!.children.length).toBeGreaterThan(1)
+    })
+
+    it('la lista sale en un portal fuera del contenedor con overflow y Enter elige y pasa a «Cant.»', async () => {
+        render(<Grid search={vi.fn(async () => [tire, valve])} />)
+        const input = screen.getByRole('combobox', { name: 'Buscar producto' })
+        input.focus()
+        fireEvent.change(input, { target: { value: 'llan' } })
+        const listbox = await waitFor(() => screen.getByRole('listbox'), { timeout: 2000 })
+        await waitFor(() => expect(within(listbox).getAllByRole('option')).toHaveLength(2))
+
+        const scroller = document.querySelector('[data-slot="line-items-editor"] .overflow-x-auto')!
+        expect(scroller.contains(listbox)).toBe(false)
+        expect(document.querySelector('[data-slot="line-items-editor"]')!.contains(listbox)).toBe(false)
+        expect(listbox.closest('[data-slot="line-product-results"]')).toBeTruthy()
+
+        fireEvent.keyDown(input, { key: 'ArrowDown' })
+        fireEvent.keyDown(input, { key: 'Enter' })
+        expect(state()).toHaveLength(1)
+        expect(state()[0]).toMatchObject({ product_id: 'p2', description: 'Válvula', unit_price: 40, tax_rate: 0.16, quantity: 1 })
+        await waitFor(() => expect((document.activeElement as HTMLElement | null)?.getAttribute('data-cell')).toBe('quantity'))
+        const row = (document.activeElement as HTMLElement).closest('tr')!
+        expect(row.getAttribute('data-line-key')).toBe(state()[0]!.key)
+        // Sigue habiendo un renglón vacío al final, listo para el siguiente.
+        expect((screen.getByRole('combobox', { name: 'Buscar producto' }) as HTMLInputElement).value).toBe('')
+    })
+
+    it('Enter con texto sin coincidencias agrega un renglón libre con esa descripción', async () => {
+        render(<Grid search={vi.fn(async () => [])} />)
+        const input = screen.getByRole('combobox', { name: 'Buscar producto' })
+        fireEvent.change(input, { target: { value: 'Mano de obra' } })
+        await waitFor(() => screen.getByText(/Sin coincidencias/), { timeout: 2000 })
+        fireEvent.keyDown(input, { key: 'Enter' })
+        expect(state()).toHaveLength(1)
+        expect(state()[0]!.description).toBe('Mano de obra')
+        expect(state()[0]!.product_id).toBeUndefined()
+    })
+
+    it('en un renglón libre, elegir un producto llena ESE renglón (misma clave)', async () => {
+        const free = makeLine({ description: '' })
+        render(<Grid initial={[free]} search={vi.fn(async () => [tire])} />)
+        const cell = screen.getByRole('combobox', { name: 'Descripción' })
+        expect(cell.closest('tr')!.getAttribute('data-line-key')).toBe(free.key)
+        fireEvent.change(cell, { target: { value: '205' } })
+        const option = await waitFor(() => screen.getByRole('option', { name: /Llanta 205/ }), { timeout: 2000 })
+        fireEvent.click(within(option).getByRole('button'))
+        expect(state()).toHaveLength(1)
+        expect(state()[0]).toMatchObject({ key: free.key, product_id: 'p1', unit_price: 1500, sku: 'LL-205' })
+    })
+})
+
+describe('DynamicSelectField — crear/editar integrados', () => {
+    const field: ActionFieldDef = { key: 'customer_id', label: 'Cliente', type: 'dynamic_select', ref: 'customers.Customer' }
+    const api = () =>
+        ({
+            get: vi.fn(async () => ({ data: { success: true, data: [{ id: 'c1', label: 'Transportes del Bajío' }] } })),
+            post: vi.fn(),
+        }) as unknown as ApiClient
+
+    const capture = (name: string) => {
+        const seen: any[] = []
+        const fn = (e: Event) => seen.push((e as CustomEvent).detail)
+        window.addEventListener(name, fn)
+        return { seen, off: () => window.removeEventListener(name, fn) }
+    }
+
+    it('sin valor: «+» unido al trigger abre el alta del modelo ref; no hay lápiz', () => {
+        const create = capture('metacore:create-record')
+        render(
+            <ApiProvider client={api()}>
+                <DynamicSelectField field={field} value="" onChange={() => {}} />
+            </ApiProvider>,
+        )
+        expect(screen.queryByRole('button', { name: 'Editar Cliente' })).toBeNull()
+        const btn = screen.getByRole('button', { name: 'Crear Cliente' })
+        expect(btn.getAttribute('data-action')).toBe('create')
+        // Unido: comparte borde con el trigger (sin hueco entre ambos).
+        expect(screen.getByRole('combobox').className).toContain('rounded-r-none')
+        fireEvent.click(btn)
+        expect(create.seen).toHaveLength(1)
+        expect(create.seen[0].model).toBe('customers.Customer')
+        create.off()
+    })
+
+    it('con valor: el lápiz abre la edición de ESE registro; no hay «+»', () => {
+        const edit = capture('metacore:edit-record')
+        const onChange = vi.fn()
+        render(
+            <ApiProvider client={api()}>
+                <DynamicSelectField field={field} value="c1" onChange={onChange} seedOption={{ id: 'c1', value: 'c1', label: 'Transportes del Bajío' }} />
+            </ApiProvider>,
+        )
+        expect(screen.queryByRole('button', { name: 'Crear Cliente' })).toBeNull()
+        fireEvent.click(screen.getByRole('button', { name: 'Editar Cliente' }))
+        expect(edit.seen).toHaveLength(1)
+        expect(edit.seen[0]).toMatchObject({ model: 'customers.Customer', recordId: 'c1' })
+        // Al guardar la edición, el trigger refresca la etiqueta.
+        act(() => edit.seen[0].onSaved({ id: 'c1', name: 'Transportes del Bajío SA' }))
+        expect(screen.getByRole('combobox').textContent).toContain('Transportes del Bajío SA')
+        edit.off()
+    })
+
+    it('«Crear …» al pie de la lista, y la lista se monta en un portal', async () => {
+        const create = capture('metacore:create-record')
+        const { container } = render(
+            <ApiProvider client={api()}>
+                <DynamicSelectField field={field} value="" onChange={() => {}} />
+            </ApiProvider>,
+        )
+        await act(async () => {
+            screen.getByRole('combobox').click()
+        })
+        await waitFor(() => expect(screen.getByText('Transportes del Bajío')).toBeTruthy())
+        const footer = document.querySelector('[data-slot="picker-create"]') as HTMLElement
+        expect(footer).toBeTruthy()
+        expect(container.contains(footer)).toBe(false)
+        fireEvent.click(footer)
+        expect(create.seen).toHaveLength(1)
+        create.off()
+    })
+
+    it('hideCreate quita las dos acciones', () => {
+        render(
+            <ApiProvider client={api()}>
+                <DynamicSelectField field={field} value="c1" onChange={() => {}} hideCreate />
+            </ApiProvider>,
+        )
+        expect(document.querySelector('[data-slot="record-picker-action"]')).toBeNull()
+        expect(screen.getByRole('combobox').className).not.toContain('rounded-r-none')
+    })
+})
+
+describe('EntitySelect — mismo primitivo de acciones', () => {
+    const base = { model: 'Supplier', fetcher: async () => [], onSelect: () => {}, canCreate: true, canEdit: true }
+
+    it('sin valor ofrece crear; con valor, editar', () => {
+        const { rerender } = render(
+            <ApiProvider client={{ get: vi.fn(), post: vi.fn() } as unknown as ApiClient}>
+                <EntitySelect {...base} value={null} label={null} />
+            </ApiProvider>,
+        )
+        expect(document.querySelector('[data-slot="record-picker-action"]')!.getAttribute('data-action')).toBe('create')
+        rerender(
+            <ApiProvider client={{ get: vi.fn(), post: vi.fn() } as unknown as ApiClient}>
+                <EntitySelect {...base} value="s1" label="Llantera Norte" />
+            </ApiProvider>,
+        )
+        expect(document.querySelector('[data-slot="record-picker-action"]')!.getAttribute('data-action')).toBe('edit')
+    })
+})

package/src/__tests__/dynamic-table-bulk-actions.test.tsx

@@ -0,0 +1,140 @@
+// @vitest-environment happy-dom
+//
+// DynamicTable `extraBulkActions` / `hideBulkDelete`:
+//   1. Host actions render in the floating bar once rows are selected and
+//      receive the selected rows / ids.
+//   2. `clearSelection()` empties the selection.
+//   3. Changing page drops the selection (classic pagination) so a bulk
+//      action can never target rows that are no longer visible.
+//   4. `hideBulkDelete` removes the built-in "Eliminar".
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => () => {},
+}))
+const I18N = {
+    t: (_k: string, o?: { defaultValue?: string; count?: number; total?: number }) => {
+        if (o?.defaultValue && o.count != null && o.total != null) {
+            return o.defaultValue.replace('{{count}}', String(o.count)).replace('{{total}}', String(o.total))
+        }
+        return o?.defaultValue ?? _k
+    },
+    i18n: { language: 'es' },
+}
+vi.mock('react-i18next', () => ({ useTranslation: () => I18N }))
+
+import { DynamicTable } from '../dynamic-table'
+import { makeDefaultGetDynamicColumns } from '../dynamic-columns'
+import { ApiProvider, type ApiClient } from '../api-context'
+import { useMetadataCache } from '../metadata-cache'
+import type { TableMetadata } from '../types'
+
+afterEach(cleanup)
+
+const getDynamicColumns = makeDefaultGetDynamicColumns()
+
+function meta(): TableMetadata {
+    return {
+        title: 'Issues',
+        endpoint: '/data/issue',
+        columns: [
+            { key: 'title', label: 'Title', type: 'text', sortable: true, filterable: false, searchable: true },
+        ],
+        actions: [],
+        perPageOptions: [10, 20, 50],
+        defaultPerPage: 10,
+        searchPlaceholder: 'Buscar...',
+        enableCRUDActions: false,
+        hasActions: false,
+    }
+}
+
+function fakeApi(total: number): ApiClient {
+    const ok = (data: unknown) => ({ data: { success: true, data, meta: { total } } })
+    return {
+        get: vi.fn(async (url: string, cfg?: any) => {
+            if (url.startsWith('/metadata/table/')) return ok(meta())
+            if (url.endsWith('/facets')) return ok([])
+            const p = cfg?.params?.page ?? 1
+            const size = cfg?.params?.per_page ?? 10
+            const rows: Array<{ id: number; title: string }> = []
+            for (let i = (p - 1) * size; i < Math.min(p * size, total); i++) rows.push({ id: i + 1, title: `Issue ${i + 1}` })
+            return ok(rows)
+        }),
+        post: vi.fn(async () => ok(null)),
+        put: vi.fn(async () => ok(null)),
+        delete: vi.fn(async () => ok(null)),
+    }
+}
+
+async function selectFirstRow() {
+    await screen.findAllByText('Issue 1')
+    const boxes = screen.getAllByRole('checkbox')
+    fireEvent.click(boxes[1]) // [0] is the select-all header checkbox
+}
+
+describe('DynamicTable extraBulkActions', () => {
+    beforeEach(() => {
+        localStorage.clear()
+        sessionStorage.clear()
+        useMetadataCache.getState().setMetadata('issue', meta())
+    })
+
+    it('renders host actions with the selection and lets them clear it', async () => {
+        const seen: unknown[] = []
+        render(
+            <ApiProvider client={fakeApi(5)}>
+                <DynamicTable
+                    model="issue"
+                    enableUrlSync={false} getDynamicColumns={getDynamicColumns}
+                    extraBulkActions={({ selectedRows, selectedIds, clearSelection }) => (
+                        <button onClick={() => { seen.push({ rows: selectedRows.length, ids: selectedIds }); clearSelection() }}>
+                            Aprobar seleccionados
+                        </button>
+                    )}
+                />
+            </ApiProvider>,
+        )
+        expect(screen.queryByText('Aprobar seleccionados')).toBeNull()
+        await selectFirstRow()
+        fireEvent.click(await screen.findByText('Aprobar seleccionados'))
+        expect(seen).toEqual([{ rows: 1, ids: [1] }])
+        await waitFor(() => expect(screen.queryByText('Aprobar seleccionados')).toBeNull())
+    })
+
+    it('accepts a plain node and keeps the built-in delete by default', async () => {
+        render(
+            <ApiProvider client={fakeApi(5)}>
+                <DynamicTable model="issue" enableUrlSync={false} getDynamicColumns={getDynamicColumns} extraBulkActions={<button>Extra</button>} />
+            </ApiProvider>,
+        )
+        await selectFirstRow()
+        expect(await screen.findByText('Extra')).toBeTruthy()
+        expect(screen.getByText('Eliminar')).toBeTruthy()
+    })
+
+    it('hideBulkDelete removes the built-in delete', async () => {
+        render(
+            <ApiProvider client={fakeApi(5)}>
+                <DynamicTable model="issue" enableUrlSync={false} getDynamicColumns={getDynamicColumns} hideBulkDelete extraBulkActions={<button>Extra</button>} />
+            </ApiProvider>,
+        )
+        await selectFirstRow()
+        expect(await screen.findByText('Extra')).toBeTruthy()
+        expect(screen.queryByText('Eliminar')).toBeNull()
+    })
+
+    it('drops the selection when the page changes', async () => {
+        render(
+            <ApiProvider client={fakeApi(25)}>
+                <DynamicTable model="issue" enableUrlSync={false} getDynamicColumns={getDynamicColumns} extraBulkActions={<button>Extra</button>} />
+            </ApiProvider>,
+        )
+        await selectFirstRow()
+        expect(await screen.findByText('Extra')).toBeTruthy()
+        fireEvent.click(await screen.findByRole('button', { name: /siguiente|next/i }))
+        await screen.findAllByText('Issue 11')
+        await waitFor(() => expect(screen.queryByText('Extra')).toBeNull())
+    })
+})

package/src/__tests__/dynamic-table-load-error.test.tsx

@@ -0,0 +1,97 @@
+// @vitest-environment happy-dom
+//
+// Un fallo del endpoint de lista que NO es 403 (500, red, `success: false`)
+// no debe verse como "sin resultados": se muestra "No se pudieron cargar los
+// datos" con "Reintentar", que vuelve a pedir la lista. `emptyState` solo
+// reemplaza el vacío cuando la lista cargó bien y no hay filtros activos.
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+vi.mock('@tanstack/react-router', () => ({ useNavigate: () => () => {} }))
+
+import { ApiProvider, type ApiClient } from '../api-context'
+import { useMetadataCache } from '../metadata-cache'
+import { DynamicTable } from '../dynamic-table'
+import type { TableMetadata } from '../types'
+
+afterEach(cleanup)
+
+const meta = {
+    title: 'Ajustes',
+    endpoint: '/data/load_err',
+    columns: [],
+    actions: [],
+    perPageOptions: [10],
+    defaultPerPage: 10,
+    searchPlaceholder: 'Buscar...',
+    enableCRUDActions: false,
+    hasActions: false,
+} as unknown as TableMetadata
+
+type ListResult = 'error500' | 'successFalse' | 'empty'
+
+function mount(results: ListResult[], model: string, extra: Record<string, unknown> = {}) {
+    useMetadataCache.getState().setMetadata(model, meta)
+    let listCalls = 0
+    const client: ApiClient = {
+        get: vi.fn(async (url: string) => {
+            if (url.startsWith('/metadata/table/')) return { data: { success: true, data: meta } }
+            if (url.endsWith('/facets')) return { data: { success: true, data: [] } }
+            const r = results[Math.min(listCalls, results.length - 1)]
+            listCalls++
+            if (r === 'error500') throw Object.assign(new Error('500'), { response: { status: 500 } })
+            if (r === 'successFalse') return { data: { success: false, message: 'boom' } }
+            return { data: { success: true, data: [], meta: { total: 0 } } }
+        }),
+        post: vi.fn(async () => ({ data: { success: true, data: null } })),
+        put: vi.fn(async () => ({ data: { success: true, data: null } })),
+        delete: vi.fn(async () => ({ data: { success: true, data: null } })),
+    }
+    render(
+        <ApiProvider client={client}>
+            <DynamicTable model={model} enableUrlSync={false} {...extra} />
+        </ApiProvider>,
+    )
+    return () => listCalls
+}
+
+describe('DynamicTable — fallo de la lista (no 403)', () => {
+    it('un 500 muestra error con Reintentar, no "No se encontraron resultados"', async () => {
+        vi.spyOn(console, 'error').mockImplementation(() => {})
+        mount(['error500'], 'lerr_a')
+        expect((await screen.findAllByText('No se pudieron cargar los datos')).length).toBeGreaterThan(0)
+        expect(screen.queryByText('No se encontraron resultados')).toBeNull()
+        expect(screen.queryByText('Sin permiso para ver este módulo')).toBeNull()
+    })
+
+    it('`success: false` también es un error de carga', async () => {
+        mount(['successFalse'], 'lerr_b')
+        expect((await screen.findAllByText('No se pudieron cargar los datos')).length).toBeGreaterThan(0)
+    })
+
+    it('Reintentar vuelve a pedir la lista y, si ahora carga, limpia el error', async () => {
+        vi.spyOn(console, 'error').mockImplementation(() => {})
+        const calls = mount(['error500', 'empty'], 'lerr_c')
+        const retry = (await screen.findAllByRole('button', { name: 'Reintentar' }))[0]
+        const before = calls()
+        fireEvent.click(retry)
+        await waitFor(() => expect(calls()).toBeGreaterThan(before))
+        await waitFor(() => expect(screen.queryByText('No se pudieron cargar los datos')).toBeNull())
+        expect((await screen.findAllByText('No se encontraron resultados')).length).toBeGreaterThan(0)
+    })
+})
+
+describe('DynamicTable — emptyState', () => {
+    it('reemplaza el vacío cuando la lista cargó bien y no hay filtros', async () => {
+        mount(['empty'], 'lerr_d', { emptyState: <p>Aún no hay registros</p> })
+        expect((await screen.findAllByText('Aún no hay registros')).length).toBeGreaterThan(0)
+        expect(screen.queryByText('No se encontraron resultados')).toBeNull()
+    })
+
+    it('no tapa un error de carga', async () => {
+        vi.spyOn(console, 'error').mockImplementation(() => {})
+        mount(['error500'], 'lerr_e', { emptyState: <p>Aún no hay registros</p> })
+        expect((await screen.findAllByText('No se pudieron cargar los datos')).length).toBeGreaterThan(0)
+        expect(screen.queryByText('Aún no hay registros')).toBeNull()
+    })
+})

package/src/api-context.tsx

@@ -15,13 +15,22 @@ export interface ApiClient {
 }
 
 const ApiContext = createContext<ApiClient | null>(null)
+const BatchContext = createContext<boolean>(true)
 
 export interface ApiProviderProps {
     client: ApiClient
+    /**
+     * Groups list, metadata and options reads into one `POST /q`. Defaults to
+     * `true`. Pass `false` when the host backend does not implement `/q`: every
+     * read then goes straight to its own GET and no POST is attempted. When
+     * left on and `/q` answers 404/405, the batch turns itself off for that
+     * client after the first failed attempt and the read falls back to GET.
+     */
+    batch?: boolean
     children: React.ReactNode
 }
 
-export function ApiProvider({ client, children }: ApiProviderProps) {
+export function ApiProvider({ client, batch = true, children }: ApiProviderProps) {
     // Hosts also write through their own client (native dialogs, settings
     // screens) without going through useApi(). When the client is axios,
     // every non-GET response drops what the runtime remembered as well.
@@ -43,7 +52,11 @@ export function ApiProvider({ client, children }: ApiProviderProps) {
         )
         return () => interceptors.eject?.(id)
     }, [client])
-    return <ApiContext.Provider value={client}>{children}</ApiContext.Provider>
+    return (
+        <ApiContext.Provider value={client}>
+            <BatchContext.Provider value={batch}>{children}</BatchContext.Provider>
+        </ApiContext.Provider>
+    )
 }
 
 interface AxiosLike {
@@ -82,6 +95,7 @@ function mutating<T>(request: Promise<T>): Promise<T> {
 /** Returns the host-injected api client. Throws if no <ApiProvider> is mounted. */
 export function useApi(): ApiClient {
     const ctx = useContext(ApiContext)
+    const batch = useContext(BatchContext)
     if (!ctx) {
         throw new Error('useApi() requires an <ApiProvider> ancestor. Hosts must inject an axios-like client via runtime-react ApiProvider.')
     }
@@ -92,12 +106,13 @@ export function useApi(): ApiClient {
     return useMemo<ApiClient>(() => ({
         // Each call reaches the host client with the arguments it was given —
         // never a trailing `undefined` it didn't ask for.
-        get: (...args: Parameters<ApiClient['get']>) => batchGet(ctx, ...args),
+        get: (...args: Parameters<ApiClient['get']>) =>
+            batch ? batchGet(ctx, ...args) : ctx.get(...args),
         post: (...args: Parameters<ApiClient['post']>) =>
             isWrite('post', args[0]) ? mutating(ctx.post(...args)) : ctx.post(...args),
         put: (...args: Parameters<ApiClient['put']>) => mutating(ctx.put(...args)),
         delete: (...args: Parameters<ApiClient['delete']>) => mutating(ctx.delete(...args)),
-    }), [ctx])
+    }), [ctx, batch])
 }
 
 /** Optional branch context — hosts that support tenant branches can supply

package/src/business/document-editor-panels.tsx

@@ -14,8 +14,8 @@ export function EditorSection({ title, hint, children, slot }: { title?: ReactNo
     return (
         <section className="space-y-3" data-slot={slot}>
             {(title || hint) && (
-                <header className="flex items-baseline justify-between gap-3">
-                    {title && <h3 className="text-sm font-semibold">{title}</h3>}
+                <header className="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
+                    {title && <h3 className="whitespace-nowrap text-sm font-semibold">{title}</h3>}
                     {hint && <span className="text-xs text-muted-foreground">{hint}</span>}
                 </header>
             )}
@@ -49,13 +49,13 @@ export function CollapsibleSection({ title, summary, open, defaultOpen = false,
         onOpenChange?.(!isOpen)
     }
     return (
-        <section className="rounded-lg border border-dashed" data-slot={slot} data-state={isOpen ? 'open' : 'closed'}>
+        <section className="rounded-xl border border-dashed" data-slot={slot} data-state={isOpen ? 'open' : 'closed'}>
             <button
                 type="button"
                 aria-expanded={isOpen}
                 aria-controls={id}
                 onClick={toggle}
-                className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left text-sm"
+                className="flex w-full items-center justify-between gap-3 rounded-xl px-4 py-3 text-left text-sm transition-colors hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
             >
                 <span className="font-medium">{title}</span>
                 <span className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
@@ -81,7 +81,7 @@ export interface PartyCardProps {
 /** Tarjeta compacta de la contraparte: nombre, 3-6 datos clave y estado de crédito. */
 export function PartyCard({ name, rows, credit, fmt, children }: PartyCardProps) {
     return (
-        <div className="rounded-md bg-muted/40 px-4 py-3 text-sm" data-slot="party-card">
+        <div className="rounded-lg bg-muted/40 px-4 py-3 text-sm" data-slot="party-card">
             <div className="flex flex-wrap items-center justify-between gap-2">
                 {name && <span className="font-medium">{name}</span>}
                 {credit && (
@@ -116,11 +116,14 @@ export interface TotalsRow {
 }
 
 /** Totales alineados a la derecha; la última fila con `emphasis` es el total. */
-export function TotalsPanel({ rows }: { rows: TotalsRow[] }) {
+export function TotalsPanel({ rows, muted = false }: { rows: TotalsRow[]; muted?: boolean }) {
     return (
-        <dl className="ml-auto w-full max-w-xs space-y-1 text-sm tabular-nums" data-slot="totals">
-            {rows.map((r) => (
-                <div key={r.label} className={`flex justify-between gap-6 ${r.emphasis ? 'border-t pt-2 text-base font-semibold' : ''}`}>
+        <dl className={`ml-auto w-full max-w-xs space-y-1.5 text-sm tabular-nums ${muted ? 'text-muted-foreground' : ''}`} data-slot="totals">
+            {rows.map((r, i) => (
+                <div
+                    key={r.label}
+                    className={`flex items-baseline justify-between gap-6 ${r.emphasis ? `${i > 0 ? 'border-t pt-2.5' : ''} text-lg font-semibold` : ''}`}
+                >
                     <dt className={r.emphasis ? '' : 'text-muted-foreground'}>{r.label}</dt>
                     <dd>{r.value}</dd>
                 </div>
@@ -137,7 +140,7 @@ export function ValidationChecklist({ issues, title = 'Revisa antes de guardar'
             <p className="mb-1 text-xs font-medium text-muted-foreground">{title}</p>
             <ul className="space-y-1 text-sm">
                 {issues.map((i, k) => (
-                    <li key={`${i.field ?? ''}:${k}`} className={`flex items-start gap-2 ${i.severity === 'error' ? 'text-destructive' : 'text-amber-700'}`}>
+                    <li key={`${i.field ?? ''}:${k}`} className={`flex items-start gap-2 ${i.severity === 'error' ? 'text-destructive' : 'text-amber-700 dark:text-amber-400'}`}>
                         {i.severity === 'error' ? <XCircle className="mt-0.5 size-4 shrink-0" aria-hidden /> : <AlertTriangle className="mt-0.5 size-4 shrink-0" aria-hidden />}
                         {i.message}
                     </li>