lutaml-jsonschema 0.1.10 → 0.1.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c2817082f5751466a6e7bae6f77310304d3b58127a392c1e60341d561b65706a
-  data.tar.gz: 2c6f4b882f26600890a7a21a241e3a3709fa155df21097ca3c484513cef5e4ba
+  metadata.gz: 0ad24a6671a3bcf4e811c7588dbd4ca4fff96d589d625a7e6dd2507a74a115d4
+  data.tar.gz: 947415a532ef91f5287564a63a422f9c5021e01b5ec43a174d8e68b53e81dcca
 SHA512:
-  metadata.gz: 4f1ca6699188d725ac053c230043316a96dbdb1fda2cf1c880a48e848ab31c6d4270e19f37f392c10d3205eafb27f529f5443f00fa39d20ec5f7f06dc32daa64
-  data.tar.gz: 905835a47ca2348e8bd2cd5b5f2bc526a115782fbd3264c61b212e7c61192e87d6dbd1e9193f0d9598c9f4bf28916f410cf8fcee0919f1b747cf8f6119ac0516
+  metadata.gz: d76f7513a5de8fe76529844d0a110f1901f3f9fc4968213f3ae872505370aec7ffd71ab6d349745a9af383b03d6d32ce19f972eccf585c6efd91281cc3d1f6e6
+  data.tar.gz: 72a9b35c92992f4ac0fa82f63b477b362bb358b752d1deb773c3613a29e07ea0b4cf144dbaf11fd43b1c1b5eec3b5719ad72e2d3064bea17e112f1dafe55fc0a

data/CHANGELOG.md

@@ -1,5 +1,26 @@
 ## [Unreleased]
 
+## [0.1.12] - 2026-05-10
+
+### Redoc-style UX improvements (round 6)
+
+- Property title display in type row when it differs from name (Redoc TypeTitle pattern)
+- Copy fallback using `execCommand('copy')` for HTTP contexts where clipboard API unavailable
+- Dark panel full-height background via BackgroundStub `::before` pattern
+- Search result description snippets in search modal
+- Tooltip with directional CSS arrow on copy buttons
+- DetailPanel properties table: shows title, format with angle brackets, default value, enum count, inline examples
+
+## [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/DetailPanel.vue

@@ -221,18 +221,28 @@
                   <tr v-for="prop in properties" :key="prop.name">
                     <td>
                       <span class="font-mono">{{ prop.name }}</span>
+                      <span v-if="prop.title && prop.title !== prop.name" class="prop-title">({{ prop.title }})</span>
                       <span v-if="prop.deprecated" class="badge badge-deprecated-sm">deprecated</span>
                     </td>
                     <td>
                       <span class="prop-type">{{ prop.type || 'any' }}</span>
-                      <span v-if="prop.format" class="prop-format">{{ prop.format }}</span>
+                      <span v-if="prop.format" class="prop-format">&lt;{{ prop.format }}&gt;</span>
                       <span v-if="prop.itemsType" class="prop-format">[{{ prop.itemsType }}]</span>
+                      <span v-if="prop.default != null" class="prop-default">default: {{ prop.default }}</span>
+                      <span v-if="prop.enum?.length" class="prop-enum">{{ prop.enum.length }} values</span>
                     </td>
                     <td>
                       <span v-if="prop.required" class="badge badge-required-sm">yes</span>
                       <span v-else class="text-muted">no</span>
                     </td>
-                    <td class="text-secondary">{{ prop.description || '—' }}</td>
+                    <td>
+                      <span class="text-secondary">{{ prop.description || '—' }}</span>
+                      <div v-if="prop.examples?.length" class="prop-examples">
+                        <span class="prop-examples-label">Examples:</span>
+                        <span v-for="(ex, i) in prop.examples.slice(0, 3)" :key="i" class="prop-example-chip">{{ typeof ex === 'object' ? JSON.stringify(ex) : ex }}</span>
+                        <span v-if="prop.examples.length > 3" class="text-muted">+{{ prop.examples.length - 3 }} more</span>
+                      </div>
+                    </td>
                   </tr>
                 </tbody>
               </table>
@@ -564,8 +574,57 @@ const definitionItem = computed(() => {
 
 .prop-format {
   font-size: var(--text-xs);
-  color: var(--text-muted);
+  color: var(--color-accent);
   margin-left: var(--space-1);
+  font-family: var(--font-mono);
+}
+
+.prop-title {
+  display: block;
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+.prop-default {
+  display: block;
+  font-size: 10px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+}
+
+.prop-enum {
+  display: block;
+  font-size: 10px;
+  color: var(--color-teal);
+  background: var(--color-teal-alpha);
+  padding: 1px 4px;
+  border-radius: 2px;
+  display: inline-block;
+  margin-top: 2px;
+}
+
+.prop-examples {
+  margin-top: var(--space-1);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+}
+
+.prop-examples-label {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.prop-example-chip {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  background: var(--bg-secondary);
+  padding: 1px 4px;
+  border-radius: 2px;
+  color: var(--text-secondary);
 }
 
 .badge-type {

data/frontend/src/components/SchemaBuilder.vue

@@ -16,7 +16,8 @@
             <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.title && field.prop.title !== field.prop.name" class="field-title-badge">{{ field.prop.title }}</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 +207,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>
@@ -246,6 +247,7 @@ import {
 import { renderInlineMarkdown } from '../composables/useMarkdownLite'
 import { jsonToCollapsibleHtml } from '../composables/useJsonViewer'
 import type { BuilderField } from '../composables/useBuilderField'
+import { copyToClipboard } from '../composables/useClipboard'
 
 const schemaStore = useSchemaStore()
 const uiStore = useUiStore()
@@ -391,6 +393,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 {
@@ -425,11 +439,11 @@ function togglePattern(pattern: string) {
 }
 
 async function copyJson() {
-  try {
-    await navigator.clipboard.writeText(outputJson.value)
+  const ok = await copyToClipboard(outputJson.value)
+  if (ok) {
     copied.value = true
     setTimeout(() => { copied.value = false }, 2000)
-  } catch { /* noop */ }
+  }
 }
 </script>
 
@@ -551,11 +565,19 @@ 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;
+}
+
+.field-title-badge {
+  font-size: 10px;
+  font-style: italic;
+  color: var(--text-secondary);
+  flex-shrink: 0;
 }
 
 .deprecated-badge {
@@ -988,6 +1010,16 @@ async function copyJson() {
 .builder-preview {
   position: sticky;
   top: var(--space-4);
+  z-index: 0;
+}
+
+.builder-preview::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--panel-dark-bg);
+  border-radius: var(--radius-md);
+  z-index: -1;
 }
 
 .preview-inner {
@@ -1000,6 +1032,7 @@ async function copyJson() {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  color: var(--panel-dark-muted);
 }
 
 .toolbar-label {
@@ -1011,9 +1044,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 +1065,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 +1080,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 +1106,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 +1121,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);
@@ -1128,7 +1167,7 @@ async function copyJson() {
 
 .copy-tooltip {
   position: absolute;
-  bottom: calc(100% + 4px);
+  bottom: calc(100% + 8px);
   left: 50%;
   transform: translateX(-50%);
   background: var(--bg-elevated);
@@ -1143,6 +1182,16 @@ async function copyJson() {
   animation: tooltipFade var(--transition-slow);
 }
 
+.copy-tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -4px;
+  border: 4px solid transparent;
+  border-top-color: var(--bg-elevated);
+}
+
 @keyframes tooltipFade {
   from { opacity: 0; transform: translateX(-50%) translateY(2px); }
   to { opacity: 1; transform: translateX(-50%) translateY(0); }

data/frontend/src/components/SearchModal.vue

@@ -52,6 +52,7 @@
             <div class="result-content">
               <span class="result-name" v-html="highlightMatch(result.name)"></span>
               <span class="result-schema">{{ result.schemaName }}</span>
+              <span v-if="result.description" class="result-desc">{{ result.description }}</span>
             </div>
             <span :class="['badge', `badge-${result.type}`]">{{ result.type }}</span>
           </div>
@@ -235,6 +236,15 @@ function highlightMatch(text: string): string {
   color: var(--text-muted);
 }
 
+.result-desc {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 .badge-schema {
   background: var(--badge-schema-bg);
   color: var(--badge-schema);

data/frontend/src/composables/useClipboard.ts

@@ -0,0 +1,21 @@
+function fallbackCopy(text: string): boolean {
+  const ta = document.createElement('textarea')
+  ta.value = text
+  ta.style.cssText = 'position:fixed;top:0;left:0;width:2em;height:2em;padding:0;border:none;outline:none;box-shadow:none;background:transparent'
+  document.body.appendChild(ta)
+  ta.select()
+  let ok = false
+  try { ok = document.execCommand('copy') } catch { /* noop */ }
+  document.body.removeChild(ta)
+  return ok
+}
+
+export async function copyToClipboard(text: string): Promise<boolean> {
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text)
+      return true
+    } catch { /* fall through */ }
+  }
+  return fallbackCopy(text)
+}

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">
@@ -221,6 +221,7 @@ import { useSchemaStore } from '../stores/schemaStore'
 import SchemaBuilder from '../components/SchemaBuilder.vue'
 import { downloadFile } from '../composables/useDownload'
 import { renderInlineMarkdown } from '../composables/useMarkdownLite'
+import { copyToClipboard } from '../composables/useClipboard'
 import type { SpaSchema } from '../types'
 
 const schemaStore = useSchemaStore()
@@ -264,9 +265,11 @@ const sourceLineCount = computed(() => {
 function copySource() {
   const src = schemaStore.selectedSchema?.sourceJson
   if (!src) return
-  navigator.clipboard.writeText(src).then(() => {
-    sourceCopied.value = true
-    setTimeout(() => { sourceCopied.value = false }, 2000)
+  copyToClipboard(src).then(ok => {
+    if (ok) {
+      sourceCopied.value = true
+      setTimeout(() => { sourceCopied.value = false }, 2000)
+    }
   })
 }
 
@@ -285,6 +288,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)
 }
@@ -600,7 +615,7 @@ watch(() => schemaStore.selectedItemKey, (key) => {
 
 .copy-tooltip {
   position: absolute;
-  bottom: calc(100% + 4px);
+  bottom: calc(100% + 8px);
   left: 50%;
   transform: translateX(-50%);
   background: var(--bg-elevated);
@@ -615,6 +630,16 @@ watch(() => schemaStore.selectedItemKey, (key) => {
   animation: tooltipFade var(--transition-slow);
 }
 
+.copy-tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -4px;
+  border: 4px solid transparent;
+  border-top-color: var(--bg-elevated);
+}
+
 @keyframes tooltipFade {
   from { opacity: 0; transform: translateX(-50%) translateY(2px); }
   to { opacity: 1; transform: translateX(-50%) translateY(0); }

data/lib/lutaml/jsonschema/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: lutaml-jsonschema
 version: !ruby/object:Gem::Version
-  version: 0.1.10
+  version: 0.1.12
 platform: ruby
 authors:
 - Ribose Inc.
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-05-09 00:00:00.000000000 Z
+date: 2026-05-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: json
@@ -106,6 +106,7 @@ files:
 - frontend/src/components/SchemaBuilder.vue
 - frontend/src/components/SearchModal.vue
 - frontend/src/composables/useBuilderField.ts
+- frontend/src/composables/useClipboard.ts
 - frontend/src/composables/useDefinitionResolver.ts
 - frontend/src/composables/useDownload.ts
 - frontend/src/composables/useJsonViewer.ts