granite-mem 0.1.7 → 0.1.9
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.
- package/README.md +124 -207
- package/dist/index.js +4997 -1444
- package/dist/public/app.js +17 -588
- package/dist/public/graph-engine.js +102 -0
- package/dist/public/index.html +117 -126
- package/dist/public/markdown-renderer.js +1 -189
- package/dist/public/style.css +1 -923
- package/dist/templates/founder-os.yml +204 -0
- package/package.json +9 -3
- package/templates/founder-os.yml +204 -0
- package/dist/public/canvas-renderer.js +0 -524
- package/dist/public/graph.js +0 -380
package/dist/public/app.js
CHANGED
|
@@ -1,588 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
* Granite — App Controller
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
let previewCache = {};
|
|
19
|
-
let previewTimeout = null;
|
|
20
|
-
let keyboardIndex = -1;
|
|
21
|
-
|
|
22
|
-
// ── DOM ──
|
|
23
|
-
const sidebar = document.getElementById('sidebar');
|
|
24
|
-
const searchBox = document.getElementById('search-box');
|
|
25
|
-
const typeFilters = document.getElementById('type-filters');
|
|
26
|
-
const noteList = document.getElementById('note-list');
|
|
27
|
-
const noteHeader = document.getElementById('note-header');
|
|
28
|
-
const noteTitle = document.getElementById('note-title');
|
|
29
|
-
const noteBreadcrumb = document.getElementById('note-breadcrumb');
|
|
30
|
-
const noteTypeBadge = document.getElementById('note-type-badge');
|
|
31
|
-
const noteDate = document.getElementById('note-date');
|
|
32
|
-
const noteTags = document.getElementById('note-tags');
|
|
33
|
-
const noteBody = document.getElementById('note-body');
|
|
34
|
-
const backlinksPanel = document.getElementById('backlinks-panel');
|
|
35
|
-
const backlinksList = document.getElementById('backlinks-list');
|
|
36
|
-
const backlinksCount = document.getElementById('backlinks-count');
|
|
37
|
-
const emptyState = document.getElementById('empty-state');
|
|
38
|
-
const contentWrapper = document.getElementById('content-wrapper');
|
|
39
|
-
const graphView = document.getElementById('graph-view');
|
|
40
|
-
const graphCanvas = document.getElementById('graph-canvas');
|
|
41
|
-
const createPanel = document.getElementById('create-panel');
|
|
42
|
-
const previewEl = document.getElementById('wikilink-preview');
|
|
43
|
-
|
|
44
|
-
// ── API ──
|
|
45
|
-
async function api(url, opts) {
|
|
46
|
-
const res = await fetch(url, opts);
|
|
47
|
-
return res.json();
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
// ── Init ──
|
|
51
|
-
async function init() {
|
|
52
|
-
const { types } = await api('/api/types');
|
|
53
|
-
for (const name of Object.keys(types)) {
|
|
54
|
-
const btn = document.createElement('button');
|
|
55
|
-
btn.className = 'type-chip';
|
|
56
|
-
btn.dataset.type = name;
|
|
57
|
-
btn.textContent = name;
|
|
58
|
-
btn.addEventListener('click', () => filterByType(name));
|
|
59
|
-
typeFilters.appendChild(btn);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
// Populate create panel type selector
|
|
63
|
-
const createTypeSelect = document.getElementById('create-type');
|
|
64
|
-
for (const name of Object.keys(types)) {
|
|
65
|
-
const opt = document.createElement('option');
|
|
66
|
-
opt.value = name;
|
|
67
|
-
opt.textContent = name;
|
|
68
|
-
createTypeSelect.appendChild(opt);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
typeFilters.querySelector('[data-type=""]').addEventListener('click', () => filterByType(''));
|
|
72
|
-
|
|
73
|
-
await loadNotes();
|
|
74
|
-
setupSearch();
|
|
75
|
-
setupKeyboard();
|
|
76
|
-
setupSidebar();
|
|
77
|
-
setupCreate();
|
|
78
|
-
setupWikilinkPreviews();
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
// ═══════════════════════════════════
|
|
82
|
-
// SEARCH
|
|
83
|
-
// ═══════════════════════════════════
|
|
84
|
-
|
|
85
|
-
function setupSearch() {
|
|
86
|
-
searchBox.addEventListener('input', () => {
|
|
87
|
-
clearTimeout(searchTimeout);
|
|
88
|
-
searchTimeout = setTimeout(() => {
|
|
89
|
-
const q = searchBox.value.trim();
|
|
90
|
-
if (q.length > 0) {
|
|
91
|
-
searchNotes(q);
|
|
92
|
-
isSearchMode = true;
|
|
93
|
-
} else {
|
|
94
|
-
isSearchMode = false;
|
|
95
|
-
renderNoteList(allNotes);
|
|
96
|
-
}
|
|
97
|
-
keyboardIndex = -1;
|
|
98
|
-
}, 180);
|
|
99
|
-
});
|
|
100
|
-
|
|
101
|
-
searchBox.addEventListener('keydown', (e) => {
|
|
102
|
-
if (e.key === 'Escape') {
|
|
103
|
-
searchBox.value = '';
|
|
104
|
-
searchBox.blur();
|
|
105
|
-
isSearchMode = false;
|
|
106
|
-
renderNoteList(allNotes);
|
|
107
|
-
keyboardIndex = -1;
|
|
108
|
-
}
|
|
109
|
-
if (e.key === 'Enter') {
|
|
110
|
-
const items = noteList.querySelectorAll('.note-item');
|
|
111
|
-
const target = keyboardIndex >= 0 ? items[keyboardIndex] : items[0];
|
|
112
|
-
if (target) target.click();
|
|
113
|
-
}
|
|
114
|
-
if (e.key === 'ArrowDown') {
|
|
115
|
-
e.preventDefault();
|
|
116
|
-
navigateList(1);
|
|
117
|
-
}
|
|
118
|
-
if (e.key === 'ArrowUp') {
|
|
119
|
-
e.preventDefault();
|
|
120
|
-
navigateList(-1);
|
|
121
|
-
}
|
|
122
|
-
});
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
// ═══════════════════════════════════
|
|
126
|
-
// KEYBOARD NAVIGATION
|
|
127
|
-
// ═══════════════════════════════════
|
|
128
|
-
|
|
129
|
-
function navigateList(delta) {
|
|
130
|
-
const items = noteList.querySelectorAll('.note-item');
|
|
131
|
-
if (items.length === 0) return;
|
|
132
|
-
|
|
133
|
-
// Clear old focus
|
|
134
|
-
items.forEach(el => el.classList.remove('keyboard-focus'));
|
|
135
|
-
|
|
136
|
-
keyboardIndex += delta;
|
|
137
|
-
if (keyboardIndex < 0) keyboardIndex = items.length - 1;
|
|
138
|
-
if (keyboardIndex >= items.length) keyboardIndex = 0;
|
|
139
|
-
|
|
140
|
-
items[keyboardIndex].classList.add('keyboard-focus');
|
|
141
|
-
items[keyboardIndex].scrollIntoView({ block: 'nearest' });
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
function setupKeyboard() {
|
|
145
|
-
document.addEventListener('keydown', (e) => {
|
|
146
|
-
// ⌘K — focus search
|
|
147
|
-
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
|
148
|
-
e.preventDefault();
|
|
149
|
-
if (sidebar.classList.contains('collapsed')) toggleSidebar();
|
|
150
|
-
closeCreate();
|
|
151
|
-
searchBox.focus();
|
|
152
|
-
searchBox.select();
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
// ⌘N — new note
|
|
156
|
-
if ((e.metaKey || e.ctrlKey) && e.key === 'n') {
|
|
157
|
-
e.preventDefault();
|
|
158
|
-
toggleCreate();
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
// ⌘G — toggle graph
|
|
162
|
-
if ((e.metaKey || e.ctrlKey) && e.key === 'g') {
|
|
163
|
-
e.preventDefault();
|
|
164
|
-
toggleGraph();
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
// Escape — close panels / deselect
|
|
168
|
-
if (e.key === 'Escape' && document.activeElement !== searchBox) {
|
|
169
|
-
if (isCreateOpen) {
|
|
170
|
-
closeCreate();
|
|
171
|
-
} else if (currentView === 'graph') {
|
|
172
|
-
setView('note');
|
|
173
|
-
} else if (currentNote) {
|
|
174
|
-
currentNote = null;
|
|
175
|
-
showEmptyState();
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
// ↑/↓ in note list (when not focused on inputs)
|
|
180
|
-
if (!['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement?.tagName)) {
|
|
181
|
-
if (e.key === 'ArrowDown') { e.preventDefault(); navigateList(1); }
|
|
182
|
-
if (e.key === 'ArrowUp') { e.preventDefault(); navigateList(-1); }
|
|
183
|
-
if (e.key === 'Enter' && keyboardIndex >= 0) {
|
|
184
|
-
const items = noteList.querySelectorAll('.note-item');
|
|
185
|
-
if (items[keyboardIndex]) items[keyboardIndex].click();
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
});
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
// ═══════════════════════════════════
|
|
192
|
-
// SIDEBAR
|
|
193
|
-
// ═══════════════════════════════════
|
|
194
|
-
|
|
195
|
-
function setupSidebar() {
|
|
196
|
-
document.getElementById('rail-toggle').addEventListener('click', toggleSidebar);
|
|
197
|
-
document.getElementById('rail-search').addEventListener('click', () => {
|
|
198
|
-
if (sidebar.classList.contains('collapsed')) toggleSidebar();
|
|
199
|
-
closeCreate();
|
|
200
|
-
setTimeout(() => { searchBox.focus(); searchBox.select(); }, 200);
|
|
201
|
-
});
|
|
202
|
-
document.getElementById('rail-graph').addEventListener('click', toggleGraph);
|
|
203
|
-
document.getElementById('rail-new').addEventListener('click', toggleCreate);
|
|
204
|
-
document.getElementById('brand-mark').addEventListener('click', () => {
|
|
205
|
-
currentNote = null;
|
|
206
|
-
setView('note');
|
|
207
|
-
showEmptyState();
|
|
208
|
-
});
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
function toggleSidebar() {
|
|
212
|
-
sidebar.classList.toggle('expanded');
|
|
213
|
-
sidebar.classList.toggle('collapsed');
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
// ═══════════════════════════════════
|
|
217
|
-
// NOTE CREATION
|
|
218
|
-
// ═══════════════════════════════════
|
|
219
|
-
|
|
220
|
-
function setupCreate() {
|
|
221
|
-
document.getElementById('create-panel-close').addEventListener('click', closeCreate);
|
|
222
|
-
document.getElementById('create-submit').addEventListener('click', submitCreate);
|
|
223
|
-
|
|
224
|
-
// Enter in title field submits if body is empty
|
|
225
|
-
document.getElementById('create-title').addEventListener('keydown', (e) => {
|
|
226
|
-
if (e.key === 'Enter' && !e.shiftKey) {
|
|
227
|
-
e.preventDefault();
|
|
228
|
-
document.getElementById('create-body').focus();
|
|
229
|
-
}
|
|
230
|
-
});
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
function toggleCreate() {
|
|
234
|
-
if (isCreateOpen) {
|
|
235
|
-
closeCreate();
|
|
236
|
-
} else {
|
|
237
|
-
openCreate();
|
|
238
|
-
}
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
function openCreate() {
|
|
242
|
-
if (sidebar.classList.contains('collapsed')) toggleSidebar();
|
|
243
|
-
isCreateOpen = true;
|
|
244
|
-
noteList.style.display = 'none';
|
|
245
|
-
document.getElementById('type-filters').style.display = 'none';
|
|
246
|
-
createPanel.style.display = 'flex';
|
|
247
|
-
document.getElementById('rail-new').classList.add('active');
|
|
248
|
-
setTimeout(() => document.getElementById('create-title').focus(), 100);
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
function closeCreate() {
|
|
252
|
-
isCreateOpen = false;
|
|
253
|
-
createPanel.style.display = 'none';
|
|
254
|
-
noteList.style.display = '';
|
|
255
|
-
document.getElementById('type-filters').style.display = '';
|
|
256
|
-
document.getElementById('rail-new').classList.remove('active');
|
|
257
|
-
// Reset form
|
|
258
|
-
document.getElementById('create-title').value = '';
|
|
259
|
-
document.getElementById('create-body').value = '';
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
async function submitCreate() {
|
|
263
|
-
const type = document.getElementById('create-type').value;
|
|
264
|
-
const title = document.getElementById('create-title').value.trim();
|
|
265
|
-
const body = document.getElementById('create-body').value;
|
|
266
|
-
|
|
267
|
-
if (!title) {
|
|
268
|
-
document.getElementById('create-title').focus();
|
|
269
|
-
return;
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
const result = await api('/api/notes', {
|
|
273
|
-
method: 'POST',
|
|
274
|
-
headers: { 'Content-Type': 'application/json' },
|
|
275
|
-
body: JSON.stringify({ type, title, body }),
|
|
276
|
-
});
|
|
277
|
-
|
|
278
|
-
if (result.slug) {
|
|
279
|
-
closeCreate();
|
|
280
|
-
await loadNotes();
|
|
281
|
-
loadNote(result.slug);
|
|
282
|
-
}
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
// ═══════════════════════════════════
|
|
286
|
-
// GRAPH
|
|
287
|
-
// ═══════════════════════════════════
|
|
288
|
-
|
|
289
|
-
function toggleGraph() {
|
|
290
|
-
if (currentView === 'graph') {
|
|
291
|
-
setView('note');
|
|
292
|
-
} else {
|
|
293
|
-
setView('graph');
|
|
294
|
-
}
|
|
295
|
-
}
|
|
296
|
-
|
|
297
|
-
function setView(view) {
|
|
298
|
-
currentView = view;
|
|
299
|
-
const graphBtn = document.getElementById('rail-graph');
|
|
300
|
-
|
|
301
|
-
if (view === 'graph') {
|
|
302
|
-
graphBtn.classList.add('active');
|
|
303
|
-
contentWrapper.style.display = 'none';
|
|
304
|
-
emptyState.style.display = 'none';
|
|
305
|
-
graphView.style.display = 'flex';
|
|
306
|
-
loadGraph();
|
|
307
|
-
} else {
|
|
308
|
-
graphBtn.classList.remove('active');
|
|
309
|
-
graphView.style.display = 'none';
|
|
310
|
-
GraphEngine.stop();
|
|
311
|
-
if (currentNote) {
|
|
312
|
-
contentWrapper.style.display = 'flex';
|
|
313
|
-
emptyState.style.display = 'none';
|
|
314
|
-
} else {
|
|
315
|
-
contentWrapper.style.display = 'none';
|
|
316
|
-
emptyState.style.display = 'flex';
|
|
317
|
-
}
|
|
318
|
-
}
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
async function loadGraph() {
|
|
322
|
-
if (!graphData) {
|
|
323
|
-
graphData = await api('/api/graph');
|
|
324
|
-
}
|
|
325
|
-
GraphEngine.init(graphCanvas, graphData, {
|
|
326
|
-
activeSlug: currentNote?.slug || null,
|
|
327
|
-
onNavigate: (slug) => {
|
|
328
|
-
loadNote(slug);
|
|
329
|
-
setView('note');
|
|
330
|
-
},
|
|
331
|
-
});
|
|
332
|
-
}
|
|
333
|
-
|
|
334
|
-
// ═══════════════════════════════════
|
|
335
|
-
// WIKILINK PREVIEWS
|
|
336
|
-
// ═══════════════════════════════════
|
|
337
|
-
|
|
338
|
-
function setupWikilinkPreviews() {
|
|
339
|
-
document.addEventListener('mouseover', (e) => {
|
|
340
|
-
const link = e.target.closest('.wikilink');
|
|
341
|
-
if (!link) return;
|
|
342
|
-
|
|
343
|
-
clearTimeout(previewTimeout);
|
|
344
|
-
previewTimeout = setTimeout(() => showPreview(link), 300);
|
|
345
|
-
});
|
|
346
|
-
|
|
347
|
-
document.addEventListener('mouseout', (e) => {
|
|
348
|
-
const link = e.target.closest('.wikilink');
|
|
349
|
-
if (link || e.relatedTarget?.closest?.('.wikilink-preview')) return;
|
|
350
|
-
|
|
351
|
-
clearTimeout(previewTimeout);
|
|
352
|
-
hidePreview();
|
|
353
|
-
});
|
|
354
|
-
|
|
355
|
-
previewEl.addEventListener('mouseleave', hidePreview);
|
|
356
|
-
|
|
357
|
-
// Click navigation
|
|
358
|
-
document.addEventListener('click', (e) => {
|
|
359
|
-
const link = e.target.closest('.wikilink');
|
|
360
|
-
if (!link) return;
|
|
361
|
-
e.preventDefault();
|
|
362
|
-
hidePreview();
|
|
363
|
-
const slug = link.dataset.slug;
|
|
364
|
-
if (slug) loadNote(slug);
|
|
365
|
-
});
|
|
366
|
-
}
|
|
367
|
-
|
|
368
|
-
async function showPreview(linkEl) {
|
|
369
|
-
const slug = linkEl.dataset.slug;
|
|
370
|
-
if (!slug) return;
|
|
371
|
-
|
|
372
|
-
let data = previewCache[slug];
|
|
373
|
-
if (!data) {
|
|
374
|
-
data = await api(`/api/notes/${slug}`);
|
|
375
|
-
if (data.error) return;
|
|
376
|
-
previewCache[slug] = data;
|
|
377
|
-
}
|
|
378
|
-
|
|
379
|
-
// Position
|
|
380
|
-
const rect = linkEl.getBoundingClientRect();
|
|
381
|
-
const previewWidth = 280;
|
|
382
|
-
let left = rect.left;
|
|
383
|
-
let top = rect.bottom + 8;
|
|
384
|
-
|
|
385
|
-
// Keep on screen
|
|
386
|
-
if (left + previewWidth > window.innerWidth - 16) {
|
|
387
|
-
left = window.innerWidth - previewWidth - 16;
|
|
388
|
-
}
|
|
389
|
-
if (top + 160 > window.innerHeight) {
|
|
390
|
-
top = rect.top - 8;
|
|
391
|
-
previewEl.style.transform = 'translateY(-100%)';
|
|
392
|
-
} else {
|
|
393
|
-
previewEl.style.transform = '';
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
previewEl.style.left = left + 'px';
|
|
397
|
-
previewEl.style.top = top + 'px';
|
|
398
|
-
|
|
399
|
-
// Content
|
|
400
|
-
previewEl.querySelector('.preview-type').textContent = data.type || '';
|
|
401
|
-
previewEl.querySelector('.preview-title').textContent = data.title || '';
|
|
402
|
-
previewEl.querySelector('.preview-snippet').textContent = (data.body || '').slice(0, 150).replace(/[#*_`>\[\]]/g, '');
|
|
403
|
-
const tagsEl = previewEl.querySelector('.preview-tags');
|
|
404
|
-
tagsEl.innerHTML = (data.tags || []).map(t => `<span class="preview-tag">${esc(t)}</span>`).join('');
|
|
405
|
-
|
|
406
|
-
previewEl.classList.add('visible');
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
function hidePreview() {
|
|
410
|
-
clearTimeout(previewTimeout);
|
|
411
|
-
previewEl.classList.remove('visible');
|
|
412
|
-
}
|
|
413
|
-
|
|
414
|
-
// ═══════════════════════════════════
|
|
415
|
-
// DATA LOADING
|
|
416
|
-
// ═══════════════════════════════════
|
|
417
|
-
|
|
418
|
-
async function loadNotes() {
|
|
419
|
-
const url = currentType ? `/api/notes?type=${currentType}` : '/api/notes';
|
|
420
|
-
const data = await api(url);
|
|
421
|
-
allNotes = data.notes;
|
|
422
|
-
graphData = null; // Invalidate graph cache
|
|
423
|
-
renderNoteList(allNotes);
|
|
424
|
-
}
|
|
425
|
-
|
|
426
|
-
function filterByType(type) {
|
|
427
|
-
currentType = type;
|
|
428
|
-
typeFilters.querySelectorAll('.type-chip').forEach(btn => {
|
|
429
|
-
btn.classList.toggle('active', btn.dataset.type === type);
|
|
430
|
-
});
|
|
431
|
-
keyboardIndex = -1;
|
|
432
|
-
loadNotes();
|
|
433
|
-
}
|
|
434
|
-
|
|
435
|
-
async function searchNotes(query) {
|
|
436
|
-
const data = await api(`/api/search?q=${encodeURIComponent(query)}`);
|
|
437
|
-
renderNoteList(data.results.map(r => ({
|
|
438
|
-
slug: r.slug,
|
|
439
|
-
title: r.title,
|
|
440
|
-
type: '',
|
|
441
|
-
snippet: r.snippet,
|
|
442
|
-
})));
|
|
443
|
-
}
|
|
444
|
-
|
|
445
|
-
// ═══════════════════════════════════
|
|
446
|
-
// RENDER NOTE LIST
|
|
447
|
-
// ═══════════════════════════════════
|
|
448
|
-
|
|
449
|
-
function renderNoteList(notes) {
|
|
450
|
-
noteList.innerHTML = '';
|
|
451
|
-
keyboardIndex = -1;
|
|
452
|
-
|
|
453
|
-
if (notes.length === 0) {
|
|
454
|
-
noteList.innerHTML = '<div style="padding: 16px 12px; color: var(--text-3); font-size: 12px;">No notes found</div>';
|
|
455
|
-
return;
|
|
456
|
-
}
|
|
457
|
-
|
|
458
|
-
for (const note of notes) {
|
|
459
|
-
const item = document.createElement('div');
|
|
460
|
-
item.className = 'note-item' + (currentNote?.slug === note.slug ? ' active' : '');
|
|
461
|
-
|
|
462
|
-
let meta = '';
|
|
463
|
-
if (note.type) {
|
|
464
|
-
meta += `<span class="note-item-type ${note.type}">${note.type}</span>`;
|
|
465
|
-
}
|
|
466
|
-
if (note.modified) {
|
|
467
|
-
if (note.type) meta += '<span class="note-item-dot"></span>';
|
|
468
|
-
meta += `<span>${formatDate(note.modified)}</span>`;
|
|
469
|
-
}
|
|
470
|
-
|
|
471
|
-
let snippet = '';
|
|
472
|
-
if (note.snippet) {
|
|
473
|
-
snippet = `<div class="note-item-snippet">${note.snippet.replace(/>>>/g, '<mark>').replace(/<<</g, '</mark>')}</div>`;
|
|
474
|
-
}
|
|
475
|
-
|
|
476
|
-
item.innerHTML = `
|
|
477
|
-
<div class="note-item-title">${esc(note.title)}</div>
|
|
478
|
-
<div class="note-item-meta">${meta}</div>
|
|
479
|
-
${snippet}
|
|
480
|
-
`;
|
|
481
|
-
item.addEventListener('click', () => loadNote(note.slug));
|
|
482
|
-
noteList.appendChild(item);
|
|
483
|
-
}
|
|
484
|
-
}
|
|
485
|
-
|
|
486
|
-
// ═══════════════════════════════════
|
|
487
|
-
// LOAD + RENDER NOTE
|
|
488
|
-
// ═══════════════════════════════════
|
|
489
|
-
|
|
490
|
-
async function loadNote(slug) {
|
|
491
|
-
const note = await api(`/api/notes/${slug}`);
|
|
492
|
-
if (note.error) return;
|
|
493
|
-
|
|
494
|
-
currentNote = note;
|
|
495
|
-
|
|
496
|
-
// Switch to note view if in graph
|
|
497
|
-
if (currentView === 'graph') {
|
|
498
|
-
setView('note');
|
|
499
|
-
}
|
|
500
|
-
|
|
501
|
-
// Show content, hide empty state
|
|
502
|
-
emptyState.style.display = 'none';
|
|
503
|
-
contentWrapper.style.display = 'flex';
|
|
504
|
-
noteHeader.style.display = 'block';
|
|
505
|
-
noteBody.style.display = 'block';
|
|
506
|
-
|
|
507
|
-
// Animate header
|
|
508
|
-
noteHeader.style.animation = 'none';
|
|
509
|
-
noteHeader.offsetHeight;
|
|
510
|
-
noteHeader.style.animation = 'fadeSlideIn 0.35s var(--ease-out)';
|
|
511
|
-
|
|
512
|
-
// Header content
|
|
513
|
-
noteBreadcrumb.textContent = note.type;
|
|
514
|
-
noteTitle.textContent = note.title;
|
|
515
|
-
noteTypeBadge.textContent = note.type;
|
|
516
|
-
noteTypeBadge.className = 'meta-badge';
|
|
517
|
-
noteDate.textContent = formatDate(note.created);
|
|
518
|
-
noteTags.innerHTML = (note.tags || []).map(t => `<span class="tag">${esc(t)}</span>`).join('');
|
|
519
|
-
|
|
520
|
-
// Render markdown body as HTML
|
|
521
|
-
noteBody.style.animation = 'none';
|
|
522
|
-
noteBody.offsetHeight;
|
|
523
|
-
noteBody.style.animation = 'fadeSlideIn 0.45s var(--ease-out) 0.05s both';
|
|
524
|
-
noteBody.innerHTML = MarkdownRenderer.render(note.body, note.outgoing_links);
|
|
525
|
-
|
|
526
|
-
// Backlinks
|
|
527
|
-
if (note.backlinks && note.backlinks.length > 0) {
|
|
528
|
-
backlinksPanel.style.display = 'block';
|
|
529
|
-
backlinksCount.textContent = note.backlinks.length;
|
|
530
|
-
backlinksList.innerHTML = '';
|
|
531
|
-
for (const bl of note.backlinks) {
|
|
532
|
-
const item = document.createElement('div');
|
|
533
|
-
item.className = 'backlink-item';
|
|
534
|
-
item.innerHTML = `
|
|
535
|
-
<div class="backlink-title">
|
|
536
|
-
<span class="backlink-arrow">←</span>
|
|
537
|
-
${esc(bl.source_title)}
|
|
538
|
-
</div>
|
|
539
|
-
${bl.context ? `<div class="backlink-context">${esc(bl.context)}</div>` : ''}
|
|
540
|
-
`;
|
|
541
|
-
item.addEventListener('click', () => loadNote(bl.source_slug));
|
|
542
|
-
backlinksList.appendChild(item);
|
|
543
|
-
}
|
|
544
|
-
} else {
|
|
545
|
-
backlinksPanel.style.display = 'none';
|
|
546
|
-
}
|
|
547
|
-
|
|
548
|
-
// Update active state in list
|
|
549
|
-
noteList.querySelectorAll('.note-item').forEach((el, idx) => {
|
|
550
|
-
const noteData = isSearchMode ? null : allNotes[idx];
|
|
551
|
-
el.classList.toggle('active', noteData?.slug === slug);
|
|
552
|
-
});
|
|
553
|
-
|
|
554
|
-
// Update graph if it was loaded
|
|
555
|
-
if (graphData) {
|
|
556
|
-
GraphEngine.setActiveSlug(slug);
|
|
557
|
-
}
|
|
558
|
-
|
|
559
|
-
contentWrapper.scrollTop = 0;
|
|
560
|
-
}
|
|
561
|
-
|
|
562
|
-
function showEmptyState() {
|
|
563
|
-
noteHeader.style.display = 'none';
|
|
564
|
-
noteBody.style.display = 'none';
|
|
565
|
-
backlinksPanel.style.display = 'none';
|
|
566
|
-
contentWrapper.style.display = 'none';
|
|
567
|
-
emptyState.style.display = 'flex';
|
|
568
|
-
}
|
|
569
|
-
|
|
570
|
-
// ═══════════════════════════════════
|
|
571
|
-
// HELPERS
|
|
572
|
-
// ═══════════════════════════════════
|
|
573
|
-
|
|
574
|
-
function esc(str) {
|
|
575
|
-
const d = document.createElement('div');
|
|
576
|
-
d.textContent = str;
|
|
577
|
-
return d.innerHTML;
|
|
578
|
-
}
|
|
579
|
-
|
|
580
|
-
function formatDate(iso) {
|
|
581
|
-
if (!iso) return '';
|
|
582
|
-
const d = new Date(iso);
|
|
583
|
-
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
|
|
584
|
-
}
|
|
585
|
-
|
|
586
|
-
// ── Boot ──
|
|
587
|
-
init();
|
|
588
|
-
})();
|
|
1
|
+
"use strict";(()=>{(function(){"use strict";const K=[{hex:"#ba6844",soft:"rgba(186,104,68,0.16)"},{hex:"#2e6b5b",soft:"rgba(46,107,91,0.18)"},{hex:"#735bb0",soft:"rgba(113,88,170,0.18)"},{hex:"#987b43",soft:"rgba(152,123,67,0.18)"}],zt={hex:"rgba(255,236,220,0.6)",soft:"rgba(255,236,220,0.12)"};let s=null,A=null,kt=()=>{},T=[],_=[],D={},B={},xt=[],O={},F="all",x=null,bt=null,z=[];const lt=new Map;let dt=null,ut=0,W=-1;const o={tx:0,ty:0,k:1},h=t=>document.getElementById(t),E=h("stage"),Xt=h("graph-canvas"),Yt=h("graph-labels"),ft=h("type-filters"),ht=h("dirA-sub"),jt=h("stat-notes"),qt=h("stat-edges"),At=h("stat-communities"),Vt=h("stat-density"),X=h("zoom-val"),Lt=h("empty-hint"),U=h("reader"),G=h("reader-body"),it=h("reader-breadcrumb"),Pt=h("reader-kicker"),Kt=h("reader-title"),Ut=h("reader-deck"),Gt=h("reader-metaline"),ot=h("reader-article"),Mt=h("reader-links"),Et=h("reader-progress"),Jt=h("reader-resizer"),Y=h("wikilink-preview"),j=h("command-bar-overlay"),q=h("command-input"),V=h("command-results");function b(t){return String(t??"").replace(/[&<>"']/g,e=>({"&":"&","<":"<",">":">",'"':""","'":"'"})[e])}function Zt(t){if(!t)return"";const e=new Date(t);return isNaN(e.getTime())?"":`${["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"][e.getMonth()]} ${e.getDate()}, ${e.getFullYear()}`}function pt(t){return((t||"").trim().match(/\S+/g)||[]).length}function $t(t){return Math.max(1,Math.ceil(pt(t)/220))}function Ct(t){if(!t)return"";const e=t.split(`
|
|
2
|
+
`);for(const i of e){const r=i.trim();if(!r||r.startsWith("#")||r.startsWith(">")||r.startsWith("```")||r.startsWith("|"))continue;const a=r.replace(/`([^`]+)`/g,"$1").replace(/\*\*([^*]+)\*\*/g,"$1").replace(/\[\[([^\]|]+)(\|([^\]]+))?\]\]/g,(c,n,l,u)=>u||n).replace(/\[([^\]]+)\]\([^)]+\)/g,"$1");if(!(a.length<12))return a.length>160?a.slice(0,157).trimEnd()+"\u2026":a}return""}function J(t){return O[t]||K[0]}async function Tt(){try{const[t,e]=await Promise.all([fetch("/api/graph").then(n=>n.json()),fetch("/api/types").then(n=>n.json())]);T=t.nodes||[];const i=t.edges||[],r=e.types||[];xt=Array.isArray(r)?r.map(n=>typeof n=="string"?n:n.name||n.type):Object.keys(r),O={},xt.forEach((n,l)=>{O[n]=K[l%K.length]});for(const n of T)O[n.type]||(O[n.type]=K[Object.keys(O).length%K.length]);const a=new Set(T.map(n=>n.slug)),c=new Set;for(const n of i){if(!n.source||!n.target||n.source===n.target||!a.has(n.source)||!a.has(n.target))continue;const l=n.source<n.target?n.source+"|"+n.target:n.target+"|"+n.source;c.add(l)}_=[...c].map(n=>{const[l,u]=n.split("|");return{source:l,target:u}}),D=Object.fromEntries(T.map(n=>[n.slug,n])),B={};for(const n of T)B[n.slug]=new Set;for(const n of _)B[n.source].add(n.target),B[n.target].add(n.source);Qt(),Dt(),ne(),fe(),T.length||(ht.textContent="Your vault is empty. Create a note with `granite new` to light up the sky.")}catch(t){console.error("[granite] boot failed",t),ht.textContent="Could not load the vault. Is the API running?"}}function Qt(){const t=[{k:"all",label:"All",c:zt.hex}];for(const e of Object.keys(O))t.push({k:e,label:e,c:O[e].hex});ft.innerHTML="";for(const e of t){const i=document.createElement("button");i.type="button",i.className="dirA-filter"+(F===e.k?" active":""),i.style.setProperty("--tc",e.c),i.dataset.k=e.k,i.innerHTML=`<span class="dot" style="--tc:${e.c}"></span>${b(e.label)}`,i.addEventListener("click",()=>te(e.k)),ft.appendChild(i)}}function te(t){F=t;for(const e of ft.querySelectorAll(".dirA-filter"))e.classList.toggle("active",e.dataset.k===t);ee(),mt="",kt()}function ee(){if(!s)return;if(F==="all"){for(let e=0;e<s.n;e++)s.alpha[e]=1;return}const t=x?s.idxOf[x]:-1;for(let e=0;e<s.n;e++){const i=s.slugOf[e],r=D[i];r&&(r.type===F||e===t?s.alpha[e]=1:s.alpha[e]=.12)}}function Dt(){jt.textContent=T.length,qt.textContent=_.length,Vt.textContent=T.length?(_.length/T.length).toFixed(1):"0.0",s&&(At.textContent=s.K),ht.textContent=`${T.length} notes \xB7 ${_.length} edges${s?" \xB7 "+s.K+" communities":""}, laid out in real time. Drag any star, hover to part the crowd, scroll to zoom deep.`}function ne(){if(!T.length)return;s=window.GraphEngine.createSimulation(T,_,2400,1800),A=window.GraphEngine.createRenderer(Xt,s),window.__granite={sim:s,renderer:A,view:o,nodes:T,links:_},At.textContent=s.K,Dt(),s.prebake(280),s.freeze(),new ResizeObserver(()=>{A.resize(),x||gt(!1)}).observe(E);function t(c=0){const n=E.getBoundingClientRect();if(n.width===0||n.height===0)return c>30?void 0:requestAnimationFrame(()=>t(c+1));try{A.resize(),gt(!0),se()}catch(l){console.error("[granite] arrival boot failed",l)}}requestAnimationFrame(()=>t(0));let e=0;const i={k:NaN,tx:NaN,ty:NaN,active:null,hovered:-2,revealDone:!1};kt=()=>{i.k=NaN,i.revealDone=!1};function r(){if(s.cooling>0||s.pinnedIdx>=0)return!0;if(!i.revealDone){let c=!0;for(let n=0;n<s.n;n++)if(s.alpha[n]<.999){c=!1;break}if(!c||s.edgeAlpha<.999)return!0;i.revealDone=!0}return o.k!==i.k||o.tx!==i.tx||o.ty!==i.ty||x!==i.active||W!==i.hovered}function a(){if(r()){const c=s.cooling>0||s.pinnedIdx>=0,n=!i.revealDone;(c||n)&&s.step(1/60),A.draw(e),e+=.016,oe(),i.k=o.k,i.tx=o.tx,i.ty=o.ty,i.active=x,i.hovered=W}requestAnimationFrame(a)}requestAnimationFrame(a)}function se(){if(!s||!A)return;for(let p=0;p<s.n;p++)s.alpha[p]=0;s.edgeAlpha=0;const t=performance.now(),e=1400,i=900,r=1800,a=o.k,c=Math.min(1.2,a*1.45),n=E.getBoundingClientRect();let l=1/0,u=-1/0,f=1/0,m=-1/0;for(let p=0;p<s.n;p++){const C=s.x[p],H=s.y[p];C<l&&(l=C),C>u&&(u=C),H<f&&(f=H),H>m&&(m=H)}const v=(l+u)/2,w=(f+m)/2;o.k=c,o.tx=n.width/(2*c)-v,o.ty=n.height/(2*c)-w,A.setView(o);const d=new Float32Array(s.n),g=new Map;for(let p=0;p<s.n;p++){const C=s.community[p];g.has(C)||g.set(C,[]),g.get(C).push(p)}const L=[...g.keys()].sort((p,C)=>g.get(C).length-g.get(p).length),y=e*.6;L.forEach((p,C)=>{const H=g.get(p).sort((I,st)=>s.degree[st]-s.degree[I]),yt=C/L.length*(y*.6);H.forEach((I,st)=>{const wt=st/Math.max(1,H.length-1)*(y*.4);d[I]=yt+wt})});const $=p=>1-Math.pow(1-p,3),M=p=>p<.5?2*p*p:1-Math.pow(-2*p+2,3)/2;function nt(){const p=performance.now()-t,C=520;for(let S=0;S<s.n;S++){const Bt=p-d[S];if(Bt<=0){s.alpha[S]=0;continue}const he=Math.min(1,Bt/C);s.alpha[S]=$(he)}const H=Math.min(1,Math.max(0,(p-(e-i))/i));s.edgeAlpha=$(H);const yt=Math.min(1,p/r),I=c+(a-c)*M(yt),st=n.width/(2*I)-v,wt=n.height/(2*I)-w;if(o.k=I,o.tx=st,o.ty=wt,A.setView(o),X.textContent=Math.round(I*100)+"%",p<Math.max(e,r)+60)requestAnimationFrame(nt);else{for(let S=0;S<s.n;S++)s.alpha[S]=1;s.edgeAlpha=1,o.k=a,o.tx=n.width/(2*a)-v,o.ty=n.height/(2*a)-w,A.setView(o),X.textContent=Math.round(a*100)+"%",s.freeze()}}requestAnimationFrame(nt)}function gt(t=!0){const e=E.getBoundingClientRect();if(e.width===0||e.height===0||!s)return;let i=1/0,r=-1/0,a=1/0,c=-1/0;for(let L=0;L<s.n;L++){const y=s.x[L],$=s.y[L],M=s.radius[L];y-M<i&&(i=y-M),y+M>r&&(r=y+M),$-M<a&&(a=$-M),$+M>c&&(c=$+M)}if(!isFinite(i))return;const n=80,l=Math.max(1,r-i),u=Math.max(1,c-a),f=Math.min((e.width-n*2)/l,(e.height-n*2)/u),m=Math.max(.22,Math.min(1.2,f)),v=(i+r)/2,w=(a+c)/2,d=e.width/(2*m)-v,g=e.height/(2*m)-w;o.tx=d,o.ty=g,o.k=m,A.setView(o),t&&(X.textContent=Math.round(m*100)+"%")}let mt="",ie=0;const Z=new Set,Q=new Map;function oe(){if(!s)return;const t=ie++%4===0,e=E.getBoundingClientRect(),i=o.k,r=s.n,a=tt.hop1;let c;if(t){const l=new Set;if(x!=null){const d=s.idxOf[x];d!=null&&l.add(d);for(const g of a)s.idxOf[g]!=null&&l.add(s.idxOf[g])}W>=0&&l.add(W);const u=i<.3?30:i<.6?14:i<1?7:3;for(let d=0;d<r;d++)s.degree[d]>=u&&l.add(d);for(const d of Z)l.add(d);const f=[];for(const d of l){if(d==null||d<0)continue;const g=s.slugOf[d],L=D[g];if(!L||F!=="all"&&L.type!==F&&d!==s.idxOf[x])continue;const y=(s.x[d]+o.tx)*i,$=(s.y[d]+o.ty)*i;y<-60||y>e.width+60||$<-40||$>e.height+40||f.push({i:d,sx:y,sy:$,r:s.radius[d]*i,title:L.title||g})}const m=d=>{if(d.i===s.idxOf[x])return 1e4;if(d.i===W)return 9e3;if(a.has(s.slugOf[d.i]))return 5e3+s.degree[d.i];const g=Z.has(d.i)?2e3+Math.min(500,(Q.get(d.i)||0)*20):0;return s.degree[d.i]+g};f.sort((d,g)=>m(g)-m(d));const v=[],w=[];for(const d of f){const g=Math.min(140,6.5*d.title.length+10),y={x:d.sx-g/2,y:d.sy+d.r+4,w:g,h:16};let $=!1;for(const M of v)if(y.x<M.x+M.w&&y.x+y.w>M.x&&y.y<M.y+M.h&&y.y+y.h>M.y){$=!0;break}if(!$&&(v.push(y),w.push({...d,box:y}),w.length>80))break}c=w,Z.clear();for(const d of c)Z.add(d.i),Q.set(d.i,(Q.get(d.i)||0)+1);for(const[d]of Q)Z.has(d)||Q.delete(d);Rt=c}else{c=[];for(const l of Rt){const u=l.i,f=s.slugOf[u],m=D[f];if(!m)continue;const v=(s.x[u]+o.tx)*i,w=(s.y[u]+o.ty)*i;if(v<-60||v>e.width+60||w<-40||w>e.height+40)continue;const d=m.title||f,g=Math.min(140,6.5*d.length+10);c.push({i:u,sx:v,sy:w,r:s.radius[u]*i,title:d,box:{x:v-g/2,y:w+s.radius[u]*i+4,w:g,h:16}})}}let n="";for(const l of c){const u=s.slugOf[l.i],f=u===x,m=a.has(u);n+=`<div class="${f?"dirA-lbl active":m?"dirA-lbl hop1":"dirA-lbl"}" style="left:${l.box.x.toFixed(1)}px;top:${l.box.y.toFixed(1)}px;width:${l.box.w.toFixed(0)}px">${b(l.title)}</div>`}n!==mt&&(Yt.innerHTML=n,mt=n)}let Rt=[],tt={hop1:new Set,hop2:new Set};function re(t){const e=new Set(B[t]||[]),i=new Set;for(const r of e)for(const a of B[r]||[])a!==t&&!e.has(a)&&i.add(a);return{hop1:e,hop2:i}}function Ht(){!s||!A||(s.setActive(x),A.setHops(tt))}let k=null;E.addEventListener("mousedown",t=>{if(!s)return;const e=E.getBoundingClientRect(),i=t.clientX-e.left,r=t.clientY-e.top,a=i/o.k-o.tx,c=r/o.k-o.ty,n=s.pickNode(a,c,14/o.k);n>=0?k={kind:"node",idx:n,moved:!1,x0:t.clientX,y0:t.clientY}:k={kind:"pan",x0:t.clientX,y0:t.clientY,tx:o.tx,ty:o.ty}}),window.addEventListener("mousemove",t=>{if(!s)return;const e=E.getBoundingClientRect(),i=t.clientX-e.left,r=t.clientY-e.top;if((i<0||r<0||i>e.width||r>e.height)&&!k)return;const a=i/o.k-o.tx,c=r/o.k-o.ty;if(s.clearHover(),!k){const n=s.pickNode(a,c,14/o.k);W=n,A.setHovered(n),E.style.cursor=n>=0?"pointer":"grab";return}if(k.kind==="pan")o.tx=k.tx+(t.clientX-k.x0)/o.k,o.ty=k.ty+(t.clientY-k.y0)/o.k,A.setView(o),E.classList.add("dragging");else if(k.kind==="node"){const n=t.clientX-k.x0,l=t.clientY-k.y0;!k.moved&&n*n+l*l>9&&(k.moved=!0),k.moved&&(s.pinnedIdx=k.idx,s.pinX=a,s.pinY=c,s.cooling=Math.max(s.cooling,.8),E.classList.add("dragging"))}}),window.addEventListener("mouseup",()=>{if(s){if(k&&k.kind==="node"&&!k.moved){const t=s.slugOf[k.idx];if(t){const e=D[t];(F==="all"||!e||e.type===F)&&N(t)}}s.pinnedIdx=-1,k=null,E.classList.remove("dragging")}}),E.addEventListener("mouseleave",()=>{s&&(s.clearHover(),W=-1,A.setHovered(-1))}),E.addEventListener("wheel",t=>{if(!s)return;t.preventDefault();const e=E.getBoundingClientRect(),i=t.clientX-e.left,r=t.clientY-e.top,a=-t.deltaY*.0015,c=Math.max(.15,Math.min(3,o.k*(1+a))),n=i/o.k-o.tx,l=r/o.k-o.ty;o.k=c,o.tx=i/c-n,o.ty=r/c-l,A.setView(o),X.textContent=Math.round(c*100)+"%"},{passive:!1});function St(t){if(!s)return;const e=E.getBoundingClientRect(),i=e.width/2,r=e.height/2,a=Math.max(.15,Math.min(3,o.k*t)),c=i/o.k-o.tx,n=r/o.k-o.ty;o.k=a,o.tx=i/a-c,o.ty=r/a-n,A.setView(o),X.textContent=Math.round(a*100)+"%"}h("zoom-in").addEventListener("click",()=>St(1.2)),h("zoom-out").addEventListener("click",()=>St(1/1.2)),h("zoom-reset").addEventListener("click",()=>gt(!0));async function N(t){if(!(!t||!D[t])){x=t,tt=re(t),Ht(),z=z[z.length-1]===t?z:[...z,t].slice(-6),s&&(s.cooling=Math.min(1,s.cooling+.15)),at(),Lt.hidden=!0,ae();try{const e=lt.get(t)||await Ot(t);if(x!==t)return;bt=e,ce(e)}catch(e){console.error("[granite] fetch note failed",t,e)}}}async function Ot(t){const e=await fetch("/api/notes/"+encodeURIComponent(t));if(!e.ok)throw new Error("fetch "+t+": "+e.status);const i=await e.json();return lt.set(t,i),i}let et=null;function ae(){if(!s||!x)return;const t=s.idxOf[x];if(t==null||t<0)return;const e=E.getBoundingClientRect();if(e.width===0)return;const i=dt??Math.min(900,window.innerWidth*.62),c=Math.max(280,e.width-i-24)/2,n=e.height/2,l=Math.max(o.k,.55),u=performance.now(),f=520,m=o.tx,v=o.ty,w=o.k;et&&cancelAnimationFrame(et);const d=L=>1-Math.pow(1-L,3);function g(){const L=Math.min(1,(performance.now()-u)/f),y=d(L),$=s.x[t],M=s.y[t],nt=c/l-$,p=n/l-M;o.tx=m+(nt-m)*y,o.ty=v+(p-v)*y,o.k=w+(l-w)*y,A.setView(o),X.textContent=Math.round(o.k*100)+"%",L<1?et=requestAnimationFrame(g):(o.tx=nt,o.ty=p,o.k=l,A.setView(o),et=null)}et=requestAnimationFrame(g)}function Ft(){x=null,bt=null,tt={hop1:new Set,hop2:new Set},Ht(),U.hidden=!0,Lt.hidden=!1,at()}function ce(t){U.hidden=!1;const e=J(t.type),i=pt(t.body),r=$t(t.body),a=Ct(t.body),c=z.map(f=>D[f]).filter(Boolean);it.innerHTML="";const n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("width","12"),n.setAttribute("height","12"),n.setAttribute("viewBox","0 0 24 24"),n.setAttribute("fill","none"),n.setAttribute("stroke","currentColor"),n.setAttribute("stroke-width","1.5"),n.setAttribute("stroke-linecap","round"),n.setAttribute("stroke-linejoin","round"),n.innerHTML='<path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/>',it.appendChild(n),c.forEach((f,m)=>{if(m>0){const w=document.createElement("span");w.className="sep",w.textContent="\u203A",it.appendChild(w)}const v=document.createElement("span");v.className="crumb"+(m===c.length-1?" current":""),v.title=f.title||f.slug,v.textContent=f.title||f.slug,m!==c.length-1&&v.addEventListener("click",()=>N(f.slug)),it.appendChild(v)});const l=[`<span class="dirA-reader-type" style="background:${e.soft};color:${e.hex}">${b(t.type||"note")}</span>`];t.modified&&l.push(`<span>${b(Zt(t.modified))}</span>`),l.push(`<span>\xB7 ${r} min read</span>`),l.push(`<span>\xB7 ${i} words</span>`),Pt.innerHTML=l.join(""),Kt.textContent=t.title||t.slug,Ut.textContent=a;const u=[`<span class="slug">${b(t.slug)}</span>`];for(const f of t.tags||[])u.push(`<span class="tag">#${b(f)}</span>`);Gt.innerHTML=u.join(""),ot.innerHTML=MarkdownRenderer.render(t.body||"",t.outgoing_links||[]),le(t),G.scrollTop=0,ut=0,Et.style.width="0%"}function le(t){const e=[],i=(t.outgoing_links||[]).filter(n=>n.resolved&&n.resolved_slug),r=new Set,a=[];for(const n of i)n.resolved_slug!==t.slug&&(r.has(n.resolved_slug)||(r.add(n.resolved_slug),a.push(n.resolved_slug)));if(a.length){e.push(`<div><div class="dirA-links-section-label">Links out <span class="count">${a.length}</span></div><div class="dirA-links-list">`);for(const n of a){const l=D[n]||{title:n,slug:n,type:"note"},u=J(l.type);e.push(`<button class="dirA-linkcard" data-nav="${b(n)}"><span class="dirA-linkcard-dot" style="background:${u.hex}"></span><div><div class="dirA-linkcard-title">${b(l.title||n)}</div><div class="dirA-linkcard-deck">${b(l.deck||"")}</div></div><span class="dirA-linkcard-arrow">\u2192</span></button>`)}e.push("</div></div>")}const c=t.backlinks||[];if(c.length){const n=new Set,l=[];for(const u of c){const f=u.source_slug||u.slug;if(!f||n.has(f))continue;n.add(f);const m=D[f],v=m?.title||u.source_title||f,w=m?.type||"note";l.push({slug:f,title:v,type:w,context:u.context||""})}e.push(`<div><div class="dirA-links-section-label">Backlinks <span class="count">${l.length}</span></div><div class="dirA-links-list">`);for(const u of l){const f=J(u.type);e.push(`<button class="dirA-linkcard" data-nav="${b(u.slug)}"><span class="dirA-linkcard-dot" style="background:${f.hex}"></span><div><div class="dirA-linkcard-title">${b(u.title)}</div><div class="dirA-linkcard-deck">${b(u.context)}</div></div><span class="dirA-linkcard-arrow">\u2190</span></button>`)}e.push("</div></div>")}Mt.innerHTML=e.join("")}Mt.addEventListener("click",t=>{const e=t.target.closest("[data-nav]");e&&N(e.getAttribute("data-nav"))}),G.addEventListener("scroll",()=>{const t=G.scrollHeight-G.clientHeight;ut=t>0?Math.min(1,G.scrollTop/t):0,Et.style.width=ut*100+"%"}),Jt.addEventListener("mousedown",t=>{t.preventDefault(),U.classList.add("resizing");const e=t.clientX,i=dt??Math.min(900,window.innerWidth*.62);function r(c){const n=e-c.clientX,l=Math.max(480,Math.min(window.innerWidth-80,i+n));dt=l,U.style.setProperty("--reader-w",l+"px")}function a(){U.classList.remove("resizing"),window.removeEventListener("mousemove",r),window.removeEventListener("mouseup",a)}window.addEventListener("mousemove",r),window.addEventListener("mouseup",a)}),h("reader-close").addEventListener("click",Ft),h("reader-prev").addEventListener("click",()=>rt(-1)),h("reader-next").addEventListener("click",()=>rt(1));function rt(t){if(!x){if(!s)return;let a=0;for(let n=1;n<s.n;n++)s.degree[n]>s.degree[a]&&(a=n);const c=s.slugOf[a];c&&N(c);return}const e=[x,...tt.hop1].filter(a=>D[a]);if(e.length<2)return;const i=e.indexOf(x),r=e[((i+t)%e.length+e.length)%e.length];r&&N(r)}ot.addEventListener("click",t=>{const e=t.target.closest("a.wikilink");if(!e)return;t.preventDefault();const i=e.getAttribute("data-slug");i&&N(i)});let vt=0;ot.addEventListener("mouseover",async t=>{const e=t.target.closest("a.wikilink");if(!e)return;const i=e.getAttribute("data-slug");if(!i)return;const r=e.getBoundingClientRect(),a=++vt;try{const c=lt.get(i)||await Ot(i);if(a!==vt||!document.contains(e))return;de(c,r)}catch{}}),ot.addEventListener("mouseout",t=>{t.target.closest("a.wikilink")&&(vt++,at())});function de(t,e){const i=J(t.type),r=Ct(t.body),a=pt(t.body),c=$t(t.body);Y.innerHTML=`
|
|
3
|
+
<div class="wl-preview-header">
|
|
4
|
+
<span class="wl-preview-type" style="background:${i.soft};color:${i.hex}">${b(t.type||"note")}</span>
|
|
5
|
+
<span class="wl-preview-meta">${c}min \xB7 ${a} words</span>
|
|
6
|
+
</div>
|
|
7
|
+
<div class="wl-preview-title">${b(t.title||t.slug)}</div>
|
|
8
|
+
<div class="wl-preview-snippet">${b(r)}</div>
|
|
9
|
+
<div class="wl-preview-footer"><span class="wl-preview-slug">${b(t.slug)}</span></div>
|
|
10
|
+
`,Y.hidden=!1;const n=340;let l=e.bottom+10,u=e.left-20;l+240>window.innerHeight&&(l=e.top-240),u+n+12>window.innerWidth&&(u=window.innerWidth-n-12),u<12&&(u=12),Y.style.top=l+"px",Y.style.left=u+"px"}function at(){Y.hidden=!0,Y.innerHTML=""}h("search-trigger").addEventListener("click",Nt);function Nt(){j.classList.remove("hidden"),q.value="",V.innerHTML='<div class="command-empty">Type to search\u2026</div>',q.focus()}function P(){j.classList.add("hidden"),q.blur()}j.addEventListener("click",t=>{t.target===j&&P()});let It=0,_t=null,R=0,ct=[];q.addEventListener("input",()=>{const t=q.value.trim();if(clearTimeout(_t),!t){V.innerHTML='<div class="command-empty">Type to search\u2026</div>',ct=[],R=0;return}const e=++It;_t=setTimeout(async()=>{try{const r=await(await fetch("/api/search?q="+encodeURIComponent(t))).json();if(e!==It)return;ue(r.results||[])}catch(i){console.error("[granite] search failed",i)}},120)});function ue(t){if(ct=t,R=0,!t.length){V.innerHTML='<div class="command-empty">No matches.</div>';return}V.innerHTML=t.map((e,i)=>{const r=J(e.type);return`<div class="command-result${i===0?" active":""}" data-idx="${i}" data-slug="${b(e.slug)}">
|
|
11
|
+
<span class="command-result-dot" style="background:${r.hex}"></span>
|
|
12
|
+
<div class="command-result-body">
|
|
13
|
+
<div class="command-result-title">${b(e.title||e.slug)}</div>
|
|
14
|
+
<div class="command-result-slug">${b(e.slug)}</div>
|
|
15
|
+
</div>
|
|
16
|
+
<span class="command-result-type" style="background:${r.soft};color:${r.hex}">${b(e.type||"note")}</span>
|
|
17
|
+
</div>`}).join("")}V.addEventListener("click",t=>{const e=t.target.closest(".command-result");if(!e)return;const i=e.getAttribute("data-slug");i&&(P(),N(i))}),q.addEventListener("keydown",t=>{if(t.key==="Escape"){t.preventDefault(),P();return}if(t.key==="ArrowDown"){t.preventDefault(),R=Math.min(ct.length-1,R+1),Wt();return}if(t.key==="ArrowUp"){t.preventDefault(),R=Math.max(0,R-1),Wt();return}if(t.key==="Enter"){t.preventDefault();const e=ct[R];e&&(P(),N(e.slug))}});function Wt(){const t=V.querySelectorAll(".command-result");t.forEach((i,r)=>i.classList.toggle("active",r===R));const e=t[R];e&&e.scrollIntoView({block:"nearest"})}function fe(){window.addEventListener("keydown",t=>{const e=t.target&&t.target.tagName||"",i=e==="INPUT"||e==="TEXTAREA";if((t.metaKey||t.ctrlKey)&&(t.key==="k"||t.key==="K")){t.preventDefault(),j.classList.contains("hidden")?Nt():P();return}if(t.key==="Escape"){if(!j.classList.contains("hidden")){P();return}if(x){Ft();return}return}if(!i){if(t.key==="ArrowLeft"||t.key==="k"){t.preventDefault(),rt(-1);return}if(t.key==="ArrowRight"||t.key==="j"){t.preventDefault(),rt(1);return}}}),window.addEventListener("scroll",at,!0)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",Tt):Tt()})();})();
|