@asteby/metacore-runtime-react 49.0.0 → 49.2.0

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

@@ -7,6 +7,7 @@ import { Badge } from '@asteby/metacore-ui/primitives'
 import { AlertTriangle, ChevronDown, XCircle } from 'lucide-react'
 import type { CreditStatus, EditorIssue } from './document-editor-model'
 import type { Formatter } from './format'
+import { computeLine, type LineItem } from './line-items'
 
 /** Bloque con título discreto y espaciado generoso (sin bordes pesados). */
 export function EditorSection({ title, hint, children, slot }: { title?: ReactNode; hint?: ReactNode; children: ReactNode; slot?: string }) {
@@ -162,3 +163,51 @@ export function PreviewPanel({ preview }: { preview: PreviewContent | null }) {
     if (preview.xml) return <pre className="max-h-96 overflow-auto rounded bg-muted p-3 text-[11px] leading-tight" data-slot="preview-xml">{preview.xml}</pre>
     return null
 }
+
+export interface DraftPreviewProps {
+    title: string
+    party?: string
+    /** Datos del encabezado ya con su etiqueta y valor legibles. */
+    header: Array<{ label: string; value: string }>
+    lines: LineItem[]
+    totals: TotalsRow[]
+    fmt: Formatter
+}
+
+/**
+ * Vista previa local del documento (sin servidor ni borrador): cómo queda con
+ * lo capturado. Para tipos sin acción `preview`; la del servidor (PDF/XML) gana.
+ */
+export function DraftPreview({ title, party, header, lines, totals, fmt }: DraftPreviewProps) {
+    const items = lines.filter((l) => l.kind === 'item')
+    return (
+        <article className="space-y-3 rounded border bg-background p-4 text-xs" data-slot="preview-draft">
+            <header className="flex flex-wrap items-baseline justify-between gap-2 border-b pb-2">
+                <span className="text-sm font-semibold">{title}</span>
+                {party && <span className="font-medium">{party}</span>}
+            </header>
+            {header.length > 0 && (
+                <dl className="grid grid-cols-2 gap-x-4 gap-y-1">
+                    {header.map((h) => (
+                        <div key={h.label} className="min-w-0">
+                            <dt className="text-muted-foreground">{h.label}</dt>
+                            <dd className="truncate">{h.value}</dd>
+                        </div>
+                    ))}
+                </dl>
+            )}
+            <table className="w-full tabular-nums">
+                <tbody>
+                    {items.map((l) => (
+                        <tr key={l.key} className="border-t align-top">
+                            <td className="py-1 pr-2">{l.description}</td>
+                            <td className="py-1 pr-2 text-right">{l.quantity}</td>
+                            <td className="py-1 text-right">{fmt.money(computeLine(l).net)}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+            <TotalsPanel rows={totals} />
+        </article>
+    )
+}

package/src/business/document-editor.tsx

@@ -23,7 +23,7 @@ import { Button } from '@asteby/metacore-ui/primitives'
 import { Loader2 } from 'lucide-react'
 import { toast } from 'sonner'
 import { useApi } from '../api-context'
-import { useOrgTaxRate } from '../org-runtime-context'
+import { useOrgTaxRate, useTimeZone } from '../org-runtime-context'
 import { FieldCell, FieldGrid, FieldLabel } from '../field-grid'
 import { FormErrorBanner } from './feedback'
 import { DocumentLinesGrid, type DocumentLinesGridProps, type LineItemsColumn } from './line-items-editor'
@@ -44,11 +44,13 @@ import {
     partySummaryRows,
     splitEditorFields,
     toOpenDocuments,
+    friendlyOptionLabel,
     withFriendlyOptions,
     type EditorIssue,
 } from './document-editor-model'
 import {
     CollapsibleSection,
+    DraftPreview,
     EditorSection,
     PartyCard,
     PreviewPanel,
@@ -89,6 +91,12 @@ export interface DocumentEditorProps {
     currency?: string
     /** Hoy (días de atraso del reparto; inyectable en tests). */
     today?: Date
+    /**
+     * Pantalla completa (DocumentFormDialog la pide para documentos con
+     * renglones): a dos columnas en pantallas anchas, con totales, revisión y
+     * vista previa a la derecha; en una sola columna en móvil.
+     */
+    fullscreen?: boolean
 }
 
 type Busy = 'save' | 'preview' | 'source' | null
@@ -107,6 +115,7 @@ export function DocumentEditor({
     defaultTaxRate,
     currency,
     today,
+    fullscreen = false,
 }: DocumentEditorProps) {
     const { t, i18n } = useTranslation()
     const lang = i18n?.language
@@ -114,6 +123,7 @@ export function DocumentEditor({
     const fmt = useFormatter({ currency })
     const installed = useInstalledAddons()
     const orgTaxRate = useOrgTaxRate()
+    const orgTimeZone = useTimeZone()
     const tl = useCallback((s: string) => t(s, { defaultValue: s }), [t])
 
     const lineCfg = useMemo(() => editorLinesConfig(type, forms), [type, forms])
@@ -122,13 +132,14 @@ export function DocumentEditor({
     const amountKey = isAllocation ? allocationAmountField(type.fields) : undefined
 
     const [header, setHeader] = useState<Record<string, any>>(() => ({
-        ...buildFieldDefaults(type.fields, record),
+        ...buildFieldDefaults(type.fields, record, undefined, { timeZone: orgTimeZone, now: today }),
         ...(type.defaults ?? {}),
     }))
     const [lines, setLines] = useState<LineItem[]>([])
     const [linesFromSourceDoc, setLinesFromSourceDoc] = useState(false)
     const [extFields, setExtFields] = useState<ActionFieldDef[]>([])
     const [party, setParty] = useState<Record<string, any> | null>(null)
+    const [partyLabels, setPartyLabels] = useState<Record<string, string>>({})
     const [openDocs, setOpenDocs] = useState<OpenDocument[]>([])
     const [docsLoading, setDocsLoading] = useState(false)
     const [alloc, setAlloc] = useState<PaymentAllocatorValue>({ strategy: 'oldest_due_first', manual: {} })
@@ -219,6 +230,25 @@ export function DocumentEditor({
         }
     }, [api, type.party, partyId])
 
+    // Etiquetas de la tarjeta (RFC, régimen…): las del formulario del modelo de
+    // la contraparte, incluidas sus extensiones; sin ellas se ve la columna cruda.
+    const partyModel = type.party?.model
+    useEffect(() => {
+        if (!partyModel) return
+        let cancelled = false
+        api.get(`/metadata/modal/${partyModel}`)
+            .then((res: any) => {
+                const fields: any[] = res?.data?.data?.fields ?? res?.data?.fields ?? []
+                const out: Record<string, string> = {}
+                for (const f of fields) if (typeof f?.key === 'string' && typeof f?.label === 'string' && f.label) out[f.key] = f.label
+                if (!cancelled) setPartyLabels(out)
+            })
+            .catch(() => {})
+        return () => {
+            cancelled = true
+        }
+    }, [api, partyModel])
+
     // Cobro: documentos abiertos de la contraparte.
     const openCfg = lineCfg?.open_documents
     const allocPartyId = openCfg ? header[openCfg.party_field] ?? partyId : undefined
@@ -332,8 +362,11 @@ export function DocumentEditor({
                         params: { source: src.key, id, ...(draftId ? { exclude: draftId } : {}) },
                     })
                     return res?.data?.data ?? []
-                } catch (err: any) {
-                    if (err?.response?.status !== 404) throw err
+                } catch {
+                    // Un host sin `source-lines` (404, o la ruta del registro
+                    // contestando 400/500 a «source-lines» como id) o un origen que
+                    // el host aún no sabe calcular: se precarga de la relación y el
+                    // guardado del servidor sigue validando lo pendiente.
                 }
             }
             let rels = relCache.current.get(src.model)
@@ -361,7 +394,7 @@ export function DocumentEditor({
             try {
                 if (!isAllocation) {
                     const rows = await fetchSourceRows(src, id)
-                    const loaded = linesFromSource(rows, src.map, { kind, discountMode: lineCfg.discount_mode })
+                    const loaded = linesFromSource(rows, src.map, { kind, discountMode: lineCfg.discount_mode, defaultTaxRate: taxRate })
                     const { covered } = sourceLoadSummary(rows)
                     setLines(loaded)
                     setLoadedSource(src)
@@ -399,7 +432,7 @@ export function DocumentEditor({
                 setBusy(null)
             }
         },
-        [api, lineCfg, isAllocation, kind, t, fetchSourceRows],
+        [api, lineCfg, isAllocation, kind, t, fetchSourceRows, taxRate],
     )
 
     // Prefill al abrir desde un documento origen (acción de fila «Crear NC», «Facturar venta»…).
@@ -527,11 +560,10 @@ export function DocumentEditor({
             </FieldCell>
         ) : null
 
-    const summaryRows = partySummaryRows(
-        party,
-        type.party?.summary,
-        Object.fromEntries(allFields.map((f) => [f.key, tl(f.label)])),
-    )
+    const summaryRows = partySummaryRows(party, type.party?.summary, {
+        ...Object.fromEntries(Object.entries(partyLabels).map(([k, v]) => [k, tl(v)])),
+        ...Object.fromEntries(allFields.map((f) => [f.key, tl(f.label)])),
+    })
     const advancedSummary = groups.advanced
         .filter(visible)
         .map((f) => {
@@ -562,175 +594,226 @@ export function DocumentEditor({
               { label: t('documentEditor.total', { defaultValue: 'Total' }), value: fmt.money(totals.total), emphasis: true },
           ]
 
-    const activeSource = sources.find((s) => s.key === sourceKey)
+    const activeSource = sources.find((s) => s.key === sourceKey) ?? (sources.length === 1 ? sources[0] : undefined)
     const linesTitle = lineCfg?.title
         ? tl(lineCfg.title)
         : isAllocation
           ? t('documentEditor.allocation_title', { defaultValue: 'Documentos a pagar' })
           : t('documentEditor.lines_title', { defaultValue: 'Conceptos' })
+    // Sin acción de vista previa del servidor, un documento con renglones ofrece
+    // la suya local (encabezado, renglones y totales): sin borrador ni red.
+    const localPreview = !previewEnabled && !type.preview && !!lineCfg && !isAllocation && kind !== 'credit'
+
+    const essentials = (
+        <EditorSection slot="editor-essentials">
+            <FieldGrid>
+                {groups.party && fieldCell(groups.party)}
+                {groups.essential.map((f) => fieldCell(f))}
+            </FieldGrid>
+            {party && (
+                <PartyCard name={party.name ?? party.legal_name} rows={summaryRows} credit={credit} fmt={fmt}>
+                    {partyContribs.map(({ id, component: C }) => (
+                        <C key={id} {...contribProps} />
+                    ))}
+                </PartyCard>
+            )}
+        </EditorSection>
+    )
 
-    return (
-        <div className="flex min-h-0 flex-1 flex-col" data-slot="document-editor" data-kind={kind}>
-            <div className="-mx-1 min-h-0 flex-1 space-y-8 overflow-y-auto px-1 py-2">
-                <FormErrorBanner message={formError} />
-
-                <EditorSection slot="editor-essentials">
-                    <FieldGrid>
-                        {groups.party && fieldCell(groups.party)}
-                        {groups.essential.map((f) => fieldCell(f))}
-                    </FieldGrid>
-                    {party && (
-                        <PartyCard name={party.name ?? party.legal_name} rows={summaryRows} credit={credit} fmt={fmt}>
-                            {partyContribs.map(({ id, component: C }) => (
-                                <C key={id} {...contribProps} />
-                            ))}
-                        </PartyCard>
-                    )}
-                </EditorSection>
-
-                {sources.length > 0 && !isAllocation && (
-                    <EditorSection
-                        slot="load-from-source"
-                        title={t('documentEditor.load_from', { defaultValue: 'Cargar desde…' })}
-                        hint={busy === 'source' ? t('documentEditor.loading_source', { defaultValue: 'Cargando…' }) : sourceNote}
-                    >
-                        <div className="flex flex-wrap items-center gap-2">
-                            {sources.length > 1 && (
-                                <select
-                                    aria-label={t('documentEditor.source_kind', { defaultValue: 'Tipo de documento origen' })}
-                                    className="h-9 rounded-md border bg-background px-2 text-sm"
-                                    value={sourceKey}
-                                    onChange={(e) => {
-                                        setSourceKey(e.target.value)
-                                        setSourceId('')
-                                    }}
-                                >
-                                    <option value="">{t('documentEditor.choose_source', { defaultValue: 'Elige…' })}</option>
-                                    {sources.map((s) => (
-                                        <option key={s.key} value={s.key}>
-                                            {tl(s.label)}
-                                        </option>
-                                    ))}
-                                </select>
-                            )}
-                            {(activeSource ?? (sources.length === 1 ? sources[0] : undefined)) && (
-                                <SourcePicker
-                                    source={(activeSource ?? sources[0])!}
-                                    value={sourceId}
-                                    header={header}
-                                    label={tl((activeSource ?? sources[0])!.label)}
-                                    onPick={(id) => {
-                                        if (!activeSource) setSourceKey(sources[0].key)
-                                        setSourceId(id)
-                                        const src = activeSource ?? sources[0]
-                                        if (id) void loadFromSource(src, id)
-                                    }}
-                                />
-                            )}
-                        </div>
-                    </EditorSection>
-                )}
-
-                {lineCfg && (
-                    <EditorSection
-                        slot={isAllocation ? 'editor-allocation' : 'editor-lines'}
-                        title={linesTitle}
-                        hint={
-                            isAllocation && openBalance > 0 && amountKey ? (
-                                <button
-                                    type="button"
-                                    className="underline-offset-2 hover:underline"
-                                    onClick={() => updateField(amountKey, openBalance)}
-                                >
-                                    {t('documentEditor.pay_all', { defaultValue: 'Cobrar todo ({{amount}})', amount: fmt.money(openBalance) })}
-                                </button>
-                            ) : undefined
-                        }
+    const loadFrom = sources.length > 0 && !isAllocation && (
+        <EditorSection
+            slot="load-from-source"
+            title={t('documentEditor.load_from', { defaultValue: 'Cargar desde…' })}
+            hint={busy === 'source' ? t('documentEditor.loading_source', { defaultValue: 'Cargando…' }) : sourceNote}
+        >
+            <div className="flex flex-wrap items-center gap-2">
+                {sources.length > 1 && (
+                    <div
+                        role="radiogroup"
+                        aria-label={t('documentEditor.source_kind', { defaultValue: 'Tipo de documento origen' })}
+                        className="inline-flex flex-wrap gap-1 rounded-md border p-1"
                     >
-                        {isAllocation ? (
-                            allocPartyId ? (
-                                <PaymentAllocator
-                                    documents={openDocs}
-                                    result={allocation}
-                                    value={alloc}
-                                    onChange={setAlloc}
-                                    currency={currency}
-                                    loading={docsLoading}
-                                    today={today}
-                                />
-                            ) : (
-                                <p className="text-sm text-muted-foreground">
-                                    {t('documentEditor.pick_party_first', { defaultValue: 'Elige el cliente para ver sus documentos con saldo.' })}
-                                </p>
-                            )
-                        ) : (
-                            <DocumentLinesGrid
-                                value={lines}
-                                onChange={(next) => {
-                                    setLines(next)
-                                    setServerIssues([])
+                        {sources.map((s) => (
+                            <button
+                                key={s.key}
+                                type="button"
+                                role="radio"
+                                aria-checked={s.key === sourceKey}
+                                data-source-kind={s.key}
+                                onClick={() => {
+                                    setSourceKey(s.key)
+                                    setSourceId('')
                                 }}
-                                columns={(lineCfg.columns as LineItemsColumn[] | undefined) ?? ['discount', 'tax']}
-                                priceSource={lineCfg.price_source ?? (kind === 'purchase' ? 'cost' : 'sale')}
-                                discountMode={lineCfg.discount_mode}
-                                mode={linesFromSourceDoc ? 'from_source' : 'free'}
-                                policy={kind === 'credit' ? { allowZeroQuantity: linesFromSourceDoc } : undefined}
-                                search={search}
-                                currency={currency}
-                            />
-                        )}
-                        <TotalsPanel rows={totalsRows} />
-                    </EditorSection>
-                )}
-
-                {(groups.advanced.length > 0 || headerContribs.length > 0) && (
-                    <CollapsibleSection
-                        slot="advanced-options"
-                        title={t('documentEditor.advanced', { defaultValue: 'Opciones fiscales' })}
-                        summary={advancedSummary || t('documentEditor.advanced_defaults', { defaultValue: 'Valores sugeridos' })}
-                        open={advancedOpen}
-                        onOpenChange={setAdvancedOpen}
-                    >
-                        {groups.advanced.length > 0 && <FieldGrid>{groups.advanced.map((f) => fieldCell(f))}</FieldGrid>}
-                        {headerContribs.map(({ id, component: C }) => (
-                            <C key={id} {...contribProps} />
+                                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'
+                                }`}
+                            >
+                                {tl(s.label)}
+                            </button>
                         ))}
-                    </CollapsibleSection>
+                    </div>
                 )}
+                {activeSource && (
+                    <SourcePicker
+                        key={activeSource.key}
+                        source={activeSource}
+                        value={sourceId}
+                        header={header}
+                        label={tl(activeSource.label)}
+                        onPick={(id) => {
+                            setSourceKey(activeSource.key)
+                            setSourceId(id)
+                            if (id) void loadFromSource(activeSource, id)
+                        }}
+                    />
+                )}
+            </div>
+        </EditorSection>
+    )
 
-                {[...bodyContribs, ...sideContribs].map(({ id, component: C }) => (
-                    <section key={id} data-contribution={id}>
-                        <C {...contribProps} />
-                    </section>
-                ))}
+    const totalsPanel = <TotalsPanel rows={totalsRows} />
+
+    const linesSection = lineCfg && (
+        <EditorSection
+            slot={isAllocation ? 'editor-allocation' : 'editor-lines'}
+            title={linesTitle}
+            hint={
+                isAllocation && openBalance > 0 && amountKey ? (
+                    <button type="button" className="underline-offset-2 hover:underline" onClick={() => updateField(amountKey, openBalance)}>
+                        {t('documentEditor.pay_all', { defaultValue: 'Cobrar todo ({{amount}})', amount: fmt.money(openBalance) })}
+                    </button>
+                ) : undefined
+            }
+        >
+            {isAllocation ? (
+                allocPartyId ? (
+                    <PaymentAllocator
+                        documents={openDocs}
+                        result={allocation}
+                        value={alloc}
+                        onChange={setAlloc}
+                        currency={currency}
+                        loading={docsLoading}
+                        today={today}
+                    />
+                ) : (
+                    <p className="text-sm text-muted-foreground">
+                        {t('documentEditor.pick_party_first', { defaultValue: 'Elige el cliente para ver sus documentos con saldo.' })}
+                    </p>
+                )
+            ) : (
+                <DocumentLinesGrid
+                    value={lines}
+                    onChange={(next) => {
+                        setLines(next)
+                        setServerIssues([])
+                    }}
+                    columns={(lineCfg.columns as LineItemsColumn[] | undefined) ?? ['discount', 'tax']}
+                    priceSource={lineCfg.price_source ?? (kind === 'purchase' ? 'cost' : 'sale')}
+                    discountMode={lineCfg.discount_mode}
+                    mode={linesFromSourceDoc ? 'from_source' : 'free'}
+                    policy={kind === 'credit' ? { allowZeroQuantity: linesFromSourceDoc } : undefined}
+                    search={search}
+                    currency={currency}
+                />
+            )}
+            {!fullscreen && totalsPanel}
+        </EditorSection>
+    )
 
-                {groups.notes.length > 0 && <FieldGrid>{groups.notes.map((f) => fieldCell(f, true))}</FieldGrid>}
+    const advanced = (groups.advanced.length > 0 || headerContribs.length > 0) && (
+        <CollapsibleSection
+            slot="advanced-options"
+            title={t('documentEditor.advanced', { defaultValue: 'Opciones fiscales' })}
+            summary={advancedSummary || t('documentEditor.advanced_defaults', { defaultValue: 'Valores sugeridos' })}
+            open={advancedOpen}
+            onOpenChange={setAdvancedOpen}
+        >
+            {groups.advanced.length > 0 && <FieldGrid>{groups.advanced.map((f) => fieldCell(f))}</FieldGrid>}
+            {headerContribs.map(({ id, component: C }) => (
+                <C key={id} {...contribProps} />
+            ))}
+        </CollapsibleSection>
+    )
 
-                {previewEnabled && (
-                    <CollapsibleSection
-                        slot="preview"
-                        title={tl(type.preview!.label ?? 'Vista previa')}
-                        open={previewOpen}
-                        onOpenChange={togglePreview}
-                    >
-                        {busy === 'preview' ? (
-                            <p className="flex items-center gap-2 text-sm text-muted-foreground">
-                                <Loader2 className="size-4 animate-spin" aria-hidden />
-                                {t('documentEditor.preview_loading', { defaultValue: 'Generando vista previa…' })}
-                            </p>
-                        ) : (
-                            <>
-                                <PreviewPanel preview={preview} />
-                                <Button type="button" variant="ghost" size="sm" onClick={() => void runPreview()} disabled={busy !== null}>
-                                    {t('documentEditor.preview_refresh', { defaultValue: 'Actualizar vista previa' })}
-                                </Button>
-                            </>
-                        )}
-                    </CollapsibleSection>
-                )}
+    const contributedSections = [...bodyContribs, ...sideContribs].map(({ id, component: C }) => (
+        <section key={id} data-contribution={id}>
+            <C {...contribProps} />
+        </section>
+    ))
+
+    const notes = groups.notes.length > 0 && <FieldGrid>{groups.notes.map((f) => fieldCell(f, true))}</FieldGrid>
+
+    const previewSection = previewEnabled ? (
+        <CollapsibleSection slot="preview" title={tl(type.preview!.label ?? 'Vista previa')} open={previewOpen} onOpenChange={togglePreview}>
+            {busy === 'preview' ? (
+                <p className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Loader2 className="size-4 animate-spin" aria-hidden />
+                    {t('documentEditor.preview_loading', { defaultValue: 'Generando vista previa…' })}
+                </p>
+            ) : (
+                <>
+                    <PreviewPanel preview={preview} />
+                    <Button type="button" variant="ghost" size="sm" onClick={() => void runPreview()} disabled={busy !== null}>
+                        {t('documentEditor.preview_refresh', { defaultValue: 'Actualizar vista previa' })}
+                    </Button>
+                </>
+            )}
+        </CollapsibleSection>
+    ) : localPreview ? (
+        <CollapsibleSection slot="preview" title={t('documentEditor.preview', { defaultValue: 'Vista previa' })} open={previewOpen} onOpenChange={setPreviewOpen}>
+            <DraftPreview
+                title={tl(type.label)}
+                party={party ? String(party.name ?? party.legal_name ?? '') : undefined}
+                header={[...groups.essential, ...groups.advanced]
+                    .filter(visible)
+                    .map((f) => {
+                        const v = header[f.key]
+                        const opt = f.options?.find((o) => String(o.value) === String(v))
+                        return { label: tl(f.label), value: v == null || v === '' ? '' : opt ? friendlyOptionLabel(tl(String(opt.label ?? v))) : String(v) }
+                    })
+                    .filter((r) => r.value)}
+                lines={lines}
+                totals={totalsRows}
+                fmt={fmt}
+            />
+        </CollapsibleSection>
+    ) : null
 
-                <ValidationChecklist issues={shownIssues} title={t('documentEditor.review', { defaultValue: 'Revisa antes de guardar' })} />
-            </div>
+    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'}>
+            {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">
+                        <FormErrorBanner message={formError} />
+                        {essentials}
+                        {loadFrom}
+                        {linesSection}
+                        {advanced}
+                        {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>
+                        {checklist}
+                        {previewSection}
+                    </aside>
+                </div>
+            ) : (
+                <div className="-mx-1 min-h-0 flex-1 space-y-8 overflow-y-auto px-1 py-2">
+                    <FormErrorBanner message={formError} />
+                    {essentials}
+                    {loadFrom}
+                    {linesSection}
+                    {advanced}
+                    {contributedSections}
+                    {notes}
+                    {previewSection}
+                    {checklist}
+                </div>
+            )}
 
             <footer className="flex shrink-0 flex-wrap items-center justify-end gap-2 border-t pt-4" data-slot="editor-actions">
                 {footerContribs.map(({ id, component: C }) => (

package/src/calendar-date.ts

@@ -26,3 +26,39 @@ export function isCalendarDayValue(v: unknown): boolean {
     if (typeof v !== 'string') return false
     return /^\d{4}-\d{2}-\d{2}(?:[T ]00:00:00(?:\.0+)?(?:Z|\+00:00)?)?$/.test(v.trim())
 }
+
+/**
+ * Today's calendar day ("YYYY-MM-DD") in `timeZone` (IANA, e.g. the org's
+ * `America/Mexico_City`), or in the browser zone when absent/invalid. A form
+ * that seeds «hoy» must use the org's day, not UTC's: at 19:00 in Mexico City
+ * UTC is already tomorrow.
+ */
+export function todayInZone(timeZone?: string, now: Date = new Date()): string {
+    if (timeZone) {
+        try {
+            // en-CA formats as YYYY-MM-DD.
+            return new Intl.DateTimeFormat('en-CA', {
+                timeZone,
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+            }).format(now)
+        } catch {
+            /* unknown zone → browser day */
+        }
+    }
+    const y = now.getFullYear()
+    const m = String(now.getMonth() + 1).padStart(2, '0')
+    const d = String(now.getDate()).padStart(2, '0')
+    return `${y}-${m}-${d}`
+}
+
+/**
+ * A field default that names «today» instead of a fixed day: `$today` (the
+ * token flows already use) or `today`. Case-insensitive.
+ */
+export function isTodayToken(v: unknown): boolean {
+    if (typeof v !== 'string') return false
+    const s = v.trim().toLowerCase()
+    return s === '$today' || s === 'today'
+}