mosage 0.2.0 → 0.8.0

package/src/app/lib/view-mode.test.ts

@@ -0,0 +1,91 @@
+/**
+ * Which page the counter names, and how many sheets share a grid row.
+ *
+ * Two-up and grid put several sheets on the same top, so "the sheet under the
+ * reading line" stops being one sheet. These cases pin down what the counter
+ * says then — plus the guarantee that a single column reads exactly as it did.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { gridColumns, pageInView, READING_LINE } from './view-mode';
+
+const GAP = 24;
+const GUTTER = 48;
+const VIEW_HEIGHT = 900;
+const LINE = VIEW_HEIGHT * READING_LINE;
+
+function layout(count: number, columns: number, height: number) {
+  const rowTop = (row: number) => GUTTER + row * (height + GAP);
+  const sheets = Array.from({ length: count }, (_, index) => ({
+    top: rowTop(Math.floor(index / columns)),
+    height,
+  }));
+  return { sheets, rowTop };
+}
+
+const view = (top: number) => ({ top, height: VIEW_HEIGHT });
+
+describe('gridColumns', () => {
+  it('fits as many columns as the pane holds, gaps included', () => {
+    // 4 × 238 + 3 × 24 = 1024; a fifth sheet would need 1286.
+    expect(gridColumns(238, 1100, GAP, 30)).toBe(4);
+    expect(gridColumns(238, 1024, GAP, 30)).toBe(4);
+    expect(gridColumns(238, 1023, GAP, 30)).toBe(3);
+  });
+
+  it('never drops below one column, even in a pane narrower than a sheet', () => {
+    expect(gridColumns(238, 100, GAP, 30)).toBe(1);
+    expect(gridColumns(238, 0, GAP, 30)).toBe(1);
+  });
+
+  it('never opens more columns than there are pages', () => {
+    expect(gridColumns(238, 5000, GAP, 3)).toBe(3);
+  });
+});
+
+describe('pageInView', () => {
+  it('reads a single column exactly as before: the last sheet above the line', () => {
+    const { sheets, rowTop } = layout(10, 1, 1123);
+    expect(pageInView(sheets, view(0), null)).toBe(1);
+    expect(pageInView(sheets, view(rowTop(1) - LINE), null)).toBe(2);
+    expect(pageInView(sheets, view(rowTop(1) - LINE - 1), null)).toBe(1);
+    expect(pageInView(sheets, view(rowTop(5) - LINE + 500), null)).toBe(6);
+  });
+
+  it('names page 1 while the line is still above the first sheet', () => {
+    const { sheets } = layout(3, 1, 1123);
+    expect(pageInView(sheets, view(-LINE), null)).toBe(1);
+  });
+
+  it('names the first page of the row under the line when nothing was chosen', () => {
+    const { sheets, rowTop } = layout(30, 4, 337);
+    // The third row holds pages 9–12.
+    expect(pageInView(sheets, view(rowTop(2) - LINE), null)).toBe(9);
+  });
+
+  it('keeps a chosen page that sits in the row under the line', () => {
+    const { sheets, rowTop } = layout(30, 4, 337);
+    expect(pageInView(sheets, view(rowTop(2) - LINE), 11)).toBe(11);
+  });
+
+  it('keeps a chosen page that is wholly on screen, even off the line', () => {
+    const { sheets, rowTop } = layout(30, 4, 337);
+    // Scrolled to the bottom: the last row (29–30) is on screen, but the line
+    // can never reach it — it sits in the row above.
+    const bottom = rowTop(7) + 337 + GUTTER * 1.5 - VIEW_HEIGHT;
+    expect(pageInView(sheets, view(bottom), null)).toBe(25);
+    expect(pageInView(sheets, view(bottom), 30)).toBe(30);
+  });
+
+  it('lets go of a chosen page once it is neither on the line nor on screen', () => {
+    const { sheets, rowTop } = layout(30, 4, 337);
+    expect(pageInView(sheets, view(rowTop(5) - LINE), 2)).toBe(21);
+  });
+
+  it('pairs a spread that opens on a right-hand page', () => {
+    // Page 1 alone, then 2–3 and 4–5 side by side.
+    const sheets = [48, 861, 861, 1674, 1674].map((top) => ({ top, height: 789 }));
+    expect(pageInView(sheets, view(861 - LINE), null)).toBe(2);
+    expect(pageInView(sheets, view(861 - LINE), 3)).toBe(3);
+  });
+});

package/src/app/lib/view-mode.ts

@@ -0,0 +1,104 @@
+import { useCallback, useMemo, useState } from 'react';
+
+/**
+ * How the viewer lays the sheets out. Every mode keeps every page mounted, in
+ * order, as a direct child of one scrolling grid — the page counter, page jump,
+ * the outline, find and the inspector all locate a sheet by its index there, so
+ * none of them has to know which mode is on.
+ */
+export const VIEW_MODES = ['continuous', 'two-up', 'grid'] as const;
+export type ViewMode = (typeof VIEW_MODES)[number];
+
+const STORAGE_PREFIX = 'mosage:view-mode:';
+
+function isViewMode(value: unknown): value is ViewMode {
+  return VIEW_MODES.some((mode) => mode === value);
+}
+
+function readViewMode(docId: string | undefined): ViewMode {
+  if (!docId) return 'continuous';
+  try {
+    const stored = localStorage.getItem(STORAGE_PREFIX + docId);
+    return isViewMode(stored) ? stored : 'continuous';
+  } catch {
+    return 'continuous';
+  }
+}
+
+/**
+ * The layout the reader last used for this document.
+ *
+ * The route keeps its state when it moves from one document to another, so the
+ * choice is held together with the document it was made for; anything else
+ * reads what that document last stored.
+ */
+export function useViewMode(docId: string | undefined): [ViewMode, (mode: ViewMode) => void] {
+  const [chosen, setChosen] = useState<{ docId: string | undefined; mode: ViewMode } | null>(null);
+  const stored = useMemo(() => readViewMode(docId), [docId]);
+  const mode = chosen && chosen.docId === docId ? chosen.mode : stored;
+
+  const choose = useCallback(
+    (next: ViewMode) => {
+      setChosen({ docId, mode: next });
+      if (!docId) return;
+      try {
+        localStorage.setItem(STORAGE_PREFIX + docId, next);
+      } catch {
+        /* Blocked storage forgets the choice on reload; the choice itself stands. */
+      }
+    },
+    [docId],
+  );
+
+  return [mode, choose];
+}
+
+/**
+ * Sheets per grid row: as many as the pane holds at the current zoom, and never
+ * more than there are pages, or a short document's only row would sit off-centre
+ * beside empty columns.
+ */
+export function gridColumns(
+  sheetWidth: number,
+  availableWidth: number,
+  gap: number,
+  pageCount: number,
+): number {
+  const fit = Math.floor((availableWidth + gap) / (sheetWidth + gap));
+  return Math.max(1, Math.min(fit, pageCount));
+}
+
+type Box = { top: number; height: number };
+
+/**
+ * Where the line being read sits, as a fraction of the viewport's height. A
+ * full-size page is taller than the viewport, so intersection ratios never cross
+ * a useful threshold; the row under this line is the one being read.
+ */
+export const READING_LINE = 1 / 3;
+
+/**
+ * The page the reader is on, from each sheet's box in scroll coordinates: the
+ * first page of the row under the reading line.
+ *
+ * A page the reader chose — page jump, a thumbnail, the outline, a find hit —
+ * stays current while it is in that row or wholly on screen. Without that, a
+ * jump to the right-hand page of a spread reads back as the left one, and a jump
+ * into a grid's last row, which can never scroll up to the line, reads back as
+ * a row above it.
+ */
+export function pageInView(sheets: readonly Box[], view: Box, chosen: number | null): number {
+  const line = view.top + view.height * READING_LINE;
+  let rowTop = Number.NEGATIVE_INFINITY;
+  for (const sheet of sheets) {
+    if (sheet.top <= line && sheet.top > rowTop) rowTop = sheet.top;
+  }
+
+  const pick = chosen === null ? undefined : sheets[chosen - 1];
+  if (chosen !== null && pick) {
+    const onScreen = pick.top >= view.top && pick.top + pick.height <= view.top + view.height;
+    if (onScreen || pick.top === rowTop) return chosen;
+  }
+
+  return Math.max(1, sheets.findIndex((sheet) => sheet.top === rowTop) + 1);
+}

package/src/app/main.tsx

@@ -0,0 +1,14 @@
+import { ThemeProvider } from 'next-themes';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './app';
+import './styles.css';
+
+// biome-ignore lint/style/noNonNullAssertion: #root is guaranteed by index.html
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+      <App />
+    </ThemeProvider>
+  </StrictMode>,
+);

package/src/app/routes/assets.tsx

@@ -0,0 +1,257 @@
+import { Check, Copy, FileIcon, Loader2, Trash2, Upload } from 'lucide-react';
+import { type DragEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  type Asset,
+  deleteAsset,
+  formatBytes,
+  GLOBAL_SCOPE,
+  importSnippet,
+  isPreviewable,
+  listAssets,
+  renameAsset,
+  uploadAsset,
+} from '../lib/assets';
+import { docIds } from '../lib/docs';
+import { cn } from '../lib/utils';
+
+export function AssetsPage() {
+  const scopes = useMemo(() => [GLOBAL_SCOPE, ...[...docIds].sort()], []);
+  const [scope, setScope] = useState<string>(GLOBAL_SCOPE);
+  const [assets, setAssets] = useState<Asset[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const refresh = useCallback(async (target: string) => {
+    const result = await listAssets(target);
+    if (result.ok) {
+      setAssets(result.value);
+      setError(null);
+    } else {
+      setAssets([]);
+      setError(result.error);
+    }
+  }, []);
+
+  useEffect(() => {
+    setAssets(null);
+    void refresh(scope);
+  }, [scope, refresh]);
+
+  const upload = useCallback(
+    async (files: FileList | File[]) => {
+      setBusy(true);
+      setError(null);
+      for (const file of Array.from(files)) {
+        let result = await uploadAsset(scope, file);
+        if (!result.ok && result.error === 'asset exists') {
+          const replace = window.confirm(`"${file.name}" already exists in ${scope}. Replace it?`);
+          if (!replace) continue;
+          result = await uploadAsset(scope, file, { overwrite: true });
+        }
+        if (!result.ok) setError(`${file.name}: ${result.error}`);
+      }
+      await refresh(scope);
+      setBusy(false);
+    },
+    [scope, refresh],
+  );
+
+  const onDrop = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setDragging(false);
+    if (e.dataTransfer.files.length > 0) void upload(e.dataTransfer.files);
+  };
+
+  return (
+    <div>
+      <header className="border-border border-b px-8 py-6">
+        <h1 className="font-medium text-lg tracking-tight">Assets</h1>
+        <p className="mt-1 text-muted-foreground text-sm">
+          Images and fonts documents can import. Global files live in{' '}
+          <code className="font-mono">assets/</code>; per-document files in{' '}
+          <code className="font-mono">docs/&lt;id&gt;/assets/</code>.
+        </p>
+      </header>
+
+      <div className="flex flex-wrap items-center gap-2 px-8 pt-6">
+        {scopes.map((s) => (
+          <button
+            key={s}
+            type="button"
+            onClick={() => setScope(s)}
+            className={cn(
+              'rounded-full border px-3 py-1 text-xs transition-colors',
+              s === scope
+                ? 'border-transparent bg-primary text-primary-foreground'
+                : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground',
+            )}
+          >
+            {s === GLOBAL_SCOPE ? 'Global' : s}
+          </button>
+        ))}
+      </div>
+
+      <div className="px-8 py-6">
+        {/* biome-ignore lint/a11y/noStaticElementInteractions: drop target is an enhancement — the "Choose files" button is the keyboard path */}
+        <div
+          onDragOver={(e) => {
+            e.preventDefault();
+            setDragging(true);
+          }}
+          onDragLeave={() => setDragging(false)}
+          onDrop={onDrop}
+          className={cn(
+            'flex items-center justify-between gap-4 rounded-lg border border-dashed px-5 py-4 transition-colors',
+            dragging ? 'border-primary bg-accent' : 'border-border',
+          )}
+        >
+          <div className="text-sm">
+            <p className="font-medium">Drop files to upload</p>
+            <p className="mt-0.5 text-muted-foreground text-xs">
+              Up to 25 MB each · png, jpg, svg, webp, pdf, woff2, csv…
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={() => inputRef.current?.click()}
+            disabled={busy}
+            className="flex flex-none items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-primary-foreground text-xs transition-opacity hover:opacity-90 disabled:opacity-60"
+          >
+            {busy ? <Loader2 className="size-3.5 animate-spin" /> : <Upload className="size-3.5" />}
+            Choose files
+          </button>
+          <input
+            ref={inputRef}
+            type="file"
+            multiple
+            hidden
+            onChange={(e) => {
+              if (e.target.files?.length) void upload(e.target.files);
+              e.target.value = '';
+            }}
+          />
+        </div>
+
+        {error && (
+          <p className="mt-3 rounded-md border border-border bg-muted px-3 py-2 text-xs">{error}</p>
+        )}
+
+        {assets === null ? (
+          <div className="grid place-items-center py-16">
+            <Loader2 className="size-4 animate-spin text-muted-foreground" />
+          </div>
+        ) : assets.length === 0 ? (
+          <p className="py-16 text-center text-muted-foreground text-sm">
+            No assets in {scope === GLOBAL_SCOPE ? 'the global folder' : scope} yet.
+          </p>
+        ) : (
+          <div className="mt-6 grid gap-5 [grid-template-columns:repeat(auto-fill,minmax(180px,1fr))]">
+            {assets.map((asset) => (
+              <AssetCard
+                key={asset.name}
+                asset={asset}
+                scope={scope}
+                onChanged={() => refresh(scope)}
+                onError={setError}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function AssetCard({
+  asset,
+  scope,
+  onChanged,
+  onError,
+}: {
+  asset: Asset;
+  scope: string;
+  onChanged: () => void;
+  onError: (message: string) => void;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  const copyImport = async () => {
+    try {
+      await navigator.clipboard.writeText(importSnippet(asset));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch (err) {
+      onError(String((err as Error).message));
+    }
+  };
+
+  const rename = async () => {
+    const next = window.prompt('New file name', asset.name);
+    if (!next || next === asset.name) return;
+    const result = await renameAsset(scope, asset.name, next);
+    if (!result.ok) onError(`${asset.name}: ${result.error}`);
+    onChanged();
+  };
+
+  const remove = async () => {
+    if (!window.confirm(`Delete "${asset.name}"? This removes the file from disk.`)) return;
+    const result = await deleteAsset(scope, asset.name);
+    if (!result.ok) onError(`${asset.name}: ${result.error}`);
+    onChanged();
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="relative grid h-32 place-items-center overflow-hidden rounded-md border border-border bg-muted">
+        {isPreviewable(asset.mime) ? (
+          <img
+            src={asset.url}
+            alt={asset.name}
+            className="max-h-full max-w-full object-contain p-2"
+          />
+        ) : (
+          <FileIcon className="size-6 text-muted-foreground" />
+        )}
+        {asset.unused && (
+          <span className="absolute top-1.5 left-1.5 rounded-full bg-background/90 px-1.5 py-0.5 text-[10px] text-muted-foreground">
+            unused
+          </span>
+        )}
+      </div>
+
+      <div className="min-w-0">
+        <button
+          type="button"
+          onClick={rename}
+          title="Rename"
+          className="block w-full truncate text-left text-xs hover:underline"
+        >
+          {asset.name}
+        </button>
+        <p className="mt-0.5 text-[11px] text-muted-foreground">{formatBytes(asset.size)}</p>
+      </div>
+
+      <div className="flex items-center gap-1">
+        <button
+          type="button"
+          onClick={copyImport}
+          title={importSnippet(asset)}
+          className="flex flex-1 items-center justify-center gap-1 rounded-md border border-border px-2 py-1 text-[11px] transition-colors hover:bg-accent"
+        >
+          {copied ? <Check className="size-3" /> : <Copy className="size-3" />}
+          {copied ? 'Copied' : 'Import'}
+        </button>
+        <button
+          type="button"
+          onClick={remove}
+          aria-label={`Delete ${asset.name}`}
+          className="flex size-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+        >
+          <Trash2 className="size-3" />
+        </button>
+      </div>
+    </div>
+  );
+}