@vibefield/rosetta-room 0.0.0-stage → 0.1.1

package/dist/components/charts/treemap-layout.js

@@ -0,0 +1,140 @@
+const DEFAULT_MINIMUM_VISIBLE_SHARE = 0.009;
+const DEFAULT_MINIMUM_LABEL_WIDTH = 46;
+// Two 11px lines plus the tile's top/bottom insets and a safe interline gap.
+const DEFAULT_MINIMUM_LABEL_HEIGHT = 38;
+function sum(values) {
+    return values.reduce((total, value) => total + value, 0);
+}
+function worstAspectRatio(areas, rowLength) {
+    if (areas.length === 0 || rowLength <= 0)
+        return Number.POSITIVE_INFINITY;
+    const area = sum(areas);
+    let largest = Number.NEGATIVE_INFINITY;
+    let smallest = Number.POSITIVE_INFINITY;
+    for (const itemArea of areas) {
+        largest = Math.max(largest, itemArea);
+        smallest = Math.min(smallest, itemArea);
+    }
+    if (area <= 0 || smallest <= 0)
+        return Number.POSITIVE_INFINITY;
+    return Math.max((rowLength * rowLength * largest) / (area * area), (area * area) / (rowLength * rowLength * smallest));
+}
+/** Squarified treemap layout by Bruls, Huizing, and van Wijk. */
+function squarify(areas, containerWidth, containerHeight) {
+    const rectangles = [];
+    let remainingX = 0;
+    let remainingY = 0;
+    let remainingWidth = containerWidth;
+    let remainingHeight = containerHeight;
+    let areaIndex = 0;
+    let currentRow = [];
+    let rowRunsHorizontally = false;
+    let rowLength = 0;
+    const placeCurrentRow = () => {
+        const rowArea = sum(currentRow);
+        const rowThickness = rowLength > 0 ? rowArea / rowLength : 0;
+        let rowOffset = 0;
+        for (const area of currentRow) {
+            const itemLength = rowThickness > 0 ? area / rowThickness : 0;
+            rectangles.push(rowRunsHorizontally
+                ? {
+                    x: remainingX + rowOffset,
+                    y: remainingY,
+                    width: itemLength,
+                    height: rowThickness,
+                }
+                : {
+                    x: remainingX,
+                    y: remainingY + rowOffset,
+                    width: rowThickness,
+                    height: itemLength,
+                });
+            rowOffset += itemLength;
+        }
+        if (rowRunsHorizontally) {
+            remainingY += rowThickness;
+            remainingHeight = Math.max(0, remainingHeight - rowThickness);
+        }
+        else {
+            remainingX += rowThickness;
+            remainingWidth = Math.max(0, remainingWidth - rowThickness);
+        }
+        currentRow = [];
+    };
+    while (areaIndex < areas.length) {
+        if (currentRow.length === 0) {
+            rowRunsHorizontally = remainingHeight > remainingWidth;
+            rowLength = rowRunsHorizontally ? remainingWidth : remainingHeight;
+        }
+        const candidate = areas[areaIndex];
+        if (currentRow.length === 0 ||
+            worstAspectRatio([...currentRow, candidate], rowLength) <=
+                worstAspectRatio(currentRow, rowLength)) {
+            currentRow.push(candidate);
+            areaIndex += 1;
+        }
+        else {
+            placeCurrentRow();
+        }
+    }
+    if (currentRow.length > 0)
+        placeCurrentRow();
+    return rectangles;
+}
+function isPositiveFinite(value) {
+    return Number.isFinite(value) && value > 0;
+}
+/**
+ * Sorts, normalises, and lays out treemap items. Zero and invalid values are
+ * omitted because they have no meaningful area.
+ */
+export function createTreemapLayout(items, { width, height, minimumVisibleShare = DEFAULT_MINIMUM_VISIBLE_SHARE, minimumLabelWidth = DEFAULT_MINIMUM_LABEL_WIDTH, minimumLabelHeight = DEFAULT_MINIMUM_LABEL_HEIGHT, }) {
+    if (!Number.isFinite(width) ||
+        !Number.isFinite(height) ||
+        width <= 0 ||
+        height <= 0) {
+        return { tiles: [], hiddenLabelCount: 0, minimumSizedItemCount: 0 };
+    }
+    const sortedItems = items
+        .filter((item) => isPositiveFinite(item.value))
+        .map((item, originalIndex) => ({ item, originalIndex }))
+        .sort((left, right) => right.item.value - left.item.value || left.originalIndex - right.originalIndex)
+        .map(({ item }) => item);
+    const total = sum(sortedItems.map((item) => item.value));
+    if (total <= 0) {
+        return { tiles: [], hiddenLabelCount: 0, minimumSizedItemCount: 0 };
+    }
+    const safeMinimumShare = Number.isFinite(minimumVisibleShare)
+        ? Math.max(0, minimumVisibleShare)
+        : DEFAULT_MINIMUM_VISIBLE_SHARE;
+    const safeMinimumLabelWidth = Number.isFinite(minimumLabelWidth)
+        ? Math.max(0, minimumLabelWidth)
+        : DEFAULT_MINIMUM_LABEL_WIDTH;
+    const safeMinimumLabelHeight = Number.isFinite(minimumLabelHeight)
+        ? Math.max(0, minimumLabelHeight)
+        : DEFAULT_MINIMUM_LABEL_HEIGHT;
+    const exactShares = sortedItems.map((item) => item.value / total);
+    const visualShares = exactShares.map((share) => Math.max(share, safeMinimumShare));
+    const areaScale = (width * height) / sum(visualShares);
+    const rectangles = squarify(visualShares.map((share) => share * areaScale), width, height);
+    let hiddenLabelCount = 0;
+    let minimumSizedItemCount = 0;
+    const tiles = rectangles.map((rectangle, index) => {
+        const share = exactShares[index];
+        const isMinimumSized = share < safeMinimumShare;
+        const canShowLabel = rectangle.width >= safeMinimumLabelWidth &&
+            rectangle.height >= safeMinimumLabelHeight;
+        if (isMinimumSized)
+            minimumSizedItemCount += 1;
+        if (!canShowLabel)
+            hiddenLabelCount += 1;
+        return {
+            item: sortedItems[index],
+            rectangle,
+            share,
+            isMinimumSized,
+            canShowLabel,
+        };
+    });
+    return { tiles, hiddenLabelCount, minimumSizedItemCount };
+}

package/dist/components/charts/types.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Presentation-ready chart data schemas.
+ *
+ * These types intentionally contain no protocol rows or application view
+ * models. Callers translate domain data once, then the chart components only
+ * decide how to render it.
+ */
+export interface CalendarHeatmapCellData {
+    /** Stable key, normally an ISO calendar date. */
+    readonly id: string;
+    /** Non-negative magnitude. `null` means the period is not available yet. */
+    readonly value: number | null;
+    /** Human-readable description used for the native tooltip. */
+    readonly label: string;
+}
+export interface CalendarHeatmapWeekData {
+    /** Stable key for the column, normally the week's opening date. */
+    readonly id: string;
+    /** Optional axis label displayed above this column. */
+    readonly label?: string | undefined;
+    /** Ordered cells within the week. The app supplies Sunday through Saturday. */
+    readonly days: readonly CalendarHeatmapCellData[];
+}
+export interface CalendarHeatmapData {
+    readonly weeks: readonly CalendarHeatmapWeekData[];
+}
+export interface StreamgraphDomainPointData {
+    /** Stable x-axis key, such as an ISO date. */
+    readonly id: string;
+    /** Optional visible tick label for this point. */
+    readonly label?: string;
+}
+export interface StreamgraphSeriesData {
+    /** Stable identifier, unique within the chart. */
+    readonly id: string;
+    readonly label: string;
+    /** Any valid CSS color value. */
+    readonly color: string;
+    /**
+     * Magnitudes aligned by index with `StreamgraphData.domain`.
+     * Missing, non-finite, or negative values are rendered as zero.
+     */
+    readonly values: readonly number[];
+}
+export interface StreamgraphData {
+    /** Ordered x-axis shared by every series. Point ids must be unique. */
+    readonly domain: readonly StreamgraphDomainPointData[];
+    /** Series values must use one consistent unit within a chart. */
+    readonly series: readonly StreamgraphSeriesData[];
+}
+export interface TreemapItemData {
+    /** Stable identifier, unique within the chart. */
+    readonly id: string;
+    readonly label: string;
+    /** Non-negative magnitude used to calculate the item's area. */
+    readonly value: number;
+    /** Any valid CSS color value. */
+    readonly color: string;
+    /** The value is a lower bound (part of it could not be measured); the
+     * chart marks it rather than presenting it as exact. */
+    readonly partial?: boolean;
+}
+export interface TreemapData {
+    readonly items: readonly TreemapItemData[];
+}

package/dist/components/charts/types.js

@@ -0,0 +1,8 @@
+/**
+ * Presentation-ready chart data schemas.
+ *
+ * These types intentionally contain no protocol rows or application view
+ * models. Callers translate domain data once, then the chart components only
+ * decide how to render it.
+ */
+export {};

package/dist/components/file-viewer/FileViewerBrowsers.d.ts

@@ -0,0 +1,10 @@
+import type { HostPort } from "../../ports.js";
+/** Browser discovery and launches stay with the host. This component mounts
+ * only for a browser-readable file, so other viewers never scan the machine. */
+export declare function FileViewerBrowsers({ name, bytes, listBrowsers, openInBrowser, onReceipt }: {
+    name: string;
+    bytes: Uint8Array | null;
+    listBrowsers: HostPort["browsers"] | undefined;
+    openInBrowser: HostPort["openInBrowser"];
+    onReceipt: ((text: string) => void) | undefined;
+}): import("react").JSX.Element;

package/dist/components/file-viewer/FileViewerBrowsers.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { ExternalGlyph } from "../../lib/icons.js";
+/** Browser discovery and launches stay with the host. This component mounts
+ * only for a browser-readable file, so other viewers never scan the machine. */
+export function FileViewerBrowsers({ name, bytes, listBrowsers, openInBrowser, onReceipt }) {
+    const [list, setList] = useState({ status: "loading" });
+    const [attempt, setAttempt] = useState(0);
+    const [pending, setPending] = useState(null);
+    const launching = useRef(false);
+    const mounted = useRef(true);
+    useEffect(() => {
+        mounted.current = true;
+        return () => { mounted.current = false; };
+    }, []);
+    useEffect(() => {
+        if (!listBrowsers)
+            return;
+        let alive = true;
+        let generation = 0;
+        const refresh = async () => {
+            const current = ++generation;
+            try {
+                const browsers = await listBrowsers();
+                if (alive && current === generation)
+                    setList({ status: "ready", browsers });
+            }
+            catch {
+                if (alive && current === generation)
+                    setList({ status: "failed" });
+            }
+        };
+        setList({ status: "loading" });
+        void refresh();
+        const focus = () => { void refresh(); };
+        window.addEventListener("focus", focus);
+        return () => { alive = false; window.removeEventListener("focus", focus); };
+    }, [listBrowsers, attempt]);
+    const open = async (browser) => {
+        if (bytes === null || launching.current)
+            return;
+        launching.current = true;
+        setPending(browser?.id ?? "default");
+        const label = browser?.name ?? "your browser";
+        let opened = false;
+        try {
+            opened = await openInBrowser(name, bytes, browser?.id);
+        }
+        catch { /* reported below */ }
+        if (mounted.current) {
+            launching.current = false;
+            setPending(null);
+            onReceipt?.(opened ? `opened in ${label}` : `could not open in ${label}`);
+        }
+    };
+    // Keep the existing capability for embedded hosts that do not enumerate
+    // browsers. A host returning an empty list never invents a default button.
+    if (!listBrowsers)
+        return _jsx("button", { className: "ah-iconbtn", type: "button", title: "Open in browser", "aria-label": "Open in browser", disabled: bytes === null || pending !== null, onClick: () => { void open(); }, children: _jsx(ExternalGlyph, {}) });
+    return _jsx("div", { className: "ah-fileview__browsers", role: "group", "aria-label": "Open in browser", children: list.status === "loading" ? _jsx("span", { className: "ah-fileview__browser-status", role: "status", children: "Finding browsers\u2026" })
+            : list.status === "failed" ? _jsx("button", { className: "ah-iconbtn", type: "button", title: "Could not find browsers. Retry", "aria-label": "Retry browser detection", onClick: () => setAttempt(value => value + 1), children: _jsx(ExternalGlyph, {}) })
+                : list.browsers.length === 0 ? _jsx("span", { className: "ah-fileview__browser-status", role: "status", children: "No supported browsers found" })
+                    : list.browsers.map(browser => _jsx("button", { className: "ah-iconbtn ah-fileview__browser", type: "button", "data-browser-id": browser.id, title: `Open in ${browser.name}`, "aria-label": `Open in ${browser.name}`, "aria-busy": pending === browser.id, disabled: bytes === null || pending !== null, onClick: () => { void open(browser); }, children: browser.icon ? _jsx("img", { src: browser.icon, alt: "", draggable: false })
+                            : _jsx("span", { className: "ah-fileview__browser-fallback", "aria-hidden": "true", children: browser.name.charAt(0) }) }, browser.id)) });
+}

package/dist/components/file-viewer/FileViewerDialog.d.ts

@@ -0,0 +1,33 @@
+import type { KeyboardEventHandler, ReactNode } from "react";
+import type { HostPort } from "../../ports.js";
+import type { FileHandle, FileSource, ViewBodyProps } from "./types.js";
+export interface FileViewerDialogProps {
+    readonly renderMarkdown?: ViewBodyProps["renderMarkdown"];
+    /** The file being read, or `null` for a closed dialog. */
+    readonly handle: FileHandle | null;
+    /** Where bytes come from. Must be stable across renders. */
+    readonly source: FileSource;
+    /** The project's §2.6 accent, so the file wears the colour of the thing it
+     * belongs to — the same marker its project and session already carry. */
+    readonly tint: string | null;
+    readonly homeDirectory: string | null;
+    readonly onClose: () => void;
+    /** The room's receipt line, so an act is never silent. */
+    readonly onReceipt?: (text: string) => void;
+    /** Desktop browser capabilities, absent in a plain browser tab. */
+    readonly openInBrowser: HostPort["openInBrowser"] | null;
+    readonly listBrowsers?: HostPort["browsers"] | undefined;
+    /** Open this handle as a CHANGE rather than as a file. The registry reads
+     * kinds off a name, and a name cannot say which of the two acts is being
+     * served. */
+    readonly asDiff?: boolean;
+    readonly gallery?: {
+        readonly key: string;
+        readonly footer: ReactNode;
+        readonly previous: (() => void) | null;
+        readonly next: (() => void) | null;
+        readonly onKeyDown: KeyboardEventHandler<HTMLDivElement>;
+        readonly onRetry: () => void;
+    };
+}
+export declare function FileViewerDialog({ handle, source, tint, homeDirectory, onClose, onReceipt, openInBrowser, listBrowsers, asDiff, renderMarkdown, gallery, }: FileViewerDialogProps): import("react").JSX.Element | null;

package/dist/components/file-viewer/FileViewerDialog.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// The popup. A modal, on purpose: reading a file is a DETOUR from reading
+// history, and a surface you must dismiss says that, where a fifth column
+// would quietly become a second reading surface competing with the measure.
+// It also keeps H-2 — the room's columns change content, never geometry, and
+// a layer above them changes neither.
+//
+// The material is the one the design system already provisioned and nothing
+// had yet spent: `--vf-shadow-dialog`, `--vf-backdrop-dim`, and the stage
+// receding to 0.98 behind it (DESIGN.md §5 and motion law M5). No new tokens.
+//
+// Radix owns the mechanics a modal must not get wrong — focus trap, focus
+// restore, Escape, scroll lock, `aria-modal`, the portal. It was already a
+// dependency of this app and had no user; this is its user.
+import { useEffect, useState } from "react";
+import { DialogShell } from "../ui/index.js";
+import { diffKind, imageKind, resolveKind } from "./registry.js";
+import { useFileContent } from "./use-file-content.js";
+import { FileViewerBrowsers } from "./FileViewerBrowsers.js";
+import { FileViewerHeader } from "./FileViewerHeader.js";
+import { fmtBytes } from "../../lib/format.js";
+export function FileViewerDialog({ handle, source, tint, homeDirectory, onClose, onReceipt, openInBrowser, listBrowsers, asDiff = false, renderMarkdown, gallery, }) {
+    const [attempt, setAttempt] = useState(0);
+    const content = useFileContent(handle, source, asDiff, attempt, Boolean(gallery));
+    const retry = () => { gallery?.onRetry(); setAttempt(value => value + 1); };
+    // The reader's choice of mode, kept only while it names a mode the current
+    // view actually has — so opening a `.md` after an image does not land on a
+    // switch position that no longer exists.
+    const [chosen, setChosen] = useState(null);
+    const [fullscreen, setFullscreen] = useState(false);
+    const fileKey = gallery?.key ?? handle?.key ?? null;
+    useEffect(() => {
+        setChosen(null);
+        setFullscreen(false);
+    }, [fileKey]);
+    if (handle === null)
+        return null;
+    // Before the bytes land, the name is the only evidence there is — and it is
+    // what the reader clicked, so the band can be right about it immediately.
+    // A read that disagrees (a `.png` full of text, a `.json` full of NULs)
+    // corrects the chip when it resolves.
+    const kind = content.status === "ready"
+        ? content.file.kind
+        : asDiff
+            ? diffKind(handle.name)
+            : gallery ? imageKind(handle.name) : resolveKind(handle.name);
+    const modes = kind.viewer.modes ?? [];
+    const mode = chosen !== null && modes.some((m) => m.id === chosen) ? chosen : (modes[0]?.id ?? "");
+    const perform = (action) => {
+        if (action === "copy-path") {
+            const path = handle.path;
+            if (path === null)
+                return null;
+            return {
+                id: action,
+                label: "Copy path",
+                glyph: "copy",
+                run: () => {
+                    void navigator.clipboard
+                        .writeText(path)
+                        .then(() => onReceipt?.("path copied"))
+                        .catch(() => onReceipt?.("the clipboard refused"));
+                },
+            };
+        }
+        return null;
+    };
+    const actions = (kind.viewer.actions ?? [])
+        .map(perform)
+        .filter((action) => action !== null);
+    const browserBytes = content.status === "ready" && content.file.handle.key === handle.key
+        ? content.file.bytes : content.status === "empty" ? new Uint8Array(0) : null;
+    const browserActions = openInBrowser && kind.viewer.actions?.includes("open-in-browser")
+        ? _jsx(FileViewerBrowsers, { name: handle.name, bytes: browserBytes, listBrowsers: listBrowsers, openInBrowser: openInBrowser, onReceipt: onReceipt }, handle.key)
+        : null;
+    const Body = kind.viewer.Body;
+    return (_jsxs(DialogShell, { title: `${handle.name}${handle.path !== null ? ` — ${handle.path}` : ""}`, onClose: onClose, fullscreen: fullscreen, onExitFullscreen: () => setFullscreen(false), onKeyDown: gallery?.onKeyDown, children: [_jsx(FileViewerHeader, { handle: handle.size < 0 && content.status === "ready" && !content.file.image ? { ...handle, size: content.file.bytes.byteLength } : handle, kind: kind, tint: tint, homeDirectory: homeDirectory, modes: modes, mode: mode, onModeChange: setChosen, actions: actions, browserActions: browserActions, fullscreen: fullscreen, onToggleFullscreen: () => setFullscreen((current) => !current), onClose: onClose }), _jsxs("div", { className: "ah-fileview__body", "data-gallery": gallery?.footer ? "" : undefined, children: [content.status === "ready" ? (_jsx(Body, { file: content.file, mode: mode, renderMarkdown: renderMarkdown, onRetry: gallery ? retry : undefined }, `${handle.key}:${attempt}`)) : content.status === "reading" ? (
+                    // Styled to appear only if the read is slow enough to be worth
+                    // mentioning; a local file that lands in three milliseconds
+                    // never flashes this.
+                    _jsxs("div", { className: "ah-fileview__state", "data-waiting": true, children: [_jsx("b", { children: gallery ? "Loading image…" : "Reading" }), !gallery && _jsxs("span", { children: [fmtBytes(handle.size), " from the worktree engine."] })] })) : content.status === "empty" ? (_jsxs("div", { className: "ah-fileview__state", children: [_jsx("b", { children: "This file is empty" }), _jsx("span", { children: "Zero bytes on disk. There is nothing to show, and nothing is wrong." })] })) : content.status === "too-large" ? (_jsxs("div", { className: "ah-fileview__state", children: [_jsx("b", { children: "Too large to open here" }), _jsxs("span", { children: [handle.size < 0 ? "The image exceeds" : `${fmtBytes(handle.size)}, against`, " a ", fmtBytes(content.limit), " limit for a", " ", kind.label, " file. The limit is here so the window stays answerable."] })] })) : (_jsxs("div", { className: "ah-fileview__state", children: [_jsx("b", { children: "Could not read this file" }), _jsx("span", { children: content.reason }), gallery && _jsx("button", { className: "ah-fileview__retry", type: "button", onClick: retry, children: "Retry" })] })), gallery?.footer && _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "ah-image-gallery__step ah-image-gallery__step--previous", "aria-label": "Previous image", title: "Previous image (\u2190)", "aria-disabled": gallery.previous === null, onClick: () => gallery.previous?.(), children: "\u2039" }), _jsx("button", { type: "button", className: "ah-image-gallery__step ah-image-gallery__step--next", "aria-label": "Next image", title: "Next image (\u2192)", "aria-disabled": gallery.next === null, onClick: () => gallery.next?.(), children: "\u203A" })] })] }), gallery?.footer] }));
+}

package/dist/components/file-viewer/FileViewerHeader.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import type { FileHandle, FileKind, ViewMode } from "./types.js";
+export interface HeaderAction {
+    readonly id: string;
+    readonly label: string;
+    readonly glyph: "copy" | "external";
+    readonly disabled?: boolean;
+    readonly run: () => void;
+}
+export interface FileViewerHeaderProps {
+    readonly handle: FileHandle;
+    /** What the registry decided, or `null` before the read resolves it — the
+     * band names the file either way. */
+    readonly kind: FileKind | null;
+    readonly tint: string | null;
+    readonly homeDirectory: string | null;
+    readonly modes: readonly ViewMode[];
+    readonly mode: string;
+    readonly onModeChange: (mode: string) => void;
+    readonly actions: readonly HeaderAction[];
+    readonly browserActions?: ReactNode;
+    readonly fullscreen: boolean;
+    readonly onToggleFullscreen: () => void;
+    readonly onClose: () => void;
+}
+export declare function FileViewerHeader({ handle, kind, tint, homeDirectory, modes, mode, onModeChange, actions, browserActions, fullscreen, onToggleFullscreen, onClose, }: FileViewerHeaderProps): import("react").JSX.Element;

package/dist/components/file-viewer/FileViewerHeader.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColumnHeading } from "../ui/index.js";
+import { SegmentedControl } from "../ui/index.js";
+import { CloseGlyph, CopyGlyph, ExitFullscreenGlyph, ExternalGlyph, FullscreenGlyph, } from "../../lib/icons.js";
+import { fmtBytes, tildePath } from "../../lib/format.js";
+/** The folder the file is in, tilde-abbreviated. `null` when the caller could
+ * not derive a path, which is a missing line rather than a wrong one. */
+function directoryOf(path, home) {
+    if (path === null)
+        return null;
+    const cut = path.lastIndexOf("/");
+    return cut <= 0 ? path : tildePath(path.slice(0, cut), home);
+}
+export function FileViewerHeader({ handle, kind, tint, homeDirectory, modes, mode, onModeChange, actions, browserActions, fullscreen, onToggleFullscreen, onClose, }) {
+    const directory = directoryOf(handle.path, homeDirectory);
+    return (_jsxs("header", { className: "ah-fileview__head", children: [_jsxs("div", { className: "ah-fileview__title", children: [_jsx(ColumnHeading, { name: handle.name, tint: tint, mono: true, title: handle.path ?? undefined }), kind !== null && _jsx("span", { className: "ah-fileview__kind", children: kind.label }), handle.size > 0 && _jsx("span", { className: "ah-caption tnum", children: fmtBytes(handle.size) })] }), _jsxs("div", { className: "ah-fileview__acts", children: [modes.length > 1 && (_jsx(SegmentedControl, { className: "ah-tabseg", accessibleLabel: "How to read this file", value: mode, options: modes.map((option) => ({ value: option.id, label: option.label })), onValueChange: onModeChange })), browserActions, actions.map((action) => (_jsx("button", { className: "ah-iconbtn", type: "button", title: action.label, "aria-label": action.label, disabled: action.disabled, onClick: action.run, children: action.glyph === "copy" ? _jsx(CopyGlyph, {}) : _jsx(ExternalGlyph, {}) }, action.id))), _jsx("button", { className: "ah-iconbtn", type: "button", title: fullscreen ? "Exit full screen (Esc)" : "View full screen", "aria-label": fullscreen ? "Exit full screen" : "View full screen", "aria-pressed": fullscreen, onClick: onToggleFullscreen, children: fullscreen ? _jsx(ExitFullscreenGlyph, {}) : _jsx(FullscreenGlyph, {}) }), _jsx("button", { className: "ah-iconbtn", type: "button", title: "Close (Esc)", "aria-label": "Close", onClick: onClose, children: _jsx(CloseGlyph, {}) })] }), directory !== null && (_jsx("p", { className: "ah-fileview__path ah-idname", title: handle.path ?? undefined, children: _jsx("bdi", { children: directory }) }))] }));
+}

package/dist/components/file-viewer/ImageGalleryDialog.d.ts

@@ -0,0 +1,14 @@
+import type { FileViewerDialogProps } from "./FileViewerDialog.js";
+import type { FileHandle } from "./types.js";
+import "../../styles/image-gallery.css";
+export interface GalleryImage {
+    readonly key: string;
+    readonly label: string;
+    /** Unrecorded/reference-only images keep their place without an invented read. */
+    readonly handle: FileHandle | null;
+}
+export interface ImageGalleryDialogProps extends Omit<FileViewerDialogProps, "handle" | "gallery" | "asDiff" | "renderMarkdown"> {
+    readonly images: readonly GalleryImage[];
+    readonly initialKey: string;
+}
+export declare function ImageGalleryDialog({ images, initialKey, source, ...props }: ImageGalleryDialogProps): import("react").JSX.Element | null;

package/dist/components/file-viewer/ImageGalleryDialog.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { FileViewerDialog } from "./FileViewerDialog.js";
+import { createGallerySource } from "./gallery-source.js";
+import { useFileContent } from "./use-file-content.js";
+import { useImageUrl, useImageVisibility } from "./image-resource.js";
+import "../../styles/image-gallery.css";
+function Thumbnail({ image, source, selected, index, revision, onSelect }) {
+    const ref = useRef(null);
+    const visible = useImageVisibility(ref, true);
+    const [bytesUrl, setBytesUrl] = useState(null);
+    const [failed, setFailed] = useState(false);
+    const content = useFileContent(visible || selected ? image.handle : null, source, false, revision, true);
+    const addressed = useImageUrl(content.status === "ready" ? content.file.image : null, "rail", revision);
+    useEffect(() => {
+        if (content.status !== "ready") {
+            setBytesUrl(null);
+            return;
+        }
+        setFailed(false);
+        if (content.file.image) {
+            setBytesUrl(null);
+            return;
+        }
+        const objectUrl = URL.createObjectURL(new Blob([content.file.bytes], { type: content.file.kind.mime ?? "application/octet-stream" }));
+        setBytesUrl(objectUrl);
+        return () => URL.revokeObjectURL(objectUrl);
+    }, [content, revision]);
+    const url = content.status === "ready" && content.file.image ? addressed.url : bytesUrl;
+    const label = `${image.label}${image.handle ? ` — ${image.handle.name}` : " — Image unavailable"}`;
+    return _jsx("button", { ref: ref, className: "ah-image-gallery__thumb", type: "button", "data-image-key": image.key, "aria-label": `View ${label}`, title: label, disabled: image.handle === null, "aria-current": selected ? "true" : undefined, tabIndex: selected ? 0 : -1, onClick: onSelect, children: (visible || selected) && url && !failed ? _jsx("img", { src: url, alt: "", decoding: "async", onError: () => setFailed(true) })
+            : _jsx("span", { "aria-hidden": "true", children: image.handle === null ? "▧" : index + 1 }) });
+}
+export function ImageGalleryDialog({ images, initialKey, source, ...props }) {
+    const id = useId();
+    const [selectedKey, setSelectedKey] = useState(initialKey);
+    const [revision, setRevision] = useState(0);
+    const shared = useMemo(() => createGallerySource(source), [source]);
+    useEffect(() => () => shared.dispose(), [shared]);
+    const rail = useRef(null);
+    const selected = images.findIndex(image => image.key === selectedKey);
+    const current = images[selected];
+    const available = images.flatMap((image, index) => image.handle === null ? [] : [index]);
+    const position = available.indexOf(selected);
+    const previous = available[position - 1] ?? -1;
+    const next = available[position + 1] ?? -1;
+    useLayoutEffect(() => {
+        const node = rail.current;
+        const thumb = node?.querySelector('[aria-current="true"]');
+        if (!node || !thumb)
+            return;
+        const reveal = () => {
+            const bounds = node.getBoundingClientRect(), target = thumb.getBoundingClientRect();
+            if (target.left < bounds.left + 4)
+                node.scrollLeft += target.left - bounds.left - 4;
+            else if (target.right > bounds.right - 4)
+                node.scrollLeft += target.right - bounds.right + 4;
+        };
+        reveal();
+        const observer = new ResizeObserver(reveal);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [selectedKey]);
+    if (!current?.handle)
+        return null;
+    const select = (index, focus = false) => {
+        const image = images[index];
+        if (!image?.handle)
+            return;
+        setSelectedKey(image.key);
+        if (focus)
+            rail.current?.querySelectorAll("button")[index]?.focus({ preventScroll: true });
+    };
+    const navigate = (event) => {
+        if (images.length <= 1)
+            return;
+        if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+            return;
+        if (!(event.target instanceof Element) || event.target.closest('input, textarea, select, [contenteditable="true"], .ah-code-shell'))
+            return;
+        const index = event.key === "ArrowLeft" ? previous : event.key === "ArrowRight" ? next
+            : event.key === "Home" ? available[0] ?? -1
+                : event.key === "End" ? available.at(-1) ?? -1 : null;
+        if (index === null)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        select(index, Boolean(event.target.closest(".ah-image-gallery__rail")));
+    };
+    return _jsx(FileViewerDialog, { ...props, handle: current.handle, source: shared.source, gallery: { key: id, onKeyDown: navigate, onRetry: () => {
+                shared.invalidate(current.handle.key);
+                setRevision(value => value + 1);
+            },
+            previous: previous >= 0 ? () => select(previous) : null,
+            next: next >= 0 ? () => select(next) : null,
+            footer: images.length > 1 ? _jsxs("footer", { className: "ah-image-gallery", children: [_jsxs("div", { className: "ah-image-gallery__caption", children: [_jsx("span", { children: "Images in this row" }), _jsxs("span", { role: "status", "aria-live": "polite", "aria-atomic": "true", children: [selected + 1, " / ", images.length] })] }), _jsx("div", { className: "ah-image-gallery__rail", ref: rail, role: "group", "aria-label": "Images in this row", children: images.map((image, index) => _jsx(Thumbnail, { image: image, source: shared.source, index: index, revision: revision, selected: index === selected, onSelect: () => select(index) }, image.key)) })] }) : null,
+        } });
+}

package/dist/components/file-viewer/diff/index.d.ts

@@ -0,0 +1,2 @@
+export { parseDiff } from "./parse.js";
+export type { DiffAbsence, DiffHunk, DiffLine, DiffLineKind, ParsedDiff } from "./types.js";

package/dist/components/file-viewer/diff/index.js

@@ -0,0 +1,2 @@
+// A unified diff, parsed to hunks. Pure: no git, no IO, no clock.
+export { parseDiff } from "./parse.js";

package/dist/components/file-viewer/diff/parse.d.ts

@@ -0,0 +1,2 @@
+import type { ParsedDiff } from "./types.js";
+export declare function parseDiff(text: string): ParsedDiff;