@invisibleloop/pulse 0.6.2 → 0.7.0

package/package.json

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

package/public/.pulse-ui-version

@@ -1 +1 @@
-0.6.2
+0.7.0

package/scripts/build.js

@@ -145,7 +145,38 @@ function isInsideString(source, pos) {
       if (c === '"' || c === "'" || c === '`') { stack.push(c); i++; continue }
       i++; continue
     }
-    // top-level
+    // Top level — handle comments and regex literals before string delimiters.
+    // Without this, a `"` inside a regex literal (e.g. /"/g) or a comment would
+    // be mistaken for an opening string delimiter, causing all subsequent keys to
+    // be treated as "inside a string" and never stripped.
+    if (c === '/') {
+      if (source[i + 1] === '/') {          // line comment — skip to end of line
+        while (i < pos && source[i] !== '\n') i++
+        continue
+      }
+      if (source[i + 1] === '*') {           // block comment — skip to */
+        const end = source.indexOf('*/', i + 2)
+        i = end < 0 ? pos : end + 2
+        continue
+      }
+      // Regex literal heuristic: / is a regex when not preceded by ) ] or alnum.
+      // Division (a / b) always follows one of those; regex follows operators, keywords, etc.
+      let prev = ''
+      for (let k = i - 1; k >= 0; k--) {
+        if (source[k] !== ' ' && source[k] !== '\t') { prev = source[k]; break }
+      }
+      if (!/[a-zA-Z0-9_$)\]]/.test(prev)) {
+        i++  // skip opening /
+        while (i < pos) {
+          if (source[i] === '\\') { i += 2; continue }
+          if (source[i] === '/') { i++; break }   // closing /
+          if (source[i] === '\n') break            // regex can't span lines
+          i++
+        }
+        while (i < pos && /[gimsuy]/.test(source[i])) i++  // skip flags
+        continue
+      }
+    }
     if (c === '"' || c === "'" || c === '`') { stack.push(c) }
     i++
   }
@@ -379,7 +410,15 @@ const NAVIGATE_PATH = new URL('../src/runtime/navigate.js', import.meta.url).pat
 
 const PAGES_DIR = path.join(ROOT, 'src', 'pages')
 
-const bootstrapFiles = pages.map(({ filePath }) => {
+const bootstrapFiles = pages.flatMap(({ filePath }) => {
+  // Strip server-only keys/imports to check what's left for the client.
+  // Skip specs with no view — these are API routes or raw content specs
+  // (using render: instead of view:) that have no client-side code. Including
+  // them in the bundle fragments the shared runtime chunk unnecessarily.
+  const source   = fs.readFileSync(filePath, 'utf8')
+  const stripped = stripServerOnlyImports(stripServerOnlyKeys(source))
+  if (!/\bview\s*:/.test(stripped)) return []
+
   // Use the path relative to src/pages/ so nested pages get unique names.
   // e.g. src/pages/api/products.js → 'api--products' (not 'products')
   const relToPages    = path.relative(PAGES_DIR, filePath)
@@ -404,7 +443,7 @@ if (root && !root.dataset.pulseMounted) {
 export default spec
 `)
 
-  return { filePath, bootstrapPath, name }
+  return [{ filePath, bootstrapPath, name }]
 })
 
 // ---------------------------------------------------------------------------

package/scripts/strip-server.test.js

@@ -73,6 +73,18 @@ function isInsideString(source, pos) {
       if (c === '"' || c === "'" || c === '`') { stack.push(c); i++; continue }
       i++; continue
     }
+    if (c === '/') {
+      if (source[i + 1] === '/') { while (i < pos && source[i] !== '\n') i++; continue }
+      if (source[i + 1] === '*') { const end = source.indexOf('*/', i + 2); i = end < 0 ? pos : end + 2; continue }
+      let prev = ''
+      for (let k = i - 1; k >= 0; k--) { if (source[k] !== ' ' && source[k] !== '\t') { prev = source[k]; break } }
+      if (!/[a-zA-Z0-9_$)\]]/.test(prev)) {
+        i++
+        while (i < pos) { if (source[i] === '\\') { i += 2; continue } if (source[i] === '/') { i++; break } if (source[i] === '\n') break; i++ }
+        while (i < pos && /[gimsuy]/.test(source[i])) i++
+        continue
+      }
+    }
     if (c === '"' || c === "'" || c === '`') { stack.push(c) }
     i++
   }
@@ -257,6 +269,21 @@ test('server: inside a double-quoted string is not stripped',
   'export default {\n  route: \'/docs\',\n  view: () => "<pre>server: { data: async () => {} }</pre>"\n}'
 )
 
+test('server/meta not fooled by regex literal containing double quote (/"/g)',
+  'const esc = s => s.replace(/"/g, \'&quot;\')\nexport default {\n  meta: { title: \'Page\', description: \'Desc\' },\n  server: { data: async () => [] },\n  view: () => \'\'\n}',
+  'const esc = s => s.replace(/"/g, \'&quot;\')\nexport default {\n  view: () => \'\'\n}'
+)
+
+test('server not fooled by line comment containing double quote',
+  'export default {\n  // server: "comment"\n  server: { data: async () => [] },\n  view: () => \'\'\n}',
+  'export default {\n  // server: "comment"\n  view: () => \'\'\n}'
+)
+
+test('server not fooled by block comment containing double quote',
+  'export default {\n  /* server: "comment" */\n  server: { data: async () => [] },\n  view: () => \'\'\n}',
+  'export default {\n  /* server: "comment" */\n  view: () => \'\'\n}'
+)
+
 test('meta object is stripped (client runtime never reads spec.meta)',
   `export default {\n  route: '/blog',\n  meta: {\n    title: async (ctx) => fetchPost(ctx).frontmatter.title,\n    styles: ['/pulse-ui.css'],\n  },\n  view: () => ''\n}`,
   `export default {\n  route: '/blog',\n  view: () => ''\n}`

package/src/cli/scaffold.js

@@ -95,6 +95,9 @@ ${port !== 3000 ? `  port: ${port},\n` : ''}}
 
   // settings.json — hooks that enforce correct agent behaviour
   write(targetDir, '.claude/settings.json', JSON.stringify({
+    enabledPlugins: {
+      'frontend-design@claude-plugins-official': true,
+    },
     hooks: {
       SessionStart: [
         {
@@ -346,6 +349,19 @@ public/app.css   ← global stylesheet
 
 The MCP guide is the single source of truth. Follow it for all technical decisions, component usage, and the mandatory verification workflow.
 
+## Design — do this before writing any HTML
+
+Before planning any new page or component, use the \`frontend-design\` plugin to establish the visual direction:
+
+1. Call the plugin's design tools with the page brief (what it does, who it's for, the tone)
+2. The plugin will return decisions — colour palette, typography, spacing scale, component variants, layout approach
+3. **Apply those decisions as CSS custom property overrides in \`public/app.css\`** — not as inline styles or class hacks
+4. Document the chosen tokens at the top of \`public/app.css\` so every page stays consistent
+
+The plugin informs *what* to build visually. The Pulse component library is *how* you build it. Use both — the plugin gives direction, the components implement it.
+
+**Do not default to stock component styles.** If the design plugin gives you a colour, use it. If it suggests a layout pattern, follow it. Every page should reflect deliberate design decisions, not the component library defaults.
+
 ## Before writing any code
 
 **Always present a plan and wait for the user to confirm before writing a single line of code.**

package/src/md/index.js

@@ -251,7 +251,7 @@ function renderBlocks(blocks) {
           const task = item.match(/^\[([ xX])\] (.*)/)
           if (task) {
             const checked = task[1].toLowerCase() === 'x' ? ' checked' : ''
-            return `<li class="task-list-item"><input type="checkbox" disabled${checked}> ${renderListItem(task[2])}</li>`
+            return `<li class="task-list-item"><label class="ui-checkbox ui-checkbox--disabled"><input type="checkbox" class="ui-checkbox-input" disabled${checked}><span class="ui-checkbox-box" aria-hidden="true"></span><span class="ui-checkbox-label">${renderListItem(task[2])}</span></label></li>`
           }
           return `<li>${renderListItem(item)}</li>`
         })

package/src/md/md.test.js

@@ -30,18 +30,18 @@ console.log('\nTask list (checkbox) rendering\n')
 
 test('unchecked item renders disabled checkbox', () => {
   const { html } = parseMd('- [ ] Buy milk')
-  assert(html.includes('<input type="checkbox" disabled>'), `Got: ${html}`)
+  assert(html.includes('<input type="checkbox" class="ui-checkbox-input" disabled>'), `Got: ${html}`)
   assert(html.includes('Buy milk'), `Got: ${html}`)
 })
 
 test('checked item renders checked disabled checkbox', () => {
   const { html } = parseMd('- [x] Done')
-  assert(html.includes('<input type="checkbox" disabled checked>'), `Got: ${html}`)
+  assert(html.includes('<input type="checkbox" class="ui-checkbox-input" disabled checked>'), `Got: ${html}`)
 })
 
 test('uppercase X is also treated as checked', () => {
   const { html } = parseMd('- [X] Done')
-  assert(html.includes('<input type="checkbox" disabled checked>'), `Got: ${html}`)
+  assert(html.includes('<input type="checkbox" class="ui-checkbox-input" disabled checked>'), `Got: ${html}`)
 })
 
 test('task list items get task-list-item class', () => {
@@ -49,6 +49,14 @@ test('task list items get task-list-item class', () => {
   assert(html.includes('class="task-list-item"'), `Got: ${html}`)
 })
 
+test('task item checkbox is wrapped in a label for accessibility', () => {
+  const { html } = parseMd('- [ ] Buy milk')
+  assert(html.includes('class="ui-checkbox ui-checkbox--disabled"'), `Got: ${html}`)
+  assert(html.includes('<input type="checkbox" class="ui-checkbox-input" disabled>'), `Got: ${html}`)
+  assert(html.includes('<span class="ui-checkbox-box" aria-hidden="true">'), `Got: ${html}`)
+  assert(html.includes('<span class="ui-checkbox-label">Buy milk</span>'), `Got: ${html}`)
+})
+
 test('task list ul gets contains-task-list class', () => {
   const { html } = parseMd('- [ ] Item one\n- [x] Item two')
   assert(html.includes('class="contains-task-list"'), `Got: ${html}`)
@@ -73,8 +81,8 @@ test('task item label text is rendered as inline markdown', () => {
 
 test('multiple items preserve checked state independently', () => {
   const { html } = parseMd('- [ ] Unchecked\n- [x] Checked\n- [ ] Also unchecked')
-  const checkedCount   = (html.match(/checked>/g) || []).length
-  const uncheckedCount = (html.match(/<input type="checkbox" disabled>/g) || []).length
+  const checkedCount   = (html.match(/disabled checked>/g) || []).length
+  const uncheckedCount = (html.match(/disabled>/g) || []).length
   assert(checkedCount === 1,   `Expected 1 checked, got ${checkedCount}`)
   assert(uncheckedCount === 2, `Expected 2 unchecked, got ${uncheckedCount}`)
 })