@asteby/metacore-runtime-react 49.3.1 → 49.4.0

package/src/business/line-product-cell.tsx

@@ -0,0 +1,219 @@
+// LineProductCell — buscador de producto DENTRO de la celda «Descripción» de un
+// renglón (patrón de editor de facturas pro: Odoo/Holded/Linear). Ocupa solo su
+// celda; la lista de resultados va en un portal (Popover de Radix anclado al
+// input): nunca la recorta el overflow de la tabla ni del modal, queda por
+// encima del diálogo y se abre hacia arriba si abajo no hay espacio.
+//
+// Teclado: ↑/↓ recorren, Enter elige (el grid pasa el foco a «Cant.»), Esc
+// cierra, Tab cierra y avanza normal. El texto escrito sin elegir queda como
+// descripción libre (el renglón libre sigue funcionando igual).
+import { forwardRef, useId, useMemo, useRef, useState, type KeyboardEvent } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Loader2, Search } from 'lucide-react'
+import { Badge, Input, Popover, PopoverAnchor, PopoverContent } from '@asteby/metacore-ui/primitives'
+import { useFormatter } from './format'
+import { useAsyncSearch } from './use-async-search'
+import { useDebouncedValue } from '../use-debounced-value'
+import { availableStock, parseProductQuery, type ProductQuery, type ProductResult, type ProductVariant } from './product-search'
+
+export type LineProductSearch = (query: Exclude<ProductQuery, { kind: 'empty' }>, signal: AbortSignal) => Promise<ProductResult[]>
+
+export interface LineProductHit {
+    product: ProductResult
+    variant?: ProductVariant
+}
+
+export interface LineProductCellProps {
+    search: LineProductSearch
+    /** Texto de la celda (la descripción del renglón, o el borrador del renglón vacío). */
+    text: string
+    onTextChange: (text: string) => void
+    onPick: (product: ProductResult, variant?: ProductVariant) => void
+    /**
+     * Teclas que el buscador no consume (lista cerrada): el grid aplica sus
+     * comandos (Enter agrega, Supr en celda vacía borra…).
+     */
+    onKeyDownClosed?: (e: KeyboardEvent<HTMLInputElement>) => void
+    warehouseId?: string
+    currency?: string
+    placeholder?: string
+    ariaLabel: string
+    disabled?: boolean
+    invalid?: boolean
+    className?: string
+    /** Atributos de datos para que el grid ubique la celda (foco por teclado). */
+    dataCell?: string
+}
+
+export const LineProductCell = forwardRef<HTMLInputElement, LineProductCellProps>(function LineProductCell(
+    { search, text, onTextChange, onPick, onKeyDownClosed, warehouseId, currency, placeholder, ariaLabel, disabled, invalid, className, dataCell },
+    ref,
+) {
+    const { t } = useTranslation()
+    const fmt = useFormatter({ currency })
+    const listId = useId()
+    const anchorRef = useRef<HTMLDivElement>(null)
+    // Solo se abre mientras se escribe: enfocar un renglón libre ya capturado no
+    // despliega «sin resultados» encima de la tabla.
+    const [typing, setTyping] = useState(false)
+    const [active, setActive] = useState(0)
+    const parsed = parseProductQuery(text)
+    const run = useMemo(
+        () => (q: string, signal: AbortSignal) => {
+            const p = parseProductQuery(q)
+            return p.kind === 'empty' ? Promise.resolve([]) : search(p, signal)
+        },
+        [search],
+    )
+    const minChars = parsed.kind === 'barcode' ? 8 : 2
+    const delay = parsed.kind === 'barcode' ? 0 : 250
+    const { results, loading: fetching } = useAsyncSearch(typing ? text : '', run, { minChars, delay })
+    // Mientras el debounce no alcanza lo escrito, la lista dice «Buscando…» y no
+    // un «sin coincidencias» prematuro.
+    const settled = useDebouncedValue(text.trim(), delay) === text.trim()
+    const loading = fetching || !settled
+    const flat = useMemo<LineProductHit[]>(
+        () =>
+            results.flatMap((p) =>
+                (p.variants?.length ?? 0) > 0 ? p.variants!.map((v) => ({ product: p, variant: v })) : [{ product: p }],
+            ),
+        [results],
+    )
+    const queryReady = typing && text.trim().length >= minChars
+    const open = queryReady && (loading || flat.length > 0 || text.trim().length >= 2)
+    const hasHits = flat.length > 0
+
+    const close = () => {
+        setTyping(false)
+        setActive(0)
+    }
+    const choose = (idx: number) => {
+        const hit = flat[idx]
+        if (!hit) return
+        close()
+        onPick(hit.product, hit.variant)
+    }
+
+    const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+        if (open && hasHits) {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault()
+                setActive((n) => Math.min(flat.length - 1, n + 1))
+                return
+            }
+            if (e.key === 'ArrowUp') {
+                e.preventDefault()
+                setActive((n) => Math.max(0, n - 1))
+                return
+            }
+            if (e.key === 'Enter') {
+                e.preventDefault()
+                choose(active)
+                return
+            }
+        }
+        if (open && e.key === 'Escape') {
+            // Cierra la lista sin cerrar el diálogo que la contiene.
+            e.preventDefault()
+            e.stopPropagation()
+            close()
+            return
+        }
+        if (e.key === 'Tab') close()
+        onKeyDownClosed?.(e)
+    }
+
+    return (
+        <Popover open={open} onOpenChange={(o) => !o && close()}>
+            <PopoverAnchor asChild>
+                <div ref={anchorRef} className="relative w-full min-w-0" data-slot="line-product-cell">
+                    <Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" aria-hidden />
+                    <Input
+                        ref={ref}
+                        value={text}
+                        disabled={disabled}
+                        role="combobox"
+                        aria-autocomplete="list"
+                        aria-expanded={open}
+                        aria-controls={open ? listId : undefined}
+                        aria-activedescendant={open && hasHits ? `${listId}-${active}` : undefined}
+                        aria-label={ariaLabel}
+                        aria-invalid={invalid || undefined}
+                        autoComplete="off"
+                        data-cell={dataCell}
+                        placeholder={placeholder ?? t('lineItems.searchPlaceholder', { defaultValue: 'Producto, medida (205/55R16), SKU o código de barras' })}
+                        className={'h-8 pl-8 ' + (className ?? '')}
+                        onChange={(e) => {
+                            onTextChange(e.target.value)
+                            setTyping(true)
+                            setActive(0)
+                        }}
+                        onBlur={() => close()}
+                        onKeyDown={onKeyDown}
+                    />
+                </div>
+            </PopoverAnchor>
+            <PopoverContent
+                align="start"
+                sideOffset={4}
+                collisionPadding={8}
+                className="p-1"
+                data-slot="line-product-results"
+                // El foco se queda en la celda: se sigue escribiendo mientras se ve la lista.
+                onOpenAutoFocus={(e) => e.preventDefault()}
+                onCloseAutoFocus={(e) => e.preventDefault()}
+                onInteractOutside={(e) => {
+                    if (anchorRef.current?.contains(e.target as Node)) e.preventDefault()
+                }}
+                style={{ width: 'max(var(--radix-popover-trigger-width), 22rem)', maxWidth: 'calc(100vw - 1rem)' }}
+            >
+                {hasHits ? (
+                    <ul id={listId} role="listbox" aria-label={ariaLabel} className="max-h-72 overflow-auto">
+                        {flat.map((hit, idx) => {
+                            const price = hit.variant?.price ?? hit.product.price
+                            const stock = availableStock(hit.variant ?? hit.product, warehouseId)
+                            const meta = [hit.variant?.sku ?? hit.product.sku, hit.product.tire?.normalized].filter(Boolean).join(' · ')
+                            return (
+                                <li key={`${hit.product.id}:${hit.variant?.id ?? ''}`} id={`${listId}-${idx}`} role="option" aria-selected={idx === active}>
+                                    <button
+                                        type="button"
+                                        tabIndex={-1}
+                                        className={
+                                            'flex w-full items-center justify-between gap-3 rounded-sm px-2 py-1.5 text-left text-sm outline-none hover:bg-accent hover:text-accent-foreground ' +
+                                            (idx === active ? 'bg-accent text-accent-foreground' : '')
+                                        }
+                                        onMouseDown={(e) => e.preventDefault()}
+                                        onMouseEnter={() => setActive(idx)}
+                                        onClick={() => choose(idx)}
+                                    >
+                                        <span className="min-w-0">
+                                            <span className="block truncate font-medium">{hit.variant ? `${hit.product.name} · ${hit.variant.label}` : hit.product.name}</span>
+                                            {meta && <span className="block truncate text-xs text-muted-foreground">{meta}</span>}
+                                        </span>
+                                        <span className="flex shrink-0 items-center gap-2">
+                                            {stock != null && (
+                                                <Badge variant="secondary" className="font-normal tabular-nums">
+                                                    {stock}
+                                                </Badge>
+                                            )}
+                                            {price != null && <span className="tabular-nums">{fmt.money(price)}</span>}
+                                        </span>
+                                    </button>
+                                </li>
+                            )
+                        })}
+                    </ul>
+                ) : loading ? (
+                    <p className="flex items-center justify-center gap-2 py-4 text-sm text-muted-foreground">
+                        <Loader2 className="size-4 animate-spin" aria-hidden />
+                        {t('common.searching', { defaultValue: 'Buscando…' })}
+                    </p>
+                ) : (
+                    <p className="px-2 py-3 text-sm text-muted-foreground">
+                        {t('lineItems.noProduct', { defaultValue: 'Sin coincidencias. Se usará como descripción libre.' })}
+                    </p>
+                )}
+            </PopoverContent>
+        </Popover>
+    )
+})

package/src/dynamic-select-field.tsx

@@ -28,7 +28,6 @@ import {
     Badge,
     Button,
     Command,
-    CommandEmpty,
     CommandGroup,
     CommandInput,
     CommandItem,
@@ -38,9 +37,10 @@ import {
     PopoverTrigger,
     InitialsAvatar,
 } from '@asteby/metacore-ui/primitives'
-import { Check, ChevronsUpDown, Loader2, Plus, ScanLine } from 'lucide-react'
+import { Check, ChevronsUpDown, Loader2, ScanLine } from 'lucide-react'
 import { resolveColorCss } from '@asteby/metacore-ui/lib'
 import { BarcodeScanner } from './barcode-scanner'
+import { JOINED_TRIGGER_CLASS, PickerCreateItem, RecordPickerAction, hasRecordPickerAction } from './record-picker-actions'
 import { DynamicIcon, isLucideIconName } from './dynamic-icon'
 import { useDebouncedValue } from './use-debounced-value'
 import { useOptionsResolver, type ResolvedOption } from './use-options-resolver'
@@ -190,7 +190,8 @@ export interface DynamicSelectFieldProps {
      */
     descriptionAsBadge?: boolean
     /**
-     * Hide the inline "+" create affordance even when `field.ref` is set.
+     * Hide the inline create/edit affordances (joined "+" / pencil and the
+     * "Crear …" list footer) even when `field.ref` is set.
      * Useful for static / filtered lists where creating a new record is not
      * meaningful in context.
      */
@@ -344,8 +345,31 @@ export function DynamicSelectField({
     // via a decoupled window event the host listens for. On success the host
     // hands back the new record and we select it immediately. No host import →
     // no circular dependency; works for ANY dynamic_select with a `ref`.
+    // Inline-edit: with a value selected the joined pencil opens THAT record's
+    // edit modal through the sibling `metacore:edit-record` event (the host's
+    // RecordCreateBridge already listens for it). On save the trigger label
+    // refreshes from the returned record.
+    const openEdit = () => {
+        if (!fieldRef || !value || typeof window === 'undefined') return
+        setOpen(false)
+        window.dispatchEvent(
+            new CustomEvent('metacore:edit-record', {
+                detail: {
+                    model: fieldRef,
+                    recordId: String(value),
+                    onSaved: (rec: any) => {
+                        const id = String(value)
+                        const label = rec ? rec.name ?? rec.label ?? rec.title : undefined
+                        if (label != null) setPicked({ ...(selectedOption ?? { id, value: id }), id, value: id, label: String(label), name: String(label) })
+                    },
+                },
+            }),
+        )
+    }
+
     const openCreate = () => {
         if (!fieldRef || typeof window === 'undefined') return
+        setOpen(false)
         window.dispatchEvent(
             new CustomEvent('metacore:create-record', {
                 detail: {
@@ -398,8 +422,12 @@ export function DynamicSelectField({
     // to the cell. Without min-w-0 the combobox+button row sizes to its content
     // (the long empty-state placeholder) and overflows the column, pushing the
     // "+" off-screen — it only "fit" once a short value was selected.
+    const canMutate = !!fieldRef && !hideCreate && !useStatic
+    const joined = canMutate && !blockedByDependency && hasRecordPickerAction(!!value, openCreate, openEdit)
+    const fieldName = field.label ? t(field.label, { defaultValue: field.label }) : fieldRef ?? ''
     return (
-        <div className="flex w-full min-w-0 items-center gap-1.5">
+        <div className="flex w-full min-w-0 items-center gap-1.5" data-slot="dynamic-select">
+            <div className="flex min-w-0 flex-1 items-center">
             <Popover open={open && !blockedByDependency} onOpenChange={(o: boolean) => { if (!blockedByDependency) setOpen(o) }}>
             <PopoverTrigger asChild>
                 <Button
@@ -412,6 +440,7 @@ export function DynamicSelectField({
                     aria-invalid={invalid || undefined}
                     className={
                         'min-w-0 flex-1 justify-between font-normal' +
+                        (joined ? ` ${JOINED_TRIGGER_CLASS}` : '') +
                         (invalid ? ' border-destructive ring-1 ring-destructive/30' : '')
                     }
                     data-empty={!value}
@@ -438,9 +467,13 @@ export function DynamicSelectField({
             <PopoverContent
                 className="p-0"
                 align="start"
-                // Match the trigger width without an arbitrary Tailwind class
-                // (those don't always survive a consuming app's Tailwind scan).
-                style={{ width: 'var(--radix-popover-trigger-width)' }}
+                // Portaled (never clipped by a table/modal overflow) and
+                // collision-aware: flips above the trigger when there is no
+                // room below. Match the trigger width without an arbitrary
+                // Tailwind class (those don't always survive a consuming app's
+                // Tailwind scan), with a floor so short cells stay readable.
+                collisionPadding={8}
+                style={{ width: 'max(var(--radix-popover-trigger-width), 14rem)', maxWidth: 'calc(100vw - 1rem)' }}
             >
                 <Command shouldFilter={false}>
                     <CommandInput
@@ -456,7 +489,9 @@ export function DynamicSelectField({
                             </div>
                         )}
                         {!loading && options.length === 0 && (
-                            <CommandEmpty>
+                            // Plain block, not <CommandEmpty>: cmdk hides Empty while
+                            // any item is mounted, and the "Crear …" footer is one.
+                            <div className="text-muted-foreground py-6 text-center text-sm" data-slot="picker-empty">
                                 {useStatic
                                     ? debounced
                                         ? 'Sin resultados'
@@ -464,7 +499,7 @@ export function DynamicSelectField({
                                     : debounced
                                       ? 'Sin resultados'
                                       : 'Sin resultados — escribe para filtrar'}
-                            </CommandEmpty>
+                            </div>
                         )}
                         {!loading && options.length > 0 && (
                             <CommandGroup className="max-h-64 overflow-auto">
@@ -502,10 +537,17 @@ export function DynamicSelectField({
                                 })}
                             </CommandGroup>
                         )}
+                        {canMutate && !loading && (
+                            <PickerCreateItem label={fieldName} onSelect={openCreate} />
+                        )}
                     </CommandList>
                 </Command>
             </PopoverContent>
             </Popover>
+            {canMutate && !blockedByDependency && (
+                <RecordPickerAction hasValue={!!value} label={fieldName} onCreate={openCreate} onEdit={openEdit} />
+            )}
+            </div>
             {scanEnabled && (
                 <Button
                     type="button"
@@ -519,19 +561,6 @@ export function DynamicSelectField({
                     <ScanLine className="size-4" />
                 </Button>
             )}
-            {fieldRef && !hideCreate && !useStatic && (
-                <Button
-                    type="button"
-                    variant="outline"
-                    size="icon"
-                    className="size-9 shrink-0"
-                    onClick={openCreate}
-                    title={`Crear ${field.label ?? fieldRef}`}
-                    aria-label={`Crear ${field.label ?? fieldRef}`}
-                >
-                    <Plus className="size-4" />
-                </Button>
-            )}
             {scanEnabled && (
                 <BarcodeScanner
                     open={scanOpen}

package/src/entity-select.tsx

@@ -15,11 +15,10 @@
 // code is needed. This lives in the SDK so POS, purchases and any future addon
 // share ONE implementation instead of each re-porting a bespoke picker.
 import { useCallback, useEffect, useState } from 'react'
-import { Search, X, Plus, Pencil, type LucideIcon } from 'lucide-react'
+import { Search, X, type LucideIcon } from 'lucide-react'
 import {
     Button,
     Command,
-    CommandEmpty,
     CommandGroup,
     CommandInput,
     CommandItem,
@@ -29,6 +28,7 @@ import {
     PopoverTrigger,
 } from '@asteby/metacore-ui'
 import { CreateRecordDialog } from './dialogs/create-record-dialog'
+import { JOINED_TRIGGER_CLASS, PickerCreateItem, RecordPickerAction, hasRecordPickerAction } from './record-picker-actions'
 import { useCan } from './permissions-context'
 import { useApi } from './api-context'
 
@@ -172,14 +172,14 @@ export function EntitySelect({
         onSelect(null, null)
     }
 
-    const openCreate = (e: React.MouseEvent) => {
-        e.stopPropagation()
+    const openCreate = () => {
+        setOpen(false)
         setDialogRecordId(undefined)
         setDialogOpen(true)
     }
-    const openEdit = (e: React.MouseEvent) => {
-        e.stopPropagation()
+    const openEdit = () => {
         if (!value) return
+        setOpen(false)
         setDialogRecordId(value)
         setDialogOpen(true)
     }
@@ -198,14 +198,18 @@ export function EntitySelect({
         onSelect(id, lbl)
     }
 
+    const onCreate = mayCreate ? openCreate : undefined
+    const onEdit = mayEdit ? openEdit : undefined
+    const joined = hasRecordPickerAction(!!value, onCreate, onEdit)
+
     return (
-        <div className="flex items-center gap-1.5">
+        <div className="flex items-center" data-slot="entity-select">
             <Popover open={open} onOpenChange={disabled ? undefined : setOpen}>
                 <PopoverTrigger asChild>
                     <Button
                         variant="outline"
                         disabled={disabled}
-                        className="w-full flex-1 justify-start gap-2 font-normal"
+                        className={'w-full min-w-0 flex-1 justify-start gap-2 font-normal' + (joined ? ` ${JOINED_TRIGGER_CLASS}` : '')}
                     >
                         {Icon && <Icon className="text-muted-foreground size-4 shrink-0" />}
                         <span className="flex-1 truncate text-left">{label ?? placeholder}</span>
@@ -228,7 +232,8 @@ export function EntitySelect({
                 <PopoverContent
                     className="p-0"
                     align="start"
-                    style={{ width: 'var(--radix-popover-trigger-width)' }}
+                    collisionPadding={8}
+                    style={{ width: 'max(var(--radix-popover-trigger-width), 14rem)', maxWidth: 'calc(100vw - 1rem)' }}
                 >
                     <Command shouldFilter={false}>
                         <CommandInput
@@ -244,7 +249,7 @@ export function EntitySelect({
                             )}
                             {!isLoading &&
                                 searchTerm.length >= minChars &&
-                                results.length === 0 && <CommandEmpty>{emptyText}</CommandEmpty>}
+                                results.length === 0 && <div className="text-muted-foreground py-6 text-center text-sm">{emptyText}</div>}
                             {!isLoading && results.length > 0 && (
                                 <CommandGroup className="max-h-64 overflow-auto">
                                     {results.map((row) => (
@@ -270,41 +275,14 @@ export function EntitySelect({
                                     <span className="text-xs">Escribe al menos 2 caracteres</span>
                                 </div>
                             )}
+                            {onCreate && !isLoading && <PickerCreateItem label={model} onSelect={openCreate} />}
                         </CommandList>
                     </Command>
                 </PopoverContent>
             </Popover>
 
             {/* Selected → edit (pencil); empty → create (+). Each gated by perms. */}
-            {value
-                ? mayEdit && (
-                      <Button
-                          type="button"
-                          variant="outline"
-                          size="icon"
-                          disabled={disabled}
-                          onClick={openEdit}
-                          aria-label="Editar"
-                          title="Editar"
-                          className="shrink-0"
-                      >
-                          <Pencil className="size-4" />
-                      </Button>
-                  )
-                : mayCreate && (
-                      <Button
-                          type="button"
-                          variant="outline"
-                          size="icon"
-                          disabled={disabled}
-                          onClick={openCreate}
-                          aria-label="Crear"
-                          title="Crear"
-                          className="shrink-0"
-                      >
-                          <Plus className="size-4" />
-                      </Button>
-                  )}
+            <RecordPickerAction hasValue={!!value} label={model} onCreate={onCreate} onEdit={onEdit} disabled={disabled} />
 
             {dialogOpen && (
                 <CreateRecordDialog

package/src/field-grid.tsx

@@ -42,14 +42,28 @@ export function FieldCell({
 export function FieldLabel({
     htmlFor,
     required,
+    tone = 'caps',
     children,
 }: {
     htmlFor?: string
     required?: boolean
+    /**
+     * `caps` (default): small uppercase eyebrow of the CRUD modals. `sentence`:
+     * sentence-case label for dense editors (DocumentEditor) where a column of
+     * uppercase labels reads as shouting.
+     */
+    tone?: 'caps' | 'sentence'
     children: ReactNode
 }) {
     return (
-        <Label htmlFor={htmlFor} className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        <Label
+            htmlFor={htmlFor}
+            className={
+                tone === 'sentence'
+                    ? 'text-sm font-medium text-foreground/80'
+                    : 'text-xs font-medium uppercase tracking-wide text-muted-foreground'
+            }
+        >
             {children}
             {required && <span className="ml-0.5 text-destructive">*</span>}
         </Label>

package/src/index.ts

@@ -475,6 +475,8 @@ export type { DynamicRecordDialogProps, FieldDef, FieldOption, GetImageUrl } fro
 export { CreateRecordDialog } from './dialogs/create-record-dialog'
 export { EntitySelect } from './entity-select'
 export type { EntitySelectProps, EntitySelectOption } from './entity-select'
+export { RecordPickerAction, PickerCreateItem, JOINED_TRIGGER_CLASS, hasRecordPickerAction } from './record-picker-actions'
+export type { RecordPickerActionProps } from './record-picker-actions'
 export { ViewRecordDialog } from './dialogs/view-record-dialog'
 export type {
     ModelKey,

package/src/record-picker-actions.tsx

@@ -0,0 +1,81 @@
+// RecordPickerActions — create/edit affordances shared by every "pick a related
+// record" control (DynamicSelectField for declarative forms, EntitySelect for
+// hand-written screens). ONE implementation of the same contract:
+//
+//   - nothing selected → "+" joined to the trigger: opens the model's CREATE
+//     modal and the new record ends up selected;
+//   - a record selected → pencil joined to the trigger: opens THAT record's
+//     EDIT modal and the label refreshes on save;
+//   - "Crear …" at the foot of the result list, so creating is one step away
+//     from a search with no hits.
+//
+// The action renders as a segment of the trigger (shared border, no gap) so the
+// control reads as a single field instead of a select plus a loose button.
+import type { ReactNode } from 'react'
+import { Pencil, Plus } from 'lucide-react'
+import { Button, CommandGroup, CommandItem, CommandSeparator } from '@asteby/metacore-ui/primitives'
+
+/** Classes for a trigger that has a joined action segment on its right. */
+export const JOINED_TRIGGER_CLASS = 'rounded-r-none focus-visible:z-10'
+
+export interface RecordPickerActionProps {
+    /** Current value: drives create (+) vs edit (pencil). */
+    hasValue: boolean
+    /** Human label of the referenced model / field, for the accessible name. */
+    label: string
+    onCreate?: () => void
+    onEdit?: () => void
+    disabled?: boolean
+}
+
+/**
+ * Joined trailing segment: pencil when there is a value (and `onEdit`), "+"
+ * otherwise (and `onCreate`). Renders nothing when neither applies — callers
+ * should then drop {@link JOINED_TRIGGER_CLASS} from the trigger.
+ */
+export function RecordPickerAction({ hasValue, label, onCreate, onEdit, disabled }: RecordPickerActionProps) {
+    const edit = hasValue && !!onEdit
+    const create = !hasValue && !!onCreate
+    if (!edit && !create) return null
+    const name = edit ? `Editar ${label}` : `Crear ${label}`
+    return (
+        <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            disabled={disabled}
+            onClick={(e) => {
+                e.stopPropagation()
+                if (edit) onEdit?.()
+                else onCreate?.()
+            }}
+            aria-label={name}
+            title={name}
+            data-slot="record-picker-action"
+            data-action={edit ? 'edit' : 'create'}
+            className="-ml-px size-9 shrink-0 rounded-l-none text-muted-foreground hover:text-foreground focus-visible:z-10"
+        >
+            {edit ? <Pencil className="size-4" /> : <Plus className="size-4" />}
+        </Button>
+    )
+}
+
+/** True when a picker will render a joined action for the given state. */
+export function hasRecordPickerAction(hasValue: boolean, onCreate?: unknown, onEdit?: unknown): boolean {
+    return hasValue ? !!onEdit : !!onCreate
+}
+
+/** "Crear …" row at the foot of a Command list. */
+export function PickerCreateItem({ label, onSelect, children }: { label: string; onSelect: () => void; children?: ReactNode }) {
+    return (
+        <>
+            <CommandSeparator />
+            <CommandGroup>
+                <CommandItem value="__create__" onSelect={onSelect} data-slot="picker-create" className="text-primary">
+                    <Plus className="mr-2 size-4 shrink-0" />
+                    <span className="truncate">{children ?? `Crear ${label}`}</span>
+                </CommandItem>
+            </CommandGroup>
+        </>
+    )
+}