mosage 0.1.0 → 0.8.0

package/src/app/components/themes/theme-preview.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react';
+import { type DocPage, isPageSizeName, resolvePageGeometry } from '../../lib/sdk';
+import { loadThemeDemo, type ThemeDemoModule, type ThemeMeta } from '../../lib/themes';
+import { PageFrame } from '../page-frame';
+
+type Props = {
+  theme: ThemeMeta;
+  width: number;
+  /** Render every demo page instead of just the first. */
+  all?: boolean;
+};
+
+export function ThemePreview({ theme, width, all = false }: Props) {
+  const [demo, setDemo] = useState<ThemeDemoModule | null>(null);
+
+  useEffect(() => {
+    if (!theme.hasDemo) return;
+    let cancelled = false;
+    loadThemeDemo(theme.id)
+      .then((mod) => {
+        if (!cancelled) setDemo(mod);
+      })
+      .catch(() => {
+        if (!cancelled) setDemo(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [theme.id, theme.hasDemo]);
+
+  const geometry = resolvePageGeometry(
+    isPageSizeName(theme.pageSize) ? { pageSize: theme.pageSize } : undefined,
+  );
+  const scale = width / geometry.width;
+  const pages = (demo?.default ?? []).filter(
+    (entry): entry is DocPage => typeof entry === 'function',
+  );
+  const shown = all ? pages : pages.slice(0, 1);
+
+  if (shown.length === 0) {
+    return (
+      <div
+        className="grid place-items-center rounded-md border border-border border-dashed bg-muted text-[11px] text-muted-foreground"
+        style={{ width, height: geometry.height * scale }}
+      >
+        {theme.hasDemo ? 'Loading…' : 'No demo'}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {shown.map((Page, index) => (
+        <div
+          // biome-ignore lint/suspicious/noArrayIndexKey: page order is the identity
+          key={index}
+          className="overflow-hidden rounded-md ring-1 ring-border"
+          style={{ width, height: geometry.height * scale }}
+        >
+          <PageFrame
+            index={index}
+            total={pages.length}
+            geometry={geometry}
+            scale={scale}
+            design={demo?.design}
+            flat
+          >
+            <Page />
+          </PageFrame>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/app/components/ui/menu.tsx

@@ -0,0 +1,143 @@
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { cn } from '../../lib/utils';
+
+type Placement = 'bottom-start' | 'bottom-end' | 'right-start';
+
+type MenuProps = {
+  trigger: (props: {
+    onClick: (e: React.MouseEvent) => void;
+    'aria-expanded': boolean;
+  }) => ReactNode;
+  children: (close: () => void) => ReactNode;
+  placement?: Placement;
+  className?: string;
+};
+
+/**
+ * Minimal anchored menu. The runtime ships to users, so the browser UI stays
+ * dependency-free rather than pulling in a headless-component library.
+ */
+export function Menu({ trigger, children, placement = 'bottom-end', className }: MenuProps) {
+  const [open, setOpen] = useState(false);
+  const [coords, setCoords] = useState<{ top: number; left: number } | null>(null);
+  const anchorRef = useRef<HTMLSpanElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const id = useId();
+
+  const close = useCallback(() => setOpen(false), []);
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    const anchor = anchorRef.current?.firstElementChild ?? anchorRef.current;
+    const panel = panelRef.current;
+    if (!anchor || !panel) return;
+    const a = anchor.getBoundingClientRect();
+    const p = panel.getBoundingClientRect();
+    const gap = 4;
+    let top = placement === 'right-start' ? a.top : a.bottom + gap;
+    let left = placement === 'bottom-end' ? a.right - p.width : a.left;
+    if (placement === 'right-start') left = a.right + gap;
+    left = Math.max(8, Math.min(left, window.innerWidth - p.width - 8));
+    top = Math.max(8, Math.min(top, window.innerHeight - p.height - 8));
+    setCoords({ top, left });
+  }, [open, placement]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (panelRef.current?.contains(target)) return;
+      if (anchorRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('mousedown', onPointerDown);
+    document.addEventListener('keydown', onKeyDown);
+    window.addEventListener('resize', close);
+    window.addEventListener('scroll', close, true);
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown);
+      document.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('resize', close);
+      window.removeEventListener('scroll', close, true);
+    };
+  }, [open, close]);
+
+  return (
+    <>
+      <span ref={anchorRef} className="contents">
+        {trigger({
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setOpen((v) => !v);
+          },
+          'aria-expanded': open,
+        })}
+      </span>
+      {open && (
+        <div
+          ref={panelRef}
+          id={id}
+          role="menu"
+          className={cn(
+            'fixed z-50 min-w-[180px] rounded-md border border-border bg-background p-1 shadow-lg',
+            coords ? 'visible' : 'invisible',
+            className,
+          )}
+          style={{ top: coords?.top ?? 0, left: coords?.left ?? 0 }}
+        >
+          {children(close)}
+        </div>
+      )}
+    </>
+  );
+}
+
+export function MenuItem({
+  onClick,
+  children,
+  destructive = false,
+  active = false,
+  disabled = false,
+}: {
+  onClick: () => void;
+  children: ReactNode;
+  destructive?: boolean;
+  active?: boolean;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      disabled={disabled}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick();
+      }}
+      className={cn(
+        'flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs transition-colors hover:bg-accent',
+        active && 'bg-accent',
+        destructive && 'text-red-600 dark:text-red-400',
+        disabled && 'pointer-events-none opacity-40',
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function MenuSeparator() {
+  return <div className="my-1 h-px bg-border" />;
+}

package/src/app/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MoSage</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/src/app/lib/agent-bridge.ts

@@ -0,0 +1,140 @@
+import { useEffect, useRef } from 'react';
+import { diagnosePages, type LayoutFinding } from './diagnostics';
+import type { FileBundle } from './export-dom';
+import { buildDocHtmlBundle } from './export-html';
+import { mountPrintCopy } from './export-pdf';
+import type { DocModule, PageGeometry } from './sdk';
+import type { ExpandedPage } from './use-doc-pages';
+
+export const BRIDGE_KEY = '__mosage';
+
+export type BridgeStatus = {
+  docId: string;
+  title: string;
+  /** False while the flow packer is still measuring — page count is not final yet. */
+  ready: boolean;
+  pageCount: number;
+  geometry: PageGeometry;
+};
+
+export type BridgeReport = BridgeStatus & { findings: LayoutFinding[] };
+
+export type BridgeBundle = { filename: string; mimeType: string; base64: string };
+
+export type MoSageBridge = {
+  version: 1;
+  status(): BridgeStatus;
+  /** Mounts the print copy and reads the layout back from it. */
+  diagnose(): Promise<BridgeReport>;
+  /** Mounts the print copy and leaves it up, for `page.pdf()` or a screenshot. */
+  preparePrint(): Promise<{ pageCount: number }>;
+  releasePrint(): void;
+  htmlBundle(): Promise<BridgeBundle | null>;
+  docxBundle(): Promise<BridgeBundle | null>;
+};
+
+type BridgeInput = {
+  docId: string;
+  doc: DocModule | null;
+  pages: ExpandedPage[];
+  geometry: PageGeometry;
+  measuring: boolean;
+  oversized: Array<{ section: number; block: number }>;
+};
+
+type GlobalWithBridge = typeof globalThis & { [BRIDGE_KEY]?: MoSageBridge };
+
+function toBase64(bytes: Uint8Array): string {
+  let binary = '';
+  const CHUNK = 0x8000;
+  for (let i = 0; i < bytes.length; i += CHUNK) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + CHUNK));
+  }
+  return btoa(binary);
+}
+
+function toBridge(bundle: FileBundle | null): BridgeBundle | null {
+  return (
+    bundle && {
+      filename: bundle.filename,
+      mimeType: bundle.mimeType,
+      base64: toBase64(bundle.bytes),
+    }
+  );
+}
+
+/**
+ * Publishes the rendered document to whoever is driving the page from outside —
+ * `mosage export`, `check_layout`, `render_page`. The viewer already owns the
+ * measured page list and the print pipeline; the bridge just hands them to a
+ * headless caller instead of to a Download button, so an agent sees exactly the
+ * sheets a person would.
+ */
+export function useAgentBridge(input: BridgeInput): void {
+  const latest = useRef(input);
+  latest.current = input;
+
+  useEffect(() => {
+    const g = globalThis as GlobalWithBridge;
+    let held: { dispose: () => void } | null = null;
+
+    const status = (): BridgeStatus => {
+      const { docId, doc, pages, geometry, measuring } = latest.current;
+      return {
+        docId,
+        title: doc?.meta?.title ?? docId,
+        ready: doc !== null && !measuring && pages.length > 0,
+        pageCount: pages.length,
+        geometry,
+      };
+    };
+
+    const release = () => {
+      held?.dispose();
+      held = null;
+    };
+
+    g[BRIDGE_KEY] = {
+      version: 1,
+      status,
+      async diagnose() {
+        const { docId, doc, pages, geometry, oversized } = latest.current;
+        const snapshot = status();
+        if (!doc || pages.length === 0) return { ...snapshot, findings: [] };
+        const copy = await mountPrintCopy(doc, docId, pages);
+        try {
+          return {
+            ...snapshot,
+            findings: diagnosePages(copy.root, geometry, { oversized }),
+          };
+        } finally {
+          copy.dispose();
+        }
+      },
+      async preparePrint() {
+        release();
+        const { docId, doc, pages } = latest.current;
+        if (!doc || pages.length === 0) return { pageCount: 0 };
+        held = await mountPrintCopy(doc, docId, pages);
+        return { pageCount: pages.length };
+      },
+      releasePrint: release,
+      async htmlBundle() {
+        const { docId, doc, pages } = latest.current;
+        if (!doc) return null;
+        return toBridge(await buildDocHtmlBundle(doc, docId, pages));
+      },
+      async docxBundle() {
+        const { docId, doc, pages } = latest.current;
+        if (!doc) return null;
+        const { buildDocxBundle } = await import('./export-docx');
+        return toBridge(await buildDocxBundle(doc, docId, pages));
+      },
+    };
+
+    return () => {
+      release();
+      delete g[BRIDGE_KEY];
+    };
+  }, []);
+}

package/src/app/lib/assets.ts

@@ -0,0 +1,151 @@
+import { useEffect, useState } from 'react';
+
+export const GLOBAL_SCOPE = '@global';
+
+export type Asset = {
+  name: string;
+  size: number;
+  createdAt: number;
+  mtime: number;
+  mime: string;
+  url: string;
+  importPath: string;
+  unused: boolean;
+};
+
+export type AssetUsages = {
+  usages: Array<{ docId: string; count: number }>;
+  totalCount: number;
+};
+
+export type ApiResult<T> = { ok: true; value: T } | { ok: false; error: string };
+
+const base = (scope: string) => `/__assets/${encodeURIComponent(scope)}`;
+const fileUrl = (scope: string, name: string) => `${base(scope)}/${encodeURIComponent(name)}`;
+
+async function errorFrom(res: Response): Promise<string> {
+  try {
+    const body = (await res.json()) as { error?: string };
+    return body.error ?? `HTTP ${res.status}`;
+  } catch {
+    return `HTTP ${res.status}`;
+  }
+}
+
+export async function listAssets(scope: string): Promise<ApiResult<Asset[]>> {
+  try {
+    const res = await fetch(base(scope));
+    if (!res.ok) return { ok: false, error: await errorFrom(res) };
+    const body = (await res.json()) as { assets: Asset[] };
+    return { ok: true, value: body.assets };
+  } catch (err) {
+    return { ok: false, error: String((err as Error).message) };
+  }
+}
+
+export async function uploadAsset(
+  scope: string,
+  file: File,
+  opts: { overwrite?: boolean } = {},
+): Promise<ApiResult<Asset>> {
+  try {
+    const url = `${fileUrl(scope, file.name)}${opts.overwrite ? '?overwrite=1' : ''}`;
+    const res = await fetch(url, {
+      method: 'POST',
+      headers: { 'content-type': file.type || 'application/octet-stream' },
+      body: file,
+    });
+    if (!res.ok) return { ok: false, error: await errorFrom(res) };
+    const body = (await res.json()) as Asset;
+    return { ok: true, value: { ...body, unused: true } };
+  } catch (err) {
+    return { ok: false, error: String((err as Error).message) };
+  }
+}
+
+export async function renameAsset(
+  scope: string,
+  name: string,
+  next: string,
+): Promise<ApiResult<string>> {
+  try {
+    const res = await fetch(fileUrl(scope, name), {
+      method: 'PATCH',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ name: next }),
+    });
+    if (!res.ok) return { ok: false, error: await errorFrom(res) };
+    const body = (await res.json()) as { name: string };
+    return { ok: true, value: body.name };
+  } catch (err) {
+    return { ok: false, error: String((err as Error).message) };
+  }
+}
+
+export async function deleteAsset(scope: string, name: string): Promise<ApiResult<true>> {
+  try {
+    const res = await fetch(fileUrl(scope, name), { method: 'DELETE' });
+    if (!res.ok) return { ok: false, error: await errorFrom(res) };
+    return { ok: true, value: true };
+  } catch (err) {
+    return { ok: false, error: String((err as Error).message) };
+  }
+}
+
+export async function assetUsages(scope: string, name: string): Promise<ApiResult<AssetUsages>> {
+  try {
+    const res = await fetch(`${fileUrl(scope, name)}/usages`);
+    if (!res.ok) return { ok: false, error: await errorFrom(res) };
+    return { ok: true, value: (await res.json()) as AssetUsages };
+  } catch (err) {
+    return { ok: false, error: String((err as Error).message) };
+  }
+}
+
+/** Count of global assets, for the sidebar badge. Zero outside dev. */
+export function useAssetCount(): number {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (!import.meta.env.DEV) return;
+    let cancelled = false;
+    const read = () => {
+      listAssets(GLOBAL_SCOPE).then((result) => {
+        if (!cancelled && result.ok) setCount(result.value.length);
+      });
+    };
+    read();
+    if (!import.meta.hot) {
+      return () => {
+        cancelled = true;
+      };
+    }
+    import.meta.hot.on('mosage:files-changed', read);
+    return () => {
+      cancelled = true;
+      import.meta.hot?.off('mosage:files-changed', read);
+    };
+  }, []);
+
+  return count;
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(bytes < 10240 ? 1 : 0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export function isPreviewable(mime: string): boolean {
+  return mime.startsWith('image/');
+}
+
+/** The line an author pastes into a document to use this asset. */
+export function importSnippet(asset: Asset): string {
+  const stem = asset.name.replace(/\.[^.]+$/, '');
+  const ident = stem
+    .replace(/[^A-Za-z0-9]+(.)/g, (_, c: string) => c.toUpperCase())
+    .replace(/[^A-Za-z0-9]/g, '');
+  const safeIdent = /^[A-Za-z_$]/.test(ident) ? ident : `asset${ident}`;
+  return `import ${safeIdent} from '${asset.importPath}';`;
+}

package/src/app/lib/design-presets.ts

@@ -0,0 +1,109 @@
+import { type DesignSystem, defaultDesign } from './design';
+
+const SANS_SYSTEM = '-apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif';
+const SANS_HELV = '"Helvetica Neue", Helvetica, Arial, sans-serif';
+const SERIF_GEORGIA = 'Georgia, "Times New Roman", serif';
+const SERIF_TIMES = '"Times New Roman", Times, serif';
+const MONO_SF = 'ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace';
+
+/**
+ * Print-safe presets: white or near-white sheets, body type at or above 13px,
+ * one accent each. A document that prints is not the place for a dark canvas.
+ */
+export const designPresets: DesignSystem[] = [
+  defaultDesign,
+  {
+    palette: {
+      bg: '#ffffff',
+      text: '#111827',
+      muted: '#6b7280',
+      accent: '#0f766e',
+      rule: '#e5e7eb',
+    },
+    fonts: { heading: SERIF_GEORGIA, body: SANS_SYSTEM, mono: MONO_SF },
+    typeScale: { title: 46, h1: 27, h2: 20, h3: 16, body: 14, caption: 10 },
+    margin: 84,
+    leading: 1.6,
+    radius: 4,
+  },
+  {
+    palette: {
+      bg: '#fcfbf7',
+      text: '#1c1917',
+      muted: '#78716c',
+      accent: '#9a3412',
+      rule: '#e7e2d6',
+    },
+    fonts: { heading: SERIF_TIMES, body: SERIF_GEORGIA, mono: MONO_SF },
+    typeScale: { title: 44, h1: 26, h2: 19, h3: 15, body: 14, caption: 10 },
+    margin: 90,
+    leading: 1.65,
+    radius: 2,
+  },
+  {
+    palette: {
+      bg: '#ffffff',
+      text: '#0a0a0a',
+      muted: '#737373',
+      accent: '#dc2626',
+      rule: '#e5e5e5',
+    },
+    fonts: { heading: SANS_HELV, body: SANS_HELV, mono: MONO_SF },
+    typeScale: { title: 52, h1: 30, h2: 21, h3: 16, body: 14, caption: 10 },
+    margin: 72,
+    leading: 1.5,
+    radius: 0,
+  },
+  {
+    palette: {
+      bg: '#f8fafc',
+      text: '#0f172a',
+      muted: '#64748b',
+      accent: '#1d4ed8',
+      rule: '#dbe2ea',
+    },
+    fonts: { heading: SANS_SYSTEM, body: SANS_SYSTEM, mono: MONO_SF },
+    typeScale: { title: 42, h1: 26, h2: 19, h3: 15, body: 13, caption: 10 },
+    margin: 76,
+    leading: 1.55,
+    radius: 8,
+  },
+  {
+    palette: {
+      bg: '#ffffff',
+      text: '#18181b',
+      muted: '#71717a',
+      accent: '#7c3aed',
+      rule: '#e4e4e7',
+    },
+    fonts: { heading: SANS_SYSTEM, body: SANS_SYSTEM, mono: MONO_SF },
+    typeScale: { title: 48, h1: 28, h2: 20, h3: 16, body: 15, caption: 11 },
+    margin: 96,
+    leading: 1.62,
+    radius: 12,
+  },
+  {
+    palette: {
+      bg: '#ffffff',
+      text: '#0b1220',
+      muted: '#5b6472',
+      accent: '#b45309',
+      rule: '#e6e8eb',
+    },
+    fonts: { heading: MONO_SF, body: SANS_SYSTEM, mono: MONO_SF },
+    typeScale: { title: 40, h1: 25, h2: 18, h3: 15, body: 13, caption: 10 },
+    margin: 70,
+    leading: 1.5,
+    radius: 3,
+  },
+];
+
+export function shuffleDesign(current?: DesignSystem | null): DesignSystem {
+  if (designPresets.length <= 1) return defaultDesign;
+  const currentJson = current ? JSON.stringify(current) : null;
+  for (let i = 0; i < 8; i++) {
+    const pick = designPresets[Math.floor(Math.random() * designPresets.length)];
+    if (pick && JSON.stringify(pick) !== currentJson) return pick;
+  }
+  return designPresets[0] ?? defaultDesign;
+}