@asteby/metacore-runtime-react 49.3.1 → 49.4.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/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>

package/src/business/document-editor.tsx

@@ -20,7 +20,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@asteby/metacore-ui/primitives'
-import { Loader2 } from 'lucide-react'
+import { Loader2, ReceiptText } from 'lucide-react'
 import { toast } from 'sonner'
 import { useApi } from '../api-context'
 import { useOrgTaxRate, useTimeZone } from '../org-runtime-context'
@@ -584,10 +584,10 @@ export function DocumentEditor({
     }
 
     const fieldRecord = useMemo(() => seedRecord(seeds, record), [seeds, record])
-    const fieldCell = (field: ActionFieldDef, fullWidth = false) =>
+    const fieldCell = (field: ActionFieldDef, fullWidth = false, className?: string) =>
         visible(field) ? (
-            <FieldCell key={field.key} fullWidth={fullWidth}>
-                <FieldLabel htmlFor={field.key} required={field.required}>
+            <FieldCell key={field.key} fullWidth={fullWidth} className={className}>
+                <FieldLabel htmlFor={field.key} required={field.required} tone="sentence">
                     {tl(field.label)}
                 </FieldLabel>
                 {renderField(withFriendlyOptions(gatedOptions(field, header)), header[field.key], (v: any) => updateField(field.key, v), header, fieldRecord, fieldErrors)}
@@ -641,10 +641,14 @@ export function DocumentEditor({
 
     const essentials = (
         <EditorSection slot="editor-essentials">
-            <FieldGrid>
-                {groups.party && fieldCell(groups.party)}
-                {groups.essential.map((f) => fieldCell(f))}
-            </FieldGrid>
+            {/* Contraparte + fechas + condiciones en un bloque: tres columnas cuando
+                el contenedor lo permite (la contraparte ocupa dos), una en móvil. */}
+            <div className="@container rounded-xl border bg-card/40 p-4">
+                <FieldGrid className="gap-x-4 @2xl:grid-cols-3">
+                    {groups.party && fieldCell(groups.party, false, '@2xl:col-span-2')}
+                    {groups.essential.map((f) => fieldCell(f))}
+                </FieldGrid>
+            </div>
             {party && (
                 <PartyCard name={party.name ?? party.legal_name} rows={summaryRows} credit={credit} fmt={fmt}>
                     {partyContribs.map(({ id, component: C }) => (
@@ -659,14 +663,18 @@ export function DocumentEditor({
         <EditorSection
             slot="load-from-source"
             title={t('documentEditor.load_from', { defaultValue: 'Cargar desde…' })}
-            hint={busy === 'source' ? t('documentEditor.loading_source', { defaultValue: 'Cargando…' }) : sourceNote}
+            hint={
+                busy === 'source'
+                    ? t('documentEditor.loading_source', { defaultValue: 'Cargando…' })
+                    : sourceNote ?? (sourceId ? undefined : t('documentEditor.load_from_hint', { defaultValue: 'Opcional · precarga contraparte y renglones' }))
+            }
         >
             <div className="flex flex-wrap items-center gap-2">
                 {sources.length > 1 && (
                     <div
                         role="radiogroup"
                         aria-label={t('documentEditor.source_kind', { defaultValue: 'Documento de origen' })}
-                        className="inline-flex flex-wrap gap-1 rounded-md border p-1"
+                        className="inline-flex h-9 shrink-0 items-center gap-0.5 rounded-md border bg-muted/40 p-0.5"
                     >
                         {sources.map((s) => (
                             <button
@@ -679,8 +687,10 @@ export function DocumentEditor({
                                     setSourceKey(s.key)
                                     setSourceId('')
                                 }}
-                                className={`rounded px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
-                                    s.key === sourceKey ? 'bg-primary/10 font-medium text-primary' : 'text-muted-foreground hover:bg-accent'
+                                className={`h-full rounded-sm px-3 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 ${
+                                    s.key === sourceKey
+                                        ? 'bg-background font-medium text-foreground shadow-xs dark:bg-input/60'
+                                        : 'text-muted-foreground hover:text-foreground'
                                 }`}
                             >
                                 {tl(s.label)}
@@ -688,6 +698,14 @@ export function DocumentEditor({
                         ))}
                     </div>
                 )}
+                {!activeSource && (
+                    <div
+                        className="flex h-9 min-w-60 flex-1 items-center rounded-md border border-dashed px-3 text-sm text-muted-foreground"
+                        data-slot="source-picker-empty"
+                    >
+                        {t('documentEditor.pick_source_kind', { defaultValue: 'Elige el tipo de documento para buscarlo' })}
+                    </div>
+                )}
                 {activeSource && (
                     <SourcePicker
                         key={activeSource.key}
@@ -707,7 +725,19 @@ export function DocumentEditor({
         </EditorSection>
     )
 
-    const totalsPanel = <TotalsPanel rows={totalsRows} />
+    // Sin renglones todavía: un estado vacío amable en vez de $0.00 en cada fila.
+    const noLines = !isAllocation && !!lineCfg && lines.length === 0
+    const totalsPanel = noLines ? (
+        <TotalsPanel rows={totalsRows.filter((r) => r.emphasis)} muted />
+    ) : (
+        <TotalsPanel rows={totalsRows} />
+    )
+    const totalsEmpty = noLines && (
+        <div className="flex items-start gap-3 text-sm text-muted-foreground" data-slot="totals-empty">
+            <ReceiptText className="mt-0.5 size-4 shrink-0" aria-hidden />
+            <p>{t('documentEditor.totals_empty', { defaultValue: 'Aún no hay renglones. Busca un producto en la tabla para ver el desglose.' })}</p>
+        </div>
+    )
 
     const linesSection = lineCfg && (
         <EditorSection
@@ -751,6 +781,7 @@ export function DocumentEditor({
                     policy={kind === 'credit' ? { allowZeroQuantity: linesFromSourceDoc } : undefined}
                     search={search}
                     currency={currency}
+                    showTotals={false}
                 />
             )}
             {!fullscreen && totalsPanel}
@@ -817,13 +848,26 @@ export function DocumentEditor({
         </CollapsibleSection>
     ) : null
 
+    const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent || '')
     const checklist = <ValidationChecklist issues={shownIssues} title={t('documentEditor.review', { defaultValue: 'Revisa antes de guardar' })} />
 
     return (
-        <div className="flex min-h-0 flex-1 flex-col" data-slot="document-editor" data-kind={kind} data-layout={fullscreen ? 'fullscreen' : 'dialog'}>
+        <div
+            className="flex min-h-0 flex-1 flex-col"
+            data-slot="document-editor"
+            data-kind={kind}
+            data-layout={fullscreen ? 'fullscreen' : 'dialog'}
+            onKeyDown={(e) => {
+                // ⌘/Ctrl+Enter guarda desde cualquier campo del editor.
+                if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && busy === null) {
+                    e.preventDefault()
+                    void submit()
+                }
+            }}
+        >
             {fullscreen ? (
-                <div className="-mx-1 min-h-0 flex-1 overflow-y-auto px-1 py-2 lg:grid lg:grid-cols-[minmax(0,1fr)_340px] lg:gap-8">
-                    <div className="min-w-0 space-y-8" data-slot="editor-main">
+                <div className="-mx-1 min-h-0 flex-1 overflow-y-auto px-1 py-2 lg:grid lg:grid-cols-[minmax(0,1fr)_320px] lg:gap-6">
+                    <div className="min-w-0 space-y-6" data-slot="editor-main">
                         <FormErrorBanner message={formError} />
                         {essentials}
                         {loadFrom}
@@ -832,14 +876,17 @@ export function DocumentEditor({
                         {contributedSections}
                         {notes}
                     </div>
-                    <aside className="mt-8 space-y-6 lg:sticky lg:top-0 lg:mt-0 lg:self-start" data-slot="editor-aside">
-                        <div className="rounded-lg border p-4">{totalsPanel}</div>
+                    <aside className="mt-6 space-y-4 lg:sticky lg:top-0 lg:mt-0 lg:self-start" data-slot="editor-aside">
+                        <div className="space-y-3 rounded-xl border bg-card/40 p-4">
+                            {totalsEmpty}
+                            {totalsPanel}
+                        </div>
                         {checklist}
                         {previewSection}
                     </aside>
                 </div>
             ) : (
-                <div className="-mx-1 min-h-0 flex-1 space-y-8 overflow-y-auto px-1 py-2">
+                <div className="-mx-1 min-h-0 flex-1 space-y-6 overflow-y-auto px-1 py-2">
                     <FormErrorBanner message={formError} />
                     {essentials}
                     {loadFrom}
@@ -853,6 +900,11 @@ export function DocumentEditor({
             )}
 
             <footer className="flex shrink-0 flex-wrap items-center justify-end gap-2 border-t pt-4" data-slot="editor-actions">
+                <span className="mr-auto hidden items-center gap-1 text-xs text-muted-foreground sm:inline-flex" data-slot="editor-shortcut">
+                    <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono text-[0.7rem]">{isMac ? '⌘' : 'Ctrl'}</kbd>
+                    <kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono text-[0.7rem]">Enter</kbd>
+                    <span>{t('documentEditor.shortcut_save', { defaultValue: 'para guardar' })}</span>
+                </span>
                 {footerContribs.map(({ id, component: C }) => (
                     <C key={id} {...contribProps} />
                 ))}
@@ -897,7 +949,7 @@ function SourcePicker({
         [source, label],
     )
     return (
-        <div className="min-w-[240px] flex-1" data-source={source.key}>
+        <div className="min-w-60 flex-1" data-source={source.key}>
             {renderField(field, value, (v: any) => onPick(v == null || v === '' ? '' : String(v)), header, seed ? { id: seed.value, label: seed.label } : undefined)}
         </div>
     )

package/src/business/index.ts

@@ -4,6 +4,7 @@ export * from './feedback'
 export * from './line-items'
 export * from './document-lines'
 export * from './line-items-editor'
+export * from './line-product-cell'
 export * from './payment'
 export * from './payment-capture'
 export * from './refund'