agentgui 1.0.901 → 1.0.903

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/site/theme.mjs +90 -79
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agentgui",
3
- "version": "1.0.901",
3
+ "version": "1.0.903",
4
4
  "description": "Multi-agent ACP client with real-time communication",
5
5
  "type": "module",
6
6
  "main": "electron/main.js",
package/site/theme.mjs CHANGED
@@ -1,7 +1,8 @@
1
1
  // AnEntrypoint design-system theme for flatspace.
2
- // Renders site chrome via anentrypoint-design SDK on the client (importmap → unpkg),
3
- // theme.mjs only emits the static HTML shell + bootstrap script that consumes the YAML
4
- // content that flatspace baked into <script type="application/json" id="__site__">.
2
+ // Renders site chrome via anentrypoint-design SDK using REAL SDK components.
3
+ // theme.mjs emits HTML shell + bootstrap that consumes YAML baked into <script id="__site__">.
4
+ // The SDK provides ALL styling via installStyles(); no local <style> block — that ensures
5
+ // every portfolio site looks uniform.
5
6
 
6
7
  const escapeHtml = (s) => String(s ?? '')
7
8
  .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
@@ -9,83 +10,115 @@ const escapeHtml = (s) => String(s ?? '')
9
10
 
10
11
  const escapeJson = (obj) => JSON.stringify(obj)
11
12
  .replace(/</g, '\\u003c').replace(/>/g, '\\u003e').replace(/&/g, '\\u0026')
12
- .replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029');
13
+ .replace(new RegExp('\\u2028','g'), '\\u2028').replace(new RegExp('\\u2029','g'), '\\u2029');
13
14
 
14
15
  const SDK_URL = 'https://unpkg.com/anentrypoint-design@latest/dist/247420.js';
15
16
 
16
17
  const clientScript = `
17
- import { h, applyDiff, installStyles } from 'anentrypoint-design';
18
+ import { h, applyDiff, installStyles, components as C } from 'anentrypoint-design';
18
19
  installStyles();
20
+ document.documentElement.classList.add('ds-247420');
19
21
 
20
22
  const data = JSON.parse(document.getElementById('__site__').textContent);
21
23
  const { site, nav, home } = data;
22
- const accent = \`linear-gradient(135deg, \${site.accent_from || '#58a6ff'}, \${site.accent_to || '#bc8cff'})\`;
23
24
 
24
25
  function Hero() {
25
- return h('div', { class: 'hero' },
26
- h('h1', { class: 'hero-h1' }, home.hero.heading),
27
- home.hero.subheading ? h('p', { class: 'hero-sub' }, home.hero.subheading) : null,
28
- home.hero.body ? h('p', { class: 'hero-body' }, home.hero.body) : null,
29
- h('div', { class: 'badge-row' },
30
- ...(home.hero.badges || []).map((b, i) => h('span', { class: 'badge', key: i }, b.label))
31
- ),
32
- h('div', { class: 'cta-row' },
33
- ...(home.hero.ctas || []).map((c, i) => h('a', {
34
- href: c.href, key: i,
35
- class: 'btn btn-sm ' + (c.primary ? 'btn-primary' : 'btn-ghost'),
36
- style: 'text-decoration:none'
37
- }, c.label))
38
- )
39
- );
26
+ if (!home || !home.hero) return null;
27
+ return C.Panel({
28
+ style: 'margin:8px',
29
+ children: [
30
+ C.Heading({ level: 1, style: 'margin:0 0 8px 0', children: home.hero.heading || site.title }),
31
+ home.hero.subheading ? C.Lede({ children: home.hero.subheading }) : null,
32
+ home.hero.body ? h('p', { style: 'margin:8px 0 16px 0;color:var(--panel-text-2);max-width:64ch' }, home.hero.body) : null,
33
+ (home.hero.badges && home.hero.badges.length) ? h('div', { style: 'display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px' },
34
+ ...home.hero.badges.map((b, i) => C.Chip({ key: 'b'+i, children: b.label }))
35
+ ) : null,
36
+ (home.hero.ctas && home.hero.ctas.length) ? h('div', { style: 'display:flex;gap:8px;flex-wrap:wrap' },
37
+ ...home.hero.ctas.map((c, i) => C.Btn({ key: 'c'+i, href: c.href, primary: c.primary, children: c.label }))
38
+ ) : null
39
+ ]
40
+ });
40
41
  }
41
42
 
42
43
  function Features() {
43
- if (!home.features || !home.features.items) return null;
44
- return h('section', { class: 'section' },
45
- h('h2', {}, home.features.heading || 'Features'),
46
- h('div', { class: 'grid-cards' },
47
- ...home.features.items.map((it, i) =>
48
- h('div', { class: 'card', key: i },
49
- h('h3', {}, it.name),
50
- h('p', {}, it.desc || '')
51
- )
52
- )
53
- )
54
- );
44
+ if (!home || !home.features || !home.features.items || !home.features.items.length) return null;
45
+ const rows = home.features.items.map((it, i) => C.RowLink({
46
+ key: 'f'+i,
47
+ code: String(i+1).padStart(2,'0'),
48
+ title: it.name,
49
+ sub: it.desc || '',
50
+ meta: it.meta || '',
51
+ href: it.href || '#'
52
+ }));
53
+ return C.Panel({
54
+ title: home.features.heading || 'features',
55
+ style: 'margin:8px',
56
+ children: rows
57
+ });
55
58
  }
56
59
 
57
60
  function Quickstart() {
58
- if (!home.quickstart || !home.quickstart.lines) return null;
59
- const cls = { cmt: 'cmt', cmd: '', str: 'str', kw: 'kw', fn: 'fn' };
60
- return h('section', { class: 'section' },
61
- h('h2', {}, home.quickstart.heading || 'Quick start'),
62
- h('div', { class: 'code-block' },
63
- h('pre', {},
64
- ...home.quickstart.lines.map((l, i) => {
65
- const c = cls[l.kind] || '';
66
- return h('span', { key: i, class: c }, l.text + '\n');
67
- })
68
- )
69
- )
70
- );
61
+ if (!home || !home.quickstart || !home.quickstart.lines || !home.quickstart.lines.length) return null;
62
+ const lineNodes = home.quickstart.lines.map((l, i) => h('div', { key: 'q'+i, class: 'cli' },
63
+ h('span', { class: 'prompt' }, (l.kind === 'cmt' ? '#' : '$')),
64
+ h('span', { class: 'cmd' }, l.text)
65
+ ));
66
+ return C.Panel({
67
+ title: home.quickstart.heading || 'quick start',
68
+ style: 'margin:8px',
69
+ children: lineNodes
70
+ });
71
+ }
72
+
73
+ function Examples() {
74
+ if (!home || !home.examples || !home.examples.items || !home.examples.items.length) return null;
75
+ const rows = home.examples.items.map((it, i) => C.RowLink({
76
+ key: 'e'+i,
77
+ title: it.name,
78
+ sub: it.desc || '',
79
+ meta: it.cta || 'open',
80
+ href: it.href || '#'
81
+ }));
82
+ return C.Panel({
83
+ title: home.examples.heading || 'examples',
84
+ style: 'margin:8px',
85
+ children: rows
86
+ });
71
87
  }
72
88
 
73
89
  function Footer() {
74
- return h('footer', { class: 'app-footer' },
75
- h('span', {}, 'styled with '),
76
- h('a', { href: 'https://github.com/AnEntrypoint/design' }, 'anentrypoint-design'),
77
- h('span', {}, ' · part of '),
78
- h('a', { href: 'https://247420.xyz' }, '247420.xyz'),
79
- h('span', {}, ' · '),
80
- h('a', { href: site.repo }, 'source')
90
+ return h('footer', { class: 'app-status' },
91
+ h('span', { class: 'item' }, 'styled with '),
92
+ h('a', { class: 'item', href: 'https://anentrypoint.github.io/design/' }, 'anentrypoint-design'),
93
+ h('span', { class: 'item' }, '·'),
94
+ h('a', { class: 'item', href: 'https://247420.xyz' }, '247420.xyz'),
95
+ h('span', { class: 'spread' }),
96
+ site.repo ? h('a', { class: 'item', href: site.repo }, 'source ↗') : null
81
97
  );
82
98
  }
83
99
 
84
- function App() {
85
- return h('div', {}, Hero(), Features(), Quickstart(), Footer());
86
- }
100
+ const navItems = (nav && nav.links ? nav.links : []).map(l => [String(l.label || ''), l.href]);
101
+
102
+ const App = C.AppShell({
103
+ topbar: C.Topbar({
104
+ brand: '247420',
105
+ leaf: site.title || '',
106
+ items: navItems
107
+ }),
108
+ crumb: C.Crumb({
109
+ trail: ['247420'],
110
+ leaf: site.title || ''
111
+ }),
112
+ main: h('div', {},
113
+ Hero(),
114
+ Features(),
115
+ Quickstart(),
116
+ Examples()
117
+ ),
118
+ status: Footer()
119
+ });
87
120
 
88
- applyDiff(document.getElementById('app'), [App()]);
121
+ applyDiff(document.getElementById('app'), [App]);
89
122
  `;
90
123
 
91
124
  const html = ({ site, nav, home }) => `<!DOCTYPE html>
@@ -101,28 +134,6 @@ const html = ({ site, nav, home }) => `<!DOCTYPE html>
101
134
  <link rel="canonical" href="${escapeHtml(site.url || '')}" />
102
135
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E${encodeURIComponent(site.glyph || '◆')}%3C/text%3E%3C/svg%3E" />
103
136
  <script type="importmap">{"imports":{"anentrypoint-design":"${SDK_URL}"}}</script>
104
- <style>
105
- body { margin: 0; }
106
- .hero { padding: 5rem 2rem 3rem; text-align: center; background: linear-gradient(135deg, var(--panel-bg, #0d1117) 0%, var(--panel-bg-2, #161b22) 100%); border-bottom: 1px solid var(--panel-border, #30363d); }
107
- .hero-h1 { font-size: 4rem; font-weight: 800; margin: 0 0 1rem; letter-spacing: -2px; background: ${'linear-gradient(135deg, ' + (site.accent_from || '#58a6ff') + ', ' + (site.accent_to || '#bc8cff') + ')'}; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
108
- .hero-sub { font-size: 1.25rem; color: var(--panel-muted, #8b949e); max-width: 640px; margin: 0 auto 0.75rem; line-height: 1.6; }
109
- .hero-body { font-size: 1rem; color: var(--panel-muted, #8b949e); max-width: 640px; margin: 0 auto 2rem; line-height: 1.6; }
110
- .badge-row { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; }
111
- .badge { background: var(--panel-bg-2, #21262d); border: 1px solid var(--panel-border, #30363d); border-radius: 9999px; padding: 0.25rem 0.75rem; font-size: 0.75rem; color: var(--panel-muted, #8b949e); }
112
- .cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
113
- .section { max-width: 1100px; margin: 0 auto; padding: 3rem 2rem; }
114
- .section h2 { font-size: 1.75rem; font-weight: 700; color: var(--panel-text, #e6edf3); margin-bottom: 1.5rem; border-bottom: 1px solid var(--panel-border, #21262d); padding-bottom: 0.75rem; }
115
- .grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
116
- .card { background: var(--panel-bg-2, #161b22); border: 1px solid var(--panel-border, #30363d); border-radius: 12px; padding: 1.25rem; }
117
- .card h3 { margin: 0 0 0.5rem; font-size: 1rem; color: ${site.accent_to || '#bc8cff'}; font-family: var(--ff-mono, ui-monospace, monospace); }
118
- .card p { margin: 0; color: var(--panel-muted, #8b949e); font-size: 0.85rem; line-height: 1.5; }
119
- .code-block { background: var(--panel-bg-2, #161b22); border: 1px solid var(--panel-border, #30363d); border-radius: 12px; padding: 1.5rem; overflow-x: auto; }
120
- .code-block pre { margin: 0; font-family: var(--ff-mono, ui-monospace, monospace); font-size: 0.85rem; color: var(--panel-text, #e6edf3); line-height: 1.6; }
121
- .cmt { color: var(--panel-muted, #8b949e); }
122
- .str { color: #a5d6ff; } .kw { color: #ff7b72; } .fn { color: #d2a8ff; }
123
- .app-footer { border-top: 1px solid var(--panel-border, #21262d); padding: 2rem; text-align: center; color: var(--panel-muted, #8b949e); font-size: 0.85rem; }
124
- .app-footer a { color: #58a6ff; text-decoration: none; }
125
- </style>
126
137
  </head>
127
138
  <body>
128
139
  <div id="app"></div>