From 4349ae572b3f483d94757574925c414cc5ddb4fe Mon Sep 17 00:00:00 2001
From: Melvin Carvalho <melvincarvalho@gmail.com>
Date: Sat, 16 May 2026 06:22:10 +0200
Subject: [PATCH 1/2] fix: pretty-print JSON-LD + visible cream palette (data
 browser)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two visual fixes to the minimal data browser shipped in 0.0.11:

1. JSON-LD is now pretty-printed with 2-space indent before being
   handed to the URI-linking regex. The previous version just dumped
   the raw single-line JSON; white-space:pre-wrap made it wrap but
   the result was a wall of text with no visible structure. The PR
   description that introduced this file used the word "pretty-print"
   but the code that landed didn't actually parse+stringify.

2. CSS palette tuned so the styling is actually visible:
   - Body background #fafaf8 -> #f3eee5 (warm cream that's clearly
     distinguishable from white at normal monitor calibration; the
     old value was 5 RGB units off from #fff so the card vanished)
   - Card border-radius 8 -> 12px, padding 1 -> 1.5em, shadow opacity
     6% -> 8% with a softer larger blur for a visible lift
   - Link color #0366d6 -> #0a66c2 (more saturated, reads better
     against the cream)

The CSS rules in 0.0.11 were applying correctly — verified by
inspecting computed styles. The bug was that I picked colors too
close to each other for the difference to be perceivable, not that
the rules weren't taking effect.

Bumps jspod to 0.0.12.

Refs #1
---
 data-browser.css | 6 +++---
 data-browser.js  | 9 +++++----
 package.json     | 2 +-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/data-browser.css b/data-browser.css
index ecb4fc2..2888fec 100644
--- a/data-browser.css
+++ b/data-browser.css
@@ -1,6 +1,6 @@
 /* jspod minimal data-browser styles. Auto-loaded by JSS as the .css
    sibling of data-browser.js (see generateModuleDatabrowserHtml). */
-body{font:14px/1.6 system-ui,-apple-system,sans-serif;margin:2em;color:#222;background:#fafaf8}
-#mashlib pre{padding:1em;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:auto;white-space:pre-wrap;word-break:break-all}
-a{color:#0366d6;text-decoration:none}
+body{font:14px/1.6 system-ui,-apple-system,sans-serif;margin:2em;color:#222;background:#f3eee5}
+#mashlib pre{padding:1.5em;background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.08);overflow:auto;white-space:pre-wrap;word-break:break-all}
+a{color:#0a66c2;text-decoration:none}
 a:hover{text-decoration:underline}
diff --git a/data-browser.js b/data-browser.js
index 522537d..eb8281d 100644
--- a/data-browser.js
+++ b/data-browser.js
@@ -1,5 +1,6 @@
 // jspod minimal data browser — the page is the data. JSS embeds the
-// resource as JSON-LD in #dataisland; this module just makes it visible
-// in #mashlib with clickable URIs. See data-browser.css for the styling.
-const d=document.getElementById('dataisland'),m=document.getElementById('mashlib');
-m.innerHTML=`<pre>${d.textContent.replace(/https?:\/\/[^"\s]+/g,'<a href="$&">$&</a>')}</pre>`
+// resource as JSON-LD in #dataisland; this module parses it, pretty-
+// prints with 2-space indent, and renders to #mashlib with clickable
+// URIs. See data-browser.css for the styling.
+const d=JSON.parse(document.getElementById('dataisland').textContent);
+document.getElementById('mashlib').innerHTML='<pre>'+JSON.stringify(d,null,2).replace(/https?:\/\/[^"\s]+/g,'<a href="$&">$&</a>')+'</pre>'
diff --git a/package.json b/package.json
index 72c8470..da82dd2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jspod",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "JavaScript Solid Pod - Just works, batteries included",
   "type": "module",
   "main": "index.js",

From bc6fa8e42885cfb09eb09fe44bd6890b164d532e Mon Sep 17 00:00:00 2001
From: Melvin Carvalho <melvincarvalho@gmail.com>
Date: Sat, 16 May 2026 06:28:53 +0200
Subject: [PATCH 2/2] refactor: collapse data browser into a single
 self-styling JS file
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CSS now lives inside data-browser.js as a <style> tag injected on
load. data-browser.css becomes an intentionally-empty stub so JSS's
auto-fetch of the .css sibling (mashlib/index.js:307) still 200s —
no console warning, no two-file version-skew risk, one file owns
the experience. A future JSS PR can drop the sibling fetch and the
stub goes away entirely.

Refs #1
---
 data-browser.css | 10 ++++------
 data-browser.js  | 11 +++++++----
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/data-browser.css b/data-browser.css
index 2888fec..eff53cb 100644
--- a/data-browser.css
+++ b/data-browser.css
@@ -1,6 +1,4 @@
-/* jspod minimal data-browser styles. Auto-loaded by JSS as the .css
-   sibling of data-browser.js (see generateModuleDatabrowserHtml). */
-body{font:14px/1.6 system-ui,-apple-system,sans-serif;margin:2em;color:#222;background:#f3eee5}
-#mashlib pre{padding:1.5em;background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.08);overflow:auto;white-space:pre-wrap;word-break:break-all}
-a{color:#0a66c2;text-decoration:none}
-a:hover{text-decoration:underline}
+/* Intentionally empty. Styles live inside data-browser.js so the
+   browser is a single file. JSS auto-fetches this sibling URL
+   (mashlib/index.js:307); shipping an empty 200 keeps the console
+   warning-free until JSS makes the .css fetch optional. */
diff --git a/data-browser.js b/data-browser.js
index eb8281d..70258cd 100644
--- a/data-browser.js
+++ b/data-browser.js
@@ -1,6 +1,9 @@
 // jspod minimal data browser — the page is the data. JSS embeds the
-// resource as JSON-LD in #dataisland; this module parses it, pretty-
-// prints with 2-space indent, and renders to #mashlib with clickable
-// URIs. See data-browser.css for the styling.
-const d=JSON.parse(document.getElementById('dataisland').textContent);
+// resource as JSON-LD in #dataisland; this single module:
+//   1. Injects its own <style> (no separate .css fetch needed)
+//   2. Parses the JSON-LD and pretty-prints with 2-space indent
+//   3. Renders into #mashlib with every URI as a clickable <a>
+// Goal: a baseline mashlib that fits in one file, ~800 bytes total.
+document.head.insertAdjacentHTML('beforeend','<style>body{font:14px/1.6 system-ui,-apple-system,sans-serif;margin:2em;color:#222;background:#f3eee5}#mashlib pre{padding:1.5em;background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.08);overflow:auto;white-space:pre-wrap;word-break:break-all}a{color:#0a66c2;text-decoration:none}a:hover{text-decoration:underline}</style>')
+const d=JSON.parse(document.getElementById('dataisland').textContent)
 document.getElementById('mashlib').innerHTML='<pre>'+JSON.stringify(d,null,2).replace(/https?:\/\/[^"\s]+/g,'<a href="$&">$&</a>')+'</pre>'