egregore-artifacts 0.2.0 → 0.4.0

package/lib/templates/handoff.js

@@ -5,7 +5,7 @@ import {
   TextBlock, ArtifactFooter,
 } from '../components.js';
 import { renderMarkdownLite } from '../markdown.js';
-import { colors, fonts } from '../tokens.js';
+import { fonts } from '../tokens.js';
 
 const h = React.createElement;
 
@@ -38,7 +38,7 @@ export function handoffTemplate(handoff) {
           marginBottom: '1.5rem',
           fontFamily: fonts.mono,
           fontSize: '13px',
-          color: colors.muted,
+          color: 'var(--muted)',
         },
       },
         h('span', null, 'To:'),
@@ -47,9 +47,9 @@ export function handoffTemplate(handoff) {
             key: i,
             style: {
               padding: '2px 10px',
-              background: 'rgba(123, 157, 183, 0.1)',
+              background: 'var(--blue-chip)',
               borderRadius: '50px',
-              color: colors.blueMuted,
+              color: 'var(--blue-muted)',
               fontSize: '12px',
               fontWeight: 500,
             },
@@ -71,14 +71,14 @@ export function handoffTemplate(handoff) {
           marginBottom: '2rem',
           fontFamily: fonts.mono,
           fontSize: '12px',
-          color: colors.muted,
+          color: 'var(--muted)',
         },
       },
         handoff.source && h('span', null, `Source: ${handoff.source}`),
         handoff.branch && h('span', {
           style: {
             padding: '2px 8px',
-            background: 'rgba(59, 45, 33, 0.06)',
+            background: 'var(--subtle-fill)',
             borderRadius: '4px',
             fontFamily: fonts.mono,
           },
@@ -143,7 +143,7 @@ export function handoffTemplate(handoff) {
                 display: 'flex',
                 gap: '12px',
                 padding: '8px 0',
-                borderBottom: i < handoff.nextSteps.length - 1 ? '1px solid rgba(224, 216, 204, 0.5)' : 'none',
+                borderBottom: i < handoff.nextSteps.length - 1 ? '1px solid var(--hairline)' : 'none',
                 fontSize: '15px',
                 lineHeight: 1.5,
               },
@@ -154,8 +154,8 @@ export function handoffTemplate(handoff) {
                   width: '24px',
                   height: '24px',
                   borderRadius: '50%',
-                  background: colors.terracotta,
-                  color: colors.cream,
+                  background: 'var(--terracotta)',
+                  color: 'var(--cream)',
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',

package/lib/templates/network.js

@@ -0,0 +1,189 @@
+// Network/people data → React element tree with role filter tabs
+import React from 'react';
+import { ArtifactHeader, SectionCard, ArtifactFooter } from '../components.js';
+import { fonts } from '../tokens.js';
+
+const h = React.createElement;
+
+// Semantic role colors — hex here is fine because these are node labels,
+// not theme surfaces. They ride on top of whichever background is active
+// and are readable against both light and dark due to white text.
+const ROLE_COLORS = {
+  'Alpha Tester': '#D4875A',
+  'Design Partner': '#2A7B5B',
+  'Champion': '#8B5CF6',
+  'Comms Amplifier': '#E08B4A',
+  'Code Contributor': '#3B82F6',
+  'Feedback': '#7B9DB7',
+  'Logo Wall': '#16100B',
+  'Investor/Partner': '#B45309',
+};
+
+function RoleBadge({ role }) {
+  const bg = ROLE_COLORS[role] || 'var(--muted)';
+  return h('span', {
+    style: {
+      fontFamily: fonts.mono, fontSize: '10px', padding: '2px 8px',
+      borderRadius: '4px', background: bg, color: 'white',
+      whiteSpace: 'nowrap', fontWeight: 500,
+    },
+  }, role);
+}
+
+function PersonRow({ person }) {
+  return h('div', {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: '180px 220px 1fr',
+      gap: '16px',
+      alignItems: 'start',
+      padding: '14px 16px',
+      borderBottom: '1px solid var(--border)',
+    },
+  },
+    // Name + org column
+    h('div', { style: { overflow: 'hidden' } },
+      h('div', { style: { fontSize: '14px', fontWeight: 600, color: 'var(--black)' } }, person.name),
+      person.organization && h('div', {
+        style: { fontFamily: fonts.mono, fontSize: '11px', color: 'var(--muted)', marginTop: '2px' },
+      }, person.organization),
+    ),
+    // Roles column
+    h('div', {
+      style: { display: 'flex', gap: '4px', flexWrap: 'wrap', paddingTop: '2px' },
+    },
+      ...(person.roles || []).map((role, i) =>
+        h(RoleBadge, { key: i, role })
+      ),
+    ),
+    // Notes column
+    h('div', {
+      style: { fontSize: '13px', color: 'var(--dark)', lineHeight: 1.5 },
+    }, person.notes),
+  );
+}
+
+function RoleTabs({ allRoles, summary }) {
+  return h('div', {
+    style: {
+      display: 'flex', gap: '4px', marginBottom: '1.5rem', flexWrap: 'wrap',
+      borderBottom: '2px solid var(--border)', paddingBottom: '0',
+    },
+  },
+    h('button', {
+      className: 'eg-network-tab',
+      'data-role': 'all',
+      style: {
+        fontFamily: fonts.mono, fontSize: '12px', padding: '6px 12px',
+        background: 'none', border: 'none', borderBottom: '2px solid transparent',
+        marginBottom: '-2px', cursor: 'pointer', color: 'var(--muted)',
+      },
+    }, `All (${summary.totalPeople})`),
+    ...allRoles.map(role =>
+      h('button', {
+        key: role,
+        className: 'eg-network-tab',
+        'data-role': role,
+        style: {
+          fontFamily: fonts.mono, fontSize: '12px', padding: '6px 12px',
+          background: 'none', border: 'none', borderBottom: '2px solid transparent',
+          marginBottom: '-2px', cursor: 'pointer', color: 'var(--muted)',
+        },
+      }, `${role} (${summary.byRole[role]})`)
+    ),
+  );
+}
+
+export function networkTemplate(data) {
+  const sections = [];
+
+  sections.push(
+    h(ArtifactHeader, {
+      key: 'header',
+      title: data.title,
+      type: 'network',
+      date: data.date,
+      author: data.updatedBy,
+      status: 'active',
+      priority: 0,
+      projects: [],
+    })
+  );
+
+  sections.push(h(RoleTabs, { key: 'tabs', allRoles: data.allRoles, summary: data.summary }));
+
+  // Column headers
+  sections.push(
+    h('div', {
+      key: 'col-headers',
+      style: {
+        display: 'grid',
+        gridTemplateColumns: '180px 220px 1fr',
+        gap: '16px',
+        padding: '8px 16px',
+        borderBottom: '2px solid var(--border)',
+        fontFamily: fonts.mono, fontSize: '10px', textTransform: 'uppercase',
+        letterSpacing: '0.06em', color: 'var(--muted)', fontWeight: 600,
+      },
+    },
+      h('span', null, 'Name'),
+      h('span', null, 'Role'),
+      h('span', null, 'Notes'),
+    )
+  );
+
+  // All people rows — each tagged with data-roles for filtering
+  sections.push(
+    h('div', { key: 'people', id: 'eg-network-list' },
+      ...data.people.map((person, i) =>
+        h('div', {
+          key: i,
+          className: 'eg-network-person',
+          'data-roles': (person.roles || []).join(','),
+        },
+          h(PersonRow, { person })
+        )
+      ),
+    )
+  );
+
+  // Tab switching script
+  sections.push(
+    h('script', {
+      key: 'tabs-script',
+      dangerouslySetInnerHTML: {
+        __html: `
+(function() {
+  var tabs = document.querySelectorAll('.eg-network-tab');
+  var people = document.querySelectorAll('.eg-network-person');
+  function activate(role) {
+    tabs.forEach(function(t) {
+      var active = t.dataset.role === role;
+      t.style.color = active ? 'var(--black)' : 'var(--muted)';
+      t.style.borderBottomColor = active ? 'var(--terracotta)' : 'transparent';
+      t.style.fontWeight = active ? '600' : '400';
+    });
+    people.forEach(function(p) {
+      if (role === 'all') { p.style.display = 'block'; return; }
+      var roles = p.dataset.roles || '';
+      p.style.display = roles.split(',').indexOf(role) >= 0 ? 'block' : 'none';
+    });
+  }
+  tabs.forEach(function(t) { t.addEventListener('click', function() { activate(t.dataset.role); }); });
+  activate('all');
+})();
+`,
+      },
+    })
+  );
+
+  sections.push(
+    h(ArtifactFooter, {
+      key: 'footer',
+      generatedAt: new Date().toISOString(),
+      source: 'memory/network/people.json',
+    })
+  );
+
+  return h('div', null, ...sections);
+}

package/lib/tokens.js

@@ -18,6 +18,18 @@ export const colors = {
   accent: '#D4875A',
   secondary: '#7B9DB7',
 
+  // Dark mode
+  darkBg: '#1D1611',
+  darkBgCard: '#241E19',
+  darkBgCode: '#161210',
+  darkBgElevated: '#2A231D',
+  darkText: 'rgba(255, 255, 255, 0.92)',
+  darkTextSoft: 'rgba(255, 255, 255, 0.75)',
+  darkTextMuted: 'rgba(255, 255, 255, 0.50)',
+  darkTextDim: 'rgba(255, 255, 255, 0.30)',
+  darkBorder: 'rgba(255, 255, 255, 0.06)',
+  darkBorderStrong: 'rgba(255, 255, 255, 0.10)',
+
   // Terminal syntax
   terminalHighlight: '#E7794B',
   terminalSuccess: '#6BBF6B',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "egregore-artifacts",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Generate branded HTML artifacts from Egregore data",
   "type": "module",
   "license": "MIT",