@growth-labs/cms 0.1.0

package/dist/ui/screens/LibraryScreen.js

@@ -0,0 +1,580 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// src/ui/screens/LibraryScreen.tsx — content library: list/board/filters/bulk/import.
+//
+// Status tabs (counts from GET /content/counts), type segment, search box,
+// list table + BoardView (kanban columns), selection/bulk bar (POST /content/bulk),
+// Import button (parse flow), New Content (→ openDoc({id:null, contentType})).
+//
+// Ported from the library.jsx design surface.  All data logic lives in the
+// pure helpers in library-data.ts; this file is the React shell.
+//
+// NOTE: the per-row Share action is a STUB (P6 feature) — it renders as an
+// icon button that is currently a no-op.
+import { useCallback, useEffect, useReducer, useRef, useState } from 'react';
+import { buildSharePrefill, ShareModal } from '../components/ShareModal.js';
+import { Icon } from '../icons.js';
+import { useWorkspace } from '../workspace-context.js';
+import { deriveStatusCounts, filterRows, groupByStatus, } from './library-data.js';
+// ---------------------------------------------------------------------------
+// Status tab metadata
+// ---------------------------------------------------------------------------
+const STATUS_TABS = [
+    { key: 'all', label: 'All' },
+    { key: 'draft', label: 'Draft' },
+    { key: 'review', label: 'Review' },
+    { key: 'scheduled', label: 'Scheduled' },
+    { key: 'published', label: 'Published' },
+    { key: 'processing', label: 'Processing' },
+];
+const TYPE_OPTIONS = [
+    { value: '', label: 'All types' },
+    { value: 'article', label: 'Article' },
+    { value: 'video', label: 'Video' },
+    { value: 'podcast', label: 'Podcast' },
+    { value: 'newsletter', label: 'Newsletter' },
+];
+const CONTENT_TYPE_ICONS = {
+    article: 'doc',
+    video: 'video',
+    podcast: 'mic',
+    newsletter: 'mail',
+};
+function initLibrary() {
+    return {
+        rows: [],
+        counts: { all: 0, draft: 0, review: 0, scheduled: 0, published: 0, processing: 0 },
+        loading: true,
+        error: null,
+        statusFilter: 'all',
+        typeFilter: '',
+        q: '',
+        view: 'list',
+        selected: new Set(),
+        importOpen: false,
+        shareRow: null,
+        cursor: null,
+        hasMore: false,
+    };
+}
+function libraryReducer(state, action) {
+    switch (action.type) {
+        case 'fetch-start':
+            return { ...state, loading: true, error: null };
+        case 'fetch-ok':
+            return {
+                ...state,
+                loading: false,
+                rows: action.rows,
+                counts: action.counts,
+                cursor: action.cursor,
+                hasMore: action.cursor !== null,
+            };
+        case 'fetch-error':
+            return { ...state, loading: false, error: action.error };
+        case 'set-status-filter':
+            return { ...state, statusFilter: action.status, selected: new Set() };
+        case 'set-type-filter':
+            return { ...state, typeFilter: action.contentType, selected: new Set() };
+        case 'set-q':
+            return { ...state, q: action.q };
+        case 'set-view':
+            return { ...state, view: action.view, selected: new Set() };
+        case 'toggle-select': {
+            const next = new Set(state.selected);
+            if (next.has(action.id)) {
+                next.delete(action.id);
+            }
+            else {
+                next.add(action.id);
+            }
+            return { ...state, selected: next };
+        }
+        case 'select-all': {
+            const visible = getVisibleRows(state);
+            return { ...state, selected: new Set(visible.map((r) => r.id)) };
+        }
+        case 'clear-selection':
+            return { ...state, selected: new Set() };
+        case 'toggle-import':
+            return { ...state, importOpen: !state.importOpen };
+        case 'close-import':
+            return { ...state, importOpen: false };
+        case 'open-share':
+            return { ...state, shareRow: action.row };
+        case 'close-share':
+            return { ...state, shareRow: null };
+        case 'bulk-done': {
+            const removed = action.removedIds ?? [];
+            const next = state.rows.filter((r) => !removed.includes(r.id));
+            return {
+                ...state,
+                rows: next,
+                counts: deriveStatusCounts(next),
+                selected: new Set(),
+            };
+        }
+        default:
+            return state;
+    }
+}
+/** Returns the currently visible rows after applying client-side filter. */
+function getVisibleRows(state) {
+    return filterRows(state.rows, {
+        status: state.statusFilter !== 'all' && state.statusFilter !== 'processing'
+            ? state.statusFilter
+            : undefined,
+        type: state.typeFilter !== '' ? state.typeFilter : undefined,
+        q: state.q || undefined,
+    });
+}
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+export function LibraryScreen({ openDoc }) {
+    const { state: ws } = useWorkspace();
+    const [lib, dispatch] = useReducer(libraryReducer, undefined, initLibrary);
+    const searchRef = useRef(null);
+    // Build the API base URL from the workspace active id
+    const baseUrl = `/admin/api`;
+    const fetchContent = useCallback(async () => {
+        dispatch({ type: 'fetch-start' });
+        try {
+            // Fetch list + counts in parallel
+            const params = new URLSearchParams({ limit: '50' });
+            if (lib.statusFilter !== 'all' && lib.statusFilter !== 'processing') {
+                params.set('status', lib.statusFilter);
+            }
+            if (lib.typeFilter)
+                params.set('types', lib.typeFilter);
+            if (lib.q)
+                params.set('q', lib.q);
+            const [listRes, countsRes] = await Promise.all([
+                fetch(`${baseUrl}/content?${params.toString()}`),
+                fetch(`${baseUrl}/content/counts`),
+            ]);
+            if (!listRes.ok || !countsRes.ok) {
+                const msg = !listRes.ok
+                    ? `List error ${listRes.status}`
+                    : `Counts error ${countsRes.status}`;
+                dispatch({ type: 'fetch-error', error: msg });
+                return;
+            }
+            const listJson = (await listRes.json());
+            const countsJson = (await countsRes.json());
+            dispatch({
+                type: 'fetch-ok',
+                rows: listJson.items ?? [],
+                counts: countsJson.counts ?? deriveStatusCounts(listJson.items ?? []),
+                cursor: listJson.nextCursor ?? null,
+            });
+        }
+        catch (err) {
+            dispatch({ type: 'fetch-error', error: String(err) });
+        }
+    }, [lib.statusFilter, lib.typeFilter, lib.q]); // fetchContent identity changes when filters change → useEffect re-runs
+    // Initial fetch + refetch when filters change
+    useEffect(() => {
+        void fetchContent();
+    }, [fetchContent]);
+    const visible = getVisibleRows(lib);
+    const allVisibleSelected = visible.length > 0 && visible.every((r) => lib.selected.has(r.id));
+    return (_jsxs("div", { className: "page page-wide library-screen fade-in", style: { maxWidth: 1340 }, children: [_jsxs("div", { className: "page-head", children: [_jsxs("div", { children: [_jsx("h1", { className: "page-title", children: "Content" }), _jsxs("div", { className: "page-sub", children: [lib.counts.all, " items across articles, video, podcasts and newsletters."] })] }), _jsxs("div", { style: { display: 'flex', gap: 8 }, children: [_jsxs("button", { type: "button", className: "btn", onClick: () => dispatch({ type: 'toggle-import' }), children: [_jsx(Icon, { name: "upload", size: 16 }), _jsx("span", { children: "Import" })] }), _jsx(NewContentMenu, { openDoc: openDoc })] })] }), _jsx("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 4,
+                    borderBottom: '1px solid var(--border)',
+                    marginBottom: 16,
+                }, children: STATUS_TABS.map((tab) => {
+                    const active = lib.statusFilter === tab.key;
+                    const count = tab.key === 'all'
+                        ? lib.counts.all
+                        : tab.key === 'processing'
+                            ? lib.counts.processing
+                            : lib.counts[tab.key];
+                    return (_jsxs("button", { type: "button", onClick: () => dispatch({
+                            type: 'set-status-filter',
+                            status: tab.key,
+                        }), style: {
+                            ...tabStyle,
+                            color: active ? 'var(--ink)' : 'var(--ink-muted)',
+                            borderBottom: active ? '2px solid var(--accent)' : '2px solid transparent',
+                        }, children: [tab.label, _jsx("span", { className: "tnum", style: {
+                                    fontSize: 11,
+                                    color: 'var(--ink-faint)',
+                                    background: 'var(--hover)',
+                                    padding: '1px 7px',
+                                    borderRadius: 12,
+                                }, children: count })] }, tab.key));
+                }) }), _jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 10,
+                    marginBottom: 14,
+                    flexWrap: 'wrap',
+                }, children: [_jsxs("div", { className: "search", style: { maxWidth: 300, height: 34 }, children: [_jsx(Icon, { name: "search", size: 15 }), _jsx("input", { ref: searchRef, type: "search", placeholder: "Title or slug\u2026", value: lib.q, onChange: (e) => dispatch({ type: 'set-q', q: e.currentTarget.value }) })] }), _jsx("div", { className: "seg", children: TYPE_OPTIONS.map((o) => (_jsxs("button", { type: "button", className: lib.typeFilter === o.value ? 'on' : '', onClick: () => dispatch({ type: 'set-type-filter', contentType: o.value }), children: [o.value !== '' && (_jsx(Icon, { name: CONTENT_TYPE_ICONS[o.value], size: 14 })), o.label] }, o.value || 'all'))) }), _jsx("div", { style: { flex: 1 } }), _jsxs("div", { className: "seg", children: [_jsx("button", { type: "button", title: "List view", className: lib.view === 'list' ? 'on' : '', onClick: () => dispatch({ type: 'set-view', view: 'list' }), children: _jsx(Icon, { name: "rows", size: 15 }) }), _jsx("button", { type: "button", title: "Board view", className: lib.view === 'board' ? 'on' : '', onClick: () => dispatch({ type: 'set-view', view: 'board' }), children: _jsx(Icon, { name: "columns", size: 15 }) })] })] }), lib.selected.size > 0 && (_jsx(BulkBar, { selectedIds: Array.from(lib.selected), workspaceId: ws.activeId, onDone: (removedIds) => dispatch({ type: 'bulk-done', removedIds }), onCancel: () => dispatch({ type: 'clear-selection' }) })), lib.loading && (_jsx("div", { className: "panel panel-pad", style: { textAlign: 'center', color: 'var(--ink-muted)' }, children: "Loading\u2026" })), !lib.loading && lib.error && (_jsxs("div", { className: "panel panel-pad", style: { textAlign: 'center', color: 'var(--red)' }, children: [lib.error, _jsx("button", { type: "button", className: "btn sm", onClick: () => void fetchContent(), style: { marginLeft: 12 }, children: "Retry" })] })), !lib.loading && !lib.error && visible.length === 0 && (_jsxs("div", { className: "panel panel-pad", style: { padding: 60, textAlign: 'center', color: 'var(--ink-muted)' }, children: [_jsx(Icon, { name: "doc", size: 32, style: { opacity: 0.3, display: 'block', margin: '0 auto 12px' } }), _jsx("div", { style: { fontSize: 14 }, children: "No content found." }), lib.q && (_jsx("button", { type: "button", className: "btn sm", onClick: () => dispatch({ type: 'set-q', q: '' }), style: { marginTop: 8 }, children: "Clear search" }))] })), !lib.loading &&
+                !lib.error &&
+                visible.length > 0 &&
+                (lib.view === 'list' ? (_jsx(ListView, { rows: visible, selected: lib.selected, allSelected: allVisibleSelected, onToggleSelect: (id) => dispatch({ type: 'toggle-select', id }), onSelectAll: () => allVisibleSelected
+                        ? dispatch({ type: 'clear-selection' })
+                        : dispatch({ type: 'select-all' }), onOpen: (row) => openDoc(row.id, row.type), onShare: (row) => dispatch({ type: 'open-share', row }) })) : (_jsx(BoardView, { rows: visible, onOpen: (row) => openDoc(row.id, row.type) }))), lib.importOpen && (_jsx(ImportModal, { workspaceId: ws.activeId, onClose: () => dispatch({ type: 'close-import' }), onImported: () => {
+                    dispatch({ type: 'close-import' });
+                    void fetchContent();
+                } })), lib.shareRow && (_jsx(ShareModal, { prefill: buildSharePrefill(lib.shareRow), onClose: () => dispatch({ type: 'close-share' }) }))] }));
+}
+// ---------------------------------------------------------------------------
+// New content menu
+// ---------------------------------------------------------------------------
+function NewContentMenu({ openDoc }) {
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        function handler(e) {
+            if (ref.current && !ref.current.contains(e.target))
+                setOpen(false);
+        }
+        document.addEventListener('mousedown', handler);
+        return () => document.removeEventListener('mousedown', handler);
+    }, [open]);
+    const types = ['article', 'video', 'podcast', 'newsletter'];
+    return (_jsxs("div", { ref: ref, style: { position: 'relative' }, children: [_jsxs("button", { type: "button", className: "btn primary", onClick: () => setOpen((v) => !v), children: [_jsx(Icon, { name: "plus", size: 16 }), _jsx("span", { children: "New content" }), _jsx(Icon, { name: "chevDown", size: 13 })] }), open && (_jsx("div", { className: "panel", style: {
+                    position: 'absolute',
+                    top: 'calc(100% + 4px)',
+                    right: 0,
+                    boxShadow: 'var(--shadow-md)',
+                    minWidth: 160,
+                    zIndex: 100,
+                    overflow: 'hidden',
+                }, children: types.map((t) => (_jsxs("button", { type: "button", onClick: () => {
+                        setOpen(false);
+                        openDoc(null, t);
+                    }, style: {
+                        width: '100%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 8,
+                        padding: '9px 14px',
+                        background: 'transparent',
+                        border: 'none',
+                        cursor: 'pointer',
+                        fontSize: 13,
+                        color: 'var(--ink)',
+                        textAlign: 'left',
+                    }, children: [_jsx(Icon, { name: CONTENT_TYPE_ICONS[t], size: 15, style: { color: 'var(--ink-muted)' } }), t.charAt(0).toUpperCase() + t.slice(1)] }, t))) }))] }));
+}
+// ---------------------------------------------------------------------------
+// List view
+// ---------------------------------------------------------------------------
+function ListView({ rows, selected, allSelected, onToggleSelect, onSelectAll, onOpen, onShare, }) {
+    return (_jsx("div", { className: "panel", style: { overflow: 'hidden' }, children: _jsx("div", { style: { overflowX: 'auto' }, children: _jsxs("table", { className: "tbl", style: { minWidth: 820 }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: { paddingLeft: 16, width: 34 }, children: _jsx("input", { type: "checkbox", checked: allSelected, onChange: onSelectAll, "aria-label": "Select all" }) }), _jsx("th", { children: "Title" }), _jsx("th", { style: { width: 110 }, children: "Type" }), _jsx("th", { style: { width: 120 }, children: "Status" }), _jsx("th", { style: { width: 150 }, children: "Author" }), _jsx("th", { style: { width: 130 }, children: "Updated" }), _jsx("th", { style: { width: 60 } })] }) }), _jsx("tbody", { children: rows.map((row) => (_jsx(ListRow, { row: row, isSelected: selected.has(row.id), onSelect: () => onToggleSelect(row.id), onOpen: () => onOpen(row), onShare: () => onShare(row) }, row.id))) })] }) }) }));
+}
+function ListRow({ row, isSelected, onSelect, onOpen, onShare, }) {
+    return (_jsxs("tr", { style: isSelected ? { background: 'var(--accent-tint)' } : undefined, onClick: onOpen, children: [_jsx("td", { style: { paddingLeft: 16, width: 34 }, onClick: (e) => {
+                    e.stopPropagation();
+                    onSelect();
+                }, onKeyUp: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.stopPropagation();
+                        onSelect();
+                    }
+                }, children: _jsx("span", { style: {
+                        width: 17,
+                        height: 17,
+                        borderRadius: 4,
+                        border: '1.5px solid var(--field-border)',
+                        display: 'grid',
+                        placeItems: 'center',
+                        background: isSelected ? 'var(--accent)' : 'transparent',
+                        borderColor: isSelected ? 'var(--accent)' : 'var(--field-border)',
+                    }, children: isSelected && _jsx(Icon, { name: "check", size: 12, style: { color: '#fff' } }) }) }), _jsx("td", { style: { maxWidth: 380 }, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 11 }, children: [_jsx("div", { style: {
+                                width: 34,
+                                height: 34,
+                                borderRadius: 7,
+                                flex: 'none',
+                                display: 'grid',
+                                placeItems: 'center',
+                                background: 'var(--panel-2)',
+                                color: 'var(--ink-muted)',
+                            }, children: _jsx(Icon, { name: CONTENT_TYPE_ICONS[row.type], size: 16 }) }), _jsxs("div", { style: { minWidth: 0 }, children: [_jsxs("div", { style: {
+                                        fontWeight: 600,
+                                        color: 'var(--ink)',
+                                        whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: 7,
+                                    }, children: [row.title || '(Untitled)', row.featured && (_jsx("span", { title: "Premium", style: { color: 'var(--gold)', flex: 'none' }, children: _jsx(Icon, { name: "star", size: 13 }) }))] }), _jsxs("div", { className: "mono", style: {
+                                        fontSize: 11.5,
+                                        color: 'var(--ink-faint)',
+                                        whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                    }, children: ["/", row.slug] })] })] }) }), _jsx("td", { children: _jsxs("span", { className: "type-tag", children: [_jsx(Icon, { name: CONTENT_TYPE_ICONS[row.type], size: 14 }), ' ', row.type.charAt(0).toUpperCase() + row.type.slice(1)] }) }), _jsx("td", { children: _jsx(StatusPill, { row: row }) }), _jsx("td", { children: _jsx("span", { style: { fontSize: 12.5, color: 'var(--ink-soft)' }, children: row.authorName ?? '—' }) }), _jsx("td", { className: "tnum", style: { fontSize: 12, color: 'var(--ink-muted)' }, children: row.updatedAt ? formatDate(row.updatedAt) : '—' }), _jsx("td", { onClick: (e) => e.stopPropagation(), onKeyUp: (e) => e.stopPropagation(), children: _jsxs("div", { style: { display: 'flex', gap: 2, justifyContent: 'flex-end' }, children: [_jsx("button", { type: "button", className: "icon-btn", title: "Share", onClick: (e) => {
+                                e.stopPropagation();
+                                onShare();
+                            }, style: { width: 28, height: 28 }, children: _jsx(Icon, { name: "share", size: 14 }) }), _jsx("button", { type: "button", className: "icon-btn", title: "Open", onClick: onOpen, style: { width: 28, height: 28 }, children: _jsx(Icon, { name: "chevRight", size: 14 }) })] }) })] }));
+}
+// ---------------------------------------------------------------------------
+// Status pill
+// ---------------------------------------------------------------------------
+/** Maps a content status (or the derived 'processing' pseudo-state) to its
+ *  broadsheet `.pill` modifier class + human label. */
+const STATUS_PILL = {
+    published: { cls: 'published', label: 'Published' },
+    draft: { cls: 'draft', label: 'Draft' },
+    review: { cls: 'review', label: 'In review' },
+    scheduled: { cls: 'scheduled', label: 'Scheduled' },
+    processing: { cls: 'processing', label: 'Processing' },
+    // archived has no prototype pill state — fall back to the muted draft idiom.
+    archived: { cls: 'draft', label: 'Archived' },
+};
+function StatusPill({ row }) {
+    // `!= null` (not `!== null`) so an absent field (undefined) is treated as
+    // not-processing — otherwise every non-video row mis-renders as PROCESSING.
+    const isProcessing = row.processingState != null && !['ready', 'failed'].includes(row.processingState ?? '');
+    const { cls, label } = isProcessing ? STATUS_PILL.processing : STATUS_PILL[row.status];
+    return (_jsxs("span", { className: `pill ${cls}`, children: [_jsx("span", { className: "pdot" }), label] }));
+}
+// ---------------------------------------------------------------------------
+// Board view (kanban)
+// ---------------------------------------------------------------------------
+const BOARD_COLUMNS = [
+    { key: 'draft', label: 'Draft' },
+    { key: 'review', label: 'Review' },
+    { key: 'scheduled', label: 'Scheduled' },
+    { key: 'processing', label: 'Processing' },
+    { key: 'published', label: 'Published' },
+];
+const BOARD_PILL = {
+    draft: 'draft',
+    review: 'review',
+    scheduled: 'scheduled',
+    processing: 'processing',
+    published: 'published',
+};
+function BoardView({ rows, onOpen }) {
+    const columns = groupByStatus(rows);
+    return (_jsx("div", { style: {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(5, minmax(232px, 1fr))',
+            gap: 14,
+            overflowX: 'auto',
+            paddingBottom: 8,
+        }, children: BOARD_COLUMNS.map((col) => {
+            const colRows = columns[col.key];
+            return (_jsxs("div", { style: { minWidth: 232 }, children: [_jsxs("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 8,
+                            marginBottom: 10,
+                            padding: '0 2px',
+                        }, children: [_jsxs("span", { className: `pill ${BOARD_PILL[col.key]}`, children: [_jsx("span", { className: "pdot" }), col.label] }), _jsx("span", { className: "tnum", style: { fontSize: 12, color: 'var(--ink-faint)' }, children: colRows.length })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: [colRows.length === 0 && (_jsx("div", { style: {
+                                    padding: '16px 0',
+                                    textAlign: 'center',
+                                    fontSize: 11,
+                                    color: 'var(--ink-faint)',
+                                }, children: "Empty" })), colRows.map((row) => (_jsx(BoardCard, { row: row, onOpen: () => onOpen(row) }, row.id)))] })] }, col.key));
+        }) }));
+}
+function BoardCard({ row, onOpen }) {
+    const isProcessing = row.processingState != null && !['ready', 'failed'].includes(row.processingState ?? '');
+    return (_jsxs("button", { type: "button", className: "panel", "aria-label": `Open ${row.title ?? 'library item'}`, style: {
+            padding: 12,
+            cursor: 'pointer',
+            display: 'block',
+            width: '100%',
+            textAlign: 'left',
+            font: 'inherit',
+            color: 'inherit',
+        }, onClick: onOpen, onMouseEnter: (e) => {
+            e.currentTarget.style.borderColor = 'var(--accent-ring)';
+        }, onMouseLeave: (e) => {
+            e.currentTarget.style.borderColor = 'var(--border)';
+        }, children: [_jsxs("div", { style: {
+                    height: 78,
+                    borderRadius: 7,
+                    background: 'var(--panel-2)',
+                    marginBottom: 10,
+                    position: 'relative',
+                    display: 'grid',
+                    placeItems: 'center',
+                }, children: [_jsx(Icon, { name: CONTENT_TYPE_ICONS[row.type], size: 22, style: { color: 'var(--ink-faint)' } }), _jsx("span", { style: { position: 'absolute', top: 8, left: 8 }, children: _jsxs("span", { style: {
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                gap: 5,
+                                background: 'rgba(0,0,0,.4)',
+                                color: '#fff',
+                                padding: '3px 8px',
+                                borderRadius: 20,
+                                fontSize: 10.5,
+                                fontFamily: 'var(--mono)',
+                            }, children: [_jsx(Icon, { name: CONTENT_TYPE_ICONS[row.type], size: 12 }), ' ', row.type.charAt(0).toUpperCase() + row.type.slice(1)] }) }), isProcessing && (_jsx("span", { className: "skeleton-shimmer", title: `Processing: ${row.processingState}`, style: {
+                            position: 'absolute',
+                            bottom: 8,
+                            left: 8,
+                            right: 8,
+                            height: 4,
+                            borderRadius: 3,
+                            overflow: 'hidden',
+                        } }))] }), _jsx("div", { style: {
+                    fontSize: 13.5,
+                    fontWeight: 600,
+                    color: 'var(--ink)',
+                    lineHeight: 1.35,
+                    marginBottom: 8,
+                }, children: row.title || '(Untitled)' }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx("span", { style: { fontSize: 11.5, color: 'var(--ink-muted)' }, children: row.updatedAt ? formatDate(row.updatedAt) : (row.authorName ?? '—') }), row.featured && (_jsx("span", { style: { marginLeft: 'auto', color: 'var(--gold)' }, children: _jsx(Icon, { name: "star", size: 12 }) }))] })] }));
+}
+// ---------------------------------------------------------------------------
+// Bulk action bar
+// ---------------------------------------------------------------------------
+const BULK_OPS = [
+    { op: 'trash', label: 'Trash', icon: 'trash', danger: true },
+    { op: 'review', label: 'Move to Review', icon: 'flag', danger: false },
+];
+function BulkBar({ selectedIds, workspaceId: _workspaceId, onDone, onCancel, }) {
+    const [busy, setBusy] = useState(false);
+    async function runBulk(op) {
+        setBusy(true);
+        try {
+            const res = await fetch(`/admin/api/content/bulk`, {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ ids: selectedIds, op }),
+            });
+            if (!res.ok) {
+                const err = (await res.json().catch(() => ({ error: res.statusText })));
+                alert(`Bulk ${op} failed: ${err.error ?? res.statusText}`);
+                setBusy(false);
+                return;
+            }
+            // For trash, the rows are gone; for others we just refresh
+            onDone(op === 'trash' ? selectedIds : undefined);
+        }
+        catch (err) {
+            alert(String(err));
+            setBusy(false);
+        }
+    }
+    return (_jsxs("div", { className: "panel fade-only", style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 12,
+            padding: '10px 14px',
+            marginBottom: 12,
+            background: 'var(--accent-tint)',
+            borderColor: 'var(--accent-ring)',
+        }, children: [_jsxs("span", { style: { fontSize: 13, fontWeight: 600, color: 'var(--accent)' }, children: [selectedIds.length, " selected"] }), _jsx("div", { style: { flex: 1 } }), BULK_OPS.map(({ op, label, icon, danger }) => (_jsxs("button", { type: "button", className: danger ? 'btn sm danger' : 'btn sm', disabled: busy, onClick: () => void runBulk(op), style: busy ? { opacity: 0.6 } : undefined, children: [_jsx(Icon, { name: icon, size: 14 }), _jsx("span", { children: label })] }, op))), _jsx("button", { type: "button", className: "icon-btn", onClick: onCancel, title: "Cancel selection", children: _jsx(Icon, { name: "x", size: 16 }) })] }));
+}
+const IMPORT_SOURCES = [
+    { value: 'markdown', label: 'Markdown file' },
+    { value: 'ghost', label: 'Ghost JSON export' },
+    { value: 'substack', label: 'Substack CSV export' },
+];
+function ImportModal({ workspaceId: _workspaceId, onClose, onImported, }) {
+    const [step, setStep] = useState('pick');
+    const [source, setSource] = useState('markdown');
+    const [payload, setPayload] = useState('');
+    const [parseResult, setParseResult] = useState(null);
+    const [error, setError] = useState(null);
+    async function handleParse() {
+        setError(null);
+        try {
+            const res = await fetch('/admin/api/content/import/parse', {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ source, payload }),
+            });
+            if (!res.ok) {
+                const err = (await res.json().catch(() => ({ error: res.statusText })));
+                setError(err.error ?? 'Parse failed');
+                return;
+            }
+            const data = (await res.json());
+            setParseResult(data);
+            setStep('preview');
+        }
+        catch (err) {
+            setError(String(err));
+        }
+    }
+    async function handleConfirm() {
+        if (!parseResult)
+            return;
+        setStep('confirming');
+        setError(null);
+        try {
+            const res = await fetch('/admin/api/content/import/confirm', {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ importId: parseResult.importId }),
+            });
+            if (!res.ok) {
+                const err = (await res.json().catch(() => ({ error: res.statusText })));
+                setError(err.error ?? 'Confirm failed');
+                setStep('preview');
+                return;
+            }
+            onImported();
+        }
+        catch (err) {
+            setError(String(err));
+            setStep('preview');
+        }
+    }
+    return (_jsx("dialog", { open: true, "aria-label": "Import content", className: "scrim", style: { display: 'grid', placeItems: 'center', border: 'none', padding: 16 }, onClose: onClose, onClick: (e) => {
+            if (e.target === e.currentTarget)
+                onClose();
+        }, onKeyUp: (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        }, children: _jsxs("div", { className: "panel panel-pad fade-in", style: { width: '100%', maxWidth: 540, boxShadow: 'var(--shadow-lg)' }, children: [_jsxs("div", { style: {
+                        display: 'flex',
+                        alignItems: 'flex-start',
+                        justifyContent: 'space-between',
+                        gap: 12,
+                    }, children: [_jsx("div", { className: "kicker", children: "Import" }), _jsx("button", { type: "button", className: "icon-btn", onClick: onClose, title: "Close", children: _jsx(Icon, { name: "x", size: 18 }) })] }), _jsx("h2", { className: "card-title", children: "Import content" }), _jsx("div", { className: "masthead-rule", style: { marginBottom: 16 } }), step === 'pick' && (_jsxs(_Fragment, { children: [_jsxs("div", { style: { marginBottom: 14 }, children: [_jsx("label", { htmlFor: "import-source", className: "field-label", children: "Source format" }), _jsx("select", { id: "import-source", className: "selectbox", value: source, onChange: (e) => setSource(e.currentTarget.value), children: IMPORT_SOURCES.map((s) => (_jsx("option", { value: s.value, children: s.label }, s.value))) })] }), _jsxs("div", { style: { marginBottom: 16 }, children: [_jsx("label", { htmlFor: "import-payload", className: "field-label", children: "Paste content" }), _jsx("textarea", { id: "import-payload", className: "textarea mono", value: payload, onChange: (e) => setPayload(e.currentTarget.value), rows: 10, placeholder: `Paste your ${source} content here…`, style: { fontSize: 12 } })] }), error && (_jsx("div", { style: { marginBottom: 12, color: 'var(--red)', fontSize: 12 }, children: error })), _jsxs("div", { style: { display: 'flex', gap: 8, justifyContent: 'flex-end' }, children: [_jsx("button", { type: "button", className: "btn", onClick: onClose, children: "Cancel" }), _jsx("button", { type: "button", className: "btn primary", onClick: () => void handleParse(), disabled: !payload.trim(), style: payload.trim() ? undefined : { opacity: 0.5 }, children: "Parse" })] })] })), step === 'preview' && parseResult && (_jsxs(_Fragment, { children: [_jsxs("div", { style: { marginBottom: 12, fontSize: 13, color: 'var(--ink-muted)' }, children: ["Found ", parseResult.items.length, " item", parseResult.items.length !== 1 ? 's' : '', " to import."] }), _jsx("div", { className: "panel", style: { maxHeight: 240, overflow: 'auto', marginBottom: 16 }, children: parseResult.items.map((item) => (_jsxs("div", { style: {
+                                    padding: '8px 12px',
+                                    borderBottom: '1px solid var(--border-soft)',
+                                }, children: [_jsx("div", { style: { fontSize: 13, fontWeight: 600, color: 'var(--ink)' }, children: item.title }), _jsxs("div", { className: "mono", style: { fontSize: 11, color: 'var(--ink-faint)' }, children: ["/", item.slug] })] }, item.slug))) }), error && (_jsx("div", { style: { marginBottom: 12, color: 'var(--red)', fontSize: 12 }, children: error })), _jsxs("div", { style: { display: 'flex', gap: 8, justifyContent: 'flex-end' }, children: [_jsx("button", { type: "button", className: "btn", onClick: () => setStep('pick'), children: "Back" }), _jsxs("button", { type: "button", className: "btn primary", onClick: () => void handleConfirm(), children: ["Import ", parseResult.items.length, " item", parseResult.items.length !== 1 ? 's' : ''] })] })] })), step === 'confirming' && (_jsx("div", { style: { padding: '24px 0', textAlign: 'center', color: 'var(--ink-muted)' }, children: "Importing\u2026" }))] }) }));
+}
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function formatDate(iso) {
+    try {
+        const d = new Date(iso);
+        const now = new Date();
+        const diff = now.getTime() - d.getTime();
+        if (diff < 60_000)
+            return 'just now';
+        if (diff < 3_600_000)
+            return `${Math.floor(diff / 60_000)}m ago`;
+        if (diff < 86_400_000)
+            return `${Math.floor(diff / 3_600_000)}h ago`;
+        return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+    }
+    catch {
+        return iso;
+    }
+}
+// ---------------------------------------------------------------------------
+// Micro-style tokens (inline — the broadsheet status-tab underline pattern,
+// which has no dedicated class in broadsheet.css).
+// ---------------------------------------------------------------------------
+const tabStyle = {
+    border: 0,
+    background: 'transparent',
+    padding: '10px 12px 12px',
+    fontSize: 13.5,
+    fontWeight: 600,
+    marginBottom: -1,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 7,
+    whiteSpace: 'nowrap',
+    transition: 'color 120ms',
+};
+//# sourceMappingURL=LibraryScreen.js.map