@asteby/metacore-runtime-react 37.5.1 → 37.6.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @asteby/metacore-runtime-react
 
+## 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/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": "37.6.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

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/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} />
+        </>
     )
 }