fix(browser): address Copilot review on #70

- start(): accept 'panes' in the library-API browser validation (not just the
  CLI path) so start({ browser: 'panes' }) no longer throws.
- package.json: add data-browser-panes.{js,css} + examples/ to the files
  allowlist so the jsDelivr/npm asset exists after publish (was a guaranteed
  404 for --browser panes).
- panes: normalize multi-valued JSON-LD props — idOf() unwraps arrays and a
  new h.first helper takes the first value, so array-valued title/recalls/
  created/summary render correctly instead of '' or [object Object].

Author: melvincarvalho

data-browser-panes.js

@@ -11,7 +11,8 @@
 //
 // Single file, no build, no framework. Local pane contract (ES module):
 //   export default { canHandle(node, h) -> boolean, render(node, h) -> htmlString }
-// where h = { escape, prop, propAll, idOf, types, host, fmtDate, localName }.
+// where h = { escape, prop, propAll, first, idOf, types, host, fmtDate, localName }.
+// (prop may return an array for multi-valued JSON-LD; use h.first for single values.)
 
 document.head.insertAdjacentHTML('beforeend', `<style>
 body{font:14px/1.55 system-ui,-apple-system,sans-serif;margin:0;color:#222;background:#f3eee5}
@@ -86,7 +87,7 @@ body{font:14px/1.55 system-ui,-apple-system,sans-serif;margin:0;color:#222;backg
   async function renderLocalPane(node) {
     const panes = await loadLocalPanes();
     if (!panes.length) return null;
-    const h = { escape, prop, propAll, idOf, types: typesOf, host: hostOf, fmtDate: fmtDay, localName: localType };
+    const h = { escape, prop, propAll, first: firstVal, idOf, types: typesOf, host: hostOf, fmtDate: fmtDay, localName: localType };
     for (const p of panes) {
       try { if (p.canHandle(node, h)) return p.render(node, h); } catch (e) { /* skip */ }
     }
@@ -135,7 +136,9 @@ body{font:14px/1.55 system-ui,-apple-system,sans-serif;margin:0;color:#222;backg
     return undefined;
   }
   function propAll(node, key) { const v = prop(node, key); return v == null ? [] : (Array.isArray(v) ? v : [v]); }
-  function idOf(v) { return v == null ? '' : (typeof v === 'string' ? v : (v['@id'] || v.id || '')); }
+  // First value of a possibly-multi-valued JSON-LD property.
+  function firstVal(v) { return Array.isArray(v) ? v[0] : v; }
+  function idOf(v) { if (Array.isArray(v)) v = v[0]; return v == null ? '' : (typeof v === 'string' ? v : (v['@id'] || v.id || '')); }
   function hostOf(u) { try { return new URL(u).host; } catch (e) { return u; } }
   function fmtDay(iso) {
     if (!iso) return '';

examples/panes/bookmark.js

@@ -10,9 +10,9 @@ export default {
 
   render(node, h) {
     const url = h.idOf(h.prop(node, 'recalls'));
-    const title = h.prop(node, 'title') || url || 'Untitled bookmark';
+    const title = h.first(h.prop(node, 'title')) || url || 'Untitled bookmark';
     const site = h.host(url);
-    const date = h.fmtDate(h.prop(node, 'created'));
+    const date = h.fmtDate(h.first(h.prop(node, 'created')));
     const fav = url ? h.escape(new URL('/favicon.ico', url).href) : '';
     return `<div style="font-family:Inter,-apple-system,sans-serif;padding:24px 0 8px;">
       <div style="font-family:Georgia,serif;font-size:14px;font-style:italic;color:#999;margin-bottom:18px;">Bookmark</div>

examples/panes/tracker.js

@@ -15,8 +15,8 @@ export default {
       return s === 'COMPLETED' || s === 'CANCELLED';
     };
     const active = issues.filter(i => !done(i));
-    const title = h.prop(node, 'title') || 'Tasks';
-    const row = i => `<li style="padding:8px 0;border-bottom:1px solid rgba(127,127,127,0.12);${done(i) ? 'color:#aaa;text-decoration:line-through;' : ''}">${done(i) ? '☑' : '☐'} ${h.escape(h.prop(i, 'summary') || h.idOf(i))}</li>`;
+    const title = h.first(h.prop(node, 'title')) || 'Tasks';
+    const row = i => `<li style="padding:8px 0;border-bottom:1px solid rgba(127,127,127,0.12);${done(i) ? 'color:#aaa;text-decoration:line-through;' : ''}">${done(i) ? '☑' : '☐'} ${h.escape(h.first(h.prop(i, 'summary')) || h.idOf(i))}</li>`;
     return `<div style="font-family:Inter,-apple-system,sans-serif;padding:24px 0 8px;">
       <div style="font-family:Georgia,serif;font-size:14px;font-style:italic;color:#999;margin-bottom:6px;">Tasks</div>
       <div style="font-size:26px;font-weight:600;color:#1a1a1a;margin-bottom:4px;">${h.escape(title)}</div>

lib/start.js

@@ -206,8 +206,8 @@ export async function start(userOptions = {}) {
   if (!Number.isInteger(options.port) || options.port < 1 || options.port > 65535) {
     throw new Error(`Invalid port: ${options.port}`);
   }
-  if (options.browser !== 'folder' && options.browser !== 'json') {
-    throw new Error(`Invalid browser: ${options.browser} (must be 'folder' or 'json')`);
+  if (options.browser !== 'folder' && options.browser !== 'json' && options.browser !== 'panes') {
+    throw new Error(`Invalid browser: ${options.browser} (must be 'folder', 'json', or 'panes')`);
   }
 
   if (!existsSync(options.root)) {

package.json

@@ -17,6 +17,9 @@
     "data-browser.css",
     "data-browser-folder.js",
     "data-browser-folder.css",
+    "data-browser-panes.js",
+    "data-browser-panes.css",
+    "examples/",
     "welcome.html",
     "signin.html",
     "signin.html.acl",