lutaml-jsonschema 0.1.10 → 0.1.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c2817082f5751466a6e7bae6f77310304d3b58127a392c1e60341d561b65706a
-  data.tar.gz: 2c6f4b882f26600890a7a21a241e3a3709fa155df21097ca3c484513cef5e4ba
+  metadata.gz: c119b203d422df51dd4ef79c0e28ae59d1a3e8a01536c74baef3931f35481428
+  data.tar.gz: fd6e00bacd9f5d5ea9bab4afdff42adb786e1b0d7293f571c71e1e1dacb1d8f6
 SHA512:
-  metadata.gz: 4f1ca6699188d725ac053c230043316a96dbdb1fda2cf1c880a48e848ab31c6d4270e19f37f392c10d3205eafb27f529f5443f00fa39d20ec5f7f06dc32daa64
-  data.tar.gz: 905835a47ca2348e8bd2cd5b5f2bc526a115782fbd3264c61b212e7c61192e87d6dbd1e9193f0d9598c9f4bf28916f410cf8fcee0919f1b747cf8f6119ac0516
+  metadata.gz: 56edc028665efb3442c0ffe58eb7fe62576c02686cabf184fc2337749c6d460e9a7f817aef2e7737a8cc6b1a2dc1bd61ee0765ae5df558df1fde73e9ac0cc0a3
+  data.tar.gz: fed677f3dfb49ad12f056a494e73c2dceee12929f7f15c1753a6aac9d03387bba4ab1aa68c33bdb2ee152af46dd4a0a76898d3466575ad88cf0fdf944af766d1

data/CHANGELOG.md

@@ -1,5 +1,15 @@
 ## [Unreleased]
 
+## [0.1.11] - 2026-05-09
+
+### Redoc-style UX improvements (round 5)
+
+- Dark JSON preview panel with themed syntax colors in SchemaBuilder
+- Select-on-click for source viewer and builder JSON blocks (double-click to select all)
+- Print stylesheet: hides sidebar, header, controls; content prints full-width
+- Format badges display with angle brackets (`<email>`) and accent color
+- Responsive builder layout: stacks vertically on mobile (<768px)
+
 ## [0.1.10] - 2026-05-09
 
 ### Redoc-style UX improvements

data/frontend/src/components/SchemaBuilder.vue

@@ -16,7 +16,7 @@
             <span class="font-mono">{{ field.prop.name }}</span>
           </button>
           <span class="field-type-badge" :class="typeBadgeClass(field.prop)">{{ displayType(field.prop, field.resolvedDef?.title || field.resolvedDef?.name) }}</span>
-          <span v-if="field.prop.format" class="field-format-badge">{{ field.prop.format }}</span>
+          <span v-if="field.prop.format" class="field-format-badge">&lt;{{ field.prop.format }}&gt;</span>
           <span v-if="field.prop.contentMediaType" class="field-format-badge">content-type: {{ field.prop.contentMediaType }}</span>
           <span v-if="field.prop.contentEncoding" class="field-format-badge">encoding: {{ field.prop.contentEncoding }}</span>
           <span v-if="field.prop.const != null" class="const-badge font-mono">const: {{ field.prop.const }}</span>
@@ -206,17 +206,17 @@
     <div class="builder-preview">
       <div class="preview-inner">
         <div class="preview-toolbar">
-          <span class="toolbar-label text-muted">JSON Preview</span>
+          <span class="toolbar-label">JSON Preview</span>
           <div class="toolbar-actions">
-            <button class="btn btn-ghost btn-sm" @click="expandAllJson">Expand all</button>
-            <button class="btn btn-ghost btn-sm" @click="collapseAllJson">Collapse all</button>
-            <button class="btn btn-ghost btn-sm copy-btn-wrap" @click="copyJson">
+            <button class="btn btn-sm btn-dark-panel" @click="expandAllJson">Expand all</button>
+            <button class="btn btn-sm btn-dark-panel" @click="collapseAllJson">Collapse all</button>
+            <button class="btn btn-sm btn-dark-panel copy-btn-wrap" @click="copyJson">
               Copy
               <span v-if="copied" class="copy-tooltip">Copied!</span>
             </button>
           </div>
         </div>
-        <pre ref="jsonBlockRef" class="json-block" @click="handleJsonClick" v-html="highlightedJson"></pre>
+        <pre ref="jsonBlockRef" class="json-block" @click="handleJsonClick" @dblclick="selectJsonBlock" v-html="highlightedJson"></pre>
       </div>
     </div>
   </div>
@@ -391,6 +391,18 @@ function handleJsonClick(event: MouseEvent) {
   }
 }
 
+function selectJsonBlock() {
+  const el = jsonBlockRef.value
+  if (!el) return
+  const range = document.createRange()
+  range.selectNodeContents(el)
+  const selection = window.getSelection()
+  if (selection) {
+    selection.removeAllRanges()
+    selection.addRange(range)
+  }
+}
+
 const MAX_PATTERN_LEN = 45
 
 function typeBadgeClass(prop: SpaProperty): string {
@@ -551,11 +563,12 @@ async function copyJson() {
 
 .field-format-badge {
   font-size: 10px;
-  color: var(--text-muted);
-  background: var(--bg-secondary);
+  color: var(--color-accent);
+  background: var(--color-accent-alpha);
   padding: 1px 5px;
   border-radius: var(--radius-sm);
   font-family: var(--font-mono);
+  font-weight: 500;
 }
 
 .deprecated-badge {
@@ -1000,6 +1013,7 @@ async function copyJson() {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  color: var(--panel-dark-muted);
 }
 
 .toolbar-label {
@@ -1011,9 +1025,18 @@ async function copyJson() {
   padding: var(--space-1) var(--space-2);
 }
 
+.btn-dark-panel {
+  color: var(--panel-dark-muted);
+}
+
+.btn-dark-panel:hover {
+  color: var(--panel-dark-text);
+  background: rgba(255, 255, 255, 0.08);
+}
+
 .json-block {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-light);
+  background: var(--panel-dark-bg);
+  border: 1px solid var(--panel-dark-bg);
   border-radius: var(--radius-md);
   padding: var(--space-4);
   overflow-x: auto;
@@ -1023,7 +1046,7 @@ async function copyJson() {
   max-height: 70vh;
   overflow-y: auto;
   font-family: var(--font-mono);
-  color: var(--text-primary);
+  color: var(--panel-dark-text);
 }
 
 .json-block :deep(ul) {
@@ -1038,7 +1061,7 @@ async function copyJson() {
 
 .json-block :deep(.jv-toggle) {
   background: none;
-  border: 1px solid var(--border-light);
+  border: 1px solid var(--panel-dark-muted);
   border-radius: 2px;
   cursor: pointer;
   width: 14px;
@@ -1064,7 +1087,7 @@ async function copyJson() {
 
 .json-block :deep(.jv-ellipsis) {
   display: none;
-  color: var(--text-muted);
+  color: var(--panel-dark-muted);
   font-size: var(--text-xs);
   font-style: italic;
   margin-left: 4px;
@@ -1079,43 +1102,40 @@ async function copyJson() {
 }
 
 .json-block :deep(.jv-key) {
-  color: var(--color-primary-dark);
+  color: var(--panel-dark-key);
 }
 
 .json-block :deep(.jv-punct) {
-  color: var(--text-muted);
+  color: var(--panel-dark-muted);
 }
 
 .json-block :deep(.jv-string) {
-  color: var(--color-green);
+  color: var(--panel-dark-string);
 }
 
 .json-block :deep(.jv-number) {
-  color: var(--color-orange);
+  color: var(--panel-dark-number);
 }
 
 .json-block :deep(.jv-boolean) {
-  color: var(--color-accent);
+  color: var(--panel-dark-boolean);
 }
 
 .json-block :deep(.jv-null) {
-  color: var(--text-muted);
+  color: var(--panel-dark-null);
   font-style: italic;
 }
 
 .json-block :deep(.jv-link) {
-  color: var(--color-primary);
+  color: var(--panel-dark-string);
   text-decoration: underline;
 }
 
 .json-block :deep(.jv-row:hover) {
-  background: var(--bg-hover);
+  background: rgba(255, 255, 255, 0.06);
   border-radius: 2px;
 }
 
-:root[data-theme="dark"] .json-block :deep(.jv-key) { color: var(--color-primary-light); }
-:root[data-theme="dark"] .json-block :deep(.jv-string) { color: var(--color-teal); }
-
 .toolbar-actions {
   display: flex;
   gap: var(--space-1);

data/frontend/src/style.css

@@ -96,6 +96,15 @@
   --type-array-bg: rgba(139, 92, 246, 0.1);
   --type-null: #A8A29E;
   --type-null-bg: rgba(168, 162, 158, 0.1);
+
+  --panel-dark-bg: #263238;
+  --panel-dark-text: #e8edf4;
+  --panel-dark-muted: #8b9db5;
+  --panel-dark-key: #80cbc4;
+  --panel-dark-string: #a5d6a7;
+  --panel-dark-number: #ffcc80;
+  --panel-dark-boolean: #90caf9;
+  --panel-dark-null: #8b9db5;
 }
 
 :root[data-theme="dark"] {
@@ -143,6 +152,15 @@
   --type-array-bg: rgba(167, 139, 250, 0.15);
   --type-null: #6b7a8f;
   --type-null-bg: rgba(107, 122, 143, 0.15);
+
+  --panel-dark-bg: #1e2a35;
+  --panel-dark-text: #dce4f0;
+  --panel-dark-muted: #7b8fa8;
+  --panel-dark-key: #4db6ac;
+  --panel-dark-string: #81c784;
+  --panel-dark-number: #ffb74d;
+  --panel-dark-boolean: #64b5f6;
+  --panel-dark-null: #7b8fa8;
 }
 
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -233,6 +251,19 @@ button { font-family: inherit; font-size: inherit; cursor: pointer; border: none
   }
 }
 
+@media print {
+  .sidebar, .sidebar-overlay, .app-header,
+  .view-toggle, .schema-actions,
+  .ctrl-expand, .field-check,
+  .source-toolbar, .copy-btn-wrap,
+  .section-actions { display: none !important; }
+  .app-layout { grid-template-columns: 1fr !important; }
+  .app-main { padding: 0 !important; max-width: 100% !important; }
+  .card, .def-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
+  .field-row { break-inside: avoid; }
+  body { color: #000; background: #fff; }
+}
+
 .text-muted { color: var(--text-muted); }
 .text-secondary { color: var(--text-secondary); }
 .font-mono { font-family: var(--font-mono); }

data/frontend/src/views/HomeView.vue

@@ -143,7 +143,7 @@
           </div>
           <div class="source-code-wrapper">
             <div class="source-lines" aria-hidden="true"><span v-for="n in sourceLineCount" :key="n">{{ n }}</span></div>
-            <pre class="source-pre"><code v-html="highlightedSource"></code></pre>
+            <pre class="source-pre" @dblclick="selectSourceBlock"><code v-html="highlightedSource"></code></pre>
           </div>
         </div>
         <div v-else class="source-empty">
@@ -285,6 +285,18 @@ function syntaxHighlight(json: string): string {
     })
 }
 
+function selectSourceBlock() {
+  const el = document.querySelector('.source-pre') as HTMLElement | null
+  if (!el) return
+  const range = document.createRange()
+  range.selectNodeContents(el)
+  const selection = window.getSelection()
+  if (selection) {
+    selection.removeAllRanges()
+    selection.addRange(range)
+  }
+}
+
 function selectSchema(name: string) {
   schemaStore.selectSchema(name)
 }

data/lib/lutaml/jsonschema/version.rb

@@ -2,6 +2,6 @@
 
 module Lutaml
   module Jsonschema
-    VERSION = "0.1.10"
+    VERSION = "0.1.11"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lutaml-jsonschema
 version: !ruby/object:Gem::Version
-  version: 0.1.10
+  version: 0.1.11
 platform: ruby
 authors:
 - Ribose Inc.