@asteby/metacore-runtime-react 4.0.0

package/dist/capability-gate.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// CapabilityGate — conditionally renders its children based on the current
+// user's capability set. Capabilities are sourced from AddonAPI.capabilities
+// or a React context the host provides.
+import { createContext, useContext, useMemo } from 'react';
+const CapabilityContext = createContext({
+    has: () => false,
+    all: () => false,
+    any: () => false,
+});
+function normalize(cs) {
+    if (cs instanceof Set)
+        return cs;
+    if (Array.isArray(cs))
+        return new Set(cs);
+    return new Set(Object.entries(cs).filter(([, v]) => v).map(([k]) => k));
+}
+export function CapabilityProvider({ capabilities, children }) {
+    const value = useMemo(() => {
+        const set = normalize(capabilities);
+        return {
+            has: (c) => set.has(c),
+            all: (cs) => cs.every(c => set.has(c)),
+            any: (cs) => cs.some(c => set.has(c)),
+        };
+    }, [capabilities]);
+    return _jsx(CapabilityContext.Provider, { value: value, children: children });
+}
+export function useCapabilities() {
+    return useContext(CapabilityContext);
+}
+export function CapabilityGate({ require, all, any, fallback = null, invert = false, children }) {
+    const ctx = useCapabilities();
+    let allowed = true;
+    if (require)
+        allowed = allowed && ctx.has(require);
+    if (all && all.length)
+        allowed = allowed && ctx.all(all);
+    if (any && any.length)
+        allowed = allowed && ctx.any(any);
+    const show = invert ? !allowed : allowed;
+    return _jsx(_Fragment, { children: show ? children : fallback });
+}

package/dist/dialogs/_primitives.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: number;
+}
+export declare function Progress({ value, className, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element;
+export interface RadioGroupProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    className?: string;
+    children: React.ReactNode;
+    name?: string;
+}
+export declare function RadioGroup({ value, onValueChange, className, children, name }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export interface RadioGroupItemProps {
+    value: string;
+    id?: string;
+    className?: string;
+    disabled?: boolean;
+}
+export declare function RadioGroupItem({ value, id, className, disabled }: RadioGroupItemProps): import("react/jsx-runtime").JSX.Element;
+export interface CalendarProps {
+    mode?: 'single';
+    selected?: Date;
+    onSelect?: (date: Date | undefined) => void;
+    locale?: any;
+    className?: string;
+}
+export declare function Calendar({ selected, onSelect, className }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=_primitives.d.ts.map

package/dist/dialogs/_primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_primitives.d.ts","sourceRoot":"","sources":["../../src/dialogs/_primitives.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAS,EAAE,SAAc,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAiB9E;AAWD,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,SAAc,EAAE,QAAQ,EAAE,IAAoB,EAAE,EAAE,eAAe,2CAMnH;AAED,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,SAAc,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAgB1F;AAQD,MAAM,WAAW,aAAa;IAC1B,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,QAAQ,CAAC,EAAE,IAAI,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAA;IAC3C,MAAM,CAAC,EAAE,GAAG,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAc,EAAE,EAAE,aAAa,2CAkB7E"}

package/dist/dialogs/_primitives.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Minimal local primitives used by the dialogs copied into runtime-react.
+// These are intentionally dependency-free shims — hosts that want richer
+// visuals (date picker calendar, radix progress, radix radio-group) should
+// override by wrapping these components. The UI package does not currently
+// export these three primitives so we keep them inside the runtime.
+import * as React from 'react';
+export function Progress({ value = 0, className = '', ...props }) {
+    const pct = Math.max(0, Math.min(100, value));
+    return (_jsx("div", { role: "progressbar", "aria-valuenow": pct, "aria-valuemin": 0, "aria-valuemax": 100, className: `relative h-2 w-full overflow-hidden rounded-full bg-secondary ${className}`, ...props, children: _jsx("div", { className: "h-full bg-primary transition-all", style: { width: `${pct}%` } }) }));
+}
+const RadioGroupContext = React.createContext(null);
+export function RadioGroup({ value, onValueChange, className = '', children, name = 'radio-group' }) {
+    return (_jsx(RadioGroupContext.Provider, { value: { value, onChange: onValueChange, name }, children: _jsx("div", { role: "radiogroup", className: className, children: children }) }));
+}
+export function RadioGroupItem({ value, id, className = '', disabled }) {
+    const ctx = React.useContext(RadioGroupContext);
+    if (!ctx)
+        throw new Error('RadioGroupItem must be used inside <RadioGroup>');
+    const checked = ctx.value === value;
+    return (_jsx("input", { type: "radio", id: id, name: ctx.name, value: value, checked: checked, disabled: disabled, onChange: () => ctx.onChange(value), className: `h-4 w-4 border-primary text-primary ${className}` }));
+}
+export function Calendar({ selected, onSelect, className = '' }) {
+    const value = selected && !isNaN(selected.getTime())
+        ? selected.toISOString().slice(0, 10)
+        : '';
+    return (_jsx("div", { className: `p-3 ${className}`, children: _jsx("input", { type: "date", value: value, onChange: (e) => {
+                const v = e.target.value;
+                if (!v) {
+                    onSelect?.(undefined);
+                    return;
+                }
+                onSelect?.(new Date(v + 'T00:00:00'));
+            }, className: "w-full rounded-md border px-3 py-2 text-sm" }) }));
+}

package/dist/dialogs/dynamic-record.d.ts

@@ -0,0 +1,11 @@
+export interface DynamicRecordDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    mode: 'view' | 'edit' | 'create';
+    model: string;
+    recordId?: string | null;
+    endpoint?: string;
+    onSaved?: () => void;
+}
+export declare function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId, endpoint, onSaved, }: DynamicRecordDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dynamic-record.d.ts.map

package/dist/dialogs/dynamic-record.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-record.d.ts","sourceRoot":"","sources":["../../src/dialogs/dynamic-record.tsx"],"names":[],"mappings":"AAoEA,MAAM,WAAW,wBAAwB;IACrC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAsDD,wBAAgB,mBAAmB,CAAC,EAChC,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,GACV,EAAE,wBAAwB,2CAgM1B"}

package/dist/dialogs/dynamic-record.js

@@ -0,0 +1,377 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// DynamicRecordDialog — renders a create/edit/view modal for a model based
+// on metadata fetched from `/metadata/modal/:model`. Ported from the ops
+// starter. Host-owned infra that was referenced by alias (axios client,
+// branch store) now flows through <ApiProvider> from runtime-react.
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Button, Input, Textarea, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Skeleton, Badge, Popover, PopoverContent, PopoverTrigger, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from '@asteby/metacore-ui/primitives';
+import { cn } from '@asteby/metacore-ui/lib';
+import { Calendar } from './_primitives';
+import { toast } from 'sonner';
+import { format, parseISO } from 'date-fns';
+import { es } from 'date-fns/locale';
+import { ExternalLink, Loader2, CalendarIcon, ChevronDown, Check, Upload, X as XIcon } from 'lucide-react';
+import { useApi } from '../api-context';
+function resolvePath(obj, path) {
+    return path.split('.').reduce((acc, part) => acc?.[part], obj);
+}
+function formatDisplayValue(value, field) {
+    if (value === null || value === undefined || value === '')
+        return '—';
+    if (field.type === 'boolean' || typeof value === 'boolean')
+        return value ? 'Sí' : 'No';
+    if (field.type === 'date') {
+        try {
+            return new Date(value).toLocaleDateString('es-MX', {
+                day: 'numeric', month: 'long', year: 'numeric',
+            });
+        }
+        catch {
+            return String(value);
+        }
+    }
+    if (field.type === 'select' && field.options?.length) {
+        const match = field.options.find(o => o.value === String(value));
+        return match?.label ?? String(value);
+    }
+    return String(value);
+}
+const MODE_CONFIG = {
+    create: {
+        getTitle: (meta) => meta.createTitle || meta.title || 'Nuevo registro',
+        description: 'Completa los campos para crear un nuevo registro.',
+        submitLabel: 'Crear',
+        submittingLabel: 'Creando...',
+        cancelLabel: 'Cancelar',
+    },
+    edit: {
+        getTitle: (meta) => meta.editTitle || meta.title || 'Editar registro',
+        description: 'Modifica los campos y guarda los cambios.',
+        submitLabel: 'Guardar cambios',
+        submittingLabel: 'Guardando...',
+        cancelLabel: 'Cancelar',
+    },
+    view: {
+        getTitle: (meta) => meta.title || 'Ver registro',
+        description: 'Información detallada del registro.',
+        submitLabel: '',
+        submittingLabel: '',
+        cancelLabel: 'Cerrar',
+    },
+};
+const ModelContext = createContext('');
+export function DynamicRecordDialog({ open, onOpenChange, mode, model, recordId, endpoint, onSaved, }) {
+    const api = useApi();
+    const [modalMeta, setModalMeta] = useState(null);
+    const [record, setRecord] = useState(null);
+    const [formValues, setFormValues] = useState({});
+    const [loading, setLoading] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const isCreate = mode === 'create';
+    const isEditable = mode === 'create' || mode === 'edit';
+    const config = MODE_CONFIG[mode];
+    useEffect(() => {
+        if (!open)
+            return;
+        if (!isCreate && !recordId)
+            return;
+        let cancelled = false;
+        const load = async () => {
+            setLoading(true);
+            try {
+                const metaRes = await api.get(`/metadata/modal/${model}`);
+                if (cancelled)
+                    return;
+                const meta = metaRes.data?.data ?? metaRes.data;
+                setModalMeta(meta);
+                if (isCreate) {
+                    const initial = {};
+                    for (const field of meta.fields ?? []) {
+                        initial[field.key] = field.defaultValue ?? '';
+                    }
+                    setFormValues(initial);
+                }
+                else {
+                    const recordEndpoint = endpoint
+                        ? `${endpoint}/${recordId}`
+                        : `/data/${model}/${recordId}`;
+                    const recRes = await api.get(recordEndpoint);
+                    if (cancelled)
+                        return;
+                    const rec = recRes.data?.data ?? recRes.data;
+                    setRecord(rec);
+                    const initial = {};
+                    for (const field of meta.fields ?? []) {
+                        initial[field.key] = resolvePath(rec, field.key) ?? field.defaultValue ?? '';
+                    }
+                    setFormValues(initial);
+                }
+            }
+            catch (err) {
+                console.error('[DynamicRecordDialog] load error:', err);
+                toast.error('Error al cargar los datos');
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        };
+        load();
+        return () => { cancelled = true; };
+    }, [open, recordId, model, endpoint, isCreate]);
+    useEffect(() => {
+        if (!open) {
+            setModalMeta(null);
+            setRecord(null);
+            setFormValues({});
+        }
+    }, [open]);
+    const handleSubmit = async (e) => {
+        e?.preventDefault();
+        if (!modalMeta)
+            return;
+        if (isEditable) {
+            for (const field of modalMeta.fields) {
+                if (field.required && !formValues[field.key] && formValues[field.key] !== 0 && formValues[field.key] !== false) {
+                    toast.error(`El campo "${field.label}" es obligatorio`);
+                    return;
+                }
+            }
+        }
+        setSaving(true);
+        try {
+            let res;
+            if (isCreate) {
+                const createEndpoint = endpoint || `/data/${model}`;
+                res = await api.post(createEndpoint, formValues);
+            }
+            else {
+                const updateEndpoint = endpoint
+                    ? `${endpoint}/${recordId}`
+                    : `/data/${model}/${recordId}`;
+                res = await api.put(updateEndpoint, formValues);
+            }
+            if (res.data?.success !== false) {
+                toast.success(res.data?.message || (isCreate ? 'Registro creado correctamente' : 'Guardado correctamente'));
+                onSaved?.();
+                onOpenChange(false);
+            }
+            else {
+                toast.error(res.data?.message || 'Error al guardar');
+            }
+        }
+        catch (err) {
+            toast.error(err?.response?.data?.message || 'Error al guardar');
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const title = modalMeta ? config.getTitle(modalMeta) : '';
+    const visibleFields = modalMeta?.fields?.filter(f => {
+        if (f.hidden)
+            return false;
+        if (isCreate && f.readonly)
+            return false;
+        return true;
+    }) ?? [];
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-2xl max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden", children: [_jsxs(DialogHeader, { className: "p-6 pb-4 border-b shrink-0", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: config.description })] }), _jsx("div", { className: "flex-1 overflow-y-auto p-6", children: loading ? (_jsx(LoadingSkeleton, {})) : modalMeta ? (_jsx(ModelContext.Provider, { value: model, children: _jsxs("form", { id: "dynamic-record-form", onSubmit: handleSubmit, className: "grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4", children: [visibleFields.map(field => {
+                                    const isFullWidth = field.type === 'textarea';
+                                    return (_jsx("div", { className: isFullWidth ? 'sm:col-span-2' : '', children: _jsx(FieldRow, { field: field, record: record, value: formValues[field.key] ?? '', mode: mode, onChange: val => setFormValues((prev) => ({ ...prev, [field.key]: val })) }) }, field.key));
+                                }), record?.external_url && (_jsx("div", { className: "sm:col-span-2", children: _jsxs("a", { href: record.external_url, target: "_blank", rel: "noreferrer", className: "inline-flex items-center gap-1.5 text-sm text-primary hover:underline mt-1", children: [_jsx(ExternalLink, { className: "h-3.5 w-3.5" }), "Ver en ", record.external_provider ?? 'proveedor externo'] }) }))] }) })) : null }), _jsxs(DialogFooter, { className: "p-4 border-t shrink-0", children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: saving, children: config.cancelLabel }), isEditable && (_jsxs(Button, { type: "submit", form: "dynamic-record-form", disabled: saving || loading, children: [saving && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), saving ? config.submittingLabel : config.submitLabel] }))] })] }) }));
+}
+function LoadingSkeleton() {
+    return (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4", children: Array.from({ length: 6 }).map((_, i) => (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Skeleton, { className: "h-3.5 w-24" }), _jsx(Skeleton, { className: "h-9 w-full" })] }, i))) }));
+}
+function FieldRow({ field, record, value, mode, onChange }) {
+    const isReadonly = field.readonly || mode === 'view';
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs(Label, { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: [field.label, field.required && mode !== 'view' && (_jsx("span", { className: "text-destructive ml-0.5", children: "*" }))] }), isReadonly ? (_jsx(ViewValue, { field: field, value: value, record: record })) : (_jsx(EditField, { field: field, value: value, onChange: onChange }))] }));
+}
+function ViewValue({ field, value }) {
+    if (field.type === 'search' && value) {
+        return _jsx(SearchViewValue, { field: field, value: value });
+    }
+    if (field.type === 'boolean' || typeof value === 'boolean') {
+        return (_jsxs("div", { className: "flex items-center gap-2 py-1", children: [_jsx(Switch, { checked: !!value, disabled: true }), _jsx("span", { className: "text-sm text-muted-foreground", children: value ? 'Sí' : 'No' })] }));
+    }
+    if (field.type === 'color') {
+        return value ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-5 w-5 rounded-full border shadow-sm", style: { backgroundColor: value } }), _jsx("span", { className: "text-sm", children: value })] })) : (_jsx("p", { className: "text-sm py-1 text-muted-foreground", children: "-" }));
+    }
+    if (field.type === 'image') {
+        return value ? (_jsx("img", { src: value, alt: field.label, className: "h-16 w-16 rounded-lg object-cover border" })) : (_jsx("p", { className: "text-sm py-1 text-muted-foreground", children: "Sin imagen" }));
+    }
+    if (field.type === 'url' && value) {
+        return (_jsx("a", { href: value, target: "_blank", rel: "noreferrer", className: "text-sm text-primary hover:underline truncate", children: value }));
+    }
+    if (field.type === 'select' && field.options?.length) {
+        const match = field.options.find(o => o.value === String(value ?? ''));
+        if (match) {
+            return _jsx(Badge, { variant: "secondary", className: "w-fit", children: match.label });
+        }
+    }
+    const display = formatDisplayValue(value, field);
+    if (field.type === 'textarea') {
+        return (_jsx("p", { className: "text-sm whitespace-pre-wrap rounded-md bg-muted/40 p-3 min-h-[60px]", children: display }));
+    }
+    return _jsx("p", { className: "text-sm py-1", children: display });
+}
+function EditField({ field, value, onChange }) {
+    if (field.type === 'boolean') {
+        return (_jsxs("div", { className: "flex items-center gap-2 py-1", children: [_jsx(Switch, { checked: !!value, onCheckedChange: onChange }), _jsx("span", { className: "text-sm text-muted-foreground", children: value ? 'Sí' : 'No' })] }));
+    }
+    if (field.type === 'textarea') {
+        return (_jsx(Textarea, { value: value ?? '', onChange: (e) => onChange(e.target.value), placeholder: field.placeholder, rows: 4 }));
+    }
+    if (field.type === 'image') {
+        return _jsx(ImageUploadField, { field: field, value: value, onChange: onChange });
+    }
+    if (field.type === 'search' && field.searchEndpoint) {
+        return _jsx(SearchField, { field: field, value: value, onChange: onChange });
+    }
+    if (field.type === 'select' && field.searchEndpoint && !field.options?.length) {
+        return _jsx(SearchField, { field: { ...field, type: 'search' }, value: value, onChange: onChange });
+    }
+    if (field.type === 'select' && field.options?.length) {
+        return (_jsxs(Select, { value: String(value ?? ''), onValueChange: onChange, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Seleccionar..." }) }), _jsx(SelectContent, { children: field.options.map(opt => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] }));
+    }
+    if (field.type === 'color') {
+        return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "color", value: value || '#6366f1', onChange: (e) => onChange(e.target.value), className: "h-9 w-14 cursor-pointer rounded-md border p-1" }), _jsx(Input, { value: value || '', onChange: (e) => onChange(e.target.value), placeholder: "#6366f1", className: "flex-1 h-9" })] }));
+    }
+    if (field.type === 'date') {
+        const dateValue = value ? (typeof value === 'string' ? parseISO(value) : new Date(value)) : undefined;
+        const validDate = dateValue && !isNaN(dateValue.getTime()) ? dateValue : undefined;
+        return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", className: cn("w-full justify-start text-left font-normal h-9", !validDate && "text-muted-foreground"), children: [_jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), validDate
+                                ? format(validDate, 'PPP', { locale: es })
+                                : "Seleccionar fecha"] }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: _jsx(Calendar, { mode: "single", selected: validDate, onSelect: (date) => onChange(date ? format(date, 'yyyy-MM-dd') : ''), locale: es }) })] }));
+    }
+    const inputType = field.type === 'number'
+        ? 'number'
+        : field.type === 'email'
+            ? 'email'
+            : 'text';
+    return (_jsx(Input, { type: inputType, value: value ?? '', onChange: (e) => onChange(field.type === 'number' ? (e.target.value === '' ? '' : Number(e.target.value)) : e.target.value), placeholder: field.placeholder }));
+}
+function ImageUploadField({ field: _field, value, onChange }) {
+    const api = useApi();
+    const model = useContext(ModelContext);
+    const [uploading, setUploading] = useState(false);
+    const inputRef = useRef(null);
+    async function handleFile(e) {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        setUploading(true);
+        try {
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('folder', model || 'uploads');
+            const res = await api.post('/upload', formData);
+            const url = res.data?.data?.url || res.data?.url;
+            if (url)
+                onChange(url);
+        }
+        catch {
+            toast.error('Error al subir imagen');
+        }
+        finally {
+            setUploading(false);
+            if (inputRef.current)
+                inputRef.current.value = '';
+        }
+    }
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [value ? (_jsxs("div", { className: "relative", children: [_jsx("img", { src: value, alt: "", className: "h-16 w-16 rounded-lg object-cover border" }), _jsx("button", { type: "button", onClick: () => onChange(''), className: "absolute -top-1.5 -right-1.5 size-5 bg-destructive text-white rounded-full flex items-center justify-center hover:bg-destructive/90", children: _jsx(XIcon, { className: "size-3" }) })] })) : (_jsx("button", { type: "button", onClick: () => inputRef.current?.click(), disabled: uploading, className: "h-16 w-16 rounded-lg border-2 border-dashed border-muted-foreground/30 flex flex-col items-center justify-center gap-1 hover:border-primary/50 hover:bg-muted/50 transition-colors disabled:opacity-50", children: uploading ? (_jsx(Loader2, { className: "size-4 animate-spin text-muted-foreground" })) : (_jsx(Upload, { className: "size-4 text-muted-foreground" })) })), _jsx("input", { ref: inputRef, type: "file", accept: "image/*", onChange: handleFile, className: "hidden" }), !value && _jsx("span", { className: "text-xs text-muted-foreground", children: "PNG, JPG, WebP" })] }));
+}
+function extractArray(res) {
+    const d = res.data;
+    if (Array.isArray(d))
+        return d;
+    if (d?.data && Array.isArray(d.data))
+        return d.data;
+    return [];
+}
+const searchCache = new Map();
+function SearchViewValue({ field, value }) {
+    const api = useApi();
+    const [label, setLabel] = useState(String(value));
+    useEffect(() => {
+        if (!field.searchEndpoint || !value)
+            return;
+        const cacheKey = field.searchEndpoint;
+        const cached = searchCache.get(cacheKey);
+        if (cached) {
+            const match = cached.find((item) => item.value === value || item.id === value);
+            if (match) {
+                setLabel(match.label || match.name || String(value));
+                return;
+            }
+        }
+        api.get(field.searchEndpoint, { params: { search: '', limit: 50 } }).then(res => {
+            const items = extractArray(res);
+            searchCache.set(cacheKey, items);
+            const match = items.find((item) => item.value === value || item.id === value);
+            if (match)
+                setLabel(match.label || match.name || String(value));
+        }).catch(() => { });
+    }, [value, field.searchEndpoint]);
+    return _jsx("p", { className: "text-sm py-1", children: label });
+}
+function SearchField({ field, value, onChange }) {
+    const api = useApi();
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const [results, setResults] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [selectedLabel, setSelectedLabel] = useState('');
+    useEffect(() => {
+        if (!value || !field.searchEndpoint)
+            return;
+        const cached = searchCache.get(field.searchEndpoint);
+        if (cached) {
+            const match = cached.find((item) => item.value === value || item.id === value);
+            if (match) {
+                setSelectedLabel(match.label || match.name || '');
+                return;
+            }
+        }
+        api.get(field.searchEndpoint, { params: { search: '', limit: 50 } }).then(res => {
+            const items = extractArray(res);
+            searchCache.set(field.searchEndpoint, items);
+            const match = items.find((item) => item.value === value || item.id === value);
+            if (match)
+                setSelectedLabel(match.label || match.name || '');
+        }).catch(() => { });
+    }, [value, field.searchEndpoint]);
+    useEffect(() => {
+        if (!open || !field.searchEndpoint)
+            return;
+        if (!query) {
+            const cached = searchCache.get(field.searchEndpoint);
+            if (cached) {
+                setResults(cached);
+                return;
+            }
+        }
+        setLoading(true);
+        const timer = setTimeout(() => {
+            api.get(field.searchEndpoint, { params: { search: query, limit: 20 } }).then(res => {
+                const items = extractArray(res);
+                if (!query)
+                    searchCache.set(field.searchEndpoint, items);
+                setResults(items);
+            }).catch(() => setResults([]))
+                .finally(() => setLoading(false));
+        }, query ? 250 : 0);
+        return () => clearTimeout(timer);
+    }, [query, open, field.searchEndpoint]);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", role: "combobox", className: cn("w-full justify-between font-normal h-9", !value && "text-muted-foreground"), children: [_jsx("span", { className: "truncate", children: selectedLabel || `Seleccionar ${field.label?.toLowerCase() || ''}...` }), _jsx(ChevronDown, { className: "ml-auto h-4 w-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-[--radix-popover-trigger-width] p-0", align: "start", side: "bottom", sideOffset: 4, children: _jsxs(Command, { shouldFilter: false, children: [_jsx(CommandInput, { placeholder: `Buscar ${field.label?.toLowerCase() || ''}...`, value: query, onValueChange: setQuery }), _jsx(CommandList, { className: "max-h-[200px]", children: loading ? (_jsxs("div", { className: "py-6 text-center text-sm", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin mx-auto mb-1 text-muted-foreground" }), _jsx("span", { className: "text-muted-foreground text-xs", children: "Buscando..." })] })) : results.length === 0 ? (_jsx(CommandEmpty, { children: "Sin resultados." })) : (_jsx(CommandGroup, { children: results.map((item) => {
+                                    const itemValue = item.value ?? item.id;
+                                    const itemLabel = item.label ?? item.name ?? '';
+                                    const isSelected = value === itemValue;
+                                    return (_jsxs(CommandItem, { value: String(itemValue), onSelect: () => {
+                                            onChange(itemValue);
+                                            setSelectedLabel(itemLabel);
+                                            setOpen(false);
+                                            setQuery('');
+                                        }, children: [isSelected && _jsx(Check, { className: "mr-2 h-3.5 w-3.5 shrink-0 text-primary" }), item.image && (_jsx("img", { src: item.image, className: "h-5 w-5 rounded mr-2 object-cover shrink-0", alt: "" })), _jsxs("div", { className: "flex flex-col min-w-0", children: [_jsx("span", { className: "truncate", children: itemLabel }), item.description && (_jsx("span", { className: "text-[11px] text-muted-foreground truncate", children: item.description }))] })] }, itemValue));
+                                }) })) })] }) })] }));
+}

package/dist/dialogs/export.d.ts

@@ -0,0 +1,12 @@
+import type { TableMetadata } from '../types';
+interface ExportDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    model: string;
+    metadata: TableMetadata;
+    currentFilters?: Record<string, any>;
+    hasActiveFilters?: boolean;
+}
+export declare function ExportDialog({ open, onOpenChange, model, metadata, currentFilters, hasActiveFilters, }: ExportDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=export.d.ts.map

package/dist/dialogs/export.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"export.d.ts","sourceRoot":"","sources":["../../src/dialogs/export.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAG7C,UAAU,iBAAiB;IACvB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,aAAa,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,wBAAgB,YAAY,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,cAAc,EACd,gBAAgB,GACnB,EAAE,iBAAiB,2CA0SnB"}