@prenta/admin 0.92.0 → 0.93.0

package/dist/components/EditorRail.js

@@ -0,0 +1,104 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { RAIL_COLLAPSED_WIDTH, RAIL_DEFAULT_WIDTH, RAIL_MAX_WIDTH, RAIL_MIN_WIDTH, clampRailWidth, readRailWidth, writeRailWidth, } from '../lib/rail-width.js';
+/**
+ * The editor's left rail: resizable, collapsible, and width-persistent.
+ *
+ * Collapsing UNMOUNTS the rail and swaps in a narrow strip rather than
+ * animating its width to zero. A zero-width panel leaves a visible sliver of
+ * border and keeps its contents in the accessibility tree, so a screen-reader
+ * user lands inside a panel sighted users cannot see.
+ *
+ * Children are a render prop rather than plain nodes because the panel header
+ * needs the live width and drag state — the numbers the rail owns — and
+ * threading them through context for one consumer is more machinery than the
+ * problem deserves.
+ */
+export function EditorRail({ collapsedLabel, children }) {
+    const [width, setWidth] = useState(RAIL_DEFAULT_WIDTH);
+    const [open, setOpen] = useState(true);
+    const [dragging, setDragging] = useState(false);
+    const railRef = useRef(null);
+    // Read persisted width after mount, never during render: there is no
+    // localStorage on the server, and seeding initial state from it would
+    // hydrate-mismatch.
+    useEffect(() => {
+        setWidth(readRailWidth());
+    }, []);
+    const applyWidth = useCallback((next) => {
+        const clamped = clampRailWidth(next);
+        setWidth(clamped);
+        writeRailWidth(clamped);
+    }, []);
+    const collapse = useCallback(() => setOpen(false), []);
+    // Pointer listeners go on `window`, not the handle: the pointer routinely
+    // outruns a 7px target mid-drag, and a handle-local listener would drop the
+    // drag the moment it did.
+    useEffect(() => {
+        if (!dragging)
+            return;
+        const onMove = (event) => {
+            const left = railRef.current?.getBoundingClientRect().left ?? 0;
+            applyWidth(event.clientX - left);
+        };
+        const stop = () => setDragging(false);
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', stop);
+        window.addEventListener('pointercancel', stop);
+        // Lock cursor and selection for the duration. Without this the cursor
+        // flickers between col-resize and text as it crosses elements, and the
+        // drag selects the panel's copy.
+        const { body } = document;
+        const prevCursor = body.style.cursor;
+        const prevSelect = body.style.userSelect;
+        body.style.cursor = 'col-resize';
+        body.style.userSelect = 'none';
+        return () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', stop);
+            window.removeEventListener('pointercancel', stop);
+            body.style.cursor = prevCursor;
+            body.style.userSelect = prevSelect;
+        };
+    }, [dragging, applyWidth]);
+    if (!open) {
+        return (_jsxs("div", { className: "bg-card border-border flex shrink-0 flex-col items-center gap-3 border-r py-3", style: { width: RAIL_COLLAPSED_WIDTH }, children: [_jsx("button", { type: "button", onClick: () => setOpen(true), "aria-label": `Expand ${collapsedLabel} panel`, title: `Expand ${collapsedLabel} panel`, className: "text-muted-foreground hover:bg-accent hover:text-accent-foreground flex h-6.5 w-6.5 items-center justify-center rounded-md transition-colors", children: _jsx(PanelLeftOpen, { className: "h-4 w-4", "aria-hidden": true }) }), _jsx("span", { className: "text-muted-foreground text-[10px] font-bold tracking-[0.8px] whitespace-nowrap uppercase [writing-mode:vertical-rl]", "aria-hidden": true, children: collapsedLabel })] }));
+    }
+    return (_jsxs("div", { ref: railRef, className: `bg-card border-border relative flex shrink-0 flex-col border-r ${
+        // A width transition during a drag fights the pointer: the panel
+        // chases the cursor a frame behind and the resize feels broken.
+        dragging ? '' : 'motion-safe:transition-[width] motion-safe:duration-(--mo-slow)'}`, style: { width }, children: [_jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: children({ width, dragging, collapse }) }), _jsx("div", { 
+                // `separator` with an orientation and a value range is what makes this
+                // operable without a pointer. A bare div with a pointerdown handler is
+                // invisible to keyboard and assistive-tech users.
+                role: "separator", "aria-orientation": "vertical", "aria-label": "Resize panel", "aria-valuenow": width, "aria-valuemin": RAIL_MIN_WIDTH, "aria-valuemax": RAIL_MAX_WIDTH, tabIndex: 0, onPointerDown: (event) => {
+                    event.preventDefault();
+                    setDragging(true);
+                }, onDoubleClick: () => applyWidth(RAIL_DEFAULT_WIDTH), onKeyDown: (event) => {
+                    const step = event.shiftKey ? 48 : 16;
+                    if (event.key === 'ArrowLeft') {
+                        event.preventDefault();
+                        applyWidth(width - step);
+                    }
+                    else if (event.key === 'ArrowRight') {
+                        event.preventDefault();
+                        applyWidth(width + step);
+                    }
+                    else if (event.key === 'Home') {
+                        event.preventDefault();
+                        applyWidth(RAIL_DEFAULT_WIDTH);
+                    }
+                }, className: "group absolute inset-y-0 -right-[3px] z-30 w-[7px] cursor-col-resize focus-visible:outline-none", children: _jsx("span", { "aria-hidden": true, className: `pointer-events-none absolute inset-y-0 left-[2.5px] w-0.5 transition-colors ${dragging
+                        ? 'bg-brand'
+                        : 'group-hover:bg-brand group-focus-visible:bg-brand bg-transparent'}` }) })] }));
+}
+/**
+ * Header strip under the rail's tabs: panel title, the live width while
+ * dragging, and the collapse control.
+ */
+export function RailHeader({ title, width, dragging, onCollapse, }) {
+    return (_jsxs("div", { className: "border-border flex items-center justify-between gap-2 border-b px-3.5 py-2.5", children: [_jsx("h2", { className: "text-foreground truncate text-[12.5px] font-semibold", children: title }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [dragging && (_jsxs("span", { className: "text-muted-foreground text-[11px] tabular-nums", "aria-hidden": true, children: [width, "px"] })), _jsx("button", { type: "button", onClick: onCollapse, "aria-label": `Collapse ${title} panel`, title: `Collapse ${title} panel`, className: "text-muted-foreground hover:bg-accent hover:text-accent-foreground flex h-6.5 w-6.5 items-center justify-center rounded-md transition-colors", children: _jsx(PanelLeftClose, { className: "h-4 w-4", "aria-hidden": true }) })] })] }));
+}
+//# sourceMappingURL=EditorRail.js.map

package/dist/components/EditorRail.js.map

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

package/dist/components/EditorRailTabs.d.ts

@@ -0,0 +1,32 @@
+export type RailTabId = 'sections' | 'seo' | 'page';
+export interface RailTab {
+    id: RailTabId;
+    label: string;
+    /** Panel title shown in the header below the strip. */
+    title: string;
+    /** Count pill (Sections). */
+    count?: number;
+    /**
+     * Score for the dot, banded by the page audit's own scale.
+     *
+     * `undefined` — not known yet; no dot is shown rather than a misleading one.
+     * `null`      — deliberately not rated (a gate is off, e.g. the page is
+     *               noindexed). Renders neutral, never as a low score.
+     */
+    score?: number | null;
+}
+export interface EditorRailTabsProps {
+    tabs: RailTab[];
+    active: RailTabId;
+    onChange: (id: RailTabId) => void;
+}
+/**
+ * Three equal tabs across the top of the rail.
+ *
+ * Each tab carries a status glyph so the rail reads at a glance without being
+ * opened: a count for Sections, a band-coloured dot for SEO. The dot is
+ * accompanied by text in the accessible name — colour alone is not a signal
+ * for anyone who cannot distinguish these hues.
+ */
+export declare function EditorRailTabs({ tabs, active, onChange }: EditorRailTabsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditorRailTabs.d.ts.map

package/dist/components/EditorRailTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorRailTabs.d.ts","sourceRoot":"","sources":["../../src/components/EditorRailTabs.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,KAAK,GAAG,MAAM,CAAA;AAEnD,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,SAAS,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,EAAE,CAAA;IACf,MAAM,EAAE,SAAS,CAAA;IACjB,QAAQ,EAAE,CAAC,EAAE,EAAE,SAAS,KAAK,IAAI,CAAA;CAClC;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CA+E7E"}

package/dist/components/EditorRailTabs.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { scoreBand } from '@prenta/core/seo/page-audit';
+/**
+ * Three equal tabs across the top of the rail.
+ *
+ * Each tab carries a status glyph so the rail reads at a glance without being
+ * opened: a count for Sections, a band-coloured dot for SEO. The dot is
+ * accompanied by text in the accessible name — colour alone is not a signal
+ * for anyone who cannot distinguish these hues.
+ */
+export function EditorRailTabs({ tabs, active, onChange }) {
+    return (_jsx("div", { role: "tablist", "aria-label": "Editor panels", className: "border-border flex border-b", children: tabs.map((tab) => {
+            const selected = tab.id === active;
+            // Bands with `scoreBand` from the audit itself, NOT `gradeFromScore`.
+            // The two disagree between 55 and 59 — a page scoring 57 read "fair"
+            // in the rings and "poor" on the tab summarising them, which is the
+            // same class of disagreement this dot was rewired to eliminate.
+            const band = typeof tab.score === 'number' ? scoreBand(tab.score) : null;
+            const unrated = tab.score === null;
+            return (_jsxs("button", { type: "button", role: "tab", id: `rail-tab-${tab.id}`, "aria-selected": selected, "aria-controls": `rail-panel-${tab.id}`, tabIndex: selected ? 0 : -1, onClick: () => onChange(tab.id), onKeyDown: (event) => {
+                    // Arrow keys move between tabs — expected of a tablist, and the
+                    // only way to reach a tab whose tabIndex is -1.
+                    const index = tabs.findIndex((t) => t.id === active);
+                    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+                        event.preventDefault();
+                        const delta = event.key === 'ArrowRight' ? 1 : -1;
+                        const next = tabs[(index + delta + tabs.length) % tabs.length];
+                        if (next) {
+                            onChange(next.id);
+                            document.getElementById(`rail-tab-${next.id}`)?.focus();
+                        }
+                    }
+                }, className: `flex flex-1 items-center justify-center gap-1.5 border-b-2 pt-2.5 pb-2 text-[12.5px] transition-colors ${selected
+                    ? 'border-brand text-brand font-semibold'
+                    : 'text-muted-foreground hover:text-foreground border-transparent font-medium'}`, children: [tab.label, tab.count !== undefined && (_jsx("span", { className: `rounded-full px-1.5 text-[10.5px] font-semibold tabular-nums ${selected ? 'bg-accent text-accent-foreground' : 'bg-muted text-muted-foreground'}`, children: tab.count })), (band || unrated) && (_jsxs(_Fragment, { children: [_jsx("span", { className: `h-[7px] w-[7px] shrink-0 rounded-full ${band === 'good'
+                                    ? 'bg-success'
+                                    : band === 'fair'
+                                        ? 'bg-warning'
+                                        : band === 'poor'
+                                            ? 'bg-destructive'
+                                            : 'bg-muted-foreground/40'}`, "aria-hidden": true }), _jsx("span", { className: "sr-only", children: unrated ? 'not rated' : `score ${tab.score} of 100` })] }))] }, tab.id));
+        }) }));
+}
+//# sourceMappingURL=EditorRailTabs.js.map

package/dist/components/EditorRailTabs.js.map

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

package/dist/components/MediaBlock.d.ts

@@ -0,0 +1,49 @@
+import { type ReactNode } from 'react';
+import { type MediaCrop } from '../lib/media-format.js';
+interface MediaItem {
+    id: string;
+    filename: string;
+    storageKey: string;
+    url?: string;
+    altTag?: string;
+    mimeType: string;
+    width?: number;
+    height?: number;
+}
+export interface MediaBlockProps {
+    /** Current asset URL, or empty for the empty state. */
+    value: string;
+    onChange: (url: string, item?: MediaItem) => void;
+    /** The crop the template renders this image at. */
+    crop?: MediaCrop;
+    /** Rows rendered between the frame and the toolbar (the social preview). */
+    children?: ReactNode;
+    disabled?: boolean;
+    /** Accessible label, e.g. "Hero image". */
+    label?: string;
+}
+/**
+ * One component for every image — section slots and the social/OG card alike.
+ *
+ * ── The frame shows the TEMPLATE's crop, not the asset's ─────────────────
+ *
+ * A section image renders at 16:10 and a social card at 1.91:1 regardless of
+ * what was uploaded. Framing the asset's own ratio would tell an editor their
+ * portrait photo looks fine and then crop its subject out on the page. What
+ * the asset actually is gets reported in the toolbar instead, as a ratio label
+ * beside its filename, so both facts are visible and neither is implied.
+ *
+ * ── The toolbar is always visible ────────────────────────────────────────
+ *
+ * Never hover-only. Replace and Remove are the two things an editor comes here
+ * to do, and hiding them behind a hover makes them undiscoverable on touch and
+ * invisible to anyone scanning the panel.
+ *
+ * ── The picker opens inside the shell ────────────────────────────────────
+ *
+ * Not a modal. Choosing an image is a comparison against the slot it is going
+ * into, and a dialog covering the slot removes the only context that matters.
+ */
+export declare function MediaBlock({ value, onChange, crop, children, disabled, label, }: MediaBlockProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MediaBlock.d.ts.map

package/dist/components/MediaBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaBlock.d.ts","sourceRoot":"","sources":["../../src/components/MediaBlock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAGhD,OAAO,EAML,KAAK,SAAS,EACf,MAAM,wBAAwB,CAAA;AAE/B,UAAU,SAAS;IACjB,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;IACjD,mDAAmD;IACnD,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,IAAgB,EAChB,QAAQ,EACR,QAAgB,EAChB,KAAe,GAChB,EAAE,eAAe,2CA2JjB"}

package/dist/components/MediaBlock.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Check, ImageIcon, Trash2 } from 'lucide-react';
+import { useApiData } from '../lib/useApiData.js';
+import { CROP_RATIO, assetWash, displayName, formatBadge, ratioLabel, } from '../lib/media-format.js';
+/**
+ * One component for every image — section slots and the social/OG card alike.
+ *
+ * ── The frame shows the TEMPLATE's crop, not the asset's ─────────────────
+ *
+ * A section image renders at 16:10 and a social card at 1.91:1 regardless of
+ * what was uploaded. Framing the asset's own ratio would tell an editor their
+ * portrait photo looks fine and then crop its subject out on the page. What
+ * the asset actually is gets reported in the toolbar instead, as a ratio label
+ * beside its filename, so both facts are visible and neither is implied.
+ *
+ * ── The toolbar is always visible ────────────────────────────────────────
+ *
+ * Never hover-only. Replace and Remove are the two things an editor comes here
+ * to do, and hiding them behind a hover makes them undiscoverable on touch and
+ * invisible to anyone scanning the panel.
+ *
+ * ── The picker opens inside the shell ────────────────────────────────────
+ *
+ * Not a modal. Choosing an image is a comparison against the slot it is going
+ * into, and a dialog covering the slot removes the only context that matters.
+ */
+export function MediaBlock({ value, onChange, crop = 'section', children, disabled = false, label = 'Image', }) {
+    const [picking, setPicking] = useState(false);
+    const { data } = useApiData(picking ? '/media?pageSize=50' : null);
+    const items = (Array.isArray(data) ? data : (data?.items ?? [])).filter((i) => i.mimeType?.startsWith('image/'));
+    const ratio = CROP_RATIO[crop];
+    const name = value ? displayName(value) : '';
+    return (_jsxs("div", { className: "border-border bg-card overflow-hidden rounded-[10px] border", children: [value ? (_jsx("div", { className: "w-full bg-cover bg-center", style: { aspectRatio: ratio, backgroundImage: assetWash(name) }, children: _jsx("img", { src: value, alt: "", className: "h-full w-full object-cover", style: { aspectRatio: ratio } }) })) : (_jsx("button", { type: "button", onClick: () => setPicking(true), disabled: disabled, "aria-label": `Choose ${label.toLowerCase()}`, className: "bg-muted hover:bg-accent group flex w-full items-center justify-center p-3 transition-colors disabled:opacity-50", style: { aspectRatio: ratio }, children: _jsxs("span", { className: "border-border group-hover:border-primary group-hover:text-primary text-muted-foreground flex h-full w-full flex-col items-center justify-center gap-1.5 rounded-lg border-[1.5px] border-dashed transition-colors", children: [_jsx(ImageIcon, { size: 22, "aria-hidden": true }), _jsx("span", { className: "text-foreground text-[12.5px] font-semibold", children: "No image selected" }), _jsx("span", { className: "text-[10.5px]", children: "Choose one from the library" })] }) })), children, _jsx("div", { className: "border-border flex items-center gap-2 border-t px-2.5 py-2", children: value ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-foreground min-w-0 flex-1 truncate text-[11.5px] font-semibold", title: name, children: name }), _jsx("span", { className: "text-muted-foreground shrink-0 text-[10.5px] tabular-nums", children: formatBadge(value) }), _jsx("button", { type: "button", onClick: () => setPicking((v) => !v), disabled: disabled, className: "border-border hover:bg-accent shrink-0 rounded-md border px-2 py-1 text-[11px] font-medium disabled:opacity-50", children: "Replace" }), _jsx("button", { type: "button", onClick: () => onChange(''), disabled: disabled, "aria-label": `Remove ${label.toLowerCase()}`, className: "text-muted-foreground hover:text-destructive shrink-0 rounded p-1 disabled:opacity-50", children: _jsx(Trash2, { size: 13, "aria-hidden": true }) })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground min-w-0 flex-1 text-[11.5px]", children: "No image selected" }), _jsx("button", { type: "button", onClick: () => setPicking((v) => !v), disabled: disabled, className: "border-border hover:bg-accent shrink-0 rounded-md border px-2 py-1 text-[11px] font-medium disabled:opacity-50", children: "Choose" })] })) }), picking && (_jsx("div", { className: "border-border bg-muted max-h-[262px] overflow-y-auto border-t p-2", children: items.length === 0 ? (_jsx("p", { className: "text-muted-foreground px-1 py-3 text-center text-[11px]", children: "No images in the library yet." })) : (_jsx("ul", { className: "grid grid-cols-2 gap-2", children: items.map((item) => {
+                        const url = item.url || item.storageKey;
+                        const selected = url === value;
+                        const itemRatio = ratioLabel(item.width, item.height);
+                        return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => {
+                                    onChange(url, item);
+                                    setPicking(false);
+                                }, "aria-current": selected || undefined, className: `border-border bg-card w-full overflow-hidden rounded-lg border text-left transition-colors ${selected ? 'border-primary' : 'hover:border-ring'}`, children: [_jsxs("span", { className: "relative block w-full", style: {
+                                            aspectRatio: '16 / 10',
+                                            backgroundImage: assetWash(item.filename),
+                                        }, children: [url && _jsx("img", { src: url, alt: "", className: "h-full w-full object-cover" }), _jsx("span", { className: "absolute top-1 left-1 rounded-[5px] bg-white/80 px-1.5 py-px text-[9.5px] font-extrabold tracking-wide text-zinc-800", children: formatBadge(item.filename, item.mimeType) }), selected && (_jsx("span", { className: "bg-primary text-primary-foreground absolute top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full", children: _jsx(Check, { size: 10, "aria-hidden": true }) }))] }), _jsxs("span", { className: "block px-1.5 py-1", children: [_jsx("span", { className: "text-foreground block truncate text-[10px] font-semibold", children: item.filename }), _jsx("span", { className: "text-muted-foreground block text-[9px] tabular-nums", children: item.width && item.height
+                                                    ? `${item.width} × ${item.height}${itemRatio ? ` · ${itemRatio}` : ''}`
+                                                    : 'Dimensions unknown' })] })] }) }, item.id));
+                    }) })) }))] }));
+}
+//# sourceMappingURL=MediaBlock.js.map

package/dist/components/MediaBlock.js.map

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

package/dist/components/ReflowMeter.d.ts

@@ -0,0 +1,28 @@
+import { type BreakpointId } from '../lib/breakpoints.js';
+import type { ReflowGuardResult } from '../hooks/useReflowGuard.js';
+export interface ReflowMeterProps {
+    guard: ReflowGuardResult;
+    /** Character count of the current value. */
+    length: number;
+    /** Breakpoint the canvas is currently showing — marked in the row of dots. */
+    device: BreakpointId;
+    /** Switch the canvas to a breakpoint so the editor can look at the damage. */
+    onProof: (id: BreakpointId) => void;
+}
+/**
+ * Per-field reflow readout: character count, line count where you're looking,
+ * one dot per breakpoint, and a proof prompt when wrapping changed.
+ *
+ * ── Why the dots are buttons ──────────────────────────────────────────────
+ *
+ * The guard's whole value is that it reports damage at a width you are NOT
+ * looking at. Telling an editor "this now runs three lines on mobile" while
+ * making them hunt for the breakpoint switcher wastes the finding. Each dot
+ * takes the canvas there.
+ *
+ * Colour is never the only signal: every dot carries its breakpoint's initials
+ * and an accessible name stating the line count and what it was published at,
+ * and the alert below repeats the finding in words.
+ */
+export declare function ReflowMeter({ guard, length, device, onProof }: ReflowMeterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ReflowMeter.d.ts.map

package/dist/components/ReflowMeter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReflowMeter.d.ts","sourceRoot":"","sources":["../../src/components/ReflowMeter.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA8B,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACrF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAEnE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,iBAAiB,CAAA;IACxB,4CAA4C;IAC5C,MAAM,EAAE,MAAM,CAAA;IACd,8EAA8E;IAC9E,MAAM,EAAE,YAAY,CAAA;IACpB,8EAA8E;IAC9E,OAAO,EAAE,CAAC,EAAE,EAAE,YAAY,KAAK,IAAI,CAAA;CACpC;AAQD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,gBAAgB,2CAuF/E"}

package/dist/components/ReflowMeter.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AlertTriangle } from 'lucide-react';
+import { BREAKPOINTS, getBreakpoint } from '../lib/breakpoints.js';
+const DOT_TONE = {
+    same: 'bg-success/12 text-success',
+    grew: 'bg-warning/15 text-warning',
+    'grew-badly': 'bg-destructive/12 text-destructive',
+};
+/**
+ * Per-field reflow readout: character count, line count where you're looking,
+ * one dot per breakpoint, and a proof prompt when wrapping changed.
+ *
+ * ── Why the dots are buttons ──────────────────────────────────────────────
+ *
+ * The guard's whole value is that it reports damage at a width you are NOT
+ * looking at. Telling an editor "this now runs three lines on mobile" while
+ * making them hunt for the breakpoint switcher wastes the finding. Each dot
+ * takes the canvas there.
+ *
+ * Colour is never the only signal: every dot carries its breakpoint's initials
+ * and an accessible name stating the line count and what it was published at,
+ * and the alert below repeats the finding in words.
+ */
+export function ReflowMeter({ guard, length, device, onProof }) {
+    const here = guard.rows.find((r) => r.id === device);
+    const worst = guard.worst ? guard.rows.find((r) => r.id === guard.worst) : undefined;
+    // Named breakpoints while the list is short enough to read; initials once it
+    // isn't; "every breakpoint" when it's all of them, which is shorter and is
+    // also the more useful statement.
+    const grown = guard.grown;
+    const scope = grown.length === BREAKPOINTS.length
+        ? 'every breakpoint'
+        : grown.length > 3
+            ? grown.map((r) => getBreakpoint(r.id).abbr).join(', ')
+            : grown.map((r) => getBreakpoint(r.id).name).join(', ');
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mt-1.5 flex items-center gap-2", children: [_jsxs("span", { className: "text-muted-foreground text-[11px] whitespace-nowrap tabular-nums", children: [_jsx("b", { className: "text-foreground/80 font-semibold", children: length }), " chars", guard.delta !== 0 && (_jsxs("span", { className: guard.delta > 0 ? 'text-warning font-bold' : '', children: [' ', "(", guard.delta > 0 ? '+' : '', guard.delta, ")"] })), here && (_jsxs(_Fragment, { children: [' · ', _jsx("b", { className: "text-foreground/80 font-semibold", children: here.lines }), " line", here.lines === 1 ? '' : 's', " here"] }))] }), guard.rows.length > 0 && (_jsx("div", { className: "ml-auto flex gap-0.75", children: guard.rows.map((row) => {
+                            const bp = getBreakpoint(row.id);
+                            return (_jsxs("button", { type: "button", onClick: () => onProof(row.id), className: `flex h-4.25 w-4.25 items-center justify-center rounded-[5px] text-[8px] font-bold transition-transform hover:-translate-y-px ${DOT_TONE[row.state] ?? 'bg-muted text-muted-foreground'} ${device === row.id ? 'outline-primary outline-[1.5px] outline-offset-1' : ''}`, title: `${bp.name} — ${row.lines} line${row.lines === 1 ? '' : 's'}${row.diff > 0 ? ` (published: ${row.was}) — wrapping changed` : ''}. Click to proof.`, children: [_jsx("span", { "aria-hidden": true, children: bp.abbr }), _jsxs("span", { className: "sr-only", children: [bp.name, ": ", row.lines, " line", row.lines === 1 ? '' : 's', row.diff > 0 ? `, was ${row.was} when published` : '', " \u2014 proof here"] })] }, row.id));
+                        }) }))] }), worst && (_jsxs("div", { className: "bg-warning/10 border-warning/30 mt-1.5 grid grid-cols-[auto_1fr] gap-x-2.5 gap-y-1 rounded-lg border p-2.5", children: [_jsx(AlertTriangle, { size: 14, className: "text-warning mt-px shrink-0", "aria-hidden": true }), _jsxs("p", { className: "text-[11.5px] leading-normal", children: ["Wrapping changed on ", _jsx("b", { className: "text-warning font-bold", children: scope }), " \u2014", ' ', getBreakpoint(worst.id).name, " now runs ", worst.lines, " lines instead of ", worst.was, ". Proof it before publishing."] }), _jsxs("button", { type: "button", onClick: () => onProof(worst.id), className: "border-warning text-warning hover:bg-warning/15 col-start-2 mt-0.5 justify-self-start rounded-md border px-2.5 py-1 text-[11px] font-semibold whitespace-nowrap transition-colors", children: ["Proof on ", getBreakpoint(worst.id).name] })] }))] }));
+}
+//# sourceMappingURL=ReflowMeter.js.map

package/dist/components/ReflowMeter.js.map

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

package/dist/components/ZoomChip.d.ts

@@ -0,0 +1,17 @@
+import type { Zoom } from '../lib/breakpoints.js';
+export interface ZoomChipProps {
+    /** Current zoom mode. */
+    zoom: Zoom;
+    /** Actual rendered scale, 0–1 — what the canvas measured, not the mode. */
+    scale: number;
+    onChange: (zoom: Zoom) => void;
+}
+/**
+ * Reads out the canvas scale and toggles fit ↔ 100%.
+ *
+ * It shows the *measured* scale rather than the mode, because "fit" is not a
+ * number an editor can reason about — at 1920px in a narrow rail it might be
+ * 38%, and that is the fact that explains why the preview looks small.
+ */
+export declare function ZoomChip({ zoom, scale, onChange }: ZoomChipProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ZoomChip.d.ts.map

package/dist/components/ZoomChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZoomChip.d.ts","sourceRoot":"","sources":["../../src/components/ZoomChip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAEjD,MAAM,WAAW,aAAa;IAC5B,yBAAyB;IACzB,IAAI,EAAE,IAAI,CAAA;IACV,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;CAC/B;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAmBhE"}

package/dist/components/ZoomChip.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Reads out the canvas scale and toggles fit ↔ 100%.
+ *
+ * It shows the *measured* scale rather than the mode, because "fit" is not a
+ * number an editor can reason about — at 1920px in a narrow rail it might be
+ * 38%, and that is the fact that explains why the preview looks small.
+ */
+export function ZoomChip({ zoom, scale, onChange }) {
+    const percent = Math.round(scale * 100);
+    const next = zoom === 'fit' ? 1 : 'fit';
+    return (_jsxs("button", { type: "button", onClick: () => onChange(next), "aria-label": zoom === 'fit'
+            ? `Canvas scaled to ${percent} percent to fit. Switch to actual size.`
+            : 'Canvas at actual size. Switch to fit.', title: zoom === 'fit' ? 'Fit to window — click for 100%' : 'Actual size — click to fit', className: "border-border bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground h-[34px] min-w-[54px] rounded-lg border px-2 text-[11.5px] font-semibold tabular-nums transition-colors", children: [percent, "%"] }));
+}
+//# sourceMappingURL=ZoomChip.js.map

package/dist/components/ZoomChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZoomChip.js","sourceRoot":"","sources":["../../src/components/ZoomChip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAYZ;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAiB;IAC/D,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,CAAA;IACvC,MAAM,IAAI,GAAS,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;IAE7C,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAE3B,IAAI,KAAK,KAAK;YACZ,CAAC,CAAC,oBAAoB,OAAO,yCAAyC;YACtE,CAAC,CAAC,uCAAuC,EAE7C,KAAK,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,4BAA4B,EACvF,SAAS,EAAC,wMAAwM,aAEjN,OAAO,SACD,CACV,CAAA;AACH,CAAC"}

package/dist/components/breakpoint-icons.d.ts

@@ -0,0 +1,3 @@
+import { type LucideIcon } from 'lucide-react';
+export declare function breakpointIcon(name: string): LucideIcon;
+//# sourceMappingURL=breakpoint-icons.d.ts.map

package/dist/components/breakpoint-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoint-icons.d.ts","sourceRoot":"","sources":["../../src/components/breakpoint-icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AAcnF,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,CAEvD"}

package/dist/components/breakpoint-icons.js

@@ -0,0 +1,16 @@
+import { Laptop, Monitor, Smartphone, Tablet } from 'lucide-react';
+/**
+ * Maps a breakpoint's `icon` name to its component. Kept out of
+ * `lib/breakpoints.ts` so that module stays free of React imports — it is pure
+ * data and arithmetic, and its tests run without a DOM.
+ */
+const ICONS = {
+    monitor: Monitor,
+    laptop: Laptop,
+    tablet: Tablet,
+    smartphone: Smartphone,
+};
+export function breakpointIcon(name) {
+    return ICONS[name] ?? Monitor;
+}
+//# sourceMappingURL=breakpoint-icons.js.map

package/dist/components/breakpoint-icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoint-icons.js","sourceRoot":"","sources":["../../src/components/breakpoint-icons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAmB,MAAM,cAAc,CAAA;AAEnF;;;;GAIG;AACH,MAAM,KAAK,GAA+B;IACxC,OAAO,EAAE,OAAO;IAChB,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,UAAU;CACvB,CAAA;AAED,MAAM,UAAU,cAAc,CAAC,IAAY;IACzC,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,OAAO,CAAA;AAC/B,CAAC"}

package/dist/components/page-tab/AuthorPicker.d.ts

@@ -0,0 +1,31 @@
+export interface AuthorValue {
+    /** Displayed byline. Empty means no byline is set. */
+    name: string;
+    /** CMS user id, when the byline is one. Empty for generic and guest. */
+    id: string;
+}
+export interface AuthorPickerProps {
+    value: AuthorValue;
+    onChange: (next: AuthorValue) => void;
+    /** Brand byline offered under GENERIC — usually the site or org name. */
+    brandName?: string;
+    disabled?: boolean;
+}
+/**
+ * Byline picker: a CMS user, the brand, or a one-off guest name.
+ *
+ * ── What this does and does not change ────────────────────────────────────
+ *
+ * It sets the page's DISPLAYED author, which reaches the page's structured
+ * data. It does not reassign the document's `createdById` — that records who
+ * created the record, and trading an audit trail for a label is not a swap
+ * worth making silently. A page written by a staff editor and bylined to the
+ * brand is a normal thing; a page whose history says someone else made it is
+ * not.
+ *
+ * The menu renders inline below the trigger rather than floating. The rail is
+ * narrow and scrollable, and a floating menu inside a scroll container either
+ * clips or detaches from its trigger on scroll.
+ */
+export declare function AuthorPicker({ value, onChange, brandName, disabled }: AuthorPickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AuthorPicker.d.ts.map

package/dist/components/page-tab/AuthorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/page-tab/AuthorPicker.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,WAAW;IAC1B,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAA;IACZ,wEAAwE;IACxE,EAAE,EAAE,MAAM,CAAA;CACX;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,WAAW,CAAA;IAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IACrC,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAgB,EAAE,EAAE,iBAAiB,2CAwH/F"}