@asteby/metacore-runtime-react 23.3.0 → 23.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @asteby/metacore-runtime-react
 
+## 23.4.0
+
+### Minor Changes
+
+- edfa5a9: Render "pro" de URLs, imágenes y archivos: una URL nunca se muestra cruda. Nuevas primitivas compartidas en `rich-url.tsx` (`MediaValue`, `UrlChip`, `FileChip`, `ImageThumbnail`, `RichText`, `linkifyText`, `classifyUrl`, …) que consumen por igual la CELDA de la tabla/kanban (`dynamic-columns.tsx`) y el DETAIL DIALOG (`dynamic-record.tsx`) — cero copy-paste.
+  - URL de página (ej. `github_url` con la issue completa) → chip compacto con icono `ExternalLink` + label corto (hostname, ej. "github.com", o el nombre de archivo si aplica); URL completa en el tooltip; abre en pestaña nueva. Ya no se ve la URL de 120 caracteres.
+  - URL de imagen (jpg/png/gif/webp/avif/svg y rutas `…/storage/media/…` sin extensión) → THUMBNAIL inline redondeado y clickeable que abre la imagen completa; `onError` degrada a link chip (nunca un icono de imagen rota). En la celda el thumbnail es chico (~h-8) para no romper la altura de fila; en el dialog es más grande.
+  - URL de archivo (pdf/zip/docx/mp4/…) → chip con icono `FileText` + nombre del archivo.
+  - URLs embebidas en texto largo (body, textarea, long-text) → se linkifican con el mismo estilo (bare o markdown `[label](url)`), recortando puntuación final y respetando paréntesis balanceados; imágenes y archivos embebidos también se renderizan inline.
+
+  Sin llamadas de red para renderizar (nada de servicio de favicons — CSP/privacidad): el icono es un glyph lucide local.
+
 ## 23.3.0
 
 ### Minor Changes

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

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

package/dist/dialogs/dynamic-record.js

@@ -28,6 +28,7 @@ import { DynamicIcon, isLucideIconName } from '../dynamic-icon';
 import { humanizeToken } from '../dynamic-columns-helpers';
 import { formatDateCell } from '../dynamic-columns';
 import { OptionBadge, statusColorFor, useIsDarkTheme, } from '../display-value';
+import { MediaValue, RichText } from '../rich-url';
 import { generateBadgeStyles } from '@asteby/metacore-ui/lib';
 import { CollectionCell } from '../collection-cell';
 import { ImageUrlContext, identityImageUrl } from '../image-url-context';
@@ -638,9 +639,10 @@ export function ViewValue({ field, value: rawValue, record, getImageUrl: getImag
     // carrying `cellStyle:'url'` (e.g. `github_url`) renders as a clickable
     // external link, opening in a new tab, truncated.
     if ((renderAs === 'url' || renderAs === 'link') && value) {
-        const urlStr = String(value);
-        const href = /^https?:\/\//i.test(urlStr) ? urlStr : `https://${urlStr}`;
-        return (_jsxs("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline", children: [_jsx(ExternalLink, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "truncate max-w-[360px]", children: urlStr })] }));
+        // Shared media renderer (same as the table cell): an image URL shows a
+        // larger inline thumbnail, a file a chip, else a compact link chip with
+        // a smart label — never the raw 120-char URL.
+        return (_jsx("div", { className: "py-1", children: _jsx(MediaValue, { url: String(value), getImageUrl: getImageUrl, label: field.styleConfig?.label, icon: field.styleConfig?.icon, thumbHeight: 200, maxLabelWidth: 360 }) }));
     }
     // Money → org-currency string. Detected by the backend `cellStyle:'currency'`
     // stamp or a numeric value whose key matches the money heuristic (fallback
@@ -717,10 +719,14 @@ export function ViewValue({ field, value: rawValue, record, getImageUrl: getImag
         return (_jsx(StructuredViewValue, { value: value, field: field, locale: i18n.language, t: t }));
     }
     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 });
+    // Free text may embed URLs (a github body, notes, a long-text field). Turn
+    // them into rich chips / inline thumbnails with the shared linkifier instead
+    // of showing raw URLs — the rest of the text is preserved verbatim.
+    const hasUrl = display !== '—' && /(https?:\/\/|www\.)\S/i.test(display);
+    if (field.type === 'textarea' || renderAs === 'textarea' || renderAs === 'long-text') {
+        return (_jsx("p", { className: "text-sm whitespace-pre-wrap rounded-md bg-muted/40 p-3 min-h-[60px] [&_img]:my-1", children: hasUrl ? (_jsx(RichText, { text: display, getImageUrl: getImageUrl, imageHeight: 200 })) : (display) }));
+    }
+    return (_jsx("p", { className: "text-sm py-1", children: hasUrl ? (_jsx(RichText, { text: display, getImageUrl: getImageUrl, imageHeight: 160 })) : (display) }));
 }
 // IconNameViewValue — read view for a column whose value is a lucide icon name
 // (an addon's `icon` column): the glyph plus the name, so the value stays

package/dist/dynamic-columns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,UAAU,CAAA;AAsC9C,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE9D,OAAO,KAAK,EAER,iBAAiB,EACpB,MAAM,wBAAwB,CAAA;AAE/B,qEAAqE;AACrE,MAAM,WAAW,qBAAqB;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AA0BD;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,KAAK,gBAAgB,EAAE,cAAc,MAAM,KAAG,MACzB,CAAA;AAQrD;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,gBAAgB,KAAG,MAAM,GAAG,SAG5D,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAC7B,KAAK,gBAAgB,EACrB,OAAO,OAAO,EACd,WAAW,MAAM,EACjB,SAAS,MAAM,KAChB,MAyBF,CAAA;AAyCD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAiB5D,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OACqB,CAAA;AAqFhF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAG,MAGnE,CAAA;AAED,6EAA6E;AAC7E,eAAO,MAAM,eAAe,2DAA4D,CAAA;AAExF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAC1B,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,MAAM,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE,MAAM,GAClB;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CA6C5C;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAWtE,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAOtE,CAAA;AAsID;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CA8mBnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}
+{"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,UAAU,CAAA;AAuC9C,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE9D,OAAO,KAAK,EAER,iBAAiB,EACpB,MAAM,wBAAwB,CAAA;AAE/B,qEAAqE;AACrE,MAAM,WAAW,qBAAqB;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AA0BD;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,KAAK,gBAAgB,EAAE,cAAc,MAAM,KAAG,MACzB,CAAA;AAQrD;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,gBAAgB,KAAG,MAAM,GAAG,SAG5D,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAC7B,KAAK,gBAAgB,EACrB,OAAO,OAAO,EACd,WAAW,MAAM,EACjB,SAAS,MAAM,KAChB,MAyBF,CAAA;AAyCD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,0BAA0B,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAMlE,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OAiB5D,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,GAAG,EAAE,KAAK,GAAG,KAAG,OACqB,CAAA;AAqFhF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,IAAI,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAG,MAGnE,CAAA;AAED,6EAA6E;AAC7E,eAAO,MAAM,eAAe,2DAA4D,CAAA;AAExF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAC1B,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,MAAM,GAAG,SAAS,EAC5B,MAAM,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE,MAAM,GAClB;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CA6C5C;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAWtE,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,gBAAgB,EAAE,KAAK,GAAG,KAAG,MAOtE,CAAA;AAsID;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAqmBnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}

package/dist/dynamic-columns.js

@@ -23,6 +23,7 @@ import { generateBadgeStyles, getInitials, relationChipStyles, } from '@asteby/m
 import { Progress } from './dialogs/_primitives';
 import { humanizeToken } from './dynamic-columns-helpers';
 import { OptionBadge, RelationThumbnail, statusColorFor, useIsDarkTheme, } from './display-value';
+import { MediaValue } from './rich-url';
 import { OptionsContext } from './options-context';
 import { DynamicIcon, isLucideIconName } from './dynamic-icon';
 import { CollectionCell } from './collection-cell';
@@ -584,25 +585,16 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                             if (!rawUrl)
                                 return _jsx(EmptyCell, {});
                             const urlStr = String(rawUrl);
-                            const href = /^https?:\/\//i.test(urlStr) ? urlStr : `https://${urlStr}`;
-                            let label;
-                            if (labelField) {
-                                label = String(getNestedValue(row.original, labelField) ?? href);
-                            }
-                            else {
-                                try {
-                                    label = new URL(href).hostname;
-                                }
-                                catch {
-                                    label = urlStr;
-                                }
-                            }
-                            const isExternal = !/^https?:\/\/(localhost|127\.)/i.test(href);
-                            const newTab = styleCfg(col, 'new_tab', 'newTab') === true || isExternal;
-                            const iconName = styleCfg(col, 'icon') || 'ExternalLink';
-                            return (_jsxs("a", { href: href, ...(newTab
-                                    ? { target: '_blank', rel: 'noopener noreferrer' }
-                                    : {}), className: "inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline", onClick: (e) => e.stopPropagation(), children: [_jsx(DynamicIcon, { name: iconName, className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "truncate max-w-[260px]", children: label })] }));
+                            // Explicit label from a `label_field` wins; otherwise
+                            // the shared primitive derives a smart label (hostname
+                            // / file name). Images render as a small (~h-8) inline
+                            // thumbnail, files as a chip, else a link chip. Same
+                            // renderer as the detail dialog.
+                            const label = labelField
+                                ? String(getNestedValue(row.original, labelField) ?? '')
+                                : undefined;
+                            const iconName = styleCfg(col, 'icon');
+                            return (_jsx(MediaValue, { url: urlStr, getImageUrl: getImageUrl, label: label || undefined, icon: iconName || undefined, thumbHeight: 32, maxLabelWidth: 260 }));
                         }
                         case 'email': {
                             if (!value)

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export * from './dynamic-icon';
 export type { ColumnFilterConfig, FilterOption as DynamicColumnFilterOption, GetDynamicColumns, DynamicIconComponent, } from './dynamic-columns-shim';
 export { defaultGetDynamicColumns, makeDefaultGetDynamicColumns, relationKeyFor, resolveRelationLabel, type DynamicColumnsHelpers, } from './dynamic-columns';
 export { humanizeToken } from './dynamic-columns-helpers';
+export { UrlChip, FileChip, ImageThumbnail, MediaValue, RichText, linkifyText, classifyUrl, isImageUrl, isFileUrl, ensureHref, smartUrlLabel, fileNameFromUrl, splitTrailingPunct, type UrlKind, type LinkifyOptions, } from './rich-url';
 export { CollectionCell, formatScalar, prettifyKey, countLabel, type CollectionCellProps, type Translate as CollectionCellTranslate, } from './collection-cell';
 export { NIL_UUID, isNilUuid, normalizeNilUuid } from './nil-uuid';
 export { DynamicRecordDialog, ViewValue } from './dialogs/dynamic-record';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EACH,aAAa,EACb,KAAK,kBAAkB,EACvB,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,GAClB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EACH,WAAW,EACX,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,KAAK,gBAAgB,GACxB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EACH,iBAAiB,EACjB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC/B,MAAM,uBAAuB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EACH,qBAAqB,EACrB,KAAK,gBAAgB,GACxB,MAAM,2BAA2B,CAAA;AAClC,OAAO,EACH,kBAAkB,EAClB,eAAe,EACf,KAAK,uBAAuB,EAC5B,KAAK,eAAe,GACvB,MAAM,wBAAwB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EACH,mBAAmB,EACnB,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,KAAK,WAAW,EAChB,KAAK,wBAAwB,GAChC,MAAM,wBAAwB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,OAAO,EACH,mBAAmB,EACnB,MAAM,EACN,oBAAoB,EACpB,OAAO,EACP,sBAAsB,EACtB,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,KAAK,KAAK,EACV,KAAK,wBAAwB,GAChC,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EACH,oBAAoB,EACpB,KAAK,0BAA0B,EAC/B,KAAK,iBAAiB,GACzB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EACH,kBAAkB,EAClB,sBAAsB,EACtB,kBAAkB,EAClB,qBAAqB,EACrB,mBAAmB,EACnB,iBAAiB,EACjB,sBAAsB,EACtB,aAAa,EACb,kBAAkB,EAClB,KAAK,uBAAuB,EAC5B,KAAK,kBAAkB,EACvB,KAAK,yBAAyB,EAC9B,KAAK,sBAAsB,EAC3B,KAAK,WAAW,EAChB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,OAAO,EACZ,KAAK,SAAS,GACjB,MAAM,uBAAuB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,OAAO,EACH,2BAA2B,EAC3B,uBAAuB,EACvB,4BAA4B,EAC5B,KAAK,2BAA2B,EAChC,KAAK,qBAAqB,EAC1B,KAAK,8BAA8B,GACtC,MAAM,+BAA+B,CAAA;AACtC,OAAO,EACH,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,wBAAwB,EACxB,WAAW,EACX,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,GAC9B,MAAM,yBAAyB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,YAAY,EACR,kBAAkB,EAClB,YAAY,IAAI,yBAAyB,EACzC,iBAAiB,EACjB,oBAAoB,GACvB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EACH,wBAAwB,EACxB,4BAA4B,EAC5B,cAAc,EACd,oBAAoB,EACpB,KAAK,qBAAqB,GAC7B,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AACzD,OAAO,EACH,OAAO,EACP,QAAQ,EACR,cAAc,EACd,UAAU,EACV,QAAQ,EACR,WAAW,EACX,WAAW,EACX,UAAU,EACV,SAAS,EACT,UAAU,EACV,aAAa,EACb,eAAe,EACf,kBAAkB,EAClB,KAAK,OAAO,EACZ,KAAK,cAAc,GACtB,MAAM,YAAY,CAAA;AACnB,OAAO,EACH,cAAc,EACd,YAAY,EACZ,WAAW,EACX,UAAU,EACV,KAAK,mBAAmB,EACxB,KAAK,SAAS,IAAI,uBAAuB,GAC5C,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAClE,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACzE,YAAY,EAAE,wBAAwB,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAC5G,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAC/D,YAAY,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,uBAAuB,EACvB,qBAAqB,GACxB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EACH,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,sBAAsB,GAC9B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACH,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,yBAAyB,EACzB,kBAAkB,EAClB,wBAAwB,EACxB,cAAc,GACjB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACH,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,KAAK,qBAAqB,GAC7B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACH,sBAAsB,EACtB,iBAAiB,EACjB,oBAAoB,EACpB,KAAK,cAAc,EACnB,KAAK,mBAAmB,GAC3B,MAAM,4BAA4B,CAAA;AACnC,OAAO,EACH,sBAAsB,EACtB,uBAAuB,GAC1B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACH,kBAAkB,EAClB,aAAa,EACb,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC3B,KAAK,wBAAwB,GAChC,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EACH,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,KAAK,eAAe,GACvB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACH,iBAAiB,EACjB,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,oBAAoB,GACvB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EACH,qBAAqB,EACrB,KAAK,0BAA0B,GAClC,MAAM,2BAA2B,CAAA;AAClC,OAAO,EACH,YAAY,EACZ,KAAK,aAAa,EAClB,KAAK,iBAAiB,GACzB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACH,aAAa,EACb,KAAK,kBAAkB,GAC1B,MAAM,kBAAkB,CAAA;AACzB,OAAO,EACH,gBAAgB,EAChB,KAAK,qBAAqB,GAC7B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACH,aAAa,EACb,eAAe,GAClB,MAAM,kBAAkB,CAAA;AACzB,YAAY,EACR,UAAU,EACV,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,aAAa,EACb,oBAAoB,EACpB,sBAAsB,EACtB,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,EACV,oBAAoB,EACpB,cAAc,EACd,kBAAkB,EAClB,oBAAoB,GACvB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EACH,UAAU,EACV,SAAS,EACT,UAAU,EACV,UAAU,EACV,SAAS,EACT,WAAW,EACX,UAAU,EACV,cAAc,EACd,KAAK,iBAAiB,GACzB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACH,cAAc,EACd,cAAc,EACd,SAAS,EACT,UAAU,EACV,KAAK,mBAAmB,GAC3B,MAAM,2BAA2B,CAAA;AAClC,OAAO,EACH,UAAU,EACV,SAAS,EACT,WAAW,EACX,WAAW,EACX,KAAK,eAAe,GACvB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EACH,iBAAiB,EACjB,cAAc,EACd,WAAW,EACX,aAAa,EACb,YAAY,EACZ,aAAa,EACb,KAAK,aAAa,EAClB,KAAK,eAAe,GACvB,MAAM,yBAAyB,CAAA"}

package/dist/index.js

@@ -30,6 +30,7 @@ export { useHotSwapReload, applyHotSwapReload, withVersionParam, clearFederation
 export * from './dynamic-icon';
 export { defaultGetDynamicColumns, makeDefaultGetDynamicColumns, relationKeyFor, resolveRelationLabel, } from './dynamic-columns';
 export { humanizeToken } from './dynamic-columns-helpers';
+export { UrlChip, FileChip, ImageThumbnail, MediaValue, RichText, linkifyText, classifyUrl, isImageUrl, isFileUrl, ensureHref, smartUrlLabel, fileNameFromUrl, splitTrailingPunct, } from './rich-url';
 export { CollectionCell, formatScalar, prettifyKey, countLabel, } from './collection-cell';
 export { NIL_UUID, isNilUuid, normalizeNilUuid } from './nil-uuid';
 export { DynamicRecordDialog, ViewValue } from './dialogs/dynamic-record';

package/dist/rich-url.d.ts

@@ -0,0 +1,119 @@
+/**
+ * Rich URL & media rendering primitives.
+ *
+ * A URL is never shown raw. Depending on what it points at we render:
+ *   - an IMAGE (jpg/png/gif/webp/… or a `link.asteby.com/storage/media/` path)
+ *     → an inline clickable THUMBNAIL that opens the full image in a new tab,
+ *   - a FILE (pdf/zip/docx/…) → a chip with a file icon and the file name,
+ *   - anything else → a compact link CHIP: an external-link glyph plus a short
+ *     smart label (hostname, e.g. "github.com", or the last path segment for a
+ *     file-like URL), with the full URL in a native tooltip.
+ *
+ * These live here (not inline in the table/dialog) so the dynamic TABLE cell
+ * (`dynamic-columns.tsx`) and the read-only DETAIL DIALOG (`dynamic-record.tsx`)
+ * share the EXACT same rendering. Ecosystem rule: shared primitives, zero copy.
+ *
+ * No external requests are made to render a link (no favicon service — CSP /
+ * privacy): the icon is a local lucide glyph.
+ */
+import React from 'react';
+export type UrlKind = 'image' | 'file' | 'link';
+/** `true` when the string looks like an image URL/path. */
+export declare function isImageUrl(url: string): boolean;
+/** `true` when the string looks like a non-image downloadable file. */
+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. */
+export declare function ensureHref(url: string): string;
+/**
+ * A short, human label for a URL. For a file-like URL (last segment carries an
+ * extension) the file name wins ("report.pdf"); otherwise the bare hostname
+ * ("github.com"), so a 120-char issue URL never shows raw. Falls back to the
+ * input when it can't be parsed.
+ */
+export declare function smartUrlLabel(url: string): string;
+/** Last path segment (decoded) — the file name for a file/image URL. */
+export declare function fileNameFromUrl(url: string): string;
+/**
+ * Compact link chip: external-link glyph + smart label, full URL in the
+ * tooltip, opens in a new tab. The canonical render for a plain (non-media)
+ * URL, matching the table's `url`/`link` cell.
+ */
+export declare const UrlChip: React.FC<{
+    url: string;
+    label?: string;
+    icon?: string;
+    /** Smaller label cap for a table/kanban cell. */
+    maxLabelWidth?: number;
+    className?: string;
+}>;
+/**
+ * Chip for a downloadable non-image file: file-text glyph + the file name,
+ * opens the file in a new tab.
+ */
+export declare const FileChip: React.FC<{
+    url: string;
+    maxLabelWidth?: number;
+    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.
+ */
+export declare const ImageThumbnail: React.FC<{
+    url: string;
+    getImageUrl?: (path: string) => string;
+    /** Max rendered height in px. */
+    maxHeight?: number;
+    className?: string;
+}>;
+/**
+ * One URL value → the right primitive (thumbnail / file chip / link chip).
+ * Single entry point used by both the table cell and the detail dialog so a URL
+ * renders identically everywhere.
+ */
+export declare const MediaValue: React.FC<{
+    url: string;
+    getImageUrl?: (path: string) => string;
+    /** Explicit label for the link chip (from a `label_field`). */
+    label?: string;
+    /** Explicit icon for the link chip. */
+    icon?: string;
+    /** Thumbnail max height (small in a cell, larger in the dialog). */
+    thumbHeight?: number;
+    /** Link/file label truncation cap. */
+    maxLabelWidth?: number;
+    className?: string;
+}>;
+/**
+ * Peel trailing punctuation a URL shouldn't swallow (sentence period, closing
+ * bracket, quote). A closing paren is kept only when the URL itself opened one
+ * (Wikipedia-style `(…)` paths), so `(see https://x.com/a)` links `https://x.com/a`
+ * but `https://en.wikipedia.org/wiki/Foo_(bar)` keeps its paren.
+ */
+export declare function splitTrailingPunct(match: string): [string, string];
+export interface LinkifyOptions {
+    getImageUrl?: (path: string) => string;
+    /** Max height for an inline image found in the text. */
+    imageHeight?: number;
+}
+/**
+ * Turn free text into React nodes, replacing every URL (bare or markdown
+ * `[label](url)`) with the matching rich primitive: an inline thumbnail for an
+ * image URL, a file chip for a file, otherwise a link chip. Plain text between
+ * matches is preserved verbatim (caller keeps `whitespace-pre-wrap`).
+ */
+export declare function linkifyText(text: string, opts?: LinkifyOptions): React.ReactNode[];
+/**
+ * Linkified free text. Renders the raw string with every URL turned into a rich
+ * chip/thumbnail — the read view for a long-text / textarea / body field.
+ */
+export declare const RichText: React.FC<{
+    text: string;
+    getImageUrl?: (path: string) => string;
+    imageHeight?: number;
+}>;
+//# sourceMappingURL=rich-url.d.ts.map

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

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

package/dist/rich-url.js

@@ -0,0 +1,224 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Rich URL & media rendering primitives.
+ *
+ * A URL is never shown raw. Depending on what it points at we render:
+ *   - an IMAGE (jpg/png/gif/webp/… or a `link.asteby.com/storage/media/` path)
+ *     → an inline clickable THUMBNAIL that opens the full image in a new tab,
+ *   - a FILE (pdf/zip/docx/…) → a chip with a file icon and the file name,
+ *   - anything else → a compact link CHIP: an external-link glyph plus a short
+ *     smart label (hostname, e.g. "github.com", or the last path segment for a
+ *     file-like URL), with the full URL in a native tooltip.
+ *
+ * These live here (not inline in the table/dialog) so the dynamic TABLE cell
+ * (`dynamic-columns.tsx`) and the read-only DETAIL DIALOG (`dynamic-record.tsx`)
+ * share the EXACT same rendering. Ecosystem rule: shared primitives, zero copy.
+ *
+ * No external requests are made to render a link (no favicon service — CSP /
+ * privacy): the icon is a local lucide glyph.
+ */
+import React from 'react';
+import { cn } from '@asteby/metacore-ui/lib';
+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;
+/**
+ * Storage paths that serve images without a file extension (the link.asteby.com
+ * media CDN hands back opaque ids). Treated as images so uploaded photos still
+ * thumbnail.
+ */
+const MEDIA_PATH_RE = /\/storage\/media\//i;
+/** Non-image file extensions we render as a download-ish file chip. */
+const FILE_EXT_RE = /\.(pdf|zip|rar|7z|tar|t?gz|docx?|xlsx?|pptx?|csv|txt|json|xml|md|rtf|odt|mp4|mov|avi|mkv|webm|mp3|wav|ogg|flac|apk|dmg|exe|pkg)(?:[?#].*)?$/i;
+/** `true` when the string looks like an image URL/path. */
+export function isImageUrl(url) {
+    return IMAGE_EXT_RE.test(url) || MEDIA_PATH_RE.test(url);
+}
+/** `true` when the string looks like a non-image downloadable file. */
+export function isFileUrl(url) {
+    return FILE_EXT_RE.test(url);
+}
+/** Classify a URL so the right primitive (thumbnail / file chip / link) renders. */
+export function classifyUrl(url) {
+    if (isImageUrl(url))
+        return 'image';
+    if (isFileUrl(url))
+        return 'file';
+    return 'link';
+}
+/** Ensure a URL is absolute so `<a href>` and `new URL()` behave. */
+export function ensureHref(url) {
+    return /^(https?:)?\/\//i.test(url) || /^(mailto|tel):/i.test(url)
+        ? url
+        : `https://${url}`;
+}
+/**
+ * A short, human label for a URL. For a file-like URL (last segment carries an
+ * extension) the file name wins ("report.pdf"); otherwise the bare hostname
+ * ("github.com"), so a 120-char issue URL never shows raw. Falls back to the
+ * input when it can't be parsed.
+ */
+export function smartUrlLabel(url) {
+    try {
+        const u = new URL(ensureHref(url));
+        const segs = u.pathname.split('/').filter(Boolean);
+        const last = segs[segs.length - 1];
+        if (last && /\.[a-z0-9]{1,8}$/i.test(last)) {
+            return decodeURIComponent(last);
+        }
+        return u.hostname.replace(/^www\./i, '');
+    }
+    catch {
+        return url;
+    }
+}
+/** Last path segment (decoded) — the file name for a file/image URL. */
+export function fileNameFromUrl(url) {
+    try {
+        const u = new URL(ensureHref(url));
+        const segs = u.pathname.split('/').filter(Boolean);
+        return decodeURIComponent(segs[segs.length - 1] || u.hostname);
+    }
+    catch {
+        return url.split(/[?#]/)[0].split('/').pop() || url;
+    }
+}
+/** Stops row-click / dialog-close when a link inside them is clicked. */
+function stop(e) {
+    e.stopPropagation();
+}
+/**
+ * Compact link chip: external-link glyph + smart label, full URL in the
+ * tooltip, opens in a new tab. The canonical render for a plain (non-media)
+ * URL, matching the table's `url`/`link` cell.
+ */
+export const UrlChip = ({ url, label, icon, maxLabelWidth = 260, className }) => {
+    const href = ensureHref(url);
+    const text = label || smartUrlLabel(url);
+    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 align-middle text-sm font-medium text-primary hover:underline', className), children: [_jsx(DynamicIcon, { name: icon || 'ExternalLink', className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "truncate", style: { maxWidth: maxLabelWidth }, children: text })] }));
+};
+/**
+ * Chip for a downloadable non-image file: file-text glyph + the file name,
+ * opens the file in a new tab.
+ */
+export const FileChip = ({ url, maxLabelWidth = 240, className }) => {
+    const href = ensureHref(url);
+    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.
+ */
+export const ImageThumbnail = ({ url, getImageUrl, maxHeight = 160, className }) => {
+    const [failed, setFailed] = React.useState(false);
+    const href = ensureHref(url);
+    // 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;
+    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) }) }));
+};
+/**
+ * One URL value → the right primitive (thumbnail / file chip / link chip).
+ * Single entry point used by both the table cell and the detail dialog so a URL
+ * renders identically everywhere.
+ */
+export const MediaValue = ({ url, getImageUrl, label, icon, thumbHeight, maxLabelWidth, className }) => {
+    switch (classifyUrl(url)) {
+        case 'image':
+            return (_jsx(ImageThumbnail, { url: url, getImageUrl: getImageUrl, maxHeight: thumbHeight, className: className }));
+        case 'file':
+            return _jsx(FileChip, { url: url, maxLabelWidth: maxLabelWidth, className: className });
+        default:
+            return (_jsx(UrlChip, { url: url, label: label, icon: icon, maxLabelWidth: maxLabelWidth, className: className }));
+    }
+};
+// URL / markdown-link matcher used to linkify free text. Captures either a
+// markdown `[label](url)` or a bare http(s)/www URL. `[^\s<]+` is greedy on
+// purpose — trailing punctuation is trimmed afterwards by `splitTrailingPunct`.
+const LINK_IN_TEXT_RE = /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)|(https?:\/\/[^\s<]+|www\.[^\s<]+)/gi;
+/**
+ * Peel trailing punctuation a URL shouldn't swallow (sentence period, closing
+ * bracket, quote). A closing paren is kept only when the URL itself opened one
+ * (Wikipedia-style `(…)` paths), so `(see https://x.com/a)` links `https://x.com/a`
+ * but `https://en.wikipedia.org/wiki/Foo_(bar)` keeps its paren.
+ */
+export function splitTrailingPunct(match) {
+    const m = match.match(/[).,;:!?\]}'"»›]+$/);
+    if (!m)
+        return [match, ''];
+    let trail = m[0];
+    let core = match.slice(0, match.length - trail.length);
+    if (trail.startsWith(')')) {
+        const opens = (core.match(/\(/g) || []).length;
+        const closes = (core.match(/\)/g) || []).length;
+        if (opens > closes) {
+            core += ')';
+            trail = trail.slice(1);
+        }
+    }
+    return [core, trail];
+}
+/**
+ * Turn free text into React nodes, replacing every URL (bare or markdown
+ * `[label](url)`) with the matching rich primitive: an inline thumbnail for an
+ * image URL, a file chip for a file, otherwise a link chip. Plain text between
+ * matches is preserved verbatim (caller keeps `whitespace-pre-wrap`).
+ */
+export function linkifyText(text, opts = {}) {
+    if (!text)
+        return [];
+    const nodes = [];
+    const re = new RegExp(LINK_IN_TEXT_RE.source, 'gi');
+    let lastIndex = 0;
+    let key = 0;
+    let m;
+    while ((m = re.exec(text)) !== null) {
+        const [full, mdLabel, mdUrl, bareUrl] = m;
+        const start = m.index;
+        if (start > lastIndex)
+            nodes.push(text.slice(lastIndex, start));
+        if (mdUrl) {
+            // Markdown link: honor the author's label, keep media inline.
+            const kind = classifyUrl(mdUrl);
+            if (kind === 'image') {
+                nodes.push(_jsx(ImageThumbnail, { url: mdUrl, getImageUrl: opts.getImageUrl, maxHeight: opts.imageHeight ?? 200 }, key));
+            }
+            else if (kind === 'file') {
+                nodes.push(_jsx(FileChip, { url: mdUrl }, key));
+            }
+            else {
+                nodes.push(_jsx(UrlChip, { url: mdUrl, label: mdLabel }, key));
+            }
+            lastIndex = start + full.length;
+        }
+        else {
+            const [core, trail] = splitTrailingPunct(bareUrl);
+            const kind = classifyUrl(core);
+            if (kind === 'image') {
+                nodes.push(_jsx(ImageThumbnail, { url: core, getImageUrl: opts.getImageUrl, maxHeight: opts.imageHeight ?? 200 }, key));
+            }
+            else if (kind === 'file') {
+                nodes.push(_jsx(FileChip, { url: core }, key));
+            }
+            else {
+                nodes.push(_jsx(UrlChip, { url: core }, key));
+            }
+            if (trail)
+                nodes.push(trail);
+            lastIndex = start + bareUrl.length;
+        }
+        key++;
+    }
+    if (lastIndex < text.length)
+        nodes.push(text.slice(lastIndex));
+    return nodes;
+}
+/**
+ * Linkified free text. Renders the raw string with every URL turned into a rich
+ * chip/thumbnail — the read view for a long-text / textarea / body field.
+ */
+export const RichText = ({ text, getImageUrl, imageHeight }) => (_jsx(_Fragment, { children: linkifyText(text, { getImageUrl, imageHeight }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "23.3.0",
+  "version": "23.4.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

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

@@ -0,0 +1,196 @@
+// @vitest-environment happy-dom
+//
+// Rich URL & media rendering: URLs are never shown raw. The shared primitives
+// classify a URL (image / file / link), derive a smart short label, and
+// linkify URLs embedded in free text (bare or markdown), rendering images as
+// inline thumbnails, files as chips, and everything else as a compact link.
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import {
+    classifyUrl,
+    isImageUrl,
+    isFileUrl,
+    smartUrlLabel,
+    fileNameFromUrl,
+    ensureHref,
+    splitTrailingPunct,
+    linkifyText,
+    UrlChip,
+    FileChip,
+    ImageThumbnail,
+    MediaValue,
+    RichText,
+} from '../rich-url'
+
+afterEach(cleanup)
+
+describe('classifyUrl', () => {
+    it('detects images by extension', () => {
+        for (const u of [
+            'https://cdn.example.com/a.jpg',
+            'https://cdn.example.com/a.JPEG',
+            'http://x/y/z.png?w=200',
+            'https://x/pic.webp#frag',
+            'https://x/i.avif',
+            'https://x/logo.svg',
+        ]) {
+            expect(isImageUrl(u)).toBe(true)
+            expect(classifyUrl(u)).toBe('image')
+        }
+    })
+
+    it('detects images served from a storage media path without extension', () => {
+        const u = 'https://link.asteby.com/storage/media/9f3ac2b1'
+        expect(isImageUrl(u)).toBe(true)
+        expect(classifyUrl(u)).toBe('image')
+    })
+
+    it('detects non-image files by extension', () => {
+        for (const u of [
+            'https://x/report.pdf',
+            'https://x/archive.zip',
+            'https://x/sheet.xlsx',
+            'https://x/doc.docx?dl=1',
+            'https://x/clip.mp4',
+        ]) {
+            expect(isFileUrl(u)).toBe(true)
+            expect(classifyUrl(u)).toBe('file')
+        }
+    })
+
+    it('treats a plain page URL as a link', () => {
+        const u = 'https://github.com/asteby/doctores.lat/issues/212'
+        expect(isImageUrl(u)).toBe(false)
+        expect(isFileUrl(u)).toBe(false)
+        expect(classifyUrl(u)).toBe('link')
+    })
+})
+
+describe('smartUrlLabel / fileNameFromUrl / ensureHref', () => {
+    it('uses the bare hostname for a page URL (no raw long URL)', () => {
+        expect(
+            smartUrlLabel('https://github.com/asteby/doctores.lat/issues/212')
+        ).toBe('github.com')
+        expect(smartUrlLabel('https://www.example.com/path/to/thing')).toBe(
+            'example.com'
+        )
+    })
+
+    it('uses the file name for a file/image URL', () => {
+        expect(smartUrlLabel('https://x/y/report.pdf')).toBe('report.pdf')
+        expect(fileNameFromUrl('https://x/y/My%20File.pdf')).toBe('My File.pdf')
+    })
+
+    it('makes a schemeless URL absolute', () => {
+        expect(ensureHref('github.com/x')).toBe('https://github.com/x')
+        expect(ensureHref('https://a.com')).toBe('https://a.com')
+        expect(ensureHref('mailto:a@b.com')).toBe('mailto:a@b.com')
+    })
+})
+
+describe('splitTrailingPunct', () => {
+    it('peels a trailing sentence period', () => {
+        expect(splitTrailingPunct('https://a.com/x.')).toEqual([
+            'https://a.com/x',
+            '.',
+        ])
+    })
+
+    it('keeps a paren the URL itself opened', () => {
+        expect(
+            splitTrailingPunct('https://en.wikipedia.org/wiki/Foo_(bar)')
+        ).toEqual(['https://en.wikipedia.org/wiki/Foo_(bar)', ''])
+    })
+
+    it('peels a closing paren the URL did not open', () => {
+        expect(splitTrailingPunct('https://a.com/x)')).toEqual([
+            'https://a.com/x',
+            ')',
+        ])
+    })
+})
+
+describe('linkifyText', () => {
+    it('linkifies a bare URL and keeps surrounding text', () => {
+        const nodes = linkifyText('see https://github.com/a/b for details')
+        render(<p>{nodes}</p>)
+        const link = screen.getByRole('link')
+        expect(link.getAttribute('href')).toBe('https://github.com/a/b')
+        expect(link.getAttribute('target')).toBe('_blank')
+        // short label, not the raw URL
+        expect(link.textContent).toContain('github.com')
+        expect(screen.getByText(/see/)).toBeTruthy()
+        expect(screen.getByText(/for details/)).toBeTruthy()
+    })
+
+    it('does not swallow the trailing period into the href', () => {
+        const nodes = linkifyText('go to https://a.com/x.')
+        render(<p>{nodes}</p>)
+        expect(screen.getByRole('link').getAttribute('href')).toBe('https://a.com/x')
+    })
+
+    it('renders an embedded image URL as an inline thumbnail', () => {
+        const nodes = linkifyText('pic https://cdn.x/p.png here')
+        const { container } = render(<p>{nodes}</p>)
+        const img = container.querySelector('img')
+        expect(img).toBeTruthy()
+        expect(img!.getAttribute('src')).toBe('https://cdn.x/p.png')
+    })
+
+    it('honors a markdown link label', () => {
+        const nodes = linkifyText('[the issue](https://github.com/a/b/issues/1)')
+        render(<p>{nodes}</p>)
+        const link = screen.getByRole('link')
+        expect(link.getAttribute('href')).toBe('https://github.com/a/b/issues/1')
+        expect(link.textContent).toContain('the issue')
+    })
+})
+
+describe('primitives render', () => {
+    it('UrlChip opens in a new tab with the full URL in the title', () => {
+        render(<UrlChip url="https://github.com/asteby/x/issues/9" />)
+        const link = screen.getByRole('link')
+        expect(link.getAttribute('href')).toBe('https://github.com/asteby/x/issues/9')
+        expect(link.getAttribute('title')).toBe('https://github.com/asteby/x/issues/9')
+        expect(link.getAttribute('rel')).toBe('noopener noreferrer')
+        expect(link.textContent).toContain('github.com')
+    })
+
+    it('FileChip shows the file name', () => {
+        render(<FileChip url="https://x/y/quarterly-report.pdf" />)
+        expect(screen.getByText('quarterly-report.pdf')).toBeTruthy()
+    })
+
+    it('ImageThumbnail falls back to a link chip on load error', () => {
+        const { container } = render(
+            <ImageThumbnail url="https://cdn.x/broken.png" />
+        )
+        const img = container.querySelector('img') as HTMLImageElement
+        expect(img).toBeTruthy()
+        // simulate a broken image (React synthetic onError)
+        fireEvent.error(img)
+        // after error, a link chip is rendered instead
+        expect(screen.queryByRole('link')).toBeTruthy()
+    })
+
+    it('MediaValue dispatches by kind', () => {
+        const { rerender, container } = render(
+            <MediaValue url="https://cdn.x/a.png" />
+        )
+        expect(container.querySelector('img')).toBeTruthy()
+
+        rerender(<MediaValue url="https://x/a.pdf" />)
+        expect(screen.getByText('a.pdf')).toBeTruthy()
+
+        rerender(<MediaValue url="https://github.com/a/b" />)
+        expect(screen.getByRole('link').textContent).toContain('github.com')
+    })
+
+    it('RichText linkifies a body while preserving text', () => {
+        render(
+            <RichText text={'Fixes the bug. Ref https://github.com/a/b/pull/3'} />
+        )
+        expect(screen.getByText(/Fixes the bug/)).toBeTruthy()
+        expect(screen.getByRole('link').getAttribute('href')).toBe('https://github.com/a/b/pull/3')
+    })
+})

package/src/dialogs/dynamic-record.tsx

@@ -62,6 +62,7 @@ import {
     useIsDarkTheme,
     type DisplayOption,
 } from '../display-value'
+import { MediaValue, RichText } from '../rich-url'
 import { generateBadgeStyles } from '@asteby/metacore-ui/lib'
 import { CollectionCell, type ItemField } from '../collection-cell'
 import type { ActionFieldDef, RelationMeta } from '../types'
@@ -1120,18 +1121,20 @@ export function ViewValue({
     // carrying `cellStyle:'url'` (e.g. `github_url`) renders as a clickable
     // external link, opening in a new tab, truncated.
     if ((renderAs === 'url' || renderAs === 'link') && value) {
-        const urlStr = String(value)
-        const href = /^https?:\/\//i.test(urlStr) ? urlStr : `https://${urlStr}`
+        // Shared media renderer (same as the table cell): an image URL shows a
+        // larger inline thumbnail, a file a chip, else a compact link chip with
+        // a smart label — never the raw 120-char URL.
         return (
-            <a
-                href={href}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
-            >
-                <ExternalLink className="h-3.5 w-3.5 shrink-0" />
-                <span className="truncate max-w-[360px]">{urlStr}</span>
-            </a>
+            <div className="py-1">
+                <MediaValue
+                    url={String(value)}
+                    getImageUrl={getImageUrl}
+                    label={field.styleConfig?.label as string | undefined}
+                    icon={field.styleConfig?.icon as string | undefined}
+                    thumbHeight={200}
+                    maxLabelWidth={360}
+                />
+            </div>
         )
     }
 
@@ -1240,16 +1243,32 @@ export function ViewValue({
     }
 
     const display = formatDisplayValue(value, field)
+    // Free text may embed URLs (a github body, notes, a long-text field). Turn
+    // them into rich chips / inline thumbnails with the shared linkifier instead
+    // of showing raw URLs — the rest of the text is preserved verbatim.
+    const hasUrl = display !== '—' && /(https?:\/\/|www\.)\S/i.test(display)
 
-    if (field.type === 'textarea') {
+    if (field.type === 'textarea' || renderAs === 'textarea' || renderAs === 'long-text') {
         return (
-            <p className="text-sm whitespace-pre-wrap rounded-md bg-muted/40 p-3 min-h-[60px]">
-                {display}
+            <p className="text-sm whitespace-pre-wrap rounded-md bg-muted/40 p-3 min-h-[60px] [&_img]:my-1">
+                {hasUrl ? (
+                    <RichText text={display} getImageUrl={getImageUrl} imageHeight={200} />
+                ) : (
+                    display
+                )}
             </p>
         )
     }
 
-    return <p className="text-sm py-1">{display}</p>
+    return (
+        <p className="text-sm py-1">
+            {hasUrl ? (
+                <RichText text={display} getImageUrl={getImageUrl} imageHeight={160} />
+            ) : (
+                display
+            )}
+        </p>
+    )
 }
 
 // IconNameViewValue — read view for a column whose value is a lucide icon name

package/src/dynamic-columns.tsx

@@ -48,6 +48,7 @@ import {
     statusColorFor,
     useIsDarkTheme,
 } from './display-value'
+import { MediaValue } from './rich-url'
 import { OptionsContext } from './options-context'
 import { DynamicIcon, isLucideIconName } from './dynamic-icon'
 import { CollectionCell } from './collection-cell'
@@ -843,33 +844,24 @@ export function makeDefaultGetDynamicColumns(
                                 : value
                             if (!rawUrl) return <EmptyCell />
                             const urlStr = String(rawUrl)
-                            const href = /^https?:\/\//i.test(urlStr) ? urlStr : `https://${urlStr}`
-                            let label: string
-                            if (labelField) {
-                                label = String(getNestedValue(row.original, labelField) ?? href)
-                            } else {
-                                try {
-                                    label = new URL(href).hostname
-                                } catch {
-                                    label = urlStr
-                                }
-                            }
-                            const isExternal = !/^https?:\/\/(localhost|127\.)/i.test(href)
-                            const newTab =
-                                styleCfg(col, 'new_tab', 'newTab') === true || isExternal
-                            const iconName = styleCfg(col, 'icon') || 'ExternalLink'
+                            // Explicit label from a `label_field` wins; otherwise
+                            // the shared primitive derives a smart label (hostname
+                            // / file name). Images render as a small (~h-8) inline
+                            // thumbnail, files as a chip, else a link chip. Same
+                            // renderer as the detail dialog.
+                            const label = labelField
+                                ? String(getNestedValue(row.original, labelField) ?? '')
+                                : undefined
+                            const iconName = styleCfg(col, 'icon')
                             return (
-                                <a
-                                    href={href}
-                                    {...(newTab
-                                        ? { target: '_blank', rel: 'noopener noreferrer' }
-                                        : {})}
-                                    className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
-                                    onClick={(e) => e.stopPropagation()}
-                                >
-                                    <DynamicIcon name={iconName} className="h-3.5 w-3.5 shrink-0" />
-                                    <span className="truncate max-w-[260px]">{label}</span>
-                                </a>
+                                <MediaValue
+                                    url={urlStr}
+                                    getImageUrl={getImageUrl}
+                                    label={label || undefined}
+                                    icon={iconName || undefined}
+                                    thumbHeight={32}
+                                    maxLabelWidth={260}
+                                />
                             )
                         }
 

package/src/index.ts

@@ -129,6 +129,23 @@ export {
     type DynamicColumnsHelpers,
 } from './dynamic-columns'
 export { humanizeToken } from './dynamic-columns-helpers'
+export {
+    UrlChip,
+    FileChip,
+    ImageThumbnail,
+    MediaValue,
+    RichText,
+    linkifyText,
+    classifyUrl,
+    isImageUrl,
+    isFileUrl,
+    ensureHref,
+    smartUrlLabel,
+    fileNameFromUrl,
+    splitTrailingPunct,
+    type UrlKind,
+    type LinkifyOptions,
+} from './rich-url'
 export {
     CollectionCell,
     formatScalar,

package/src/rich-url.tsx

@@ -0,0 +1,359 @@
+/**
+ * Rich URL & media rendering primitives.
+ *
+ * A URL is never shown raw. Depending on what it points at we render:
+ *   - an IMAGE (jpg/png/gif/webp/… or a `link.asteby.com/storage/media/` path)
+ *     → an inline clickable THUMBNAIL that opens the full image in a new tab,
+ *   - a FILE (pdf/zip/docx/…) → a chip with a file icon and the file name,
+ *   - anything else → a compact link CHIP: an external-link glyph plus a short
+ *     smart label (hostname, e.g. "github.com", or the last path segment for a
+ *     file-like URL), with the full URL in a native tooltip.
+ *
+ * These live here (not inline in the table/dialog) so the dynamic TABLE cell
+ * (`dynamic-columns.tsx`) and the read-only DETAIL DIALOG (`dynamic-record.tsx`)
+ * share the EXACT same rendering. Ecosystem rule: shared primitives, zero copy.
+ *
+ * No external requests are made to render a link (no favicon service — CSP /
+ * privacy): the icon is a local lucide glyph.
+ */
+import React from 'react'
+import { cn } from '@asteby/metacore-ui/lib'
+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
+
+/**
+ * Storage paths that serve images without a file extension (the link.asteby.com
+ * media CDN hands back opaque ids). Treated as images so uploaded photos still
+ * thumbnail.
+ */
+const MEDIA_PATH_RE = /\/storage\/media\//i
+
+/** Non-image file extensions we render as a download-ish file chip. */
+const FILE_EXT_RE =
+    /\.(pdf|zip|rar|7z|tar|t?gz|docx?|xlsx?|pptx?|csv|txt|json|xml|md|rtf|odt|mp4|mov|avi|mkv|webm|mp3|wav|ogg|flac|apk|dmg|exe|pkg)(?:[?#].*)?$/i
+
+export type UrlKind = 'image' | 'file' | 'link'
+
+/** `true` when the string looks like an image URL/path. */
+export function isImageUrl(url: string): boolean {
+    return IMAGE_EXT_RE.test(url) || MEDIA_PATH_RE.test(url)
+}
+
+/** `true` when the string looks like a non-image downloadable file. */
+export function isFileUrl(url: string): boolean {
+    return FILE_EXT_RE.test(url)
+}
+
+/** Classify a URL so the right primitive (thumbnail / file chip / link) renders. */
+export function classifyUrl(url: string): UrlKind {
+    if (isImageUrl(url)) return 'image'
+    if (isFileUrl(url)) return 'file'
+    return 'link'
+}
+
+/** Ensure a URL is absolute so `<a href>` and `new URL()` behave. */
+export function ensureHref(url: string): string {
+    return /^(https?:)?\/\//i.test(url) || /^(mailto|tel):/i.test(url)
+        ? url
+        : `https://${url}`
+}
+
+/**
+ * A short, human label for a URL. For a file-like URL (last segment carries an
+ * extension) the file name wins ("report.pdf"); otherwise the bare hostname
+ * ("github.com"), so a 120-char issue URL never shows raw. Falls back to the
+ * input when it can't be parsed.
+ */
+export function smartUrlLabel(url: string): string {
+    try {
+        const u = new URL(ensureHref(url))
+        const segs = u.pathname.split('/').filter(Boolean)
+        const last = segs[segs.length - 1]
+        if (last && /\.[a-z0-9]{1,8}$/i.test(last)) {
+            return decodeURIComponent(last)
+        }
+        return u.hostname.replace(/^www\./i, '')
+    } catch {
+        return url
+    }
+}
+
+/** Last path segment (decoded) — the file name for a file/image URL. */
+export function fileNameFromUrl(url: string): string {
+    try {
+        const u = new URL(ensureHref(url))
+        const segs = u.pathname.split('/').filter(Boolean)
+        return decodeURIComponent(segs[segs.length - 1] || u.hostname)
+    } catch {
+        return url.split(/[?#]/)[0].split('/').pop() || url
+    }
+}
+
+/** Stops row-click / dialog-close when a link inside them is clicked. */
+function stop(e: React.MouseEvent) {
+    e.stopPropagation()
+}
+
+/**
+ * Compact link chip: external-link glyph + smart label, full URL in the
+ * tooltip, opens in a new tab. The canonical render for a plain (non-media)
+ * URL, matching the table's `url`/`link` cell.
+ */
+export const UrlChip: React.FC<{
+    url: string
+    label?: string
+    icon?: string
+    /** Smaller label cap for a table/kanban cell. */
+    maxLabelWidth?: number
+    className?: string
+}> = ({ url, label, icon, maxLabelWidth = 260, className }) => {
+    const href = ensureHref(url)
+    const text = label || smartUrlLabel(url)
+    return (
+        <a
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={url}
+            onClick={stop}
+            className={cn(
+                'inline-flex max-w-full items-center gap-1.5 align-middle text-sm font-medium text-primary hover:underline',
+                className
+            )}
+        >
+            <DynamicIcon name={icon || 'ExternalLink'} className="h-3.5 w-3.5 shrink-0" />
+            <span className="truncate" style={{ maxWidth: maxLabelWidth }}>
+                {text}
+            </span>
+        </a>
+    )
+}
+
+/**
+ * Chip for a downloadable non-image file: file-text glyph + the file name,
+ * opens the file in a new tab.
+ */
+export const FileChip: React.FC<{
+    url: string
+    maxLabelWidth?: number
+    className?: string
+}> = ({ url, maxLabelWidth = 240, className }) => {
+    const href = ensureHref(url)
+    return (
+        <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
+            )}
+        >
+            <DynamicIcon name="FileText" className="h-3.5 w-3.5 shrink-0 opacity-70" />
+            <span className="truncate" style={{ maxWidth: maxLabelWidth }}>
+                {fileNameFromUrl(url)}
+            </span>
+        </a>
+    )
+}
+
+/**
+ * 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.
+ */
+export const ImageThumbnail: React.FC<{
+    url: string
+    getImageUrl?: (path: string) => string
+    /** Max rendered height in px. */
+    maxHeight?: number
+    className?: string
+}> = ({ url, getImageUrl, maxHeight = 160, className }) => {
+    const [failed, setFailed] = React.useState(false)
+    const href = ensureHref(url)
+    // 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
+    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>
+    )
+}
+
+/**
+ * One URL value → the right primitive (thumbnail / file chip / link chip).
+ * Single entry point used by both the table cell and the detail dialog so a URL
+ * renders identically everywhere.
+ */
+export const MediaValue: React.FC<{
+    url: string
+    getImageUrl?: (path: string) => string
+    /** Explicit label for the link chip (from a `label_field`). */
+    label?: string
+    /** Explicit icon for the link chip. */
+    icon?: string
+    /** Thumbnail max height (small in a cell, larger in the dialog). */
+    thumbHeight?: number
+    /** Link/file label truncation cap. */
+    maxLabelWidth?: number
+    className?: string
+}> = ({ url, getImageUrl, label, icon, thumbHeight, maxLabelWidth, className }) => {
+    switch (classifyUrl(url)) {
+        case 'image':
+            return (
+                <ImageThumbnail
+                    url={url}
+                    getImageUrl={getImageUrl}
+                    maxHeight={thumbHeight}
+                    className={className}
+                />
+            )
+        case 'file':
+            return <FileChip url={url} maxLabelWidth={maxLabelWidth} className={className} />
+        default:
+            return (
+                <UrlChip
+                    url={url}
+                    label={label}
+                    icon={icon}
+                    maxLabelWidth={maxLabelWidth}
+                    className={className}
+                />
+            )
+    }
+}
+
+// URL / markdown-link matcher used to linkify free text. Captures either a
+// markdown `[label](url)` or a bare http(s)/www URL. `[^\s<]+` is greedy on
+// purpose — trailing punctuation is trimmed afterwards by `splitTrailingPunct`.
+const LINK_IN_TEXT_RE =
+    /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)|(https?:\/\/[^\s<]+|www\.[^\s<]+)/gi
+
+/**
+ * Peel trailing punctuation a URL shouldn't swallow (sentence period, closing
+ * bracket, quote). A closing paren is kept only when the URL itself opened one
+ * (Wikipedia-style `(…)` paths), so `(see https://x.com/a)` links `https://x.com/a`
+ * but `https://en.wikipedia.org/wiki/Foo_(bar)` keeps its paren.
+ */
+export function splitTrailingPunct(match: string): [string, string] {
+    const m = match.match(/[).,;:!?\]}'"»›]+$/)
+    if (!m) return [match, '']
+    let trail = m[0]
+    let core = match.slice(0, match.length - trail.length)
+    if (trail.startsWith(')')) {
+        const opens = (core.match(/\(/g) || []).length
+        const closes = (core.match(/\)/g) || []).length
+        if (opens > closes) {
+            core += ')'
+            trail = trail.slice(1)
+        }
+    }
+    return [core, trail]
+}
+
+export interface LinkifyOptions {
+    getImageUrl?: (path: string) => string
+    /** Max height for an inline image found in the text. */
+    imageHeight?: number
+}
+
+/**
+ * Turn free text into React nodes, replacing every URL (bare or markdown
+ * `[label](url)`) with the matching rich primitive: an inline thumbnail for an
+ * image URL, a file chip for a file, otherwise a link chip. Plain text between
+ * matches is preserved verbatim (caller keeps `whitespace-pre-wrap`).
+ */
+export function linkifyText(
+    text: string,
+    opts: LinkifyOptions = {}
+): React.ReactNode[] {
+    if (!text) return []
+    const nodes: React.ReactNode[] = []
+    const re = new RegExp(LINK_IN_TEXT_RE.source, 'gi')
+    let lastIndex = 0
+    let key = 0
+    let m: RegExpExecArray | null
+    while ((m = re.exec(text)) !== null) {
+        const [full, mdLabel, mdUrl, bareUrl] = m
+        const start = m.index
+        if (start > lastIndex) nodes.push(text.slice(lastIndex, start))
+
+        if (mdUrl) {
+            // Markdown link: honor the author's label, keep media inline.
+            const kind = classifyUrl(mdUrl)
+            if (kind === 'image') {
+                nodes.push(
+                    <ImageThumbnail
+                        key={key}
+                        url={mdUrl}
+                        getImageUrl={opts.getImageUrl}
+                        maxHeight={opts.imageHeight ?? 200}
+                    />
+                )
+            } else if (kind === 'file') {
+                nodes.push(<FileChip key={key} url={mdUrl} />)
+            } else {
+                nodes.push(<UrlChip key={key} url={mdUrl} label={mdLabel} />)
+            }
+            lastIndex = start + full.length
+        } else {
+            const [core, trail] = splitTrailingPunct(bareUrl)
+            const kind = classifyUrl(core)
+            if (kind === 'image') {
+                nodes.push(
+                    <ImageThumbnail
+                        key={key}
+                        url={core}
+                        getImageUrl={opts.getImageUrl}
+                        maxHeight={opts.imageHeight ?? 200}
+                    />
+                )
+            } else if (kind === 'file') {
+                nodes.push(<FileChip key={key} url={core} />)
+            } else {
+                nodes.push(<UrlChip key={key} url={core} />)
+            }
+            if (trail) nodes.push(trail)
+            lastIndex = start + bareUrl.length
+        }
+        key++
+    }
+    if (lastIndex < text.length) nodes.push(text.slice(lastIndex))
+    return nodes
+}
+
+/**
+ * Linkified free text. Renders the raw string with every URL turned into a rich
+ * chip/thumbnail — the read view for a long-text / textarea / body field.
+ */
+export const RichText: React.FC<{
+    text: string
+    getImageUrl?: (path: string) => string
+    imageHeight?: number
+}> = ({ text, getImageUrl, imageHeight }) => (
+    <>{linkifyText(text, { getImageUrl, imageHeight })}</>
+)