mosage 0.2.0 → 0.8.0

package/src/app/components/sidebar/sidebar.tsx

@@ -0,0 +1,252 @@
+import config from 'virtual:mosage/config';
+import { Plus } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import type { Folder, FolderIcon } from '../../lib/sdk';
+import { cn } from '../../lib/utils';
+import { ThemeToggle } from '../theme-toggle';
+import { FolderIconChip, FolderItem } from './folder-item';
+import { IconPicker, PRESET_COLORS } from './icon-picker';
+
+export const ALL_DOCS_ID = '__all__';
+export const DRAFT_ID = 'draft';
+export const THEMES_ID = '__themes__';
+export const ASSETS_ID = '__assets__';
+
+export const FOLDER_DND_MIME = 'application/x-mosage-folder-id';
+
+type Props = {
+  folders: Folder[];
+  countFor: (folderId: string | null) => number;
+  allCount: number;
+  themesCount: number;
+  assetsCount: number;
+  selectedId: string;
+  onSelect: (id: string) => void;
+  onCreate: (name: string, icon: FolderIcon) => Promise<Folder>;
+  onRename: (id: string, name: string) => void;
+  onChangeIcon: (id: string, icon: FolderIcon) => void;
+  onDelete: (id: string) => void;
+  onDropToFolder: (folderId: string, docId: string) => void;
+  onDropToDraft: (docId: string) => void;
+  onReorder: (ids: string[]) => void;
+};
+
+export function Sidebar({
+  folders,
+  countFor,
+  allCount,
+  themesCount,
+  assetsCount,
+  selectedId,
+  onSelect,
+  onCreate,
+  onRename,
+  onChangeIcon,
+  onDelete,
+  onDropToFolder,
+  onDropToDraft,
+  onReorder,
+}: Props) {
+  const [dragId, setDragId] = useState<string | null>(null);
+  const [dropTarget, setDropTarget] = useState<{ id: string; before: boolean } | null>(null);
+  const [creating, setCreating] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [newIcon, setNewIcon] = useState<FolderIcon>({ type: 'color', value: PRESET_COLORS[0] });
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (creating) inputRef.current?.focus();
+  }, [creating]);
+
+  const finishReorder = (toId: string, before: boolean) => {
+    const fromId = dragId;
+    setDragId(null);
+    setDropTarget(null);
+    if (!fromId || fromId === toId) return;
+    const ids = folders.map((f) => f.id);
+    if (!ids.includes(fromId) || !ids.includes(toId)) return;
+    const next = ids.filter((id) => id !== fromId);
+    next.splice(next.indexOf(toId) + (before ? 0 : 1), 0, fromId);
+    if (next.every((id, i) => id === ids[i])) return;
+    onReorder(next);
+  };
+
+  const startCreating = () => {
+    setNewIcon({ type: 'color', value: PRESET_COLORS[folders.length % PRESET_COLORS.length] });
+    setNewName('');
+    setCreating(true);
+  };
+
+  const commitCreate = async () => {
+    const trimmed = newName.trim();
+    setCreating(false);
+    setNewName('');
+    if (!trimmed) return;
+    await onCreate(trimmed, newIcon).catch(() => {});
+  };
+
+  return (
+    <aside className="flex h-full w-[16.5rem] shrink-0 flex-col border-border border-r bg-background">
+      <div className="flex items-center justify-between px-4 pt-4 pb-3">
+        <h1 className="font-semibold text-base tracking-tight">MoSage</h1>
+        <div className="-mr-1 flex items-center gap-0.5">
+          <ThemeToggle />
+        </div>
+      </div>
+
+      <div className="px-2">
+        <FolderItem
+          row={{ kind: 'all' }}
+          count={allCount}
+          selected={selectedId === ALL_DOCS_ID}
+          onSelect={() => onSelect(ALL_DOCS_ID)}
+          onDropDoc={() => {}}
+        />
+        <FolderItem
+          row={{ kind: 'themes' }}
+          count={themesCount}
+          selected={selectedId === THEMES_ID}
+          onSelect={() => onSelect(THEMES_ID)}
+          onDropDoc={() => {}}
+        />
+        {import.meta.env.DEV && (
+          <FolderItem
+            row={{ kind: 'assets' }}
+            count={assetsCount}
+            selected={selectedId === ASSETS_ID}
+            onSelect={() => onSelect(ASSETS_ID)}
+            onDropDoc={() => {}}
+          />
+        )}
+      </div>
+
+      <div className="mt-5 flex items-center gap-2 px-4 pb-1">
+        <span className="text-[10px] text-muted-foreground uppercase tracking-wider">Folders</span>
+        <span className="h-px flex-1 bg-border" aria-hidden />
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-2">
+        <FolderItem
+          row={{ kind: 'draft' }}
+          count={countFor(null)}
+          selected={selectedId === DRAFT_ID}
+          onSelect={() => onSelect(DRAFT_ID)}
+          onDropDoc={onDropToDraft}
+        />
+
+        {folders.map((folder) => {
+          const isTarget = dropTarget?.id === folder.id;
+          return (
+            // biome-ignore lint/a11y/noStaticElementInteractions: drag handle wraps the row, which keeps its own button
+            <div
+              key={folder.id}
+              className={cn(
+                'relative',
+                isTarget &&
+                  dropTarget.before &&
+                  'before:-top-px before:absolute before:inset-x-2 before:h-[2px] before:rounded-full before:bg-foreground',
+                isTarget &&
+                  !dropTarget.before &&
+                  'after:-bottom-px after:absolute after:inset-x-2 after:h-[2px] after:rounded-full after:bg-foreground',
+                dragId === folder.id && 'opacity-50',
+              )}
+              draggable={import.meta.env.DEV}
+              onDragStart={(e) => {
+                if (!import.meta.env.DEV) return;
+                e.dataTransfer.setData(FOLDER_DND_MIME, folder.id);
+                e.dataTransfer.effectAllowed = 'move';
+                setDragId(folder.id);
+              }}
+              onDragEnd={() => {
+                setDragId(null);
+                setDropTarget(null);
+              }}
+              onDragOver={(e) => {
+                if (!e.dataTransfer.types.includes(FOLDER_DND_MIME)) return;
+                e.preventDefault();
+                e.dataTransfer.dropEffect = 'move';
+                const rect = e.currentTarget.getBoundingClientRect();
+                const before = e.clientY < rect.top + rect.height / 2;
+                if (!dropTarget || dropTarget.id !== folder.id || dropTarget.before !== before) {
+                  setDropTarget({ id: folder.id, before });
+                }
+              }}
+              onDragLeave={(e) => {
+                if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;
+                if (dropTarget?.id === folder.id) setDropTarget(null);
+              }}
+              onDrop={(e) => {
+                const fromId = e.dataTransfer.getData(FOLDER_DND_MIME);
+                if (!fromId) return;
+                e.preventDefault();
+                e.stopPropagation();
+                const rect = e.currentTarget.getBoundingClientRect();
+                finishReorder(folder.id, e.clientY < rect.top + rect.height / 2);
+              }}
+            >
+              <FolderItem
+                row={{
+                  kind: 'folder',
+                  folder,
+                  onRename: (name) => onRename(folder.id, name),
+                  onChangeIcon: (icon) => onChangeIcon(folder.id, icon),
+                  onDelete: () => onDelete(folder.id),
+                }}
+                count={countFor(folder.id)}
+                selected={selectedId === folder.id}
+                onSelect={() => onSelect(folder.id)}
+                onDropDoc={(docId) => onDropToFolder(folder.id, docId)}
+              />
+            </div>
+          );
+        })}
+
+        {import.meta.env.DEV &&
+          (creating ? (
+            <div className="mt-1 flex items-center gap-2 rounded-md border border-foreground/30 border-dashed px-2 py-1">
+              <FolderIconChip icon={newIcon} />
+              <input
+                ref={inputRef}
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                onBlur={commitCreate}
+                onKeyDown={(e) => {
+                  if (e.nativeEvent.isComposing) return;
+                  if (e.key === 'Enter') void commitCreate();
+                  if (e.key === 'Escape') {
+                    setCreating(false);
+                    setNewName('');
+                  }
+                }}
+                placeholder="Folder name"
+                maxLength={40}
+                className="min-w-0 flex-1 bg-transparent text-[13px] outline-none placeholder:text-muted-foreground/60"
+              />
+            </div>
+          ) : (
+            <button
+              type="button"
+              onClick={startCreating}
+              className="mt-1 flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-[12px] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+            >
+              <Plus className="size-3.5" />
+              New folder
+            </button>
+          ))}
+
+        {creating && (
+          <div className="mt-1 rounded-md border border-border p-2">
+            <IconPicker value={newIcon} onChange={setNewIcon} />
+          </div>
+        )}
+      </div>
+
+      <div className="border-border border-t px-4 py-3 text-[11px] text-muted-foreground">
+        <div className="flex items-center justify-between">
+          <span>v{config.version}</span>
+          <span className="font-mono">{import.meta.env.DEV ? 'dev' : 'static'}</span>
+        </div>
+      </div>
+    </aside>
+  );
+}

package/src/app/components/table-of-contents.tsx

@@ -0,0 +1,93 @@
+import type { CSSProperties } from 'react';
+import { TOC_ATTR, useDocOutline } from '../lib/outline';
+import { useDocPageNumber } from '../lib/page-context';
+
+export const TOC_ENTRY_ATTR = 'data-od-toc-entry';
+/** Read by the Word export, which rebuilds the list as a contents field. */
+export const TOC_DEPTH_ATTR = 'data-od-toc-depth';
+export const TOC_LEVEL_ATTR = 'data-od-toc-level';
+export const TOC_PAGE_ATTR = 'data-od-toc-page';
+
+export type TableOfContentsProps = {
+  /** Deepest heading level to list. Defaults to 2 (h1 + h2). */
+  maxLevel?: number;
+  /** Show the page number column with dot leaders. Defaults to true. */
+  showPageNumbers?: boolean;
+  /** List headings that sit on the same page as the TOC itself. Defaults to false. */
+  includeOwnPage?: boolean;
+  /** Indent per heading level, in px. Defaults to 20. */
+  indent?: number;
+  style?: CSSProperties;
+  className?: string;
+};
+
+/**
+ * Renders the document's headings as a contents list. The outline is filled in
+ * by a DOM scan after the pages render, so this component is empty on the very
+ * first pass and populated on the next — including during PDF/HTML export,
+ * which scans before serializing.
+ */
+export function TableOfContents({
+  maxLevel = 2,
+  showPageNumbers = true,
+  includeOwnPage = false,
+  indent = 20,
+  style,
+  className,
+}: TableOfContentsProps) {
+  const outline = useDocOutline();
+  const ownPage = useDocPageNumber();
+
+  const entries = outline.filter(
+    (entry) => entry.level <= maxLevel && (includeOwnPage || entry.page !== ownPage),
+  );
+
+  return (
+    <div
+      {...{ [TOC_ATTR]: '', [TOC_DEPTH_ATTR]: maxLevel }}
+      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}
+          /* Which heading this line stands for. The inspector follows it: a
+           * contents row holds no text of its own, so clicking one has to land
+           * on the heading that produced it. */
+          {...{ [TOC_ENTRY_ATTR]: entry.id, [TOC_LEVEL_ATTR]: entry.level }}
+          style={{
+            display: 'flex',
+            alignItems: 'baseline',
+            gap: 8,
+            paddingLeft: (entry.level - 1) * indent,
+            marginBottom: entry.level === 1 ? 10 : 6,
+            fontWeight: entry.level === 1 ? 600 : 400,
+            color: entry.level === 1 ? 'var(--od-text)' : 'var(--od-muted)',
+          }}
+        >
+          <span>{entry.text}</span>
+          {showPageNumbers && (
+            <>
+              <span
+                aria-hidden
+                style={{
+                  flex: 1,
+                  borderBottom: '1px dotted var(--od-rule)',
+                  transform: 'translateY(-3px)',
+                }}
+              />
+              <span {...{ [TOC_PAGE_ATTR]: '' }} style={{ fontVariantNumeric: 'tabular-nums' }}>
+                {entry.page}
+              </span>
+            </>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/app/components/theme-toggle.tsx

@@ -0,0 +1,50 @@
+import { Monitor, Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+import { Menu, MenuItem } from './ui/menu';
+
+const OPTIONS = [
+  { value: 'light', label: 'Light', icon: Sun },
+  { value: 'dark', label: 'Dark', icon: Moon },
+  { value: 'system', label: 'System', icon: Monitor },
+] as const;
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  return (
+    <Menu
+      trigger={(props) => (
+        <button
+          type="button"
+          aria-label="Toggle theme"
+          title="Theme"
+          className="relative flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground aria-expanded:bg-accent"
+          {...props}
+        >
+          <Sun className="size-3.5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute size-3.5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+        </button>
+      )}
+    >
+      {(close) =>
+        OPTIONS.map(({ value, label, icon: Icon }) => (
+          <MenuItem
+            key={value}
+            active={mounted && theme === value}
+            onClick={() => {
+              setTheme(value);
+              close();
+            }}
+          >
+            <Icon className="size-3.5" />
+            {label}
+          </MenuItem>
+        ))
+      }
+    </Menu>
+  );
+}

package/src/app/components/themes/markdown.tsx

@@ -0,0 +1,249 @@
+import type { ReactNode } from 'react';
+
+type Block =
+  | { kind: 'heading'; level: number; text: string }
+  | { kind: 'code'; lang: string; text: string }
+  | { kind: 'list'; items: string[] }
+  | { kind: 'quote'; text: string }
+  | { kind: 'rule' }
+  | { kind: 'table'; head: string[]; rows: string[][] }
+  | { kind: 'paragraph'; text: string };
+
+function splitRow(line: string): string[] {
+  return line
+    .trim()
+    .replace(/^\||\|$/g, '')
+    .split('|')
+    .map((cell) => cell.trim());
+}
+
+const TABLE_DIVIDER_RE = /^\s*\|?[\s:|-]*-[\s:|-]*\|?\s*$/;
+
+/**
+ * A theme file is prose written by the `create-theme` skill — headings, prose,
+ * lists, and paste-ready code. This renders exactly that much Markdown rather
+ * than pulling a parser into the runtime bundle.
+ */
+export function parseMarkdown(source: string): Block[] {
+  const lines = source.split(/\r?\n/);
+  const blocks: Block[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    if (line.trim() === '') {
+      i++;
+      continue;
+    }
+
+    const fence = line.match(/^```(\w*)/);
+    if (fence) {
+      const lang = fence[1] ?? '';
+      const body: string[] = [];
+      i++;
+      while (i < lines.length && !lines[i].startsWith('```')) {
+        body.push(lines[i]);
+        i++;
+      }
+      i++; // closing fence
+      blocks.push({ kind: 'code', lang, text: body.join('\n') });
+      continue;
+    }
+
+    // A pipe row followed by a divider row is a table. Theme files lean on
+    // tables for palettes and type scales, so leaving them as raw text makes
+    // the theme page unreadable.
+    if (line.trim().startsWith('|') && TABLE_DIVIDER_RE.test(lines[i + 1] ?? '')) {
+      const head = splitRow(line);
+      i += 2;
+      const rows: string[][] = [];
+      while (i < lines.length && lines[i].trim().startsWith('|')) {
+        rows.push(splitRow(lines[i]));
+        i++;
+      }
+      blocks.push({ kind: 'table', head, rows });
+      continue;
+    }
+
+    const heading = line.match(/^(#{1,6})\s+(.*)$/);
+    if (heading) {
+      blocks.push({ kind: 'heading', level: heading[1].length, text: heading[2].trim() });
+      i++;
+      continue;
+    }
+
+    if (/^(-{3,}|\*{3,})$/.test(line.trim())) {
+      blocks.push({ kind: 'rule' });
+      i++;
+      continue;
+    }
+
+    if (/^>\s?/.test(line)) {
+      const body: string[] = [];
+      while (i < lines.length && /^>\s?/.test(lines[i])) {
+        body.push(lines[i].replace(/^>\s?/, ''));
+        i++;
+      }
+      blocks.push({ kind: 'quote', text: body.join(' ') });
+      continue;
+    }
+
+    if (/^\s*([-*+]|\d+\.)\s+/.test(line)) {
+      const items: string[] = [];
+      while (i < lines.length && /^\s*([-*+]|\d+\.)\s+/.test(lines[i])) {
+        items.push(lines[i].replace(/^\s*([-*+]|\d+\.)\s+/, ''));
+        i++;
+      }
+      blocks.push({ kind: 'list', items });
+      continue;
+    }
+
+    const body: string[] = [];
+    while (
+      i < lines.length &&
+      lines[i].trim() !== '' &&
+      !/^(#{1,6}\s|```|>\s?|\||\s*([-*+]|\d+\.)\s)/.test(lines[i])
+    ) {
+      body.push(lines[i].trim());
+      i++;
+    }
+    blocks.push({ kind: 'paragraph', text: body.join(' ') });
+  }
+
+  return blocks;
+}
+
+function renderInline(text: string): ReactNode[] {
+  const nodes: ReactNode[] = [];
+  const pattern = /(`[^`]+`|\*\*[^*]+\*\*|\[[^\]]+\]\([^)]+\))/g;
+  let last = 0;
+  let key = 0;
+  for (const match of text.matchAll(pattern)) {
+    const index = match.index ?? 0;
+    if (index > last) nodes.push(text.slice(last, index));
+    const token = match[0];
+    if (token.startsWith('`')) {
+      nodes.push(
+        <code
+          key={`i${key++}`}
+          className="rounded bg-muted px-1 py-0.5 font-mono text-[0.85em] text-foreground"
+        >
+          {token.slice(1, -1)}
+        </code>,
+      );
+    } else if (token.startsWith('**')) {
+      nodes.push(
+        <strong key={`i${key++}`} className="font-semibold text-foreground">
+          {token.slice(2, -2)}
+        </strong>,
+      );
+    } else {
+      const label = token.slice(1, token.indexOf(']'));
+      const href = token.slice(token.indexOf('](') + 2, -1);
+      nodes.push(
+        <a key={`i${key++}`} href={href} className="underline underline-offset-2">
+          {label}
+        </a>,
+      );
+    }
+    last = index + token.length;
+  }
+  if (last < text.length) nodes.push(text.slice(last));
+  return nodes;
+}
+
+const HEADING_CLASS: Record<number, string> = {
+  1: 'mt-10 mb-3 font-semibold text-xl tracking-tight',
+  2: 'mt-8 mb-2.5 font-semibold text-base tracking-tight',
+  3: 'mt-6 mb-2 font-medium text-sm',
+};
+
+export function Markdown({ source }: { source: string }) {
+  const blocks = parseMarkdown(source);
+  return (
+    <div className="text-muted-foreground text-sm leading-relaxed">
+      {blocks.map((block, index) => {
+        const key = `${block.kind}-${index}`;
+        switch (block.kind) {
+          case 'heading': {
+            const className = HEADING_CLASS[block.level] ?? HEADING_CLASS[3];
+            return (
+              <p key={key} className={`text-foreground first:mt-0 ${className}`}>
+                {renderInline(block.text)}
+              </p>
+            );
+          }
+          case 'code':
+            return (
+              <pre
+                key={key}
+                className="my-3 overflow-x-auto rounded-md border border-border bg-muted px-3 py-2.5 font-mono text-[11.5px] text-foreground leading-relaxed"
+              >
+                {block.text}
+              </pre>
+            );
+          case 'list':
+            return (
+              <ul key={key} className="my-3 list-disc space-y-1 pl-5">
+                {block.items.map((item, itemIndex) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: parsed markdown has no stable id, and the list is re-rendered wholesale
+                  <li key={`${key}-${itemIndex}`}>{renderInline(item)}</li>
+                ))}
+              </ul>
+            );
+          case 'quote':
+            return (
+              <blockquote key={key} className="my-3 border-border border-l-2 pl-3 italic">
+                {renderInline(block.text)}
+              </blockquote>
+            );
+          case 'table':
+            return (
+              <div key={key} className="my-4 overflow-x-auto">
+                <table className="w-full border-collapse text-xs">
+                  <thead>
+                    <tr>
+                      {block.head.map((cell, cellIndex) => (
+                        <th
+                          // biome-ignore lint/suspicious/noArrayIndexKey: column position is the identity
+                          key={`h${cellIndex}`}
+                          className="border-border border-b px-2 py-1.5 text-left font-medium text-muted-foreground"
+                        >
+                          {renderInline(cell)}
+                        </th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {block.rows.map((row, rowIndex) => (
+                      // biome-ignore lint/suspicious/noArrayIndexKey: row position is the identity
+                      <tr key={`r${rowIndex}`}>
+                        {row.map((cell, cellIndex) => (
+                          <td
+                            // biome-ignore lint/suspicious/noArrayIndexKey: column position is the identity
+                            key={`c${cellIndex}`}
+                            className="border-border border-b px-2 py-1.5 align-top text-foreground"
+                          >
+                            {renderInline(cell)}
+                          </td>
+                        ))}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            );
+          case 'rule':
+            return <hr key={key} className="my-6 border-border" />;
+          default:
+            return (
+              <p key={key} className="my-3">
+                {renderInline(block.text)}
+              </p>
+            );
+        }
+      })}
+    </div>
+  );
+}