mosage 0.1.0 → 0.8.0

package/src/app/components/numbering.tsx

@@ -0,0 +1,224 @@
+import { type CSSProperties, type ReactNode, useId } from 'react';
+import {
+  LABEL_ATTR,
+  LABEL_ID_ATTR,
+  LABEL_TEXT_ATTR,
+  type LabelKind,
+  onPageParts,
+  useDocLabel,
+  useDocLabels,
+  useLabelVocabulary,
+} from '../lib/labels';
+import { useDocPageNumber } from '../lib/page-context';
+
+export const REF_ATTR = 'data-od-ref';
+/** The page number inside a reference's page suffix — the Word export makes it a PAGEREF. */
+export const REF_PAGE_ATTR = 'data-od-ref-page';
+export const LIST_OF_ATTR = 'data-od-list-of';
+
+function nameFor(kind: LabelKind, vocabulary: { figure: string; table: string }): string {
+  return kind === 'table' ? vocabulary.table : vocabulary.figure;
+}
+
+export type FigureProps = {
+  /** Stable id, so `<Ref to>` can point at it. Generated when omitted. */
+  id?: string;
+  /** What the caption says after the number. */
+  caption?: ReactNode;
+  /** `figure` numbers with figures, `table` with tables. Defaults to `figure`. */
+  kind?: LabelKind;
+  /** Tables conventionally caption above, figures below. */
+  captionPosition?: 'above' | 'below';
+  /** Plain-text caption for the list of figures, when `caption` carries markup. */
+  captionText?: string;
+  style?: CSSProperties;
+  captionStyle?: CSSProperties;
+  className?: string;
+  children?: ReactNode;
+};
+
+/**
+ * A numbered figure or table. The number comes from a scan of the rendered
+ * pages, not from a counter in the source, so inserting a figure halfway
+ * through a document renumbers everything after it — including the references
+ * to it — without anyone editing a number.
+ *
+ * Caption and content are one block, so a `flow()` section never separates them.
+ */
+export function Figure({
+  id,
+  caption,
+  kind = 'figure',
+  captionPosition,
+  captionText,
+  style,
+  captionStyle,
+  className,
+  children,
+}: FigureProps) {
+  const generated = useId();
+  const labelId = id ?? generated;
+  const entry = useDocLabel(labelId);
+  const vocabulary = useLabelVocabulary();
+  const position = captionPosition ?? (kind === 'table' ? 'above' : 'below');
+
+  const text =
+    captionText ??
+    (typeof caption === 'string' || typeof caption === 'number' ? String(caption) : '');
+
+  const captionNode = caption ? (
+    <figcaption
+      style={{
+        fontSize: 'var(--od-size-caption)',
+        color: 'var(--od-muted)',
+        lineHeight: 1.4,
+        margin: position === 'above' ? '0 0 6px' : '6px 0 0',
+        ...captionStyle,
+      }}
+    >
+      <span style={{ fontWeight: 600, color: 'var(--od-text)' }}>
+        {nameFor(kind, vocabulary)} {entry?.number ?? ''}
+      </span>
+      {caption ? <span> — {caption}</span> : null}
+    </figcaption>
+  ) : null;
+
+  return (
+    <figure
+      {...{
+        [LABEL_ATTR]: kind,
+        [LABEL_ID_ATTR]: labelId,
+        [LABEL_TEXT_ATTR]: text,
+      }}
+      className={className}
+      style={{ margin: '0 0 16px', ...style }}
+    >
+      {position === 'above' && captionNode}
+      {children}
+      {position === 'below' && captionNode}
+    </figure>
+  );
+}
+
+export type RefProps = {
+  /** The `id` of a `<Figure>` or `<Footnote>`. */
+  to: string;
+  /**
+   * Append the page. `auto` (the default) adds it only when the target sits on
+   * another sheet, which is the only time a reader needs it.
+   */
+  showPage?: boolean | 'auto';
+  style?: CSSProperties;
+  className?: string;
+};
+
+/**
+ * A cross-reference that resolves after layout: "Figure 3", plus the page when
+ * the target is elsewhere. Never write "see Figure 3 on page 12" by hand — both
+ * numbers move.
+ */
+export function Ref({ to, showPage = 'auto', style, className }: RefProps) {
+  const entry = useDocLabel(to);
+  const vocabulary = useLabelVocabulary();
+  const here = useDocPageNumber();
+
+  if (!entry) {
+    // Visible on the page and reported by `mosage check`: a reference that
+    // resolves to nothing is a broken document, not a blank space.
+    return (
+      <span
+        data-od-ref-unresolved={to}
+        className={className}
+        style={{ color: 'var(--od-accent)', ...style }}
+      >
+        [?{to}]
+      </span>
+    );
+  }
+
+  const name = entry.kind === 'footnote' ? '' : `${nameFor(entry.kind, vocabulary)} `;
+  const withPage = showPage === 'auto' ? entry.page !== here : showPage;
+  const parts = onPageParts(vocabulary);
+
+  return (
+    <span {...{ [REF_ATTR]: to }} className={className} style={style}>
+      {name}
+      {entry.number}
+      {withPage && parts && (
+        <>
+          {parts[0]}
+          <span {...{ [REF_PAGE_ATTR]: '' }}>{entry.page}</span>
+          {parts[1]}
+        </>
+      )}
+      {withPage && !parts && vocabulary.onPage}
+    </span>
+  );
+}
+
+export type ListOfProps = {
+  kind?: LabelKind;
+  /** Show the page number column with dot leaders. Defaults to true. */
+  showPageNumbers?: boolean;
+  style?: CSSProperties;
+  className?: string;
+};
+
+/**
+ * The document's figures or tables as a contents list. Same lifecycle as
+ * `<TableOfContents>`: empty on the first render pass, filled once the scan has
+ * run — including before an export serializes.
+ */
+export function ListOf({ kind = 'figure', showPageNumbers = true, style, className }: ListOfProps) {
+  const entries = useDocLabels(kind);
+  const vocabulary = useLabelVocabulary();
+
+  return (
+    <div
+      {...{ [LIST_OF_ATTR]: kind }}
+      className={className}
+      style={{
+        fontFamily: 'var(--od-font-body)',
+        fontSize: 'var(--od-size-body)',
+        color: 'var(--od-text)',
+        ...style,
+      }}
+    >
+      {entries.map((entry) => (
+        <div
+          key={entry.id}
+          {...{ [REF_ATTR]: entry.id }}
+          style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 6 }}
+        >
+          <span style={{ flex: 'none', color: 'var(--od-muted)' }}>
+            {nameFor(kind, vocabulary)} {entry.number}
+          </span>
+          <span>{entry.text}</span>
+          {showPageNumbers && (
+            <>
+              <span
+                aria-hidden
+                style={{
+                  flex: 1,
+                  borderBottom: '1px dotted var(--od-rule)',
+                  transform: 'translateY(-3px)',
+                }}
+              />
+              <span {...{ [REF_PAGE_ATTR]: '' }} style={{ fontVariantNumeric: 'tabular-nums' }}>
+                {entry.page}
+              </span>
+            </>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function ListOfFigures(props: Omit<ListOfProps, 'kind'>) {
+  return <ListOf {...props} kind="figure" />;
+}
+
+export function ListOfTables(props: Omit<ListOfProps, 'kind'>) {
+  return <ListOf {...props} kind="table" />;
+}

package/src/app/components/page-frame.tsx

@@ -0,0 +1,70 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+import { type DesignSystem, designToCssVars } from '../lib/design';
+import { PAGE_ATTR, PAGE_INDEX_ATTR } from '../lib/outline';
+import { DocPageProvider } from '../lib/page-context';
+import type { PageGeometry } from '../lib/sdk';
+
+type Props = {
+  index: number;
+  total: number;
+  geometry: PageGeometry;
+  scale: number;
+  design?: DesignSystem;
+  flat?: boolean;
+  className?: string;
+  children: ReactNode;
+};
+
+/**
+ * One sheet of paper. The inner node always lays out at the page's true pixel
+ * size — authors write absolute px against A4 — and only the wrapper shrinks,
+ * so a page looks identical on screen, in the PDF, and in the HTML export.
+ */
+export function PageFrame({
+  index,
+  total,
+  geometry,
+  scale,
+  design,
+  flat = false,
+  className,
+  children,
+}: Props) {
+  const designVars = design ? designToCssVars(design) : undefined;
+
+  return (
+    <div
+      className={cn(
+        'relative flex-none overflow-hidden bg-white text-black',
+        !flat && 'shadow-[0_1px_3px_rgba(0,0,0,.28),0_10px_28px_-6px_rgba(0,0,0,.28)]',
+        className,
+      )}
+      style={{ width: geometry.width * scale, height: geometry.height * scale }}
+    >
+      <div
+        {...{ [PAGE_ATTR]: '', [PAGE_INDEX_ATTR]: index }}
+        style={
+          {
+            width: geometry.width,
+            height: geometry.height,
+            transform: `scale(${scale})`,
+            transformOrigin: 'top left',
+            overflow: 'hidden',
+            position: 'relative',
+            // A page must render identically wherever it is embedded. The
+            // thumbnail rail wraps pages in a <button>, whose default
+            // `text-align: center` would otherwise leak into the content.
+            textAlign: 'start',
+            ...(designVars ?? {}),
+            ...(designVars ? { background: 'var(--od-bg)', color: 'var(--od-text)' } : {}),
+          } as CSSProperties
+        }
+      >
+        <DocPageProvider index={index} total={total}>
+          {children}
+        </DocPageProvider>
+      </div>
+    </div>
+  );
+}

package/src/app/components/sidebar/folder-item.tsx

@@ -0,0 +1,212 @@
+import { FileText, Image, MoreHorizontal, Palette, PencilLine, Trash2 } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import type { Folder, FolderIcon } from '../../lib/sdk';
+import { cn } from '../../lib/utils';
+import { Menu, MenuItem, MenuSeparator } from '../ui/menu';
+import { IconPicker } from './icon-picker';
+
+export const DOC_DND_MIME = 'application/x-mosage-id';
+
+export type FolderRow =
+  | { kind: 'all' }
+  | { kind: 'themes' }
+  | { kind: 'assets' }
+  | { kind: 'draft' }
+  | {
+      kind: 'folder';
+      folder: Folder;
+      onRename: (name: string) => void;
+      onChangeIcon: (icon: FolderIcon) => void;
+      onDelete: () => void;
+    };
+
+export function FolderIconChip({ icon }: { icon: FolderIcon }) {
+  if (icon.type === 'emoji') {
+    return (
+      <span className="grid size-5 shrink-0 place-items-center text-[13px] leading-none">
+        {icon.value}
+      </span>
+    );
+  }
+  return (
+    <span
+      className="size-3 shrink-0 rounded-[3px] ring-1 ring-black/10"
+      style={{ background: icon.value }}
+    />
+  );
+}
+
+const STATIC_ICON = {
+  all: FileText,
+  themes: Palette,
+  assets: Image,
+} as const;
+
+export function FolderItem({
+  row,
+  count,
+  selected,
+  onSelect,
+  onDropDoc,
+}: {
+  row: FolderRow;
+  count: number;
+  selected: boolean;
+  onSelect: () => void;
+  onDropDoc: (docId: string) => void;
+}) {
+  const [renaming, setRenaming] = useState(false);
+  const [draft, setDraft] = useState('');
+  const [dragOver, setDragOver] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (renaming) inputRef.current?.select();
+  }, [renaming]);
+
+  const label =
+    row.kind === 'folder'
+      ? row.folder.name
+      : row.kind === 'all'
+        ? 'Documents'
+        : row.kind === 'themes'
+          ? 'Themes'
+          : row.kind === 'assets'
+            ? 'Assets'
+            : 'Unfiled';
+
+  const acceptsDrop = row.kind === 'folder' || row.kind === 'draft';
+
+  const commitRename = () => {
+    if (row.kind !== 'folder') return;
+    const next = draft.trim();
+    setRenaming(false);
+    if (next && next !== row.folder.name) row.onRename(next);
+  };
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: drop target wraps the button, which stays the keyboard path
+    <div
+      className={cn(
+        'group relative flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors',
+        selected ? 'bg-accent text-foreground' : 'text-muted-foreground hover:bg-accent/60',
+        dragOver && 'ring-1 ring-foreground/40',
+      )}
+      onDragOver={(e) => {
+        if (!acceptsDrop || !e.dataTransfer.types.includes(DOC_DND_MIME)) return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        setDragOver(true);
+      }}
+      onDragLeave={() => setDragOver(false)}
+      onDrop={(e) => {
+        if (!acceptsDrop) return;
+        const docId = e.dataTransfer.getData(DOC_DND_MIME);
+        setDragOver(false);
+        if (!docId) return;
+        e.preventDefault();
+        onDropDoc(docId);
+      }}
+    >
+      {row.kind === 'folder' ? (
+        <Menu
+          placement="right-start"
+          trigger={(props) => (
+            <button
+              type="button"
+              aria-label="Change icon"
+              className="shrink-0 transition-transform hover:scale-110"
+              {...props}
+            >
+              <FolderIconChip icon={row.folder.icon} />
+            </button>
+          )}
+        >
+          {() => (
+            <div className="p-1">
+              <IconPicker value={row.folder.icon} onChange={row.onChangeIcon} />
+            </div>
+          )}
+        </Menu>
+      ) : row.kind === 'draft' ? (
+        <FolderIconChip icon={{ type: 'color', value: '#9ca3af' }} />
+      ) : (
+        (() => {
+          const Icon = STATIC_ICON[row.kind];
+          return <Icon className="size-3.5 shrink-0" />;
+        })()
+      )}
+
+      {renaming && row.kind === 'folder' ? (
+        <input
+          ref={inputRef}
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onBlur={commitRename}
+          onKeyDown={(e) => {
+            if (e.nativeEvent.isComposing) return;
+            if (e.key === 'Enter') commitRename();
+            if (e.key === 'Escape') setRenaming(false);
+          }}
+          maxLength={40}
+          className="min-w-0 flex-1 bg-transparent text-[13px] outline-none"
+        />
+      ) : (
+        <button
+          type="button"
+          onClick={onSelect}
+          className="min-w-0 flex-1 truncate text-left text-[13px]"
+        >
+          {label}
+        </button>
+      )}
+
+      <span className="font-mono text-[10px] text-muted-foreground tabular-nums group-hover:opacity-0">
+        {String(count).padStart(2, '0')}
+      </span>
+
+      {row.kind === 'folder' && import.meta.env.DEV && (
+        <div className="absolute right-1.5 opacity-0 transition-opacity group-hover:opacity-100">
+          <Menu
+            trigger={(props) => (
+              <button
+                type="button"
+                aria-label={`${row.folder.name} options`}
+                className="flex size-5 items-center justify-center rounded text-muted-foreground hover:bg-background hover:text-foreground aria-expanded:bg-background"
+                {...props}
+              >
+                <MoreHorizontal className="size-3.5" />
+              </button>
+            )}
+          >
+            {(close) => (
+              <>
+                <MenuItem
+                  onClick={() => {
+                    setDraft(row.folder.name);
+                    setRenaming(true);
+                    close();
+                  }}
+                >
+                  <PencilLine className="size-3.5" />
+                  Rename
+                </MenuItem>
+                <MenuSeparator />
+                <MenuItem
+                  destructive
+                  onClick={() => {
+                    close();
+                    row.onDelete();
+                  }}
+                >
+                  <Trash2 className="size-3.5" />
+                  Delete folder
+                </MenuItem>
+              </>
+            )}
+          </Menu>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/app/components/sidebar/icon-picker.tsx

@@ -0,0 +1,99 @@
+import { useState } from 'react';
+import type { FolderIcon } from '../../lib/sdk';
+import { cn } from '../../lib/utils';
+
+export const PRESET_COLORS = [
+  '#e5484d',
+  '#f76b15',
+  '#ffb224',
+  '#30a46c',
+  '#12a594',
+  '#0091ff',
+  '#6e56cf',
+  '#60646c',
+];
+
+// A curated set beats an emoji-picker dependency for a folder chip.
+const PRESET_EMOJI = [
+  '📁',
+  '📄',
+  '📊',
+  '📈',
+  '🧾',
+  '🗂️',
+  '📌',
+  '⭐',
+  '🏛️',
+  '💼',
+  '🧪',
+  '⚙️',
+  '🚀',
+  '🔒',
+  '💰',
+  '🗓️',
+];
+
+export function IconPicker({
+  value,
+  onChange,
+}: {
+  value: FolderIcon;
+  onChange: (icon: FolderIcon) => void;
+}) {
+  const [tab, setTab] = useState<'emoji' | 'color'>(value.type);
+
+  return (
+    <div className="w-[232px]">
+      <div className="mb-2 flex gap-1 rounded-md bg-muted p-0.5">
+        {(['emoji', 'color'] as const).map((next) => (
+          <button
+            key={next}
+            type="button"
+            onClick={() => setTab(next)}
+            className={cn(
+              'flex-1 rounded px-2 py-1 text-[11px] capitalize transition-colors',
+              tab === next ? 'bg-background font-medium' : 'text-muted-foreground',
+            )}
+          >
+            {next}
+          </button>
+        ))}
+      </div>
+
+      {tab === 'emoji' ? (
+        <div className="grid grid-cols-8 gap-1">
+          {PRESET_EMOJI.map((emoji) => (
+            <button
+              key={emoji}
+              type="button"
+              onClick={() => onChange({ type: 'emoji', value: emoji })}
+              className={cn(
+                'grid size-6 place-items-center rounded text-[13px] transition-transform hover:scale-110',
+                value.type === 'emoji' && value.value === emoji && 'bg-accent',
+              )}
+              aria-label={emoji}
+            >
+              {emoji}
+            </button>
+          ))}
+        </div>
+      ) : (
+        <div className="grid grid-cols-8 gap-1">
+          {PRESET_COLORS.map((color) => (
+            <button
+              key={color}
+              type="button"
+              onClick={() => onChange({ type: 'color', value: color })}
+              className={cn(
+                'size-6 rounded ring-1 ring-black/10 transition-transform hover:scale-110',
+                value.type === 'color' && value.value === color && 'ring-2 ring-foreground',
+              )}
+              style={{ background: color }}
+              aria-label={color}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}