From 3ea6604406117f63f0bf0cf11d09aeba2c211777 Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Tue, 16 Dec 2025 16:21:56 -0500
Subject: [PATCH 1/7] Fix base URL; simplify UX.

---
 playground/next/editor.mjs |  1 -
 playground/next/index.html | 18 ++----------------
 2 files changed, 2 insertions(+), 17 deletions(-)

diff --git a/playground/next/editor.mjs b/playground/next/editor.mjs
index f37ccca5..f8b340b4 100644
--- a/playground/next/editor.mjs
+++ b/playground/next/editor.mjs
@@ -331,7 +331,6 @@ window.app = createApp({
   options: {
     processingMode: '',
     base: '',
-    baseUrl: '',
     compactArrays: true,
     compactToRelative: true,
     rdfDirection: '',
diff --git a/playground/next/index.html b/playground/next/index.html
index dda25087..160c4055 100644
--- a/playground/next/index.html
+++ b/playground/next/index.html
@@ -168,23 +168,9 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
 
           <div class="inline fields" id="options-api-base">
             <label for="options-api-base" class="two wide field">Base</label>
-            <div class="field">
-              <div class="ui radio checkbox">
-                <input type="radio" id="options-api-base-default" name="base" value="" checked
-                  v-model="options.base">
-                <label for="options-api-base-default">Default</label>
-              </div>
-            </div>
-            <div class="field">
-              <div class="ui radio checkbox">
-                <input type="radio" id="options-api-base-custom" name="base" value="custom"
-                  v-model="options.base">
-                <label for="options-api-base-custom">Custom URL</label>
-              </div>
-            </div>
-            <div class="eleven wide field">
+            <div class="sixteen wide field">
               <input type="text" id="options-api-base-url" placeholder="URL"
-                v-model="options.baseUrl">
+                v-model="options.base">
             </div>
           </div>
 

From 1a174badc38d8a0e2771b71f5b4b0a265d63b78b Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Tue, 16 Dec 2025 16:33:55 -0500
Subject: [PATCH 2/7] Improve Safe Mode error display.

---
 playground/next/editor.mjs | 2 +-
 playground/next/index.html | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/playground/next/editor.mjs b/playground/next/editor.mjs
index f8b340b4..2389e69b 100644
--- a/playground/next/editor.mjs
+++ b/playground/next/editor.mjs
@@ -441,7 +441,7 @@ window.app = createApp({
           setEditorValue(readOnlyEditor, expanded);
           this.parseError = '';
         } catch(err) {
-          this.parseError = err.message;
+          this.parseError = err;
         }
         break;
       case 'compacted':
diff --git a/playground/next/index.html b/playground/next/index.html
index 160c4055..b6c157bf 100644
--- a/playground/next/index.html
+++ b/playground/next/index.html
@@ -277,7 +277,12 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
     </div>
   </div>
   <!-- errors -->
-  <div class="ui error message" v-show="parseError" v-text="parseError"></div>
+  <div class="ui error message" v-show="parseError">
+    <div class="header" v-text="parseError.message"></div>
+    <div class="content" v-if="parseError.details">
+      <pre v-text="JSON.stringify(parseError.details.event, null, 2)"></pre>
+    </div>
+  </div>
   <!-- outputs and renderings -->
   <div class="ui top attached tabular menu">
     <div v-for="(tab, key) in tabs" :class="{ active: outputTab == key, disabled: doc === '' }" class="item" @click="setOutputTab(key)"><i class="icon" :class="tab.icon"></i> <span v-text="tab.label"></span></div>

From e97f3be78fb8ffff65e369ddea27596f8ee44b97 Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Wed, 17 Dec 2025 11:54:15 -0500
Subject: [PATCH 3/7] Update tabs on any change.

---
 playground/next/editor.mjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/playground/next/editor.mjs b/playground/next/editor.mjs
index 2389e69b..b943b4cf 100644
--- a/playground/next/editor.mjs
+++ b/playground/next/editor.mjs
@@ -101,6 +101,7 @@ function editorListener(docName) {
             const parsed = JSON.parse(latestChange);
             this[docName] = parsed;
             this.parseError = '';
+            this.setOutputTab(this.outputTab);
           } catch (err) {
             this.parseError = err.message;
           };

From b21879efb6053e8e2837cb0dde75db0668147f38 Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Wed, 17 Dec 2025 11:54:41 -0500
Subject: [PATCH 4/7] Simplify safemode option; fix boolean states.

---
 playground/next/editor.mjs |  2 +-
 playground/next/index.html | 11 ++---------
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/playground/next/editor.mjs b/playground/next/editor.mjs
index b943b4cf..9310db6c 100644
--- a/playground/next/editor.mjs
+++ b/playground/next/editor.mjs
@@ -335,7 +335,7 @@ window.app = createApp({
     compactArrays: true,
     compactToRelative: true,
     rdfDirection: '',
-    safe: ''
+    safe: false
   },
   tabs: {
     expanded: {icon: 'expand alternate', label: 'Expanded'},
diff --git a/playground/next/index.html b/playground/next/index.html
index b6c157bf..c484584b 100644
--- a/playground/next/index.html
+++ b/playground/next/index.html
@@ -221,21 +221,14 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
               <label for="options-api-safe" class="two wide field">Safe</label>
               <div class="field">
                 <div class="ui radio checkbox">
-                  <input type="radio" id="options-api-safe-default" name="safe" value="" checked
-                    v-model="options.safe">
-                  <label for="options-api-safe-default">Default (False)</label>
-                </div>
-              </div>
-              <div class="field">
-                <div class="ui radio checkbox">
-                  <input type="radio" id="options-api-safe-false" name="safe" value="false"
+                  <input type="radio" id="options-api-safe-false" name="safe" :value="false"
                     v-model="options.safe">
                   <label for="options-api-safe-false">False</label>
                 </div>
               </div>
               <div class="field">
                 <div class="ui radio checkbox">
-                  <input type="radio" id="options-api-safe-true" name="safe" value="true"
+                  <input type="radio" id="options-api-safe-true" name="safe" :value="true"
                     v-model="options.safe">
                   <label for="options-api-safe-true">True</label>
                 </div>

From 3925b198e9ed695ace286e6848ecd161ce040072 Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Wed, 17 Dec 2025 11:56:10 -0500
Subject: [PATCH 5/7] Fix parse error message/details output.

---
 playground/next/index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/playground/next/index.html b/playground/next/index.html
index c484584b..bffa576e 100644
--- a/playground/next/index.html
+++ b/playground/next/index.html
@@ -270,10 +270,10 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
     </div>
   </div>
   <!-- errors -->
-  <div class="ui error message" v-show="parseError">
+  <div class="ui error message" v-show="parseError.message">
     <div class="header" v-text="parseError.message"></div>
-    <div class="content" v-if="parseError.details">
-      <pre v-text="JSON.stringify(parseError.details.event, null, 2)"></pre>
+    <div class="content">
+      <pre v-text="JSON.stringify(parseError?.details?.event, null, 2)"></pre>
     </div>
   </div>
   <!-- outputs and renderings -->

From b9938360e35ebd565b8fd3a95492b1cb4ada568d Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Wed, 17 Dec 2025 15:58:47 -0500
Subject: [PATCH 6/7] Trigger output refresh on option changes.

---
 playground/next/editor.mjs |  2 +-
 playground/next/index.html | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/playground/next/editor.mjs b/playground/next/editor.mjs
index 9310db6c..5045bcca 100644
--- a/playground/next/editor.mjs
+++ b/playground/next/editor.mjs
@@ -431,7 +431,7 @@ window.app = createApp({
     this.setOutputTab(this.outputTab);
   },
   async setOutputTab(value) {
-    if (!value || !this.doc) return;
+    if (!this.doc) return;
     if (value) this.outputTab = value;
     let context = this.contextDoc;
     switch (this.outputTab) {
diff --git a/playground/next/index.html b/playground/next/index.html
index bffa576e..ccd5fdc5 100644
--- a/playground/next/index.html
+++ b/playground/next/index.html
@@ -146,21 +146,21 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
             <div class="field">
               <div class="ui radio checkbox">
                 <input type="radio" id="options-api-processingMode-default" name="processingMode" value="" checked
-                  v-model="options.processingMode">
+                  v-model="options.processingMode" @change="setOutputTab()">
                 <label for="options-api-processingMode-default">Default</label>
               </div>
             </div>
             <div class="field">
               <div class="ui radio checkbox">
                 <input type="radio" id="options-api-processingMode-1-0" name="processingMode" value="json-ld-1.0"
-                  v-model="options.processingMode">
+                  v-model="options.processingMode" @change="setOutputTab()">
                 <label for="options-api-processingMode-1-0">JSON-LD 1.0</label>
               </div>
             </div>
             <div class="field">
               <div class="ui radio checkbox">
                 <input type="radio" id="options-api-processingMode-1-1" name="processingMode" value="json-ld-1.1"
-                  v-model="options.processingMode">
+                  v-model="options.processingMode" @change="setOutputTab()">
                 <label for="options-api-processingMode-1-1">JSON-LD 1.1</label>
               </div>
             </div>
@@ -170,7 +170,7 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
             <label for="options-api-base" class="two wide field">Base</label>
             <div class="sixteen wide field">
               <input type="text" id="options-api-base-url" placeholder="URL"
-                v-model="options.base">
+                v-model="options.base" @change="setOutputTab()">
             </div>
           </div>
 
@@ -179,7 +179,7 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
             <div class="field">
               <div class="ui checkbox">
                 <input type="checkbox" id="options-api-compactArrays"
-                  v-model="options.compactArrays">
+                  v-model="options.compactArrays" @change="setOutputTab()">
                 <label for="options-api-compactArrays">Compact Arrays</label>
               </div>
             </div>
@@ -190,7 +190,7 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
             <div class="field">
               <div class="ui checkbox">
                 <input type="checkbox" id="options-api-compactToRelative"
-                  v-model="options.compactToRelative">
+                  v-model="options.compactToRelative" @change="setOutputTab()">
                 <label for="options-api-compactToRelative">Compact To Relative</label>
               </div>
             </div>
@@ -202,14 +202,14 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
               <div class="field">
                 <div class="ui radio checkbox">
                   <input type="radio" id="options-api-rdfDirection-default" name="rdfDirection" value="" checked
-                    v-model="options.rdfDirection">
+                    v-model="options.rdfDirection" @change="setOutputTab()">
                   <label for="options-api-rdfDirection-default">Default (null)</label>
                 </div>
               </div>
               <div class="field">
                 <div class="ui radio checkbox">
                   <input type="radio" id="options-api-rdfDirection-i18n-datatype" name="rdfDirection" value="i18n-datatype"
-                    v-model="options.rdfDirection">
+                    v-model="options.rdfDirection" @change="setOutputTab()">
                   <label for="options-api-rdfDirection-i18n-datatype">"i18n-datatype"</label>
                 </div>
               </div>
@@ -222,14 +222,14 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
               <div class="field">
                 <div class="ui radio checkbox">
                   <input type="radio" id="options-api-safe-false" name="safe" :value="false"
-                    v-model="options.safe">
+                    v-model="options.safe" @change="setOutputTab()">
                   <label for="options-api-safe-false">False</label>
                 </div>
               </div>
               <div class="field">
                 <div class="ui radio checkbox">
                   <input type="radio" id="options-api-safe-true" name="safe" :value="true"
-                    v-model="options.safe">
+                    v-model="options.safe" @change="setOutputTab()">
                   <label for="options-api-safe-true">True</label>
                 </div>
               </div>

From a09116423d12fae2c167991ce243fc2bd13b5ee3 Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Wed, 17 Dec 2025 16:11:25 -0500
Subject: [PATCH 7/7] Simplify Processing Mode selection UX.

---
 playground/next/editor.mjs | 2 +-
 playground/next/index.html | 7 -------
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/playground/next/editor.mjs b/playground/next/editor.mjs
index 5045bcca..f51c2858 100644
--- a/playground/next/editor.mjs
+++ b/playground/next/editor.mjs
@@ -330,7 +330,7 @@ window.app = createApp({
   inputTab: 'json-ld',
   outputTab: 'expanded',
   options: {
-    processingMode: '',
+    processingMode: 'json-ld-1.1',
     base: '',
     compactArrays: true,
     compactToRelative: true,
diff --git a/playground/next/index.html b/playground/next/index.html
index ccd5fdc5..599b766d 100644
--- a/playground/next/index.html
+++ b/playground/next/index.html
@@ -143,13 +143,6 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
         <form class="ui form">
           <div class="inline fields" id="options-api-processingMode">
             <label for="options-api-processingMode" class="two wide field">Processing Mode</label>
-            <div class="field">
-              <div class="ui radio checkbox">
-                <input type="radio" id="options-api-processingMode-default" name="processingMode" value="" checked
-                  v-model="options.processingMode" @change="setOutputTab()">
-                <label for="options-api-processingMode-default">Default</label>
-              </div>
-            </div>
             <div class="field">
               <div class="ui radio checkbox">
                 <input type="radio" id="options-api-processingMode-1-0" name="processingMode" value="json-ld-1.0"