@invisibleloop/pulse 0.2.13 → 0.2.15

package/docs/public/.pulse-ui-version

@@ -1 +1 @@
-0.2.11
+0.2.14

package/docs/server.js

@@ -1,7 +1,15 @@
+import fs                 from 'fs'
 import { createServer }   from '../src/server/index.js'
+import { initLayoutManifest } from './src/lib/layout.js'
 import { metrics }        from './src/lib/stats.js'
 import { metricsStore }   from './src/lib/metrics-store.js'
 metricsStore.current = metrics
+
+// Populate hashed asset paths in layout.js before any page renders
+try {
+  const raw = fs.readFileSync(new URL('./public/dist/manifest.json', import.meta.url), 'utf8')
+  initLayoutManifest(JSON.parse(raw))
+} catch { /* dev: no manifest yet, layout falls back to unhashed paths */ }
 import home               from './src/pages/home.js'
 import howItWorks        from './src/pages/how-it-works.js'
 import faq               from './src/pages/faq.js'

package/docs/src/lib/layout.js

@@ -8,6 +8,12 @@
 import { NAV } from './nav.js'
 import pkg from '../../../package.json' with { type: 'json' }
 
+// Resolve static asset paths through the build manifest (hashed in prod, raw in dev).
+// Populated by initLayoutManifest() in server.js before the server starts.
+let _manifest = {}
+export function initLayoutManifest(m) { _manifest = m }
+const asset = href => _manifest[href] || href
+
 const { version } = pkg
 
 function esc(s) {
@@ -90,8 +96,8 @@ export function renderLayout({ currentHref, content, prev = null, next = null })
         ${prevNextBar(prev, next)}
       </main>
     </div>
-    <script src="/menu.js"></script>
-    <script src="/pulse-ui.js"></script>`
+    <script src="${asset('/menu.js')}" defer></script>
+    <script src="${asset('/pulse-ui.js')}" defer></script>`
 }
 
 /**

package/docs/src/lib/nav.js

@@ -62,14 +62,6 @@ export const NAV = [
       { label: 'Deployment', href: '/deploy' },
     ],
   },
-  {
-    section: 'Integrations',
-    items: [
-      { label: 'Supabase',          href: '/supabase' },
-      { label: 'Auth (Auth0)',      href: '/auth'     },
-      { label: 'Payments (Stripe)', href: '/stripe'   },
-    ],
-  },
   {
     section: 'Reference',
     items: [
@@ -147,6 +139,14 @@ export const NAV = [
       { label: 'Stack',       href: '/components/stack'       },
     ],
   },
+  {
+    section: 'Integrations',
+    items: [
+      { label: 'Supabase',          href: '/supabase' },
+      { label: 'Auth (Auth0)',      href: '/auth'     },
+      { label: 'Payments (Stripe)', href: '/stripe'   },
+    ],
+  },
 ]
 
 export function prevNext(currentHref) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invisibleloop/pulse",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "type": "module",
   "description": "AI-first frontend framework. The spec is the source of truth.",
   "license": "MIT",

package/public/.pulse-ui-version

@@ -1 +1 @@
-0.2.13
+0.2.15

package/scripts/build.js

@@ -404,6 +404,12 @@ fs.rmSync(TMP_DIR, { recursive: true })
 
 await purgeCssStep(pages, manifest, ROOT, OUT_DIR)
 
+// ---------------------------------------------------------------------------
+// JS static assets — minify + hash any .js files directly in public/
+// ---------------------------------------------------------------------------
+
+await jsAssetsStep(ROOT, OUT_DIR, manifest)
+
 // ---------------------------------------------------------------------------
 // Report
 // ---------------------------------------------------------------------------
@@ -420,6 +426,39 @@ for (const [src, bundle] of Object.entries(manifest)) {
 }
 console.log('\n✓ manifest written to public/dist/manifest.json\n')
 
+// ---------------------------------------------------------------------------
+// JS static assets implementation
+// ---------------------------------------------------------------------------
+
+async function jsAssetsStep(root, outDir, manifest) {
+  const publicDir = path.join(root, 'public')
+  if (!fs.existsSync(publicDir)) return
+
+  const jsFiles = fs.readdirSync(publicDir).filter(f => f.endsWith('.js'))
+  if (jsFiles.length === 0) return
+
+  console.log('⚡ Hashing static JS assets...\n')
+
+  for (const file of jsFiles) {
+    const srcPath = path.join(publicDir, file)
+    const source  = fs.readFileSync(srcPath, 'utf8')
+    const { code } = await esbuild.transform(source, { minify: true, target: 'es2018' })
+    const hash    = createHash('sha256').update(code).digest('hex').slice(0, 8)
+    const name    = path.basename(file, '.js')
+    const outName = `${name}-${hash}.js`
+
+    fs.writeFileSync(path.join(outDir, outName), code)
+    manifest[`/${file}`] = `/dist/${outName}`
+
+    const origKb = (Buffer.byteLength(source) / 1024).toFixed(1)
+    const minKb  = (Buffer.byteLength(code)   / 1024).toFixed(1)
+    console.log(`  /${file.padEnd(24)} → /dist/${outName}  (${minKb} kB from ${origKb} kB)`)
+  }
+
+  fs.writeFileSync(path.join(outDir, 'manifest.json'), JSON.stringify(manifest, null, 2))
+  console.log('\n✓ JS asset entries added to manifest\n')
+}
+
 // ---------------------------------------------------------------------------
 // CSS Purge implementation
 // ---------------------------------------------------------------------------

package/src/server/index.js

@@ -1315,6 +1315,13 @@ function resolveSpec(spec, hydrateMap) {
     }
   }
 
+  if (Array.isArray(spec.meta?.scripts)) {
+    const resolvedScripts = spec.meta.scripts.map(href => hydrateMap[href] || href)
+    if (resolvedScripts.some((s, i) => s !== spec.meta.scripts[i])) {
+      resolved = { ...resolved, meta: { ...resolved.meta, scripts: resolvedScripts } }
+    }
+  }
+
   return resolved
 }
 

package/src/ui/charts.js

@@ -117,7 +117,7 @@ export function barChart({
   const ariaLabel = `Bar chart: ${data.map(d => `${d.label ?? ''} ${d.value}`).join(', ')}`
   const clsAttr   = cls ? ` class="${e(cls)}"` : ''
 
-  return `<svg${clsAttr} viewBox="0 0 ${IW} ${height}" preserveAspectRatio="none" height="${height}" style="display:block;width:100%" role="img" aria-label="${e(ariaLabel)}">${grid}${baseline}${bars}</svg>`
+  return `<div${clsAttr} style="width:100%;aspect-ratio:${IW}/${height}"><svg viewBox="0 0 ${IW} ${height}" width="100%" height="100%" style="display:block" role="img" aria-label="${e(ariaLabel)}">${grid}${baseline}${bars}</svg></div>`
 }
 
 // ─── Line chart ───────────────────────────────────────────────────────────────
@@ -193,7 +193,7 @@ export function lineChart({
   const ariaLabel = `Line chart: ${data.map(d => `${d.label ?? ''} ${d.value}`).join(', ')}`
   const clsAttr   = cls ? ` class="${e(cls)}"` : ''
 
-  return `<svg${clsAttr} viewBox="0 0 ${IW} ${height}" preserveAspectRatio="none" height="${height}" style="display:block;width:100%" role="img" aria-label="${e(ariaLabel)}">${grid}${areaPath}${line}${dots}${xlabels}</svg>`
+  return `<div${clsAttr} style="width:100%;aspect-ratio:${IW}/${height}"><svg viewBox="0 0 ${IW} ${height}" width="100%" height="100%" style="display:block" role="img" aria-label="${e(ariaLabel)}">${grid}${areaPath}${line}${dots}${xlabels}</svg></div>`
 }
 
 // ─── Donut chart ──────────────────────────────────────────────────────────────
@@ -321,7 +321,9 @@ export function sparkline({
   }
 
   const clsAttr = cls ? ` class="${e(cls)}"` : ''
-  const dims    = fluid ? `preserveAspectRatio="none" height="${height}" style="display:block;width:100%"` : `width="${width}" height="${height}"`
+  if (fluid) {
+    return `<div${clsAttr} style="width:100%;aspect-ratio:${width}/${height}"><svg viewBox="0 0 ${width} ${height}" width="100%" height="100%" style="display:block" aria-hidden="true">${areaPath}<polyline points="${points}" fill="none" stroke="${c}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>`
+  }
 
-  return `<svg${clsAttr} viewBox="0 0 ${width} ${height}" ${dims} aria-hidden="true">${areaPath}<polyline points="${points}" fill="none" stroke="${c}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`
+  return `<svg${clsAttr} viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" aria-hidden="true">${areaPath}<polyline points="${points}" fill="none" stroke="${c}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`
 }