mosage 0.2.0 → 0.8.0

package/src/app/routes/home-shell.tsx

@@ -0,0 +1,203 @@
+import { Menu as MenuIcon } from 'lucide-react';
+import { useCallback, useMemo } from 'react';
+import { Outlet, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import {
+  ALL_DOCS_ID,
+  ASSETS_ID,
+  DRAFT_ID,
+  Sidebar,
+  THEMES_ID,
+} from '../components/sidebar/sidebar';
+import { ThemeToggle } from '../components/theme-toggle';
+import { Menu, MenuItem } from '../components/ui/menu';
+import { useAssetCount } from '../lib/assets';
+import { docIds } from '../lib/docs';
+import { useFolders } from '../lib/folders';
+import type { FoldersManifest } from '../lib/sdk';
+import { themes } from '../lib/themes';
+
+export type HomeOutletContext = {
+  manifest: FoldersManifest;
+  loading: boolean;
+  /** Documents with no folder assignment. */
+  draftDocs: string[];
+  docsByFolder: Record<string, string[]>;
+  /** ALL_DOCS_ID, DRAFT_ID, a folder id, THEMES_ID, or ASSETS_ID. */
+  selectedId: string;
+  selectFolder: (id: string) => void;
+  assign: (docId: string, folderId: string | null) => Promise<void>;
+  renameDoc: (docId: string, title: string) => Promise<void>;
+  duplicateDoc: (docId: string, newId?: string) => Promise<string>;
+  deleteDoc: (docId: string) => Promise<void>;
+};
+
+function pathToSelectedId(pathname: string, search: URLSearchParams): string {
+  if (pathname === '/themes' || pathname.startsWith('/themes/')) return THEMES_ID;
+  if (pathname === '/assets') return ASSETS_ID;
+  return search.get('f') ?? ALL_DOCS_ID;
+}
+
+export function HomeShell() {
+  const {
+    manifest,
+    loading,
+    create,
+    update,
+    remove,
+    reorder,
+    assign,
+    renameDoc,
+    duplicateDoc,
+    deleteDoc,
+  } = useFolders();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+  const assetCount = useAssetCount();
+
+  const selectedId = pathToSelectedId(location.pathname, searchParams);
+
+  const selectFolder = useCallback(
+    (id: string) => {
+      if (id === THEMES_ID) navigate('/themes');
+      else if (id === ASSETS_ID) navigate('/assets');
+      else if (id === ALL_DOCS_ID) navigate('/');
+      else navigate(`/?f=${encodeURIComponent(id)}`);
+    },
+    [navigate],
+  );
+
+  const { draftDocs, docsByFolder } = useMemo(() => {
+    const byFolder: Record<string, string[]> = {};
+    const draft: string[] = [];
+    const known = new Set(manifest.folders.map((f) => f.id));
+    for (const id of docIds) {
+      const folderId = manifest.assignments[id];
+      if (folderId && known.has(folderId)) {
+        byFolder[folderId] ??= [];
+        byFolder[folderId].push(id);
+      } else {
+        draft.push(id);
+      }
+    }
+    return { draftDocs: draft, docsByFolder: byFolder };
+  }, [manifest]);
+
+  const countFor = (folderId: string | null) =>
+    folderId === null ? draftDocs.length : (docsByFolder[folderId]?.length ?? 0);
+
+  const ctx: HomeOutletContext = {
+    manifest,
+    loading,
+    draftDocs,
+    docsByFolder,
+    selectedId,
+    selectFolder,
+    assign,
+    renameDoc,
+    duplicateDoc,
+    deleteDoc,
+  };
+
+  const isAssetsRoute = location.pathname === '/assets';
+
+  return (
+    <div className="flex h-dvh overflow-hidden bg-background text-foreground">
+      <div className="hidden md:block">
+        <Sidebar
+          folders={manifest.folders}
+          countFor={countFor}
+          allCount={docIds.length}
+          themesCount={themes.length}
+          assetsCount={assetCount}
+          selectedId={selectedId}
+          onSelect={selectFolder}
+          onCreate={create}
+          onRename={(id, name) => update(id, { name })}
+          onChangeIcon={(id, icon) => update(id, { icon })}
+          onDelete={async (id) => {
+            if (selectedId === id) selectFolder(ALL_DOCS_ID);
+            await remove(id).catch(() => {});
+          }}
+          onDropToFolder={(folderId, docId) => void assign(docId, folderId)}
+          onDropToDraft={(docId) => void assign(docId, null)}
+          onReorder={(ids) => void reorder(ids).catch(() => {})}
+        />
+      </div>
+
+      <div className="relative flex min-w-0 flex-1 flex-col overflow-y-auto bg-canvas">
+        <div className="flex items-center justify-between border-border border-b bg-background px-4 py-3 md:hidden">
+          <h1 className="font-semibold text-base tracking-tight">MoSage</h1>
+          <div className="-mr-1 flex items-center gap-0.5">
+            <ThemeToggle />
+            <Menu
+              trigger={(props) => (
+                <button
+                  type="button"
+                  aria-label="Menu"
+                  className="flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground aria-expanded:bg-accent"
+                  {...props}
+                >
+                  <MenuIcon className="size-4" />
+                </button>
+              )}
+            >
+              {(close) => (
+                <>
+                  <MenuItem
+                    active={selectedId !== THEMES_ID && selectedId !== ASSETS_ID}
+                    onClick={() => {
+                      selectFolder(ALL_DOCS_ID);
+                      close();
+                    }}
+                  >
+                    Documents
+                  </MenuItem>
+                  <MenuItem
+                    active={selectedId === DRAFT_ID}
+                    onClick={() => {
+                      selectFolder(DRAFT_ID);
+                      close();
+                    }}
+                  >
+                    Unfiled
+                  </MenuItem>
+                  <MenuItem
+                    active={selectedId === THEMES_ID}
+                    onClick={() => {
+                      selectFolder(THEMES_ID);
+                      close();
+                    }}
+                  >
+                    Themes
+                  </MenuItem>
+                  {import.meta.env.DEV && (
+                    <MenuItem
+                      active={selectedId === ASSETS_ID}
+                      onClick={() => {
+                        selectFolder(ASSETS_ID);
+                        close();
+                      }}
+                    >
+                      Assets
+                    </MenuItem>
+                  )}
+                </>
+              )}
+            </Menu>
+          </div>
+        </div>
+
+        <div
+          className={
+            isAssetsRoute
+              ? 'flex min-h-0 flex-1 flex-col'
+              : 'mx-auto w-full max-w-[1180px] px-5 py-8 md:px-10 md:py-10'
+          }
+        >
+          <Outlet context={ctx} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/routes/home.tsx

@@ -0,0 +1,269 @@
+import {
+  Copy,
+  FileText,
+  FolderInput,
+  MoreHorizontal,
+  Palette,
+  PencilLine,
+  Trash2,
+} from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { Link, useNavigate, useOutletContext } from 'react-router-dom';
+import { PageFrame } from '../components/page-frame';
+import { DOC_DND_MIME } from '../components/sidebar/folder-item';
+import { ALL_DOCS_ID, DRAFT_ID } from '../components/sidebar/sidebar';
+import { Menu, MenuItem, MenuSeparator } from '../components/ui/menu';
+import { coverContent, pageCountLabel } from '../lib/doc-preview';
+import { docCreatedAt, docIds, docThemes } from '../lib/docs';
+import { resolvePageGeometry } from '../lib/sdk';
+import { findTheme } from '../lib/themes';
+import { useDocModule } from '../lib/use-doc-module';
+import type { HomeOutletContext } from './home-shell';
+
+const THUMB_WIDTH = 190;
+
+export function Home() {
+  const ctx = useOutletContext<HomeOutletContext>();
+  const [error, setError] = useState<string | null>(null);
+
+  const folder = ctx.manifest.folders.find((f) => f.id === ctx.selectedId);
+  const visibleIds = useMemo(() => {
+    const source =
+      ctx.selectedId === ALL_DOCS_ID
+        ? [...docIds]
+        : ctx.selectedId === DRAFT_ID
+          ? [...ctx.draftDocs]
+          : [...(ctx.docsByFolder[ctx.selectedId] ?? [])];
+    return source.sort((a, b) => {
+      const at = docCreatedAt[a] ?? 0;
+      const bt = docCreatedAt[b] ?? 0;
+      if (at !== bt) return bt - at;
+      return a.localeCompare(b);
+    });
+  }, [ctx.selectedId, ctx.draftDocs, ctx.docsByFolder]);
+
+  const heading =
+    ctx.selectedId === ALL_DOCS_ID
+      ? 'Documents'
+      : ctx.selectedId === DRAFT_ID
+        ? 'Unfiled'
+        : (folder?.name ?? 'Documents');
+
+  return (
+    <div>
+      <header className="mb-8">
+        <h1 className="font-medium text-lg tracking-tight">{heading}</h1>
+        <p className="mt-1 text-muted-foreground text-sm">
+          {ctx.selectedId === ALL_DOCS_ID ? (
+            <>
+              Every folder under <code className="font-mono">docs/</code> with an{' '}
+              <code className="font-mono">index.tsx</code>.
+            </>
+          ) : ctx.selectedId === DRAFT_ID ? (
+            'Documents that have not been filed into a folder yet.'
+          ) : (
+            `${visibleIds.length} document${visibleIds.length === 1 ? '' : 's'} in this folder.`
+          )}
+        </p>
+        {error && (
+          <p className="mt-3 rounded-md border border-border bg-background px-3 py-2 text-xs">
+            {error}
+          </p>
+        )}
+      </header>
+
+      {visibleIds.length === 0 ? (
+        <div className="py-16 text-center">
+          <FileText className="mx-auto size-6 text-muted-foreground" />
+          <p className="mt-3 font-medium text-sm">Nothing here yet</p>
+          <p className="mt-1 text-muted-foreground text-xs">
+            {ctx.selectedId === ALL_DOCS_ID ? (
+              <>
+                Create <code className="font-mono">docs/&lt;id&gt;/index.tsx</code> and it appears
+                here.
+              </>
+            ) : (
+              'Drag a document onto this folder in the sidebar to file it here.'
+            )}
+          </p>
+        </div>
+      ) : (
+        <div className="grid gap-7 [grid-template-columns:repeat(auto-fill,minmax(190px,1fr))]">
+          {visibleIds.map((id) => (
+            <DocCard key={id} docId={id} ctx={ctx} onError={setError} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function DocCard({
+  docId,
+  ctx,
+  onError,
+}: {
+  docId: string;
+  ctx: HomeOutletContext;
+  onError: (message: string | null) => void;
+}) {
+  const navigate = useNavigate();
+  const state = useDocModule(docId);
+  const doc = state.doc;
+  const geometry = resolvePageGeometry(doc?.meta);
+  const scale = THUMB_WIDTH / geometry.width;
+  const cover = coverContent(doc);
+  const theme = findTheme(docThemes[docId]);
+  const title = doc?.meta?.title ?? docId;
+  const currentFolder = ctx.manifest.assignments[docId];
+
+  const run = async (action: () => Promise<unknown>) => {
+    onError(null);
+    try {
+      await action();
+    } catch (err) {
+      onError(String((err as Error).message));
+    }
+  };
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: dragging files a document — the card menu's "Move to" is the keyboard path
+    <div
+      className="group flex flex-col gap-2.5"
+      draggable={import.meta.env.DEV}
+      onDragStart={(e) => {
+        if (!import.meta.env.DEV) return;
+        e.dataTransfer.setData(DOC_DND_MIME, docId);
+        e.dataTransfer.effectAllowed = 'move';
+      }}
+    >
+      <Link to={`/d/${docId}`}>
+        <div
+          className="overflow-hidden rounded-md ring-1 ring-border transition-shadow group-hover:shadow-lg"
+          style={{ width: THUMB_WIDTH, height: geometry.height * scale }}
+        >
+          {cover ? (
+            <PageFrame
+              index={0}
+              total={doc?.default?.length ?? 1}
+              geometry={geometry}
+              scale={scale}
+              design={doc?.design}
+              flat
+            >
+              {cover}
+            </PageFrame>
+          ) : (
+            <div className="size-full bg-muted" />
+          )}
+        </div>
+      </Link>
+
+      <div className="flex min-w-0 items-start gap-1">
+        <div className="min-w-0 flex-1">
+          <Link to={`/d/${docId}`} className="block truncate font-medium text-sm hover:underline">
+            {title}
+          </Link>
+          <p className="mt-0.5 truncate text-muted-foreground text-xs">
+            {pageCountLabel(doc)} · {doc?.meta?.pageSize ?? 'A4'}
+          </p>
+          {theme && (
+            <Link
+              to={`/themes/${theme.id}`}
+              className="mt-1.5 inline-flex items-center gap-1 rounded-full border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+            >
+              <Palette className="size-2.5" />
+              {theme.name}
+            </Link>
+          )}
+        </div>
+
+        {import.meta.env.DEV && (
+          <Menu
+            trigger={(props) => (
+              <button
+                type="button"
+                aria-label={`${title} options`}
+                className="flex size-6 flex-none items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100 aria-expanded:opacity-100"
+                {...props}
+              >
+                <MoreHorizontal className="size-3.5" />
+              </button>
+            )}
+          >
+            {(close) => (
+              <>
+                <MenuItem
+                  onClick={() => {
+                    close();
+                    const next = window.prompt('Document title', title);
+                    if (next && next !== title) void run(() => ctx.renameDoc(docId, next));
+                  }}
+                >
+                  <PencilLine className="size-3.5" />
+                  Rename
+                </MenuItem>
+                <MenuItem
+                  onClick={() => {
+                    close();
+                    void run(async () => {
+                      const newId = await ctx.duplicateDoc(docId);
+                      navigate(`/d/${newId}`);
+                    });
+                  }}
+                >
+                  <Copy className="size-3.5" />
+                  Duplicate
+                </MenuItem>
+
+                <MenuSeparator />
+                <p className="px-2 py-1 text-[10px] text-muted-foreground uppercase tracking-wider">
+                  Move to
+                </p>
+                <MenuItem
+                  active={!currentFolder}
+                  onClick={() => {
+                    close();
+                    void run(() => ctx.assign(docId, null));
+                  }}
+                >
+                  <FolderInput className="size-3.5" />
+                  Unfiled
+                </MenuItem>
+                {ctx.manifest.folders.map((folder) => (
+                  <MenuItem
+                    key={folder.id}
+                    active={currentFolder === folder.id}
+                    onClick={() => {
+                      close();
+                      void run(() => ctx.assign(docId, folder.id));
+                    }}
+                  >
+                    <FolderInput className="size-3.5" />
+                    {folder.name}
+                  </MenuItem>
+                ))}
+
+                <MenuSeparator />
+                <MenuItem
+                  destructive
+                  onClick={() => {
+                    close();
+                    if (
+                      !window.confirm(`Delete "${title}"? This removes docs/${docId}/ from disk.`)
+                    )
+                      return;
+                    void run(() => ctx.deleteDoc(docId));
+                  }}
+                >
+                  <Trash2 className="size-3.5" />
+                  Delete document
+                </MenuItem>
+              </>
+            )}
+          </Menu>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/app/routes/themes.tsx

@@ -0,0 +1,121 @@
+import { ArrowLeft, Palette } from 'lucide-react';
+import { Link, useParams } from 'react-router-dom';
+import { Markdown } from '../components/themes/markdown';
+import { ThemePreview } from '../components/themes/theme-preview';
+import { docsByTheme } from '../lib/docs';
+import { findTheme, themes } from '../lib/themes';
+
+const GALLERY_WIDTH = 200;
+const DETAIL_WIDTH = 260;
+
+export function ThemesGalleryPage() {
+  return (
+    <div>
+      <header className="border-border border-b px-8 py-6">
+        <h1 className="font-medium text-lg tracking-tight">Themes</h1>
+        <p className="mt-1 text-muted-foreground text-sm">
+          Every <code className="font-mono">.md</code> file under{' '}
+          <code className="font-mono">themes/</code>. A theme is documentation — palette, type
+          scale, and paste-ready components a document copies from.
+        </p>
+      </header>
+
+      {themes.length === 0 ? (
+        <div className="px-8 py-16 text-center">
+          <Palette className="mx-auto size-6 text-muted-foreground" />
+          <p className="mt-3 font-medium text-sm">No themes yet</p>
+          <p className="mt-1 text-muted-foreground text-xs">
+            Ask your agent for the <code className="font-mono">create-theme</code> skill, or add{' '}
+            <code className="font-mono">themes/&lt;id&gt;.md</code>.
+          </p>
+        </div>
+      ) : (
+        <div className="grid gap-8 px-8 py-8 [grid-template-columns:repeat(auto-fill,minmax(200px,1fr))]">
+          {themes.map((theme) => (
+            <Link key={theme.id} to={`/themes/${theme.id}`} className="group flex flex-col gap-3">
+              <div className="transition-shadow group-hover:shadow-lg">
+                <ThemePreview theme={theme} width={GALLERY_WIDTH} />
+              </div>
+              <div className="min-w-0">
+                <p className="truncate font-medium text-sm">{theme.name}</p>
+                <p className="mt-0.5 line-clamp-2 text-muted-foreground text-xs">
+                  {theme.description || theme.id}
+                </p>
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function ThemeDetailPage() {
+  const { themeId } = useParams<{ themeId: string }>();
+  const theme = findTheme(themeId);
+
+  if (!theme) {
+    return (
+      <div className="px-8 py-16 text-center">
+        <p className="font-medium text-sm">Theme “{themeId}” not found.</p>
+        <Link to="/themes" className="mt-3 inline-block text-muted-foreground text-xs underline">
+          Back to themes
+        </Link>
+      </div>
+    );
+  }
+
+  const usedBy = docsByTheme(theme.id);
+  const chips = [theme.pageSize, theme.mode].filter(Boolean);
+
+  return (
+    <div className="px-8 py-6">
+      <Link
+        to="/themes"
+        className="inline-flex items-center gap-1.5 text-muted-foreground text-xs hover:text-foreground"
+      >
+        <ArrowLeft className="size-3" />
+        Themes
+      </Link>
+
+      <div className="mt-4 flex flex-wrap items-baseline gap-3">
+        <h1 className="font-medium text-lg tracking-tight">{theme.name}</h1>
+        <code className="font-mono text-muted-foreground text-xs">{theme.id}</code>
+        {chips.map((chip) => (
+          <span
+            key={chip}
+            className="rounded-full border border-border px-2 py-0.5 text-[10px] text-muted-foreground"
+          >
+            {chip}
+          </span>
+        ))}
+      </div>
+      {theme.description && (
+        <p className="mt-1 max-w-2xl text-muted-foreground text-sm">{theme.description}</p>
+      )}
+
+      <div className="mt-6">
+        <ThemePreview theme={theme} width={DETAIL_WIDTH} all />
+      </div>
+
+      {usedBy.length > 0 && (
+        <div className="mt-6 flex flex-wrap items-center gap-2">
+          <span className="text-muted-foreground text-xs">Used by</span>
+          {usedBy.map((docId) => (
+            <Link
+              key={docId}
+              to={`/d/${docId}`}
+              className="rounded-full border border-border px-2 py-0.5 text-[11px] transition-colors hover:bg-accent"
+            >
+              {docId}
+            </Link>
+          ))}
+        </div>
+      )}
+
+      <article className="mt-8 max-w-3xl border-border border-t pt-6">
+        <Markdown source={theme.body} />
+      </article>
+    </div>
+  );
+}

package/src/app/styles.css

@@ -0,0 +1,97 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-canvas: var(--canvas);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-border: var(--border);
+
+  --radius-md: 6px;
+}
+
+:root {
+  --background: oklch(0.99 0 0);
+  --foreground: oklch(0.145 0 0);
+  --canvas: oklch(0.93 0 0);
+  --muted: oklch(0.955 0 0);
+  --muted-foreground: oklch(0.5 0 0);
+  --accent: oklch(0.945 0 0);
+  --accent-foreground: oklch(0.185 0 0);
+  --primary: oklch(0.185 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --border: oklch(0.9 0 0);
+}
+
+.dark {
+  --background: oklch(0.16 0 0);
+  --foreground: oklch(0.97 0 0);
+  --canvas: oklch(0.12 0 0);
+  --muted: oklch(0.24 0 0);
+  --muted-foreground: oklch(0.68 0 0);
+  --accent: oklch(0.25 0 0);
+  --accent-foreground: oklch(0.97 0 0);
+  --primary: oklch(0.97 0 0);
+  --primary-foreground: oklch(0.16 0 0);
+  --border: oklch(0.28 0 0);
+}
+
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+  /* A heading's space-above is what separates it from the section before it —
+     but at the top of a page that space is just a dent. Strip it there so the
+     first block of every flow page starts flush with the margin. */
+  [data-od-flow-block]:first-child > * {
+    /* biome-ignore lint/complexity/noImportantStyles: blocks carry inline styles, which no stylesheet rule can outrank without it */
+    margin-top: 0 !important;
+  }
+  html,
+  body,
+  #root {
+    height: 100%;
+  }
+  body {
+    margin: 0;
+    background: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+  }
+}
+
+/* Search hits.
+ *
+ * Drawn with the CSS Custom Highlight API, so nothing in the page is wrapped or
+ * rewritten to show a match. Wrapping matches in <mark> would mean editing a
+ * tree React owns, and the next render would throw the marks away — or worse,
+ * keep them and lose the reader's place. Highlights are ranges held beside the
+ * DOM instead, which is what they are for.
+ *
+ * A browser without the API shows no highlight; the page-to-page jumping still
+ * works, so search degrades to "take me there" rather than breaking.
+ */
+/* Literal colours, deliberately. These paint the sheet, and the sheet is paper —
+   it does not follow the viewer's theme. A chrome token here resolves to
+   near-white in dark mode and disappears on a white page, which is the leak the
+   guidelines warn about, arriving as an invisible highlight rather than an
+   obviously wrong one. Amber is what every reader already reads as "found". */
+::highlight(od-search) {
+  background-color: rgb(255 214 0 / 0.42);
+  color: inherit;
+}
+::highlight(od-search-active) {
+  background-color: rgb(255 138 0 / 0.62);
+  color: inherit;
+}