@asteby/metacore-runtime-react 23.3.0 → 23.5.0

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.5.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/__tests__/dynamic-kanban-infinite-scroll.test.tsx

@@ -131,6 +131,15 @@ function stageCalls(api: ApiClient, stage: string) {
         (c: any[]) => c[1]?.params?.f_stage === stage,
     )
 }
+// A lane's real page-load (per_page 25), as opposed to the eager per_page=1
+// total probe fired on the initial board load.
+function stagePageCalls(api: ApiClient, stage: string) {
+    return stageCalls(api, stage).filter((c: any[]) => c[1]?.params?.per_page === 25)
+}
+// The eager total probe (per_page 1) for a stage.
+function stageTotalCalls(api: ApiClient, stage: string) {
+    return stageCalls(api, stage).filter((c: any[]) => c[1]?.params?.per_page === 1)
+}
 function globalDataCalls(api: ApiClient) {
     return (api.get as any).mock.calls.filter(
         (c: any[]) =>
@@ -171,15 +180,20 @@ describe('DynamicKanban per-lane infinite scroll', () => {
         )
         // Initial board page painted its single backlog card.
         expect(await screen.findByText('Backlog One')).toBeTruthy()
-        expect(stageCalls(api, 'backlog')).toHaveLength(0)
+        // No real page-load fired yet — only the eager per_page=1 total probe.
+        expect(stagePageCalls(api, 'backlog')).toHaveLength(0)
+        // The eager total lands, so the header shows the real stage count (1/5)
+        // BEFORE the user scrolls.
+        await waitFor(() => expect(stageTotalCalls(api, 'backlog').length).toBeGreaterThan(0))
+        expect(await screen.findByText('1/5')).toBeTruthy()
 
         // Sentinels enter view → each declared lane tops up its OWN stage.
         expect(observers.length).toBeGreaterThan(0)
         observers.forEach((o) => o.fire(true))
 
         // The backlog top-up ran with the right scoped params...
-        await waitFor(() => expect(stageCalls(api, 'backlog').length).toBeGreaterThan(0))
-        const call = stageCalls(api, 'backlog')[0]
+        await waitFor(() => expect(stagePageCalls(api, 'backlog').length).toBeGreaterThan(0))
+        const call = stagePageCalls(api, 'backlog')[0]
         expect(call[1].params).toMatchObject({ f_stage: 'backlog', page: 1, per_page: 25 })
 
         // ...its rows were appended and the header shows count/serverTotal (3/5).

package/src/__tests__/dynamic-kanban-lane-totals.test.tsx

@@ -0,0 +1,161 @@
+// @vitest-environment happy-dom
+//
+// DynamicKanban eager lane totals (#521 follow-up): every lane header shows the
+// REAL stage count on first render — before the user scrolls — by firing one
+// lightweight `per_page=1` probe per declared stage after the initial board
+// page. Covers:
+//   1. formatLaneCount — the pure `N` vs `N/M` header formatter.
+//   2. Totals visible without scrolling (partial `N/M` and complete `N`).
+//   3. Totals refetch (scoped by the new filters) when the filters change.
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => () => {},
+}))
+const I18N = { t: (_k: string, o?: { defaultValue?: string }) => o?.defaultValue ?? _k, i18n: { language: 'es' } }
+vi.mock('react-i18next', () => ({ useTranslation: () => I18N }))
+
+import { formatLaneCount, DynamicKanban } from '../dynamic-kanban'
+import { ApiProvider, type ApiClient } from '../api-context'
+import { useMetadataCache } from '../metadata-cache'
+import type { TableMetadata } from '../types'
+
+afterEach(cleanup)
+
+// ---------------------------------------------------------------------------
+// 1. Pure formatter
+// ---------------------------------------------------------------------------
+
+describe('formatLaneCount', () => {
+    it('shows just the total when everything is loaded (shown === total)', () => {
+        expect(formatLaneCount(41, 41, 41, false)).toBe('41')
+    })
+    it('shows shown/total when the lane is partial', () => {
+        expect(formatLaneCount(22, 22, 41, false)).toBe('22/41')
+    })
+    it('shows just the loaded count when the total is unknown', () => {
+        expect(formatLaneCount(7, 7, null, false)).toBe('7')
+    })
+    it('shows shown/loaded when a lane filter is active', () => {
+        expect(formatLaneCount(3, 22, 41, true)).toBe('3/22')
+    })
+    it('collapses to the total once shown catches up (never N/N)', () => {
+        expect(formatLaneCount(5, 5, 5, false)).toBe('5')
+    })
+})
+
+// ---------------------------------------------------------------------------
+// 2 + 3. Component: eager totals on load and on filter change
+// ---------------------------------------------------------------------------
+
+const STAGES = [
+    { key: 'backlog', label: 'Backlog', color: 'slate', order: 0 },
+    { key: 'done', label: 'Done', color: 'green', order: 1 },
+]
+
+function meta(over: Partial<TableMetadata> = {}): TableMetadata {
+    return {
+        title: 'Issues',
+        endpoint: '/data/issue',
+        view_type: 'kanban',
+        group_by: 'stage',
+        stages: STAGES,
+        columns: [
+            { key: 'title', label: 'Title', type: 'text', sortable: true, filterable: false, searchable: true },
+            { key: 'stage', label: 'Stage', type: 'status', sortable: false, filterable: true, options: STAGES.map((s) => ({ value: s.key, label: s.label })) },
+        ],
+        actions: [],
+        perPageOptions: [50],
+        defaultPerPage: 50,
+        searchPlaceholder: 'Buscar...',
+        enableCRUDActions: false,
+        hasActions: false,
+        ...over,
+    }
+}
+
+// Initial global page: one backlog card + two done cards. The eager per_page=1
+// probes report a backlog total of 5 (partial) and a done total of 2 (complete
+// — the two done cards are already loaded).
+function fakeApi(): ApiClient {
+    const ok = (data: unknown, m?: Record<string, unknown>) => ({
+        data: { success: true, data, ...(m ? { meta: m } : {}) },
+    })
+    return {
+        get: vi.fn(async (url: string, cfg?: any) => {
+            if (url.startsWith('/metadata/table/')) return ok(meta())
+            const stage = cfg?.params?.f_stage
+            if (stage === 'backlog') return ok([{ id: 1, title: 'Backlog One', stage: 'backlog' }], { total: 5 })
+            if (stage === 'done') return ok([{ id: 2, title: 'Done Two', stage: 'done' }], { total: 2 })
+            // initial global board page
+            return ok([
+                { id: 1, title: 'Backlog One', stage: 'backlog' },
+                { id: 2, title: 'Done Two', stage: 'done' },
+                { id: 3, title: 'Done Three', stage: 'done' },
+            ])
+        }),
+        post: vi.fn(async () => ok(null)),
+        put: vi.fn(async () => ok(null)),
+        delete: vi.fn(async () => ok(null)),
+    }
+}
+
+function totalProbeCalls(api: ApiClient) {
+    return (api.get as any).mock.calls.filter(
+        (c: any[]) => c[1]?.params?.f_stage !== undefined && c[1]?.params?.per_page === 1,
+    )
+}
+
+describe('DynamicKanban eager lane totals', () => {
+    beforeEach(() => {
+        // No IntersectionObserver: nothing scrolls, so any total shown is proof
+        // it arrived from the eager probe, not from a lane top-up.
+        ;(globalThis as any).IntersectionObserver = class {
+            observe() {}
+            disconnect() {}
+        }
+    })
+    afterEach(() => {
+        delete (globalThis as any).IntersectionObserver
+    })
+
+    it('shows the real stage total on first render without scrolling', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi()
+        render(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        await screen.findByText('Backlog One')
+        // Backlog: 1 loaded of 5 → partial. Done: 2 loaded of 2 → collapses to "2".
+        expect(await screen.findByText('1/5')).toBeTruthy()
+        expect(await screen.findByText('2')).toBeTruthy()
+        // One probe per declared stage.
+        await waitFor(() => expect(totalProbeCalls(api)).toHaveLength(2))
+    })
+
+    it('refetches the totals (scoped by the new filters) when the filters change', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const api = fakeApi()
+        const { rerender } = render(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        await screen.findByText('1/5')
+        await waitFor(() => expect(totalProbeCalls(api)).toHaveLength(2))
+
+        rerender(
+            <ApiProvider client={api}>
+                <DynamicKanban model="issue" defaultFilters={{ priority: 'high' }} />
+            </ApiProvider>,
+        )
+
+        // The filter change re-fires the eager probes (now carrying the filter).
+        await waitFor(() => expect(totalProbeCalls(api).length).toBeGreaterThan(2))
+        const probe = totalProbeCalls(api).at(-1)!
+        expect(probe[1].params).toMatchObject({ f_priority: 'high', per_page: 1 })
+    })
+})

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