@asteby/metacore-runtime-react 37.5.1 → 38.0.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @asteby/metacore-runtime-react
 
+## 38.0.0
+
+### Minor Changes
+
+- 5f872f0: `ProcessStepper` llega a `@asteby/metacore-ui/wizard`: el indicador de pasos de los modales de proceso (círculos con icono o número, check al completar, etiqueta debajo y conectores flexibles), una sola implementación para toda la plataforma.
+
+  `runtime-react`: los wizards declarativos (`form_layout.mode = "steps"`) en `DynamicForm` y `DynamicRecordDialog` ahora usan ese stepper en lugar de la barra de progreso plana, con navegación hacia atrás al pulsar un paso completado.
+
+### Patch Changes
+
+- Updated dependencies [5f872f0]
+  - @asteby/metacore-ui@2.18.0
+
+## 37.6.0
+
+### Minor Changes
+
+- 8231b21: Fix `ensureHref` mangling every root-relative asset URL (the platform's own
+  convention for locally-served files — uploads, hub-generated images,
+  printable documents) into a broken `https:///storage/…` link (scheme + empty
+  host). Root-relative paths (`/storage/…`), protocol-relative (`//…`) and
+  fully-qualified URLs now pass through unchanged; only a bare host like
+  `github.com/x` still gets `https://` prefixed.
+
+  Also: clicking an image thumbnail (table cell, detail dialog, linkified free
+  text — anywhere `ImageThumbnail`/`MediaValue` renders) now opens a full-size
+  **preview dialog** instead of navigating to the raw file in a new tab. This
+  is the platform-wide click-to-zoom behavior; no caller builds its own
+  lightbox.
+
 ## 37.5.1
 
 ### Patch Changes

package/dist/action-modal-dispatcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-modal-dispatcher.d.ts","sourceRoot":"","sources":["../src/action-modal-dispatcher.tsx"],"names":[],"mappings":"AAsEA,OAAO,KAAK,EAAE,cAAc,EAAmC,MAAM,SAAS,CAAA;AAE9E,OAAO,EACH,KAAK,cAAc,EACnB,KAAK,gBAAgB,EAExB,MAAM,sBAAsB,CAAA;AAE7B,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAA;AAiBhD,MAAM,WAAW,WAAW;IACxB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5B,SAAS,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC1D;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;CAClB;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,OAAO,GAAG,CAAC,IAAI,WAAW,CAM1D;AAsBD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc,CAStE;AAGD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAkB3F;AASD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAY1D;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CASjE;AAUD,oEAAoE;AACpE,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,GAAG,GAAG,OAAO,CAgBnF;AAED,wBAAgB,qBAAqB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,GACZ,EAAE,gBAAgB,sCAkFlB"}
+{"version":3,"file":"action-modal-dispatcher.d.ts","sourceRoot":"","sources":["../src/action-modal-dispatcher.tsx"],"names":[],"mappings":"AAuEA,OAAO,KAAK,EAAE,cAAc,EAAmC,MAAM,SAAS,CAAA;AAE9E,OAAO,EACH,KAAK,cAAc,EACnB,KAAK,gBAAgB,EAExB,MAAM,sBAAsB,CAAA;AAE7B,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAA;AAiBhD,MAAM,WAAW,WAAW;IACxB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5B,SAAS,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC1D;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;CAClB;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,OAAO,GAAG,CAAC,IAAI,WAAW,CAM1D;AAsBD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc,CAStE;AAGD,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAkB3F;AASD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAY1D;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CASjE;AAUD,oEAAoE;AACpE,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,GAAG,GAAG,OAAO,CAgBnF;AAED,wBAAgB,qBAAqB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,GACZ,EAAE,gBAAgB,sCAkFlB"}

package/dist/action-modal-dispatcher.js

@@ -15,6 +15,7 @@ import { useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Button, Input, Textarea, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, } from '@asteby/metacore-ui/primitives';
 import { Loader2 } from 'lucide-react';
+import { ProcessStepper } from '@asteby/metacore-ui/wizard';
 import { toast } from 'sonner';
 import { toastServerError, toastServerSuccess, extractFieldErrors, localizeFieldErrorMap } from './server-error';
 import { useBranchCreateGate } from './branch-create-gate';
@@ -666,9 +667,7 @@ function WizardActionModal({ open, onOpenChange, action, model, record, endpoint
     };
     if (steps.length === 0)
         return null;
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: 'flex max-h-[90dvh] flex-col overflow-hidden ' + (widthPx ? '' : 'sm:max-w-xl'), style: { maxHeight: '90dvh', ...(widthPx ? { maxWidth: widthPx, width: '95vw' } : {}) }, children: [_jsxs(DialogHeader, { className: "shrink-0", children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(DynamicIcon, { name: action.icon, className: "h-5 w-5" }), tl(action.label)] }), _jsxs("div", { className: "pt-2", children: [_jsx("div", { className: "flex items-center gap-1.5", role: "list", "aria-label": "progress", children: steps.map((s, i) => (_jsx("div", { role: "listitem", "aria-current": i === stepIndex ? 'step' : undefined, className: "h-1.5 flex-1 rounded-full", style: {
-                                            backgroundColor: i <= stepIndex ? (action.color || 'hsl(var(--primary))') : 'hsl(var(--muted))',
-                                        } }, i))) }), _jsxs(DialogDescription, { className: "pt-2", children: [t('common.step', { defaultValue: 'Paso' }), " ", stepIndex + 1, "/", steps.length, step?.title ? ` · ${tl(step.title)}` : ''] }), step?.description && (_jsx("p", { className: "pt-1 text-sm text-muted-foreground", children: tl(step.description) }))] })] }), _jsx("div", { className: "-mx-1 min-h-0 flex-1 overflow-y-auto px-1 py-4", children: _jsx(FieldGrid, { children: stepFields.map((field) => {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: 'flex max-h-[90dvh] flex-col overflow-hidden ' + (widthPx ? '' : 'sm:max-w-xl'), style: { maxHeight: '90dvh', ...(widthPx ? { maxWidth: widthPx, width: '95vw' } : {}) }, children: [_jsxs(DialogHeader, { className: "shrink-0", children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(DynamicIcon, { name: action.icon, className: "h-5 w-5" }), tl(action.label)] }), _jsxs("div", { className: "pt-1", children: [_jsx(ProcessStepper, { steps: steps.map((s, i) => ({ key: String(i), label: s.title ? tl(s.title) : `${t('common.step', { defaultValue: 'Paso' })} ${i + 1}` })), activeIndex: stepIndex, onStepClick: i => setStepIndex(i) }), _jsxs(DialogDescription, { className: "pt-3", children: [t('common.step', { defaultValue: 'Paso' }), " ", stepIndex + 1, "/", steps.length, step?.title ? ` · ${tl(step.title)}` : ''] }), step?.description && (_jsx("p", { className: "pt-1 text-sm text-muted-foreground", children: tl(step.description) }))] })] }), _jsx("div", { className: "-mx-1 min-h-0 flex-1 overflow-y-auto px-1 py-4", children: _jsx(FieldGrid, { children: stepFields.map((field) => {
                             const fullWidth = isLineItemsField(field) ||
                                 resolveWidget(field) === 'textarea' ||
                                 resolveWidget(field) === 'richtext';

package/dist/dialogs/dynamic-record.js

@@ -718,7 +718,7 @@ export function DynamicRecordDialog({ open, onOpenChange, nestedInlineCreateSelf
         setStepIndex(Math.min(clampedStep + 1, groups.length - 1));
     };
     const goBackStep = () => setStepIndex(Math.max(clampedStep - 1, 0));
-    return (_jsx(RecordDialogModelContext.Provider, { value: model, children: _jsx(Dialog, { open: open, onOpenChange: onOpenChange, nestedInlineCreateSelf: nestedInlineCreateSelf, children: _jsxs(DialogContent, { className: "sm:max-w-2xl max-h-[90dvh] flex flex-col p-0 gap-0 overflow-hidden", style: { maxHeight: '90dvh' }, 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: _jsx(ImageUrlContext.Provider, { value: getImageUrl, children: _jsx(TimeZoneContext.Provider, { value: timeZone, children: _jsxs(CurrencyContext.Provider, { value: currency, children: [_jsxs("form", { id: formId, onSubmit: handleSubmit, className: "grid gap-y-4", children: [isSteps && (_jsx(WizardProgress, { groups: groups, stepIndex: clampedStep })), (isSteps ? [groups[clampedStep]] : groups).map(group => (_jsx(FieldSection, { group: group, children: _jsx("div", { className: "grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2", children: renderFields(group.fields) }) }, group.key))), record?.external_url && (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2", children: _jsx("div", { className: "sm:col-span-2 min-w-0", 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'] }) }) }))] }), !isCreate && record && relations.length > 0 && (_jsx("div", { className: "mt-6", children: _jsx(DynamicRelations, { record: record, relations: relations, lineSubtable: true, embedOnly: true, canCreate: mode === 'edit', canEdit: mode === 'edit', canDelete: mode === 'edit', onChange: handleChildChange }) }))] }) }) }) })) : null }), _jsxs(DialogFooter, { className: "p-4 border-t shrink-0 sm:justify-between", children: [isView && onOpenFullPage ? (_jsxs(Button, { variant: "ghost", size: "sm", className: "text-muted-foreground", onClick: () => { onOpenChange(false); onOpenFullPage(); }, children: [_jsx(ExternalLink, { className: "mr-1.5 h-3.5 w-3.5" }), "Ver p\u00E1gina completa"] })) : _jsx("span", {}), _jsxs("div", { className: "flex items-center gap-2", children: [isSteps && clampedStep > 0 ? (_jsx(Button, { variant: "outline", onClick: goBackStep, disabled: saving || deleting, children: "Anterior" })) : (_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: saving || deleting, children: config.cancelLabel })), isView && onDelete && (_jsxs(Button, { variant: "destructive", onClick: handleDelete, disabled: deleting || loading, children: [deleting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), deleting ? 'Eliminando...' : 'Eliminar'] })), isView && onEdit && (_jsx(Button, { onClick: onEdit, disabled: deleting || loading, children: "Editar" })), isEditable && isSteps && !isLastStep && (_jsx(Button, { type: "button", onClick: goNextStep, disabled: saving || loading, children: "Siguiente" })), isEditable && (!isSteps || isLastStep) && (_jsxs(Button, { type: "submit", form: formId, disabled: saving || loading, children: [saving && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), saving ? config.submittingLabel : config.submitLabel] }))] })] })] }) }) }));
+    return (_jsx(RecordDialogModelContext.Provider, { value: model, children: _jsx(Dialog, { open: open, onOpenChange: onOpenChange, nestedInlineCreateSelf: nestedInlineCreateSelf, children: _jsxs(DialogContent, { className: "sm:max-w-2xl max-h-[90dvh] flex flex-col p-0 gap-0 overflow-hidden", style: { maxHeight: '90dvh' }, 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: _jsx(ImageUrlContext.Provider, { value: getImageUrl, children: _jsx(TimeZoneContext.Provider, { value: timeZone, children: _jsxs(CurrencyContext.Provider, { value: currency, children: [_jsxs("form", { id: formId, onSubmit: handleSubmit, className: "grid gap-y-4", children: [isSteps && (_jsx(WizardProgress, { groups: groups, stepIndex: clampedStep, onStepClick: i => setStepIndex(i) })), (isSteps ? [groups[clampedStep]] : groups).map(group => (_jsx(FieldSection, { group: group, children: _jsx("div", { className: "grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2", children: renderFields(group.fields) }) }, group.key))), record?.external_url && (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2", children: _jsx("div", { className: "sm:col-span-2 min-w-0", 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'] }) }) }))] }), !isCreate && record && relations.length > 0 && (_jsx("div", { className: "mt-6", children: _jsx(DynamicRelations, { record: record, relations: relations, lineSubtable: true, embedOnly: true, canCreate: mode === 'edit', canEdit: mode === 'edit', canDelete: mode === 'edit', onChange: handleChildChange }) }))] }) }) }) })) : null }), _jsxs(DialogFooter, { className: "p-4 border-t shrink-0 sm:justify-between", children: [isView && onOpenFullPage ? (_jsxs(Button, { variant: "ghost", size: "sm", className: "text-muted-foreground", onClick: () => { onOpenChange(false); onOpenFullPage(); }, children: [_jsx(ExternalLink, { className: "mr-1.5 h-3.5 w-3.5" }), "Ver p\u00E1gina completa"] })) : _jsx("span", {}), _jsxs("div", { className: "flex items-center gap-2", children: [isSteps && clampedStep > 0 ? (_jsx(Button, { variant: "outline", onClick: goBackStep, disabled: saving || deleting, children: "Anterior" })) : (_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: saving || deleting, children: config.cancelLabel })), isView && onDelete && (_jsxs(Button, { variant: "destructive", onClick: handleDelete, disabled: deleting || loading, children: [deleting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), deleting ? 'Eliminando...' : 'Eliminar'] })), isView && onEdit && (_jsx(Button, { onClick: onEdit, disabled: deleting || loading, children: "Editar" })), isEditable && isSteps && !isLastStep && (_jsx(Button, { type: "button", onClick: goNextStep, disabled: saving || loading, children: "Siguiente" })), isEditable && (!isSteps || isLastStep) && (_jsxs(Button, { type: "submit", form: formId, 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))) }));

package/dist/dynamic-form.js

@@ -132,7 +132,7 @@ export function DynamicForm({ fields, initialValues, onSubmit, onCancel, submitL
             setStepIndex((i) => Math.min(i + 1, groups.length - 1));
         };
         const goBack = () => setStepIndex((i) => Math.max(i - 1, 0));
-        return (_jsxs("form", { onSubmit: handleSubmit, className: "grid gap-4", children: [_jsx(WizardProgress, { groups: groups, stepIndex: stepIndex }), renderGrid(step.fields), _jsxs("div", { className: "flex justify-between gap-2 pt-2", children: [stepIndex > 0 ? (_jsx(Button, { type: "button", variant: "outline", onClick: goBack, disabled: submitting || disabled, children: "Anterior" })) : onCancel ? (_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: submitting || disabled, children: cancelLabel })) : (_jsx("span", {})), isLast ? (_jsx(Button, { type: "submit", disabled: submitting || disabled || balanceBlocked, children: submitLabel })) : (_jsx(Button, { type: "button", onClick: goNext, disabled: submitting || disabled, children: "Siguiente" }))] })] }));
+        return (_jsxs("form", { onSubmit: handleSubmit, className: "grid gap-4", children: [_jsx(WizardProgress, { groups: groups, stepIndex: stepIndex, onStepClick: i => setStepIndex(i) }), renderGrid(step.fields), _jsxs("div", { className: "flex justify-between gap-2 pt-2", children: [stepIndex > 0 ? (_jsx(Button, { type: "button", variant: "outline", onClick: goBack, disabled: submitting || disabled, children: "Anterior" })) : onCancel ? (_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: submitting || disabled, children: cancelLabel })) : (_jsx("span", {})), isLast ? (_jsx(Button, { type: "submit", disabled: submitting || disabled || balanceBlocked, children: submitLabel })) : (_jsx(Button, { type: "button", onClick: goNext, disabled: submitting || disabled, children: "Siguiente" }))] })] }));
     }
     // ── Sections / flat mode ───────────────────────────────────────────────
     // Layout: scalar header fields flow through a responsive 2-column grid;

package/dist/form-layout-ui.d.ts

@@ -13,13 +13,17 @@ export declare function FieldSection({ group, children, }: {
     children: React.ReactNode;
 }): import("react").JSX.Element;
 /**
- * Progress bar for `mode: "steps"`: one filled segment per completed/current
- * step plus a "Paso i/n · <title>" caption. Mirrors the WizardActionModal look
- * so a model wizard and an action wizard read the same.
+ * Step indicator for `mode: "steps"`: the platform's ProcessStepper (numbered
+ * circles with a check when done, label underneath, connectors) plus a
+ * "Paso i/n · <title>" caption and the step's description. Same component the
+ * process modals (workshop, warehouse) use, so a model wizard, an action wizard
+ * and a process modal read the same.
  */
-export declare function WizardProgress({ groups, stepIndex, stepLabel, }: {
+export declare function WizardProgress({ groups, stepIndex, stepLabel, onStepClick, }: {
     groups: FieldGroup<unknown>[];
     stepIndex: number;
     stepLabel?: string;
+    /** Jump back to an already completed step (forward jumps are never offered). */
+    onStepClick?: (index: number) => void;
 }): import("react").JSX.Element;
 //# sourceMappingURL=form-layout-ui.d.ts.map

package/dist/form-layout-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-layout-ui.d.ts","sourceRoot":"","sources":["../src/form-layout-ui.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE/C;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,GACX,EAAE;IACC,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAA;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B,+BA6CA;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC3B,MAAM,EACN,SAAS,EACT,SAAkB,GACrB,EAAE;IACC,MAAM,EAAE,UAAU,CAAC,OAAO,CAAC,EAAE,CAAA;IAC7B,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB,+BA2BA"}
+{"version":3,"file":"form-layout-ui.d.ts","sourceRoot":"","sources":["../src/form-layout-ui.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE/C;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,GACX,EAAE;IACC,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAA;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B,+BA6CA;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAC3B,MAAM,EACN,SAAS,EACT,SAAkB,EAClB,WAAW,GACd,EAAE;IACC,MAAM,EAAE,UAAU,CAAC,OAAO,CAAC,EAAE,CAAA;IAC7B,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gFAAgF;IAChF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC,+BAeA"}

package/dist/form-layout-ui.js

@@ -6,6 +6,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useState } from 'react';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger, Button, } from '@asteby/metacore-ui/primitives';
 import { ChevronDown } from 'lucide-react';
+import { ProcessStepper } from '@asteby/metacore-ui/wizard';
 /**
  * Section chrome for `mode: "sections"`. Wraps a group's (already gridded)
  * fields in a titled block.
@@ -27,13 +28,14 @@ export function FieldSection({ group, children, }) {
     return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, className: "grid gap-3", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", className: "h-auto w-full justify-between px-0 py-1 hover:bg-transparent", children: [header, _jsx(ChevronDown, { className: 'h-4 w-4 shrink-0 transition-transform ' + (open ? 'rotate-180' : '') })] }) }), _jsx(CollapsibleContent, { className: "grid gap-3", children: children })] }));
 }
 /**
- * Progress bar for `mode: "steps"`: one filled segment per completed/current
- * step plus a "Paso i/n · <title>" caption. Mirrors the WizardActionModal look
- * so a model wizard and an action wizard read the same.
+ * Step indicator for `mode: "steps"`: the platform's ProcessStepper (numbered
+ * circles with a check when done, label underneath, connectors) plus a
+ * "Paso i/n · <title>" caption and the step's description. Same component the
+ * process modals (workshop, warehouse) use, so a model wizard, an action wizard
+ * and a process modal read the same.
  */
-export function WizardProgress({ groups, stepIndex, stepLabel = 'Paso', }) {
+export function WizardProgress({ groups, stepIndex, stepLabel = 'Paso', onStepClick, }) {
     const current = groups[stepIndex];
-    return (_jsxs("div", { className: "pt-2", children: [_jsx("div", { className: "flex items-center gap-1.5", role: "list", "aria-label": "progress", children: groups.map((g, i) => (_jsx("div", { role: "listitem", "aria-current": i === stepIndex ? 'step' : undefined, className: "h-1.5 flex-1 rounded-full", style: {
-                        backgroundColor: i <= stepIndex ? 'hsl(var(--primary))' : 'hsl(var(--muted))',
-                    } }, g.key))) }), _jsxs("p", { className: "pt-2 text-sm text-muted-foreground", children: [stepLabel, " ", stepIndex + 1, "/", groups.length, current?.title ? ` · ${current.title}` : ''] }), current?.description && (_jsx("p", { className: "pt-1 text-sm text-muted-foreground", children: current.description }))] }));
+    const steps = groups.map((g, i) => ({ key: g.key, label: g.title ?? `${stepLabel} ${i + 1}` }));
+    return (_jsxs("div", { className: "pt-1", children: [_jsx(ProcessStepper, { steps: steps, activeIndex: stepIndex, onStepClick: onStepClick }), _jsxs("p", { className: "pt-3 text-sm text-muted-foreground", children: [stepLabel, " ", stepIndex + 1, "/", groups.length, current?.title ? ` · ${current.title}` : ''] }), current?.description && (_jsx("p", { className: "pt-1 text-sm text-muted-foreground", children: current.description }))] }));
 }

package/dist/rich-url.d.ts

@@ -24,7 +24,18 @@ export declare function isImageUrl(url: string): boolean;
 export declare function isFileUrl(url: string): boolean;
 /** Classify a URL so the right primitive (thumbnail / file chip / link) renders. */
 export declare function classifyUrl(url: string): UrlKind;
-/** Ensure a URL is absolute so `<a href>` and `new URL()` behave. */
+/**
+ * Ensure a URL is safe to drop into `<a href>` / `new URL(..., base)`.
+ *
+ * Three shapes pass through unchanged: fully qualified (`http(s)://…`),
+ * protocol-relative (`//…`), and — the platform's own convention for every
+ * locally-served asset (uploads, hub-generated images, printable documents:
+ * see handlers.UploadFile, hub_image_provider_bridge.go, …) — ROOT-RELATIVE
+ * (`/storage/…`). A root-relative path already resolves correctly against
+ * the current origin; treating it as a bare host (the old behavior) produced
+ * "https:///storage/…" (scheme + empty host), a broken link. Anything else
+ * (`github.com/foo`) is assumed to be a bare host missing its scheme.
+ */
 export declare function ensureHref(url: string): string;
 /**
  * A short, human label for a URL. For a file-like URL (last segment carries an
@@ -58,10 +69,11 @@ export declare const FileChip: React.FC<{
     className?: string;
 }>;
 /**
- * Inline image thumbnail — rounded, bordered, `object-cover` — that opens the
- * full image in a new tab. On load error it degrades to a normal link chip so a
- * dead image URL is still reachable (and never a broken-image icon). `maxHeight`
- * keeps a cell thumbnail small (~h-8) while the dialog shows a larger preview.
+ * Inline image thumbnail — rounded, bordered, `object-cover` — that opens a
+ * full-size PREVIEW (a lightbox dialog, not a new tab). On load error it
+ * degrades to a normal link chip so a dead image URL is still reachable (and
+ * never a broken-image icon). `maxHeight` keeps a cell thumbnail small
+ * (~h-8) while the dialog shows a larger preview.
  */
 export declare const ImageThumbnail: React.FC<{
     url: string;

package/dist/rich-url.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rich-url.d.ts","sourceRoot":"","sources":["../src/rich-url.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"rich-url.d.ts","sourceRoot":"","sources":["../src/rich-url.tsx"],"names":[],"mappings":"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"}

package/dist/rich-url.js

@@ -19,6 +19,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import React from 'react';
 import { cn } from '@asteby/metacore-ui/lib';
+import { Dialog, DialogContent, DialogTitle } from '@asteby/metacore-ui/primitives';
 import { DynamicIcon } from './dynamic-icon';
 /** Image file extensions we render as an inline thumbnail. */
 const IMAGE_EXT_RE = /\.(jpe?g|png|gif|webp|avif|svg|bmp|ico)(?:[?#].*)?$/i;
@@ -46,9 +47,22 @@ export function classifyUrl(url) {
         return 'file';
     return 'link';
 }
-/** Ensure a URL is absolute so `<a href>` and `new URL()` behave. */
+/**
+ * Ensure a URL is safe to drop into `<a href>` / `new URL(..., base)`.
+ *
+ * Three shapes pass through unchanged: fully qualified (`http(s)://…`),
+ * protocol-relative (`//…`), and — the platform's own convention for every
+ * locally-served asset (uploads, hub-generated images, printable documents:
+ * see handlers.UploadFile, hub_image_provider_bridge.go, …) — ROOT-RELATIVE
+ * (`/storage/…`). A root-relative path already resolves correctly against
+ * the current origin; treating it as a bare host (the old behavior) produced
+ * "https:///storage/…" (scheme + empty host), a broken link. Anything else
+ * (`github.com/foo`) is assumed to be a bare host missing its scheme.
+ */
 export function ensureHref(url) {
-    return /^(https?:)?\/\//i.test(url) || /^(mailto|tel):/i.test(url)
+    return /^(https?:)?\/\//i.test(url) ||
+        /^(mailto|tel):/i.test(url) ||
+        url.startsWith('/')
         ? url
         : `https://${url}`;
 }
@@ -106,20 +120,39 @@ export const FileChip = ({ url, maxLabelWidth = 240, className }) => {
     return (_jsxs("a", { href: href, target: "_blank", rel: "noopener noreferrer", title: url, onClick: stop, className: cn('inline-flex max-w-full items-center gap-1.5 rounded-md border bg-muted/40 px-2 py-1 align-middle text-sm font-medium text-foreground hover:bg-muted', className), children: [_jsx(DynamicIcon, { name: "FileText", className: "h-3.5 w-3.5 shrink-0 opacity-70" }), _jsx("span", { className: "truncate", style: { maxWidth: maxLabelWidth }, children: fileNameFromUrl(url) })] }));
 };
 /**
- * Inline image thumbnail — rounded, bordered, `object-cover` — that opens the
- * full image in a new tab. On load error it degrades to a normal link chip so a
- * dead image URL is still reachable (and never a broken-image icon). `maxHeight`
- * keeps a cell thumbnail small (~h-8) while the dialog shows a larger preview.
+ * Full-size image preview — a Dialog overlay, not a new tab. Click-to-zoom is
+ * the platform-wide behavior for every inline thumbnail (table cell, detail
+ * dialog, linkified free text): the caller never builds its own lightbox.
+ * Download / "open original" stays one click away in the footer for the rare
+ * case someone wants the raw file.
+ */
+const ImageLightbox = ({ src, alt, open, onOpenChange }) => (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-[min(92vw,1100px)] max-h-[92dvh] p-2 overflow-hidden border-0 bg-transparent shadow-none flex items-center justify-center", onClick: stop, children: [_jsx(DialogTitle, { className: "sr-only", children: alt }), _jsx("img", { src: src, alt: alt, className: "max-h-[86dvh] max-w-full rounded-lg object-contain shadow-2xl" })] }) }));
+/**
+ * Inline image thumbnail — rounded, bordered, `object-cover` — that opens a
+ * full-size PREVIEW (a lightbox dialog, not a new tab). On load error it
+ * degrades to a normal link chip so a dead image URL is still reachable (and
+ * never a broken-image icon). `maxHeight` keeps a cell thumbnail small
+ * (~h-8) while the dialog shows a larger preview.
  */
 export const ImageThumbnail = ({ url, getImageUrl, maxHeight = 160, className }) => {
     const [failed, setFailed] = React.useState(false);
-    const href = ensureHref(url);
+    const [open, setOpen] = React.useState(false);
     // Absolute URLs are used verbatim; only relative storage paths go through
-    // the host's image resolver (which prefixes the media base).
-    const src = /^(https?:)?\/\//i.test(url) ? url : getImageUrl ? getImageUrl(url) : url;
+    // the host's image resolver (which prefixes the media base). Anything
+    // that opens the raw file (download, the lightbox <img>) MUST resolve the
+    // same way — otherwise a relative "/storage/…" path (the platform's own
+    // convention: uploads, hub-generated assets, etc.) never matches
+    // ensureHref's "//"-prefixed check and gets misread as a bare host,
+    // producing "https:///storage/…".
+    const isAbsolute = /^(https?:)?\/\//i.test(url);
+    const src = isAbsolute ? url : getImageUrl ? getImageUrl(url) : url;
+    const label = smartUrlLabel(url);
     if (failed)
         return _jsx(UrlChip, { url: url, icon: "Image" });
-    return (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", title: url, onClick: stop, className: "inline-block max-w-full align-middle", children: _jsx("img", { src: src, alt: smartUrlLabel(url), onError: () => setFailed(true), style: { maxHeight }, className: cn('max-w-full rounded-md border object-cover', className) }) }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", title: label, onClick: (e) => {
+                    stop(e);
+                    setOpen(true);
+                }, className: "inline-block max-w-full cursor-zoom-in appearance-none border-0 bg-transparent p-0 align-middle", children: _jsx("img", { src: src, alt: label, onError: () => setFailed(true), style: { maxHeight }, className: cn('max-w-full rounded-md border object-cover', className) }) }), _jsx(ImageLightbox, { src: src, alt: label, open: open, onOpenChange: setOpen })] }));
 };
 /**
  * One URL value → the right primitive (thumbnail / file chip / link chip).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "37.5.1",
+  "version": "38.0.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
     "sonner": ">=1.7",
     "zustand": ">=5",
     "@asteby/metacore-sdk": "^3.7.0",
-    "@asteby/metacore-ui": "^2.17.3"
+    "@asteby/metacore-ui": "^2.18.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -68,7 +68,7 @@
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
     "@asteby/metacore-sdk": "3.7.0",
-    "@asteby/metacore-ui": "2.17.3"
+    "@asteby/metacore-ui": "2.18.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/__tests__/rich-url.test.tsx

@@ -86,6 +86,17 @@ describe('smartUrlLabel / fileNameFromUrl / ensureHref', () => {
         expect(ensureHref('https://a.com')).toBe('https://a.com')
         expect(ensureHref('mailto:a@b.com')).toBe('mailto:a@b.com')
     })
+
+    it('leaves a root-relative storage path unchanged (never "https:///…")', () => {
+        // The platform's own convention for every locally-served asset —
+        // uploads, hub-generated images (hub_image_provider_bridge.go),
+        // printable documents. Regression for the bug where this produced
+        // "https:///storage/…" (scheme + empty host, a dead link).
+        expect(ensureHref('/storage/hub-generations/x.png')).toBe(
+            '/storage/hub-generations/x.png'
+        )
+        expect(ensureHref('//cdn.example.com/x.png')).toBe('//cdn.example.com/x.png')
+    })
 })
 
 describe('splitTrailingPunct', () => {
@@ -173,6 +184,30 @@ describe('primitives render', () => {
         expect(screen.queryByRole('link')).toBeTruthy()
     })
 
+    it('ImageThumbnail resolves a relative storage path through getImageUrl', () => {
+        const getImageUrl = (path: string) => `http://api.local${path}`
+        const { container } = render(
+            <ImageThumbnail
+                url="/storage/hub-generations/x.png"
+                getImageUrl={getImageUrl}
+            />
+        )
+        const img = container.querySelector('img') as HTMLImageElement
+        // Regression: this used to leak into an <a href> built by ensureHref
+        // as "https:///storage/hub-generations/x.png" (bare-host misread of a
+        // relative path). There's no <a> anymore — a click opens the lightbox.
+        expect(img.getAttribute('src')).toBe('http://api.local/storage/hub-generations/x.png')
+    })
+
+    it('ImageThumbnail opens a lightbox preview on click instead of navigating', () => {
+        render(<ImageThumbnail url="https://cdn.x/photo.png" />)
+        expect(screen.queryByRole('dialog')).toBeFalsy()
+        fireEvent.click(screen.getByRole('button'))
+        const dialog = screen.getByRole('dialog')
+        expect(dialog).toBeTruthy()
+        expect(dialog.querySelector('img')?.getAttribute('src')).toBe('https://cdn.x/photo.png')
+    })
+
     it('MediaValue dispatches by kind', () => {
         const { rerender, container } = render(
             <MediaValue url="https://cdn.x/a.png" />

package/src/action-modal-dispatcher.tsx

@@ -38,6 +38,7 @@ import {
     Switch,
 } from '@asteby/metacore-ui/primitives'
 import { Loader2 } from 'lucide-react'
+import { ProcessStepper } from '@asteby/metacore-ui/wizard'
 import { toast } from 'sonner'
 import { toastServerError, toastServerSuccess, extractFieldErrors, localizeFieldErrorMap } from './server-error'
 import { useBranchCreateGate } from './branch-create-gate'
@@ -994,26 +995,16 @@ function WizardActionModal({ open, onOpenChange, action, model, record, endpoint
                         <DynamicIcon name={action.icon} className="h-5 w-5" />
                         {tl(action.label)}
                     </DialogTitle>
-                    {/* Progress/step bar: one segment per step. The current and
-                        completed segments are filled; a numbered marker + the
-                        current step's title tell the user where they are. Inline
-                        styles for the fill color guarantee it shows even if the
-                        host's Tailwind scan drops an arbitrary class. */}
-                    <div className="pt-2">
-                        <div className="flex items-center gap-1.5" role="list" aria-label="progress">
-                            {steps.map((s, i) => (
-                                <div
-                                    key={i}
-                                    role="listitem"
-                                    aria-current={i === stepIndex ? 'step' : undefined}
-                                    className="h-1.5 flex-1 rounded-full"
-                                    style={{
-                                        backgroundColor: i <= stepIndex ? (action.color || 'hsl(var(--primary))') : 'hsl(var(--muted))',
-                                    }}
-                                />
-                            ))}
-                        </div>
-                        <DialogDescription className="pt-2">
+                    {/* Step indicator: the platform ProcessStepper (same as the
+                        declarative form_layout wizards and the process modals) +
+                        "Paso i/n · título" and the step's description. */}
+                    <div className="pt-1">
+                        <ProcessStepper
+                            steps={steps.map((s, i) => ({ key: String(i), label: s.title ? tl(s.title) : `${t('common.step', { defaultValue: 'Paso' })} ${i + 1}` }))}
+                            activeIndex={stepIndex}
+                            onStepClick={i => setStepIndex(i)}
+                        />
+                        <DialogDescription className="pt-3">
                             {t('common.step', { defaultValue: 'Paso' })} {stepIndex + 1}/{steps.length}
                             {step?.title ? ` · ${tl(step.title)}` : ''}
                         </DialogDescription>

package/src/dialogs/dynamic-record.tsx

@@ -1080,7 +1080,7 @@ export function DynamicRecordDialog({
                                 className="grid gap-y-4"
                             >
                                 {isSteps && (
-                                    <WizardProgress groups={groups} stepIndex={clampedStep} />
+                                    <WizardProgress groups={groups} stepIndex={clampedStep} onStepClick={i => setStepIndex(i)} />
                                 )}
                                 {(isSteps ? [groups[clampedStep]] : groups).map(group => (
                                     <FieldSection key={group.key} group={group}>

package/src/dynamic-form.tsx

@@ -211,7 +211,7 @@ export function DynamicForm({
 
         return (
             <form onSubmit={handleSubmit} className="grid gap-4">
-                <WizardProgress groups={groups} stepIndex={stepIndex} />
+                <WizardProgress groups={groups} stepIndex={stepIndex} onStepClick={i => setStepIndex(i)} />
                 {renderGrid(step.fields)}
                 <div className="flex justify-between gap-2 pt-2">
                     {stepIndex > 0 ? (

package/src/form-layout-ui.tsx

@@ -10,6 +10,7 @@ import {
     Button,
 } from '@asteby/metacore-ui/primitives'
 import { ChevronDown } from 'lucide-react'
+import { ProcessStepper } from '@asteby/metacore-ui/wizard'
 import type { FieldGroup } from './form-layout'
 
 /**
@@ -75,37 +76,30 @@ export function FieldSection({
 }
 
 /**
- * Progress bar for `mode: "steps"`: one filled segment per completed/current
- * step plus a "Paso i/n · <title>" caption. Mirrors the WizardActionModal look
- * so a model wizard and an action wizard read the same.
+ * Step indicator for `mode: "steps"`: the platform's ProcessStepper (numbered
+ * circles with a check when done, label underneath, connectors) plus a
+ * "Paso i/n · <title>" caption and the step's description. Same component the
+ * process modals (workshop, warehouse) use, so a model wizard, an action wizard
+ * and a process modal read the same.
  */
 export function WizardProgress({
     groups,
     stepIndex,
     stepLabel = 'Paso',
+    onStepClick,
 }: {
     groups: FieldGroup<unknown>[]
     stepIndex: number
     stepLabel?: string
+    /** Jump back to an already completed step (forward jumps are never offered). */
+    onStepClick?: (index: number) => void
 }) {
     const current = groups[stepIndex]
+    const steps = groups.map((g, i) => ({ key: g.key, label: g.title ?? `${stepLabel} ${i + 1}` }))
     return (
-        <div className="pt-2">
-            <div className="flex items-center gap-1.5" role="list" aria-label="progress">
-                {groups.map((g, i) => (
-                    <div
-                        key={g.key}
-                        role="listitem"
-                        aria-current={i === stepIndex ? 'step' : undefined}
-                        className="h-1.5 flex-1 rounded-full"
-                        style={{
-                            backgroundColor:
-                                i <= stepIndex ? 'hsl(var(--primary))' : 'hsl(var(--muted))',
-                        }}
-                    />
-                ))}
-            </div>
-            <p className="pt-2 text-sm text-muted-foreground">
+        <div className="pt-1">
+            <ProcessStepper steps={steps} activeIndex={stepIndex} onStepClick={onStepClick} />
+            <p className="pt-3 text-sm text-muted-foreground">
                 {stepLabel} {stepIndex + 1}/{groups.length}
                 {current?.title ? ` · ${current.title}` : ''}
             </p>

package/src/rich-url.tsx

@@ -18,6 +18,7 @@
  */
 import React from 'react'
 import { cn } from '@asteby/metacore-ui/lib'
+import { Dialog, DialogContent, DialogTitle } from '@asteby/metacore-ui/primitives'
 import { DynamicIcon } from './dynamic-icon'
 
 /** Image file extensions we render as an inline thumbnail. */
@@ -53,9 +54,22 @@ export function classifyUrl(url: string): UrlKind {
     return 'link'
 }
 
-/** Ensure a URL is absolute so `<a href>` and `new URL()` behave. */
+/**
+ * Ensure a URL is safe to drop into `<a href>` / `new URL(..., base)`.
+ *
+ * Three shapes pass through unchanged: fully qualified (`http(s)://…`),
+ * protocol-relative (`//…`), and — the platform's own convention for every
+ * locally-served asset (uploads, hub-generated images, printable documents:
+ * see handlers.UploadFile, hub_image_provider_bridge.go, …) — ROOT-RELATIVE
+ * (`/storage/…`). A root-relative path already resolves correctly against
+ * the current origin; treating it as a bare host (the old behavior) produced
+ * "https:///storage/…" (scheme + empty host), a broken link. Anything else
+ * (`github.com/foo`) is assumed to be a bare host missing its scheme.
+ */
 export function ensureHref(url: string): string {
-    return /^(https?:)?\/\//i.test(url) || /^(mailto|tel):/i.test(url)
+    return /^(https?:)?\/\//i.test(url) ||
+        /^(mailto|tel):/i.test(url) ||
+        url.startsWith('/')
         ? url
         : `https://${url}`
 }
@@ -162,10 +176,39 @@ export const FileChip: React.FC<{
 }
 
 /**
- * Inline image thumbnail — rounded, bordered, `object-cover` — that opens the
- * full image in a new tab. On load error it degrades to a normal link chip so a
- * dead image URL is still reachable (and never a broken-image icon). `maxHeight`
- * keeps a cell thumbnail small (~h-8) while the dialog shows a larger preview.
+ * Full-size image preview — a Dialog overlay, not a new tab. Click-to-zoom is
+ * the platform-wide behavior for every inline thumbnail (table cell, detail
+ * dialog, linkified free text): the caller never builds its own lightbox.
+ * Download / "open original" stays one click away in the footer for the rare
+ * case someone wants the raw file.
+ */
+const ImageLightbox: React.FC<{
+    src: string
+    alt: string
+    open: boolean
+    onOpenChange: (open: boolean) => void
+}> = ({ src, alt, open, onOpenChange }) => (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent
+            className="max-w-[min(92vw,1100px)] max-h-[92dvh] p-2 overflow-hidden border-0 bg-transparent shadow-none flex items-center justify-center"
+            onClick={stop}
+        >
+            <DialogTitle className="sr-only">{alt}</DialogTitle>
+            <img
+                src={src}
+                alt={alt}
+                className="max-h-[86dvh] max-w-full rounded-lg object-contain shadow-2xl"
+            />
+        </DialogContent>
+    </Dialog>
+)
+
+/**
+ * Inline image thumbnail — rounded, bordered, `object-cover` — that opens a
+ * full-size PREVIEW (a lightbox dialog, not a new tab). On load error it
+ * degrades to a normal link chip so a dead image URL is still reachable (and
+ * never a broken-image icon). `maxHeight` keeps a cell thumbnail small
+ * (~h-8) while the dialog shows a larger preview.
  */
 export const ImageThumbnail: React.FC<{
     url: string
@@ -175,32 +218,42 @@ export const ImageThumbnail: React.FC<{
     className?: string
 }> = ({ url, getImageUrl, maxHeight = 160, className }) => {
     const [failed, setFailed] = React.useState(false)
-    const href = ensureHref(url)
+    const [open, setOpen] = React.useState(false)
     // Absolute URLs are used verbatim; only relative storage paths go through
-    // the host's image resolver (which prefixes the media base).
-    const src =
-        /^(https?:)?\/\//i.test(url) ? url : getImageUrl ? getImageUrl(url) : url
+    // the host's image resolver (which prefixes the media base). Anything
+    // that opens the raw file (download, the lightbox <img>) MUST resolve the
+    // same way — otherwise a relative "/storage/…" path (the platform's own
+    // convention: uploads, hub-generated assets, etc.) never matches
+    // ensureHref's "//"-prefixed check and gets misread as a bare host,
+    // producing "https:///storage/…".
+    const isAbsolute = /^(https?:)?\/\//i.test(url)
+    const src = isAbsolute ? url : getImageUrl ? getImageUrl(url) : url
+    const label = smartUrlLabel(url)
     if (failed) return <UrlChip url={url} icon="Image" />
     return (
-        <a
-            href={href}
-            target="_blank"
-            rel="noopener noreferrer"
-            title={url}
-            onClick={stop}
-            className="inline-block max-w-full align-middle"
-        >
-            <img
-                src={src}
-                alt={smartUrlLabel(url)}
-                onError={() => setFailed(true)}
-                style={{ maxHeight }}
-                className={cn(
-                    'max-w-full rounded-md border object-cover',
-                    className
-                )}
-            />
-        </a>
+        <>
+            <button
+                type="button"
+                title={label}
+                onClick={(e) => {
+                    stop(e)
+                    setOpen(true)
+                }}
+                className="inline-block max-w-full cursor-zoom-in appearance-none border-0 bg-transparent p-0 align-middle"
+            >
+                <img
+                    src={src}
+                    alt={label}
+                    onError={() => setFailed(true)}
+                    style={{ maxHeight }}
+                    className={cn(
+                        'max-w-full rounded-md border object-cover',
+                        className
+                    )}
+                />
+            </button>
+            <ImageLightbox src={src} alt={label} open={open} onOpenChange={setOpen} />
+        </>
     )
 }