@treenity/mods 3.0.1

package/doc/CLAUDE.md

@@ -0,0 +1,49 @@
+# doc mod
+
+Rich document editing with Tiptap. Markdown files on disk become typed `doc.page` nodes.
+
+## Type
+
+**`doc.page`** — title (string) + content (Tiptap JSON string)
+
+## FS Codec
+
+Registered on `text/markdown` mime type:
+- **decode:** `.md` file → `doc.page` node. First `# H1` extracted as `title`, rest → Tiptap JSON `content`
+- **encode:** `doc.page` node → `.md` file. Title prepended as `# Title`, content converted via `tiptapToMd()`
+
+## Markdown ↔ Tiptap
+
+`markdown.ts` — bidirectional converter. Supports: headings, paragraphs, bold/italic/code, bullet/ordered lists, code blocks, blockquotes, horizontal rules, treenityBlock references.
+
+## Editor (frontend)
+
+Tiptap WYSIWYG with:
+- Toolbar: bold, italic, code, H1-H3, lists, quote, code block, HR
+- Slash commands: `/` opens menu for formatting + embedding Treenity nodes
+- Drag-and-drop: drop tree nodes to embed as `treenityBlock`
+- Embedded nodes rendered via `<Render>` with live data
+
+## Prefabs
+
+- **`doc/library`** — FS mount-point for a docs directory. Setup param: `{ root: string }`
+- **`doc/demo`** — sample `doc.page` node
+
+## Files
+
+```
+types.ts          — DocPage class + registerComp
+fs-codec.ts       — text/markdown decode/encode for FS store
+markdown.ts       — mdToTiptap / tiptapToMd converters
+text.ts           — text context (Tiptap → plain text/markdown)
+renderers.tsx     — Tiptap editor view
+treenity-block.ts — custom Tiptap node type for embedded components
+treenity-block-view.tsx — renders embedded Treenity nodes
+toolbar.tsx       — editor toolbar
+slash-command.ts  — Tiptap Suggestion extension
+slash-menu.tsx    — slash command popup
+node-picker.tsx   — tree browser for embedding
+prefab.ts         — prefab registrations
+server.ts         — server imports
+client.ts         — client imports + view registration
+```

package/doc/client.ts

@@ -0,0 +1,5 @@
+import './types';
+import './editor.css';
+import { registerDocViews } from './renderers';
+
+registerDocViews();

package/doc/editor.css

@@ -0,0 +1,283 @@
+/* doc mod — ProseMirror content styles */
+
+/* Toolbar icon fix — SVG collapses to 0 width in flex without explicit CSS size */
+.doc-toolbar svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  display: block;
+}
+
+
+.ProseMirror {
+  outline: none;
+  color: var(--text-2);
+  font-size: 14px;
+  line-height: 1.65;
+  font-family: var(--font);
+  font-weight: 400;
+  letter-spacing: 0.01em;
+  max-width: 72ch;
+}
+
+/* Headings — proportional scale, tight letter-spacing */
+.ProseMirror h1 {
+  font-size: 1.5em;      /* 21px */
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: 1.3;
+  color: var(--text);
+  margin: 1.6em 0 0.4em;
+}
+.ProseMirror h2 {
+  font-size: 1.2em;      /* 16.8px */
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.35;
+  color: var(--text);
+  margin: 1.4em 0 0.35em;
+}
+.ProseMirror h3 {
+  font-size: 1.05em;     /* 14.7px */
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  line-height: 1.4;
+  color: var(--text);
+  margin: 1.2em 0 0.3em;
+}
+.ProseMirror h1:first-child,
+.ProseMirror h2:first-child,
+.ProseMirror h3:first-child {
+  margin-top: 0;
+}
+
+/* Paragraphs */
+.ProseMirror p {
+  margin: 0 0 0.6em;
+}
+.ProseMirror p:last-child {
+  margin-bottom: 0;
+}
+
+/* Inline code */
+.ProseMirror code {
+  font-family: 'SF Mono', SFMono-Regular, 'Cascadia Code', 'Fira Code', Consolas, monospace;
+  font-size: 0.84em;
+  padding: 0.15em 0.35em;
+  background: var(--surface-3);
+  border-radius: 3px;
+  color: var(--text);
+  letter-spacing: 0;
+}
+
+/* Code blocks */
+.ProseMirror pre {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 12px 14px;
+  overflow-x: auto;
+  margin: 0.75em 0;
+}
+.ProseMirror pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: 12.5px;
+  line-height: 1.6;
+  color: var(--text);
+}
+
+/* Blockquote */
+.ProseMirror blockquote {
+  border-left: 2px solid var(--border);
+  padding-left: 14px;
+  margin: 0.75em 0;
+  color: var(--text-3);
+  font-style: italic;
+}
+
+/* Lists */
+.ProseMirror ul { list-style: disc;    padding-left: 1.4em; margin: 0.4em 0 0.6em; }
+.ProseMirror ol { list-style: decimal; padding-left: 1.4em; margin: 0.4em 0 0.6em; }
+.ProseMirror li { margin: 0.2em 0; }
+.ProseMirror li > p { margin: 0; }
+.ProseMirror li::marker { color: var(--text-3); }
+.ProseMirror ul ul, .ProseMirror ol ul  { list-style: circle; margin: 0.15em 0; }
+.ProseMirror ul ul ul                   { list-style: square; }
+
+/* Horizontal rule */
+.ProseMirror hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 1.2em 0;
+}
+
+/* Links */
+.ProseMirror a {
+  color: var(--accent-color);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* Bold — full text color for contrast */
+.ProseMirror strong { font-weight: 600; color: var(--text); }
+.ProseMirror em     { font-style: italic; }
+
+/* Selection */
+.ProseMirror ::selection {
+  background: rgba(46, 204, 113, 0.2);
+}
+
+/* Placeholder */
+.ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--text-3);
+  pointer-events: none;
+  height: 0;
+}
+
+/* Slash command menu */
+.slash-menu {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  overflow: hidden;
+  width: 200px;
+  max-height: 280px;
+  overflow-y: auto;
+}
+.slash-menu-empty {
+  padding: 10px 12px;
+  font-size: 12px;
+  color: var(--text-3);
+}
+.slash-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 7px 12px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  color: var(--text-2);
+  transition: background 0.1s;
+}
+.slash-menu-item:hover,
+.slash-menu-item.selected {
+  background: var(--surface-2);
+  color: var(--text);
+}
+.slash-menu-title {
+  font-size: 13px;
+  font-weight: 500;
+}
+.slash-menu-group {
+  font-size: 11px;
+  color: var(--text-3);
+}
+
+/* Syntax highlighting tokens (lowlight/highlight.js dark) */
+.ProseMirror pre .hljs-comment,
+.ProseMirror pre .hljs-quote    { color: #6a737d; font-style: italic; }
+.ProseMirror pre .hljs-keyword,
+.ProseMirror pre .hljs-selector-tag,
+.ProseMirror pre .hljs-built_in { color: #ff7b72; }
+.ProseMirror pre .hljs-string,
+.ProseMirror pre .hljs-attr,
+.ProseMirror pre .hljs-addition { color: #a5d6ff; }
+.ProseMirror pre .hljs-number,
+.ProseMirror pre .hljs-literal  { color: #79c0ff; }
+.ProseMirror pre .hljs-title,
+.ProseMirror pre .hljs-section,
+.ProseMirror pre .hljs-name     { color: #d2a8ff; }
+.ProseMirror pre .hljs-variable,
+.ProseMirror pre .hljs-template-variable { color: #ffa657; }
+.ProseMirror pre .hljs-type     { color: #79c0ff; }
+.ProseMirror pre .hljs-tag      { color: #7ee787; }
+.ProseMirror pre .hljs-attribute { color: #ffa657; }
+.ProseMirror pre .hljs-regexp   { color: #a5d6ff; }
+.ProseMirror pre .hljs-deletion { color: #ffa198; }
+.ProseMirror pre .hljs-meta     { color: #79c0ff; }
+.ProseMirror pre .hljs-subst    { color: #e6edf3; }
+.ProseMirror pre .hljs-symbol   { color: #79c0ff; }
+
+/* Task list */
+.ProseMirror ul[data-type="taskList"] {
+  list-style: none;
+  padding-left: 0.2em;
+}
+.ProseMirror ul[data-type="taskList"] li {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5em;
+}
+.ProseMirror ul[data-type="taskList"] li > label {
+  margin-top: 0.1em;
+  flex-shrink: 0;
+}
+.ProseMirror ul[data-type="taskList"] li > div {
+  flex: 1;
+}
+.ProseMirror ul[data-type="taskList"] input[type="checkbox"] {
+  accent-color: var(--accent-color);
+  cursor: pointer;
+  width: 14px;
+  height: 14px;
+}
+
+/* Tables */
+.ProseMirror table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.75em 0;
+  font-size: 0.93em;
+}
+.ProseMirror th,
+.ProseMirror td {
+  border: 1px solid var(--border);
+  padding: 5px 10px;
+  text-align: left;
+  vertical-align: top;
+}
+.ProseMirror th {
+  background: var(--surface-2);
+  font-weight: 600;
+  color: var(--text);
+}
+.ProseMirror td {
+  color: var(--text-2);
+}
+.ProseMirror tr:nth-child(even) td {
+  background: var(--surface);
+}
+
+/* Treenity embedded block */
+.treenity-block-wrapper {
+  margin: 0.6em 0;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--surface);
+  transition: border-color 0.15s;
+}
+.treenity-block-wrapper:hover {
+  border-color: var(--accent-color);
+}
+.treenity-block-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  background: var(--surface-2);
+  font-size: 11px;
+  color: var(--text-3);
+  border-bottom: 1px solid var(--border);
+}
+.treenity-block-content {
+  padding: 8px;
+}

package/doc/fs-codec.test.ts

@@ -0,0 +1,119 @@
+import type { Tree } from '@treenity/core/tree';
+import { createFsTree } from '@treenity/core/tree/fs';
+import assert from 'node:assert/strict';
+import { mkdtemp, readFile, rm, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { afterEach, beforeEach, describe, it } from 'node:test';
+
+// Register the codec — side effect import
+import './fs-codec';
+
+describe('doc fs-codec', () => {
+  let dir: string;
+  let store: Tree;
+
+  beforeEach(async () => {
+    dir = await mkdtemp(join(tmpdir(), 'treenity-doc-codec-'));
+    store = await createFsTree(dir);
+  });
+
+  afterEach(async () => {
+    if (dir) await rm(dir, { recursive: true, force: true });
+  });
+
+  it('decode: .md file → doc.page node', async () => {
+    await writeFile(join(dir, 'readme.md'), '# Hello World\n\nSome content here.\n');
+
+    const node = await store.get('/readme');
+    assert.equal(node?.$type, 'doc.page');
+    assert.equal((node as any).title, 'Hello World');
+
+    const content = JSON.parse((node as any).content);
+    assert.equal(content.type, 'doc');
+    assert.ok(content.content.length > 0);
+  });
+
+  it('decode: .md without H1 — empty title', async () => {
+    await writeFile(join(dir, 'notes.md'), 'Just a paragraph.\n\n## Second heading\n');
+
+    const node = await store.get('/notes');
+    assert.equal(node?.$type, 'doc.page');
+    assert.equal((node as any).title, '');
+
+    const content = JSON.parse((node as any).content);
+    assert.equal(content.content[0].type, 'paragraph');
+    assert.equal(content.content[1].type, 'heading');
+  });
+
+  it('encode: doc.page node → .md file', async () => {
+    const tiptapDoc = {
+      type: 'doc',
+      content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Hello from Tiptap' }] }],
+    };
+
+    await store.set({
+      $path: '/output',
+      $type: 'doc.page',
+      title: 'My Doc',
+      content: JSON.stringify(tiptapDoc),
+    } as any);
+
+    const raw = await readFile(join(dir, 'output.md'), 'utf-8');
+    assert.ok(raw.startsWith('# My Doc'));
+    assert.ok(raw.includes('Hello from Tiptap'));
+  });
+
+  it('encode: no title — no H1 prefix', async () => {
+    const tiptapDoc = {
+      type: 'doc',
+      content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Just text' }] }],
+    };
+
+    await store.set({
+      $path: '/bare',
+      $type: 'doc.page',
+      title: '',
+      content: JSON.stringify(tiptapDoc),
+    } as any);
+
+    const raw = await readFile(join(dir, 'bare.md'), 'utf-8');
+    assert.ok(!raw.startsWith('#'));
+    assert.ok(raw.includes('Just text'));
+  });
+
+  it('roundtrip: .md → node → .md preserves content', async () => {
+    const original = '# Project Notes\n\nThis is **bold** and *italic*.\n\n- item one\n- item two\n\n```ts\nconst x = 1;\n```\n';
+    await writeFile(join(dir, 'notes.md'), original);
+
+    // Decode
+    const node = await store.get('/notes');
+    assert.equal(node?.$type, 'doc.page');
+    assert.equal((node as any).title, 'Project Notes');
+
+    // Encode back
+    await store.set(node!);
+    const result = await readFile(join(dir, 'notes.md'), 'utf-8');
+
+    // Verify key elements survived roundtrip
+    assert.ok(result.includes('# Project Notes'));
+    assert.ok(result.includes('**bold**'));
+    assert.ok(result.includes('*italic*'));
+    assert.ok(result.includes('- item one'));
+    assert.ok(result.includes('```ts'));
+    assert.ok(result.includes('const x = 1;'));
+  });
+
+  it('getChildren lists .md files as doc.page', async () => {
+    await writeFile(join(dir, 'a.md'), '# Alpha\n\nContent A\n');
+    await writeFile(join(dir, 'b.md'), '# Beta\n\nContent B\n');
+    await writeFile(join(dir, 'c.txt'), 'plain text');
+
+    const { items } = await store.getChildren('/');
+    const types = Object.fromEntries(items.map(n => [n.$path, n.$type]));
+
+    assert.equal(types['/a'], 'doc.page');
+    assert.equal(types['/b'], 'doc.page');
+    assert.equal(types['/c'], 'text/plain');
+  });
+});

package/doc/fs-codec.ts

@@ -0,0 +1,50 @@
+// Markdown file ↔ doc.page node codec for FS store
+// Decode: .md file → doc.page node (title from first H1, content as Tiptap JSON)
+// Encode: doc.page node → .md file (Tiptap JSON → markdown)
+// Paths are extensionless — encode appends .md
+
+import type { NodeData } from '@treenity/core';
+import { register } from '@treenity/core';
+import { readFile, writeFile } from 'node:fs/promises';
+import { mdToTiptap, type TiptapNode, tiptapToMd } from './markdown';
+
+register('text/markdown', 'decode', async (filePath: string, nodePath: string) => {
+  const raw = await readFile(filePath, 'utf-8');
+  const tiptapDoc = mdToTiptap(raw);
+
+  // Extract title from first heading if present
+  let title = '';
+  const firstBlock = tiptapDoc.content?.[0];
+  if (firstBlock?.type === 'heading' && firstBlock.attrs?.level === 1) {
+    title = firstBlock.content?.map((n) => n.text ?? '').join('') ?? '';
+    // Remove H1 from content since it's in the title field
+    tiptapDoc.content = tiptapDoc.content!.slice(1);
+  }
+
+  return {
+    $path: nodePath,
+    $type: 'doc.page',
+    title,
+    content: JSON.stringify(tiptapDoc),
+  } as NodeData;
+});
+
+register('doc.page', 'encode', async (node: NodeData, filePath: string) => {
+  const { title, content } = node as any;
+  let md = '';
+
+  if (title) md += `# ${title}\n\n`;
+
+  if (content) {
+    try {
+      const doc = JSON.parse(content) as TiptapNode;
+      md += tiptapToMd(doc);
+    } catch {
+      md += content;
+    }
+  }
+
+  // Extensionless path → append .md
+  const actualPath = filePath.endsWith('.md') ? filePath : filePath + '.md';
+  await writeFile(actualPath, md.trimEnd() + '\n', 'utf-8');
+});

package/doc/markdown.test.ts

@@ -0,0 +1,152 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { mdToTiptap, type TiptapNode, tiptapToMd } from './markdown';
+
+describe('mdToTiptap', () => {
+  it('parses heading', () => {
+    const doc = mdToTiptap('# Hello');
+    assert.equal(doc.type, 'doc');
+    assert.equal(doc.content?.[0].type, 'heading');
+    assert.equal(doc.content?.[0].attrs?.level, 1);
+    assert.equal(doc.content?.[0].content?.[0].text, 'Hello');
+  });
+
+  it('parses multiple heading levels', () => {
+    const doc = mdToTiptap('## Second\n### Third');
+    assert.equal(doc.content?.[0].attrs?.level, 2);
+    assert.equal(doc.content?.[1].attrs?.level, 3);
+  });
+
+  it('parses paragraph', () => {
+    const doc = mdToTiptap('Just some text');
+    assert.equal(doc.content?.[0].type, 'paragraph');
+    assert.equal(doc.content?.[0].content?.[0].text, 'Just some text');
+  });
+
+  it('parses bold and italic', () => {
+    const doc = mdToTiptap('This is **bold** and *italic*');
+    const nodes = doc.content?.[0].content ?? [];
+    assert.ok(nodes.some((n) => n.text === 'bold' && n.marks?.[0]?.type === 'bold'));
+    assert.ok(nodes.some((n) => n.text === 'italic' && n.marks?.[0]?.type === 'italic'));
+  });
+
+  it('parses inline code', () => {
+    const doc = mdToTiptap('Use `foo()` here');
+    const nodes = doc.content?.[0].content ?? [];
+    assert.ok(nodes.some((n) => n.text === 'foo()' && n.marks?.[0]?.type === 'code'));
+  });
+
+  it('parses bullet list', () => {
+    const doc = mdToTiptap('- one\n- two\n- three');
+    assert.equal(doc.content?.[0].type, 'bulletList');
+    assert.equal(doc.content?.[0].content?.length, 3);
+  });
+
+  it('parses ordered list', () => {
+    const doc = mdToTiptap('1. first\n2. second');
+    assert.equal(doc.content?.[0].type, 'orderedList');
+    assert.equal(doc.content?.[0].content?.length, 2);
+  });
+
+  it('parses code block', () => {
+    const doc = mdToTiptap('```ts\nconst x = 1;\n```');
+    assert.equal(doc.content?.[0].type, 'codeBlock');
+    assert.equal(doc.content?.[0].attrs?.language, 'ts');
+    assert.equal(doc.content?.[0].content?.[0].text, 'const x = 1;');
+  });
+
+  it('parses blockquote', () => {
+    const doc = mdToTiptap('> quoted text');
+    assert.equal(doc.content?.[0].type, 'blockquote');
+  });
+
+  it('parses horizontal rule', () => {
+    const doc = mdToTiptap('---');
+    assert.equal(doc.content?.[0].type, 'horizontalRule');
+  });
+
+  it('handles empty input', () => {
+    const doc = mdToTiptap('');
+    assert.equal(doc.type, 'doc');
+    assert.ok(doc.content?.length);
+  });
+
+  it('handles mixed content', () => {
+    const md = '# Title\n\nSome text\n\n- item 1\n- item 2\n\n```\ncode\n```';
+    const doc = mdToTiptap(md);
+    const types = doc.content?.map((c) => c.type);
+    assert.deepEqual(types, ['heading', 'paragraph', 'bulletList', 'codeBlock']);
+  });
+});
+
+describe('tiptapToMd', () => {
+  it('converts heading', () => {
+    const doc: TiptapNode = {
+      type: 'doc',
+      content: [{ type: 'heading', attrs: { level: 2 }, content: [{ type: 'text', text: 'Title' }] }],
+    };
+    assert.equal(tiptapToMd(doc), '## Title');
+  });
+
+  it('converts paragraph with marks', () => {
+    const doc: TiptapNode = {
+      type: 'doc',
+      content: [{
+        type: 'paragraph',
+        content: [
+          { type: 'text', text: 'Hello ' },
+          { type: 'text', text: 'world', marks: [{ type: 'bold' }] },
+        ],
+      }],
+    };
+    assert.equal(tiptapToMd(doc), 'Hello **world**');
+  });
+
+  it('converts bullet list', () => {
+    const doc: TiptapNode = {
+      type: 'doc',
+      content: [{
+        type: 'bulletList',
+        content: [
+          { type: 'listItem', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'a' }] }] },
+          { type: 'listItem', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'b' }] }] },
+        ],
+      }],
+    };
+    assert.equal(tiptapToMd(doc), '- a\n- b');
+  });
+
+  it('converts code block', () => {
+    const doc: TiptapNode = {
+      type: 'doc',
+      content: [{ type: 'codeBlock', attrs: { language: 'js' }, content: [{ type: 'text', text: 'x = 1' }] }],
+    };
+    assert.equal(tiptapToMd(doc), '```js\nx = 1\n```');
+  });
+
+  it('converts horizontal rule', () => {
+    const doc: TiptapNode = { type: 'doc', content: [{ type: 'horizontalRule' }] };
+    assert.equal(tiptapToMd(doc), '---');
+  });
+});
+
+describe('roundtrip md → tiptap → md', () => {
+  it('preserves basic structure', () => {
+    const original = '# Hello\n\nSome paragraph\n\n- one\n- two';
+    const tiptap = mdToTiptap(original);
+    const result = tiptapToMd(tiptap);
+    // Should contain the same elements (whitespace may differ)
+    assert.ok(result.includes('# Hello'));
+    assert.ok(result.includes('Some paragraph'));
+    assert.ok(result.includes('- one'));
+    assert.ok(result.includes('- two'));
+  });
+
+  it('preserves code block', () => {
+    const original = '```ts\nconst x = 1;\n```';
+    const tiptap = mdToTiptap(original);
+    const result = tiptapToMd(tiptap);
+    assert.ok(result.includes('```ts'));
+    assert.ok(result.includes('const x = 1;'));
+  });
+});