mosage 0.2.0 → 0.8.0

package/src/app/app.tsx

@@ -0,0 +1,42 @@
+import config from 'virtual:mosage/config';
+import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
+import { AssetsPage } from './routes/assets';
+import { Doc } from './routes/doc';
+import { Home } from './routes/home';
+import { HomeShell } from './routes/home-shell';
+import { ThemeDetailPage, ThemesGalleryPage } from './routes/themes';
+
+export function App() {
+  return (
+    <BrowserRouter basename={import.meta.env.BASE_URL}>
+      <Routes>
+        {config.build.showDocBrowser ? (
+          <Route element={<HomeShell />}>
+            <Route path="/" element={<Home />} />
+            <Route path="/themes" element={<ThemesGalleryPage />} />
+            <Route path="/themes/:themeId" element={<ThemeDetailPage />} />
+            <Route path="/assets" element={<AssetsPage />} />
+          </Route>
+        ) : (
+          <Route path="/" element={<NotFound />} />
+        )}
+        <Route path="/d/:docId" element={<Doc />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+function NotFound() {
+  return (
+    <div className="grid h-screen place-items-center bg-background px-6 text-center text-foreground">
+      <div>
+        <p className="font-mono text-muted-foreground text-xs uppercase tracking-widest">404</p>
+        <h1 className="mt-2 font-medium text-xl tracking-tight">Nothing here</h1>
+        <Link to="/" className="mt-4 inline-block text-muted-foreground text-xs underline">
+          Back to documents
+        </Link>
+      </div>
+    </div>
+  );
+}

package/src/app/components/data-table.tsx

@@ -0,0 +1,196 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Figure } from './numbering';
+
+export type DataAlign = 'left' | 'center' | 'right';
+
+export type DataFormat =
+  | 'text'
+  | 'number'
+  | 'integer'
+  | 'percent'
+  | ((value: unknown, row: Record<string, unknown>) => ReactNode);
+
+export type DataColumn = {
+  key: string;
+  label?: ReactNode;
+  align?: DataAlign;
+  format?: DataFormat;
+  /** Column width. A number is px; `tableLayout: fixed` means these are honoured. */
+  width?: number | string;
+};
+
+export type DataTableProps = {
+  /** Rows as parsed from a `.csv`/`.tsv` import, or any array of objects. */
+  rows: Array<Record<string, unknown>>;
+  /** Columns to print, in order. Derived from the first row when omitted. */
+  columns?: Array<DataColumn | string>;
+  /** Numbers the table and prints the caption above it. */
+  caption?: ReactNode;
+  /** Stable id for `<Ref to>`. Only meaningful alongside `caption`. */
+  id?: string;
+  /** Print at most this many rows, with a note about what was left out. */
+  limit?: number;
+  /** Tighter rows, for a dense appendix table. */
+  compact?: boolean;
+  /** What an empty cell prints as. Defaults to an em dash. */
+  emptyValue?: ReactNode;
+  style?: CSSProperties;
+  className?: string;
+};
+
+function normalizeColumn(column: DataColumn | string): DataColumn {
+  return typeof column === 'string' ? { key: column } : column;
+}
+
+function isNumber(value: unknown): value is number {
+  return typeof value === 'number' && Number.isFinite(value);
+}
+
+/** A column of numbers aligns right; anything mixed stays left. */
+function inferAlign(rows: Array<Record<string, unknown>>, key: string): DataAlign {
+  let seen = 0;
+  for (const row of rows) {
+    const value = row[key];
+    if (value === null || value === undefined || value === '') continue;
+    if (!isNumber(value)) return 'left';
+    seen++;
+  }
+  return seen > 0 ? 'right' : 'left';
+}
+
+function formatValue(
+  value: unknown,
+  format: DataFormat | undefined,
+  row: Record<string, unknown>,
+  emptyValue: ReactNode,
+): ReactNode {
+  if (typeof format === 'function') return format(value, row);
+  if (value === null || value === undefined || value === '') return emptyValue;
+
+  if (isNumber(value)) {
+    if (format === 'integer') return Math.round(value).toLocaleString();
+    if (format === 'percent')
+      return `${(value * 100).toLocaleString(undefined, { maximumFractionDigits: 1 })}%`;
+    if (format === 'text') return String(value);
+    // Grouping separators are what make a column of figures readable; the
+    // fraction digits follow the data rather than padding every integer.
+    return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+  }
+
+  return String(value);
+}
+
+/**
+ * A print-shaped table from data, so the numbers in a report come from a file
+ * instead of being retyped into JSX. Alignment and grouping follow the column's
+ * contents, which is the part people get wrong by hand.
+ */
+export function DataTable({
+  rows,
+  columns,
+  caption,
+  id,
+  limit,
+  compact = false,
+  emptyValue = '—',
+  style,
+  className,
+}: DataTableProps) {
+  const resolved: DataColumn[] = (columns ?? Object.keys(rows[0] ?? {})).map(normalizeColumn);
+
+  const shown = limit !== undefined ? rows.slice(0, limit) : rows;
+  const hidden = rows.length - shown.length;
+
+  const cellPadding = compact ? '4px 8px' : '7px 8px';
+
+  const table = (
+    <table
+      className={className}
+      style={{
+        width: '100%',
+        borderCollapse: 'collapse',
+        tableLayout: 'fixed',
+        margin: 0,
+        ...style,
+      }}
+    >
+      <thead>
+        <tr>
+          {resolved.map((column) => {
+            const align = column.align ?? inferAlign(rows, column.key);
+            return (
+              <th
+                key={column.key}
+                style={{
+                  textAlign: align,
+                  width: column.width,
+                  fontFamily: 'var(--od-font-heading)',
+                  fontSize: 11,
+                  fontWeight: 600,
+                  letterSpacing: '0.04em',
+                  textTransform: 'uppercase',
+                  color: 'var(--od-muted)',
+                  borderBottom: '1px solid var(--od-rule)',
+                  padding: '0 8px 6px',
+                }}
+              >
+                {column.label ?? column.key}
+              </th>
+            );
+          })}
+        </tr>
+      </thead>
+      <tbody>
+        {shown.map((row, rowIndex) => (
+          // Rows come from a file and carry no id of their own; their position
+          // is what identifies them.
+          // biome-ignore lint/suspicious/noArrayIndexKey: row order is the row's identity here
+          <tr key={rowIndex}>
+            {resolved.map((column) => {
+              const align = column.align ?? inferAlign(rows, column.key);
+              return (
+                <td
+                  key={column.key}
+                  style={{
+                    textAlign: align,
+                    fontSize: compact ? 11 : 12,
+                    padding: cellPadding,
+                    borderBottom: '1px solid var(--od-rule)',
+                    fontVariantNumeric: align === 'right' ? 'tabular-nums' : undefined,
+                    overflowWrap: 'anywhere',
+                  }}
+                >
+                  {formatValue(row[column.key], column.format, row, emptyValue)}
+                </td>
+              );
+            })}
+          </tr>
+        ))}
+      </tbody>
+      {hidden > 0 && (
+        <tfoot>
+          <tr>
+            <td
+              colSpan={resolved.length}
+              style={{
+                fontSize: 'var(--od-size-caption)',
+                color: 'var(--od-muted)',
+                padding: '6px 8px 0',
+              }}
+            >
+              {hidden} more row{hidden === 1 ? '' : 's'} not shown
+            </td>
+          </tr>
+        </tfoot>
+      )}
+    </table>
+  );
+
+  if (!caption) return table;
+
+  return (
+    <Figure kind="table" caption={caption} {...(id !== undefined ? { id } : {})}>
+      {table}
+    </Figure>
+  );
+}

package/src/app/components/design-panel/design-panel.tsx

@@ -0,0 +1,318 @@
+import { Loader2, RotateCcw, Shuffle, X } from 'lucide-react';
+import type { DesignSystem } from '../../lib/design';
+import { useDesignPanelState } from './design-provider';
+
+const FONT_OPTIONS: Array<{ label: string; value: string }> = [
+  {
+    label: 'System sans',
+    value: '-apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif',
+  },
+  { label: 'Helvetica', value: '"Helvetica Neue", Helvetica, Arial, sans-serif' },
+  { label: 'Georgia serif', value: 'Georgia, "Times New Roman", serif' },
+  { label: 'Times serif', value: '"Times New Roman", Times, serif' },
+  { label: 'Mono', value: 'ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace' },
+];
+
+const PALETTE_KEYS: Array<{ key: keyof DesignSystem['palette']; label: string }> = [
+  { key: 'bg', label: 'Sheet' },
+  { key: 'text', label: 'Text' },
+  { key: 'muted', label: 'Muted' },
+  { key: 'accent', label: 'Accent' },
+  { key: 'rule', label: 'Rule' },
+];
+
+const TYPE_KEYS: Array<{
+  key: keyof DesignSystem['typeScale'];
+  label: string;
+  min: number;
+  max: number;
+}> = [
+  { key: 'title', label: 'Title', min: 24, max: 72 },
+  { key: 'h1', label: 'H1', min: 16, max: 48 },
+  { key: 'h2', label: 'H2', min: 14, max: 36 },
+  { key: 'h3', label: 'H3', min: 12, max: 28 },
+  { key: 'body', label: 'Body', min: 9, max: 20 },
+  { key: 'caption', label: 'Caption', min: 7, max: 16 },
+];
+
+export function DesignPanel({ onClose }: { onClose: () => void }) {
+  const {
+    loaded,
+    exists,
+    warning,
+    draft,
+    dirty,
+    committing,
+    error,
+    update,
+    commit,
+    discard,
+    resetToDefaults,
+    shuffle,
+  } = useDesignPanelState();
+
+  return (
+    <aside className="flex w-72 flex-none flex-col border-border border-l bg-background">
+      <header className="flex h-10 flex-none items-center justify-between border-border border-b px-3">
+        <span className="font-medium text-xs uppercase tracking-wider">Design</span>
+        <div className="flex items-center gap-0.5">
+          <IconButton label="Shuffle preset" onClick={shuffle}>
+            <Shuffle className="size-3.5" />
+          </IconButton>
+          <IconButton label="Reset to defaults" onClick={resetToDefaults}>
+            <RotateCcw className="size-3.5" />
+          </IconButton>
+          <IconButton label="Close design panel" onClick={onClose}>
+            <X className="size-3.5" />
+          </IconButton>
+        </div>
+      </header>
+
+      <div className="min-h-0 flex-1 overflow-y-auto px-3 py-3">
+        {!loaded || !draft ? (
+          <div className="grid place-items-center py-10">
+            <Loader2 className="size-4 animate-spin text-muted-foreground" />
+          </div>
+        ) : (
+          <>
+            {warning && (
+              <p className="mb-3 rounded-md border border-border bg-muted px-2 py-1.5 text-[11px] text-muted-foreground">
+                {warning}
+              </p>
+            )}
+            {!exists && (
+              <p className="mb-3 rounded-md border border-border bg-muted px-2 py-1.5 text-[11px] text-muted-foreground">
+                This document has no <code className="font-mono">design</code> const yet. Saving
+                writes one into <code className="font-mono">index.tsx</code>.
+              </p>
+            )}
+
+            <Section title="Palette">
+              {PALETTE_KEYS.map(({ key, label }) => (
+                <Row key={key} label={label}>
+                  <input
+                    type="color"
+                    value={draft.palette[key]}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      update((d) => {
+                        d.palette[key] = value;
+                      });
+                    }}
+                    className="size-6 cursor-pointer rounded border border-border bg-transparent"
+                  />
+                  <input
+                    type="text"
+                    value={draft.palette[key]}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      update((d) => {
+                        d.palette[key] = value;
+                      });
+                    }}
+                    className="w-20 rounded border border-border bg-transparent px-1.5 py-0.5 font-mono text-[11px]"
+                  />
+                </Row>
+              ))}
+            </Section>
+
+            <Section title="Fonts">
+              {(['heading', 'body', 'mono'] as const).map((slot) => (
+                <Row key={slot} label={slot[0].toUpperCase() + slot.slice(1)}>
+                  <select
+                    value={
+                      FONT_OPTIONS.some((o) => o.value === draft.fonts[slot])
+                        ? draft.fonts[slot]
+                        : 'custom'
+                    }
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      if (value === 'custom') return;
+                      update((d) => {
+                        d.fonts[slot] = value;
+                      });
+                    }}
+                    className="w-40 rounded border border-border bg-transparent px-1.5 py-0.5 text-[11px]"
+                  >
+                    {FONT_OPTIONS.map((option) => (
+                      <option key={option.label} value={option.value}>
+                        {option.label}
+                      </option>
+                    ))}
+                    <option value="custom">Custom (from source)</option>
+                  </select>
+                </Row>
+              ))}
+            </Section>
+
+            <Section title="Type scale">
+              {TYPE_KEYS.map(({ key, label, min, max }) => (
+                <SliderRow
+                  key={key}
+                  label={label}
+                  value={draft.typeScale[key]}
+                  min={min}
+                  max={max}
+                  step={1}
+                  suffix="px"
+                  onChange={(value) =>
+                    update((d) => {
+                      d.typeScale[key] = value;
+                    })
+                  }
+                />
+              ))}
+            </Section>
+
+            <Section title="Page">
+              <SliderRow
+                label="Margin"
+                value={draft.margin}
+                min={32}
+                max={140}
+                step={2}
+                suffix="px"
+                onChange={(value) =>
+                  update((d) => {
+                    d.margin = value;
+                  })
+                }
+              />
+              <SliderRow
+                label="Leading"
+                value={draft.leading}
+                min={1.2}
+                max={2}
+                step={0.05}
+                onChange={(value) =>
+                  update((d) => {
+                    d.leading = Number(value.toFixed(2));
+                  })
+                }
+              />
+              <SliderRow
+                label="Radius"
+                value={draft.radius}
+                min={0}
+                max={24}
+                step={1}
+                suffix="px"
+                onChange={(value) =>
+                  update((d) => {
+                    d.radius = value;
+                  })
+                }
+              />
+            </Section>
+
+            {draft.typeScale.body < 12 && (
+              <p className="mt-3 rounded-md border border-border bg-muted px-2 py-1.5 text-[11px] text-muted-foreground">
+                Body under 12px prints below 9pt — hard to read on paper.
+              </p>
+            )}
+          </>
+        )}
+      </div>
+
+      <footer className="flex-none border-border border-t p-3">
+        {error && <p className="mb-2 text-[11px] text-muted-foreground">{error}</p>}
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={commit}
+            disabled={!dirty || committing}
+            className="flex flex-1 items-center justify-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-50"
+          >
+            {committing && <Loader2 className="size-3.5 animate-spin" />}
+            Save to source
+          </button>
+          <button
+            type="button"
+            onClick={discard}
+            disabled={!dirty || committing}
+            className="rounded-md border border-border px-3 py-1.5 text-xs transition-colors hover:bg-accent disabled:opacity-50"
+          >
+            Discard
+          </button>
+        </div>
+      </footer>
+    </aside>
+  );
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <section className="mb-4">
+      <h3 className="mb-1.5 text-[10px] text-muted-foreground uppercase tracking-wider">{title}</h3>
+      <div className="space-y-1.5">{children}</div>
+    </section>
+  );
+}
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <span className="text-xs">{label}</span>
+      <div className="flex items-center gap-1.5">{children}</div>
+    </div>
+  );
+}
+
+function SliderRow({
+  label,
+  value,
+  min,
+  max,
+  step,
+  suffix = '',
+  onChange,
+}: {
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  suffix?: string;
+  onChange: (value: number) => void;
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="w-16 flex-none text-xs">{label}</span>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="h-1 flex-1 cursor-pointer accent-foreground"
+      />
+      <span className="w-12 flex-none text-right font-mono text-[11px] tabular-nums">
+        {value}
+        {suffix}
+      </span>
+    </div>
+  );
+}
+
+function IconButton({
+  label,
+  onClick,
+  children,
+}: {
+  label: string;
+  onClick: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      onClick={onClick}
+      className="flex size-6 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+    >
+      {children}
+    </button>
+  );
+}

package/src/app/components/design-panel/design-provider.tsx

@@ -0,0 +1,121 @@
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { type DesignSystem, defaultDesign, designToCssVars } from '../../lib/design';
+import { shuffleDesign } from '../../lib/design-presets';
+import { useDesign as useDesignFetch } from './use-design';
+
+type DesignCtx = {
+  docId: string;
+  loaded: boolean;
+  exists: boolean;
+  warning: string | null;
+  design: DesignSystem | null;
+  draft: DesignSystem | null;
+  dirty: boolean;
+  committing: boolean;
+  error: string | null;
+  update: (mut: (next: DesignSystem) => void) => void;
+  commit: () => Promise<void>;
+  discard: () => void;
+  resetToDefaults: () => void;
+  shuffle: () => void;
+};
+
+const Ctx = createContext<DesignCtx | null>(null);
+
+export function useDesignPanelState(): DesignCtx {
+  const value = useContext(Ctx);
+  if (!value) throw new Error('useDesignPanelState must be used inside <DesignProvider>');
+  return value;
+}
+
+function clone<T>(value: T): T {
+  return JSON.parse(JSON.stringify(value)) as T;
+}
+
+export function DesignProvider({ docId, children }: { docId: string; children: ReactNode }) {
+  const { design, exists, warning, loaded, save } = useDesignFetch(docId);
+  const [draft, setDraft] = useState<DesignSystem | null>(null);
+  const [committing, setCommitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const draftRef = useRef<DesignSystem | null>(null);
+  draftRef.current = draft;
+
+  useEffect(() => {
+    if (design) setDraft(clone(design));
+  }, [design]);
+
+  const dirty = useMemo(() => {
+    if (!draft || !design) return false;
+    return JSON.stringify(draft) !== JSON.stringify(design);
+  }, [draft, design]);
+
+  const update = useCallback((mut: (next: DesignSystem) => void) => {
+    const prev = draftRef.current;
+    if (!prev) return;
+    const next = clone(prev);
+    mut(next);
+    setDraft(next);
+  }, []);
+
+  const commit = useCallback(async () => {
+    if (!draft) return;
+    setCommitting(true);
+    const result = await save(draft);
+    setCommitting(false);
+    setError(result.ok ? null : (result.error ?? 'Failed to save'));
+  }, [draft, save]);
+
+  const discard = useCallback(() => {
+    if (design) setDraft(clone(design));
+    setError(null);
+  }, [design]);
+
+  const resetToDefaults = useCallback(() => setDraft(clone(defaultDesign)), []);
+  const shuffle = useCallback(() => setDraft(clone(shuffleDesign(draftRef.current))), []);
+
+  // PageFrame writes its design vars inline on each page root, so the draft
+  // overlay has to outrank inline styles — hence `!important`.
+  const previewCss = useMemo(() => {
+    if (!dirty || !draft) return '';
+    const lines = Object.entries(designToCssVars(draft))
+      .map(([k, v]) => `  ${k}: ${v} !important;`)
+      .join('\n');
+    return `[data-od-page] {\n${lines}\n}`;
+  }, [dirty, draft]);
+
+  const value: DesignCtx = {
+    docId,
+    loaded,
+    exists,
+    warning,
+    design,
+    draft,
+    dirty,
+    committing,
+    error,
+    update,
+    commit,
+    discard,
+    resetToDefaults,
+    shuffle,
+  };
+
+  return (
+    <Ctx.Provider value={value}>
+      {previewCss && (
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: trusted local css built from draft state
+        <style dangerouslySetInnerHTML={{ __html: previewCss }} />
+      )}
+      {children}
+    </Ctx.Provider>
+  );
+}