src/ts/musehub.ts · gabriel/musehub

return `<span class="badge" style="background:var(--bg-overlay);color:var(--color-purple);border:1px solid var(--color-purple-bg)">${escHtml(scope)}</span>`;

110

}

111

112

export function parseCommitMeta(message: string): Record<string, string> {

113

const meta: Record<string, string> = {};

const patterns = [

/section:([\w-]+)/i,

/track:([\w-]+)/i,

/key:([\w#b]+\s*(?:major|minor|maj|min)?)/i,

/tempo:(\d+)/i,

/bpm:(\d+)/i,

];

const keys = ['section', 'track', 'key', 'tempo', 'bpm'];

122

patterns.forEach((re, i) => {

123

const m = message.match(re);

124

if (m) meta[keys[i]] = m[1];

});

return meta;

}

/* ═══════════════════════════════════════════════════════════════

130

* 4. HTMX integration hooks

131

* ═══════════════════════════════════════════════════════════════ */

132

133

/* ═══════════════════════════════════════════════════════════════

134

* Global surface — attach exports to window for inline handlers

135

* ═══════════════════════════════════════════════════════════════ */

declare global {

interface Window {

apiFetch: (path: string, opts?: RequestInit) => Promise<unknown>;

140

fmtDate: (iso: string | null | undefined) => string;

141

fmtRelative: (iso: string | null | undefined) => string;

142

shortSha: (sha: string | null | undefined) => string;

143

fmtDuration: (seconds: number | null | undefined) => string;

144

escHtml: (s: unknown) => string;

145

parseCommitMessage: (msg: string | null | undefined) => ParsedCommit;

146

commitTypeBadge: (type: string | null | undefined) => string;

147

commitScopeBadge: (scope: string | null | undefined) => string;

148

parseCommitMeta: (message: string) => Record<string, string>;

149

switchTab?: (tab: string, filter?: string, page?: number) => void;

150

renderFromObjectId?: (repoId: string, objectId: string, container: HTMLElement | null) => void;

151

renderFromUrl?: (url: string, container: HTMLElement | null) => void;

152

initRepoNav?: (repoId: string) => void;

153

authHeaders?: () => Record<string, string>;

154

// Alpine.js CSP build global — available after alpine:init fires

155

Alpine?: { data(name: string, factory: () => object): void };

156

// WaveSurfer global (loaded from CDN)

157

WaveSurfer?: { create: (opts: Record<string, unknown>) => unknown };

}

}

/* ═══════════════════════════════════════════════════════════════

162

* 7. Global page initialisation (replaces base.html inline script)

163

* ═══════════════════════════════════════════════════════════════ */

164

165

function initPageGlobals(): void {

166

// Reveal the page (FOUC prevention: html starts at opacity:0, css-ready triggers fade-in).

167

// This replaces the inline <script> that previously added css-ready on initial load.

168

document.documentElement.classList.add('css-ready');

169

170

// Dispatch to the active page module via the #page-data JSON element

171

const pageDataEl = document.getElementById('page-data');

172

if (pageDataEl) {

173

try {

174

const pageData = JSON.parse(pageDataEl.textContent ?? '{}') as Record<string, unknown>;

175

dispatchPageModule(pageData);

176

} catch (_) { /* malformed JSON — ignore */ }

}

}

function dispatchPageModule(data: Record<string, unknown>): void {

181

const page = data['page'] as string | undefined;

182

if (!page) return;

183

// Page modules register themselves on window.MusePages

184

const pages = (window as unknown as { MusePages?: Record<string, (d: Record<string, unknown>) => void> }).MusePages;

185

if (pages && typeof pages[page] === 'function') {

pages[page](data);

}

}

// Prevent click-bubbling on symbol deep-links inside clickable rows.

191

// Replaces onclick="event.stopPropagation()" in intel page templates.

192

document.addEventListener('click', (e) => {

193

if ((e.target as Element).closest?.('.sym-deep-link')) e.stopPropagation();

194

}, true);

195

196

// Run on initial hard load

197

document.addEventListener('DOMContentLoaded', initPageGlobals);

198

199

// ── Guard: never let HTMX boost intercept /raw/ URLs ──────────────────────────

200

// Raw endpoints return text/plain — if HTMX boosts them it dumps plain text

201

// into the DOM and breaks the history stack. We cancel the request and let

202

// the browser navigate normally (opens in same tab like a plain <a> click).

203

document.addEventListener('htmx:beforeRequest', (evt: Event) => {

204

const detail = (evt as CustomEvent).detail as { pathInfo?: { requestPath?: string }; xhr?: XMLHttpRequest };

205

const path: string = detail?.pathInfo?.requestPath ?? '';

206

if (path.includes('/raw/')) {

207

evt.preventDefault();

208

window.location.href = path;

}

});

// ── HTMX boost navigation: re-init page globals, no opacity manipulation ──

213

// FOUC is only a risk on the very first page load (handled by the inline

214

// CSS + <script> in base.html). HTMX swaps reuse the already-loaded CSS,

215

// so removing css-ready here would only cause a white flash (the browser

216

// backdrop shines through the opacity:0 html element).

217

document.addEventListener('htmx:afterSettle', () => {

218

document.documentElement.classList.add('css-ready');

initPageGlobals();

});

window.apiFetch = apiFetch;

223

window.fmtDate = fmtDate;

224

window.fmtRelative = fmtRelative;

225

window.shortSha = shortSha;

226

window.fmtDuration = fmtDuration;

227

window.escHtml = escHtml;

228

window.parseCommitMessage = parseCommitMessage;

229

window.commitTypeBadge = commitTypeBadge;

230

window.commitScopeBadge = commitScopeBadge;

231

window.parseCommitMeta = parseCommitMeta;