egregore-artifacts 0.1.0

package/lib/parsers/quest.js

@@ -0,0 +1,134 @@
+// Parse quest markdown (YAML frontmatter + body) into structured data
+import fs from 'node:fs';
+
+export function parseQuest(input) {
+  let content;
+  if (typeof input === 'string' && (input.endsWith('.md') || input.includes('/'))) {
+    if (!fs.existsSync(input)) throw new Error(`File not found: ${input}`);
+    content = fs.readFileSync(input, 'utf-8');
+  } else if (typeof input === 'string') {
+    content = input;
+  } else {
+    throw new Error('parseQuest expects a file path or markdown string');
+  }
+
+  const frontmatter = parseFrontmatter(content);
+  const body = content.replace(/^---\n[\s\S]*?\n---\n*/, '');
+
+  return {
+    ...frontmatter,
+    question: extractSection(body, 'The Question'),
+    context: extractSection(body, 'Context') || extractSection(body, 'Why This Matters'),
+    vision: extractBullets(body, 'Vision'),
+    threads: extractThreads(body),
+    artifacts: extractArtifactLines(body),
+    contributors: extractContributors(body, frontmatter),
+    entryPoints: extractBullets(body, 'Entry Points'),
+    technicalNotes: extractBullets(body, 'Technical Notes'),
+  };
+}
+
+function parseFrontmatter(content) {
+  const match = content.match(/^---\n([\s\S]*?)\n---/);
+  if (!match) return {};
+
+  const result = {};
+  for (const line of match[1].split('\n')) {
+    const kv = line.match(/^(\w+):\s*(.+)$/);
+    if (!kv) continue;
+    const [, key, raw] = kv;
+    let value = raw.trim();
+
+    // Parse arrays: [a, b, c]
+    if (value.startsWith('[') && value.endsWith(']')) {
+      value = value.slice(1, -1).split(',').map(s => s.trim()).filter(Boolean);
+    }
+    // Parse null
+    else if (value === 'null') value = null;
+    // Parse numbers
+    else if (/^\d+$/.test(value)) value = parseInt(value, 10);
+
+    result[key] = value;
+  }
+  return result;
+}
+
+function extractSection(body, heading) {
+  const regex = new RegExp(`## ${escapeRegex(heading)}\\s*\\n([\\s\\S]*?)(?=\\n## |$)`);
+  const match = body.match(regex);
+  if (!match) return null;
+
+  // Return text content, stripping bullet lists and code blocks
+  const text = match[1].trim();
+  const lines = text.split('\n')
+    .filter(l => !l.startsWith('- [') && !l.startsWith('→') && !l.startsWith('```'))
+    .filter(l => !l.match(/^\|.*\|$/)) // skip tables
+    .join('\n')
+    .trim();
+
+  return lines || null;
+}
+
+function extractBullets(body, heading) {
+  const regex = new RegExp(`## ${escapeRegex(heading)}\\s*\\n([\\s\\S]*?)(?=\\n## |$)`);
+  const match = body.match(regex);
+  if (!match) return [];
+
+  return match[1].split('\n')
+    .filter(l => l.match(/^- /))
+    .map(l => l.replace(/^- /, '').trim())
+    .filter(Boolean);
+}
+
+function extractThreads(body) {
+  const regex = /## Threads\s*\n([\s\S]*?)(?=\n## |$)/;
+  const match = body.match(regex);
+  if (!match) return [];
+
+  return match[1].split('\n')
+    .filter(l => l.match(/^- \[[ x]\]/))
+    .map(l => {
+      const done = l.includes('[x]');
+      const text = l.replace(/^- \[[ x]\]\s*/, '').trim();
+      return { text, done };
+    });
+}
+
+function extractArtifactLines(body) {
+  const regex = /## Artifacts\s*\n([\s\S]*?)(?=\n## |$)/;
+  const match = body.match(regex);
+  if (!match) return [];
+
+  return match[1].split('\n')
+    .filter(l => l.startsWith('→'))
+    .map(l => {
+      // Format: → 2026-04-03 [type] Title (author)
+      const m = l.match(/^→\s+(\S+)\s+\[(\w+)\]\s+(.+?)(?:\s+\((\w+)\))?$/);
+      if (!m) return { date: '', type: '', title: l.replace(/^→\s*/, ''), author: null };
+      return { date: m[1], type: m[2], title: m[3].trim(), author: m[4] || null };
+    });
+}
+
+function extractContributors(body, frontmatter) {
+  // From contributions table
+  const regex = /## Contributions\s*\n([\s\S]*?)(?=\n## |$)/;
+  const match = body.match(regex);
+  const names = new Set();
+
+  if (frontmatter.started_by) names.add(frontmatter.started_by);
+
+  if (match) {
+    for (const line of match[1].split('\n')) {
+      const row = line.match(/^\|\s*\S+\s*\|\s*(\S+)\s*\|/);
+      if (row && row[1] !== 'Who' && row[1] !== '—') {
+        names.add(row[1]);
+      }
+    }
+  }
+
+  return [...names].map(name => ({ name, avatar: null, role: null }));
+}
+
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}

package/lib/registry.js

@@ -0,0 +1,157 @@
+// Egregore component registry — maps catalog types to branded React components
+import React from 'react';
+import { defineRegistry } from '@json-render/react';
+import { catalog } from './catalog.js';
+import { colors, fonts } from './tokens.js';
+import { renderMarkdown } from './markdown.js';
+
+const h = React.createElement;
+
+export const { registry, handlers, executeAction } = defineRegistry(catalog, {
+  components: {
+    Page: ({ props, children }) => {
+      const statusClass = `eg-badge eg-badge-${props.status || 'active'}`;
+      const priorityLabels = { 1: 'low', 2: 'medium', 3: 'high' };
+
+      return h('div', null,
+        h('header', { className: 'eg-header' },
+          h('div', { className: 'eg-header-top' },
+            h('span', { className: 'eg-sigil' }, '✦'),
+            h('span', { className: 'eg-org-label' }, `egregore · ${props.type}`),
+          ),
+          h('h1', { className: 'eg-title' }, props.title),
+          h('div', { className: 'eg-meta-row' },
+            props.status && h('span', { className: statusClass }, props.status),
+            props.priority > 0 && h('span', { className: 'eg-badge eg-badge-priority' },
+              `↑ ${priorityLabels[props.priority] || 'p' + props.priority}`
+            ),
+            ...(props.projects || []).map((p, i) =>
+              h('span', { key: `p-${i}`, className: 'eg-badge eg-badge-outline' }, p)
+            ),
+            props.author && h('span', null, `by ${props.author}`),
+            props.date && h('span', null, props.date),
+          ),
+        ),
+        children,
+        h('footer', { className: 'eg-footer' },
+          h('div', { className: 'eg-footer-brand' },
+            h('span', { className: 'eg-footer-sigil' }, '✦'),
+            h('span', null, 'egregore'),
+          ),
+          h('div', null, new Date().toLocaleDateString('en-US', {
+            year: 'numeric', month: 'short', day: 'numeric',
+            hour: '2-digit', minute: '2-digit',
+          })),
+        ),
+      );
+    },
+
+    Section: ({ props, children }) =>
+      h('div', { className: 'eg-card' },
+        h('div', { className: 'eg-card-title' }, props.label),
+        children,
+      ),
+
+    Prose: ({ props }) =>
+      h('div', { className: props.variant === 'lead' ? 'eg-lead' : 'eg-body' },
+        renderMarkdown(props.text),
+      ),
+
+    MetricGrid: ({ props }) =>
+      h('div', {
+        style: {
+          display: 'grid',
+          gridTemplateColumns: `repeat(${Math.min(props.metrics.length, 4)}, 1fr)`,
+          gap: '12px',
+          marginBottom: '1.5rem',
+        },
+      },
+        ...props.metrics.map((m, i) =>
+          h('div', {
+            key: i,
+            style: {
+              background: 'white', border: `1px solid ${colors.border}`,
+              borderRadius: '12px', padding: '1.25rem', textAlign: 'center',
+            },
+          },
+            h('div', { style: { fontSize: '28px', fontFamily: fonts.serif, fontWeight: 400, color: colors.black, lineHeight: 1.2 } }, m.value),
+            h('div', { style: { fontSize: '12px', fontFamily: fonts.mono, color: colors.muted, marginTop: '4px', textTransform: 'uppercase', letterSpacing: '0.04em' } }, m.label),
+          )
+        ),
+      ),
+
+    ThreadList: ({ props }) =>
+      h('ul', { className: 'eg-thread-list' },
+        ...props.threads.map((t, i) =>
+          h('li', { key: i, className: 'eg-thread-item' },
+            h('span', { className: t.done ? 'eg-checkbox eg-checkbox-done' : 'eg-checkbox' }),
+            h('span', { className: t.done ? 'eg-thread-done' : undefined }, t.text),
+          )
+        ),
+      ),
+
+    ArtifactList: ({ props }) =>
+      h('div', null,
+        ...props.artifacts.map((a, i) =>
+          h('div', { key: i, className: 'eg-artifact-item' },
+            h('span', { className: 'eg-artifact-date' }, a.date),
+            h('span', { className: 'eg-artifact-type' }, a.type),
+            h('span', { className: 'eg-artifact-title' }, a.title),
+            a.author && h('span', { style: { color: colors.muted, fontSize: '13px', fontFamily: fonts.mono } }, `(${a.author})`),
+          )
+        ),
+      ),
+
+    PersonRow: ({ props }) =>
+      h('div', { className: 'eg-contributors' },
+        ...props.people.map((p, i) =>
+          h('div', { key: i, className: 'eg-contributor' },
+            h('span', { className: 'eg-contributor-avatar' }, (p.name || '?')[0].toUpperCase()),
+            h('span', null, p.name),
+            p.role && h('span', { style: { color: colors.muted, fontSize: '12px' } }, p.role),
+          )
+        ),
+      ),
+
+    BulletList: ({ props }) =>
+      h('ul', { className: 'eg-bullet-list' },
+        ...props.items.map((item, i) => h('li', { key: i }, item)),
+      ),
+
+    NumberedSteps: ({ props }) =>
+      h('ol', { style: { listStyle: 'none', padding: 0 } },
+        ...props.steps.map((step, i) =>
+          h('li', { key: i, style: { display: 'flex', gap: '12px', padding: '8px 0', borderBottom: i < props.steps.length - 1 ? '1px solid rgba(224, 216, 204, 0.5)' : 'none', fontSize: '15px', lineHeight: 1.5 } },
+            h('span', { style: { flexShrink: 0, width: '24px', height: '24px', borderRadius: '50%', background: colors.terracotta, color: colors.cream, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', fontFamily: fonts.mono, fontWeight: 600 } }, String(i + 1)),
+            h('span', null, step),
+          )
+        ),
+      ),
+
+    SessionList: ({ props }) =>
+      h('div', null,
+        ...props.sessions.map((s, i) =>
+          h('div', { key: i, style: { display: 'flex', alignItems: 'baseline', gap: '12px', padding: '6px 0', borderBottom: '1px solid rgba(224, 216, 204, 0.5)', fontSize: '14px' } },
+            h('span', { style: { fontFamily: fonts.mono, fontSize: '12px', color: colors.muted, minWidth: '72px', flexShrink: 0 } }, s.date),
+            s.by && h('span', { style: { fontFamily: fonts.mono, fontSize: '11px', color: colors.blueMuted, background: 'rgba(123, 157, 183, 0.1)', padding: '1px 6px', borderRadius: '3px', flexShrink: 0 } }, s.by),
+            h('span', { style: { color: colors.black, flex: 1 } }, s.topic),
+            s.handedTo && h('span', { style: { fontFamily: fonts.mono, fontSize: '11px', color: colors.terracotta } }, `→ ${s.handedTo}`),
+          )
+        ),
+      ),
+
+    StatusBadge: ({ props }) =>
+      h('span', { className: `eg-badge eg-badge-${props.status}` }, props.status),
+
+    Callout: ({ props }) =>
+      h('div', {
+        style: {
+          background: 'rgba(212, 135, 90, 0.06)', border: '1px solid rgba(212, 135, 90, 0.15)',
+          borderRadius: '12px', padding: '1.25rem 1.5rem', marginBottom: '1.5rem',
+          fontSize: '15px', lineHeight: 1.6, color: colors.dark,
+        },
+      }, renderMarkdown(props.text)),
+
+    Divider: () => h('div', { className: 'eg-section-divider' }),
+  },
+});

package/lib/render.js

@@ -0,0 +1,37 @@
+// React SSR: component tree → HTML string wrapped in shell
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { Renderer, JSONUIProvider, createStateStore } from '@json-render/react';
+import { registry } from './registry.js';
+import { htmlShell } from './shell.js';
+
+const h = React.createElement;
+
+// Render a React element tree (from direct templates)
+export function renderToHtml(element, options = {}) {
+  const bodyHtml = renderToStaticMarkup(element);
+  return htmlShell(bodyHtml, {
+    title: options.title || 'Egregore Artifact',
+    type: options.type || 'artifact',
+  });
+}
+
+// Render a json-render flat spec (from Claude-generated specs)
+export function renderSpecToHtml(spec, options = {}) {
+  const store = createStateStore({});
+
+  const element = h(JSONUIProvider, {
+    spec,
+    registry,
+    onAction: () => {},
+    store,
+  },
+    h(Renderer, { spec, registry })
+  );
+
+  const bodyHtml = renderToStaticMarkup(element);
+  return htmlShell(bodyHtml, {
+    title: options.title || 'Egregore Artifact',
+    type: options.type || 'artifact',
+  });
+}

package/lib/shell.js

@@ -0,0 +1,341 @@
+// Self-contained HTML document wrapper with Egregore branding
+import { colors, fonts } from './tokens.js';
+
+function escapeHtml(str) {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+export function htmlShell(bodyHtml, { title = 'Egregore Artifact', type = 'artifact' } = {}) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>${escapeHtml(title)} — Egregore</title>
+
+<!-- Inter + IBM Plex Mono from Google Fonts -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+
+<style>
+  :root {
+    --cream: ${colors.cream};
+    --black: ${colors.black};
+    --terracotta: ${colors.terracotta};
+    --blue-muted: ${colors.blueMuted};
+    --dark: ${colors.dark};
+    --border: ${colors.border};
+    --muted: ${colors.muted};
+    --warm-gray: ${colors.warmGray};
+    --terminal-bg: ${colors.terminalBg};
+    --font-serif: ${fonts.serif};
+    --font-sans: ${fonts.sans};
+    --font-mono: ${fonts.mono};
+  }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    background: var(--cream);
+    color: var(--black);
+    font-family: var(--font-sans);
+    font-size: 16px;
+    line-height: 1.65;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  ::selection { background: var(--terracotta); color: var(--cream); }
+
+  /* Layout */
+  .eg-artifact {
+    max-width: 780px;
+    margin: 0 auto;
+    padding: 3.5rem 2rem 4rem;
+  }
+
+  /* Header */
+  .eg-header {
+    border-bottom: 2px solid var(--border);
+    padding-bottom: 2rem;
+    margin-bottom: 2.5rem;
+  }
+  .eg-header-top {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 1.25rem;
+  }
+  .eg-sigil {
+    font-size: 20px;
+    color: var(--terracotta);
+    line-height: 1;
+  }
+  .eg-org-label {
+    font-family: var(--font-mono);
+    font-size: 13px;
+    color: var(--muted);
+    letter-spacing: 0.02em;
+  }
+  .eg-title {
+    font-family: var(--font-serif);
+    font-size: 36px;
+    font-weight: 400;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+    color: var(--black);
+    margin-bottom: 0.75rem;
+  }
+  .eg-meta-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 16px;
+    font-family: var(--font-mono);
+    font-size: 13px;
+    color: var(--muted);
+  }
+  .eg-meta-row span { white-space: nowrap; }
+
+  /* Badges */
+  .eg-badge {
+    display: inline-block;
+    padding: 3px 10px;
+    border-radius: 50px;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+  }
+  .eg-badge-active { background: var(--terracotta); color: var(--cream); }
+  .eg-badge-paused { background: var(--blue-muted); color: var(--cream); }
+  .eg-badge-completed { background: var(--black); color: var(--cream); }
+  .eg-badge-blocked { background: var(--dark); color: var(--cream); }
+  .eg-badge-outline {
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--muted);
+  }
+  .eg-badge-priority {
+    background: rgba(212, 135, 90, 0.12);
+    color: var(--terracotta);
+  }
+
+  /* Sections */
+  .eg-section {
+    margin-bottom: 2.5rem;
+  }
+  .eg-section-title {
+    font-family: var(--font-serif);
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 1.3;
+    letter-spacing: -0.02em;
+    color: var(--black);
+    margin-bottom: 1rem;
+  }
+  .eg-section-divider {
+    height: 1px;
+    background: var(--border);
+    margin: 2.5rem 0;
+  }
+
+  /* Card */
+  .eg-card {
+    background: white;
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 1.5rem;
+    margin-bottom: 1.25rem;
+  }
+  .eg-card-title {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--muted);
+    margin-bottom: 0.75rem;
+  }
+
+  /* Text */
+  .eg-lead {
+    font-size: 18px;
+    line-height: 1.6;
+    color: var(--black);
+  }
+  .eg-body {
+    font-size: 16px;
+    line-height: 1.65;
+    color: var(--dark);
+  }
+  .eg-body p { margin-bottom: 0.75rem; }
+  .eg-body p:last-child { margin-bottom: 0; }
+
+  /* Threads (checklist) */
+  .eg-thread-list {
+    list-style: none;
+    padding: 0;
+  }
+  .eg-thread-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 8px 0;
+    border-bottom: 1px solid rgba(224, 216, 204, 0.5);
+    font-size: 15px;
+    line-height: 1.5;
+  }
+  .eg-thread-item:last-child { border-bottom: none; }
+  .eg-checkbox {
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+    border: 2px solid var(--border);
+    border-radius: 4px;
+    margin-top: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .eg-checkbox-done {
+    background: var(--terracotta);
+    border-color: var(--terracotta);
+    color: white;
+  }
+  .eg-checkbox-done::after { content: "✓"; font-size: 12px; font-weight: 700; }
+  .eg-thread-done { color: var(--muted); text-decoration: line-through; }
+
+  /* Artifact list */
+  .eg-artifact-item {
+    display: flex;
+    gap: 12px;
+    padding: 8px 0;
+    border-bottom: 1px solid rgba(224, 216, 204, 0.5);
+    font-size: 14px;
+  }
+  .eg-artifact-item:last-child { border-bottom: none; }
+  .eg-artifact-date {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--muted);
+    white-space: nowrap;
+    min-width: 80px;
+    padding-top: 1px;
+  }
+  .eg-artifact-type {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--blue-muted);
+    background: rgba(123, 157, 183, 0.1);
+    padding: 1px 6px;
+    border-radius: 3px;
+    white-space: nowrap;
+  }
+  .eg-artifact-title { color: var(--black); }
+
+  /* Contributors */
+  .eg-contributors {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+  .eg-contributor {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 12px;
+    background: rgba(59, 45, 33, 0.04);
+    border-radius: 50px;
+    font-size: 14px;
+  }
+  .eg-contributor-avatar {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: var(--terracotta);
+    color: var(--cream);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  /* Bullet list (vision, entry points) */
+  .eg-bullet-list {
+    list-style: none;
+    padding: 0;
+  }
+  .eg-bullet-list li {
+    position: relative;
+    padding-left: 1.25rem;
+    margin-bottom: 0.5rem;
+    font-size: 15px;
+    line-height: 1.55;
+    color: var(--dark);
+  }
+  .eg-bullet-list li::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 9px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--terracotta);
+  }
+
+  /* Code blocks */
+  .eg-code {
+    font-family: var(--font-mono);
+    font-size: 13px;
+    background: rgba(59, 45, 33, 0.06);
+    padding: 2px 6px;
+    border-radius: 4px;
+  }
+
+  /* Footer */
+  .eg-footer {
+    border-top: 1px solid var(--border);
+    padding-top: 1.5rem;
+    margin-top: 3rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--muted);
+  }
+  .eg-footer-brand {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .eg-footer-sigil { color: var(--terracotta); }
+
+  /* Print */
+  @media print {
+    body { background: white; }
+    .eg-artifact { padding: 1rem; max-width: none; }
+    .eg-card { break-inside: avoid; }
+  }
+
+  /* Mobile */
+  @media (max-width: 640px) {
+    .eg-artifact { padding: 2rem 1.25rem 3rem; }
+    .eg-title { font-size: 28px; }
+    .eg-section-title { font-size: 20px; }
+    .eg-meta-row { gap: 10px; }
+  }
+</style>
+</head>
+<body>
+<div class="eg-artifact" data-type="${escapeHtml(type)}">
+${bodyHtml}
+</div>
+</body>
+</html>`;
+}