lutaml-jsonschema 0.1.11 → 0.1.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c119b203d422df51dd4ef79c0e28ae59d1a3e8a01536c74baef3931f35481428
-  data.tar.gz: fd6e00bacd9f5d5ea9bab4afdff42adb786e1b0d7293f571c71e1e1dacb1d8f6
+  metadata.gz: 0ad24a6671a3bcf4e811c7588dbd4ca4fff96d589d625a7e6dd2507a74a115d4
+  data.tar.gz: 947415a532ef91f5287564a63a422f9c5021e01b5ec43a174d8e68b53e81dcca
 SHA512:
-  metadata.gz: 56edc028665efb3442c0ffe58eb7fe62576c02686cabf184fc2337749c6d460e9a7f817aef2e7737a8cc6b1a2dc1bd61ee0765ae5df558df1fde73e9ac0cc0a3
-  data.tar.gz: fed677f3dfb49ad12f056a494e73c2dceee12929f7f15c1753a6aac9d03387bba4ab1aa68c33bdb2ee152af46dd4a0a76898d3466575ad88cf0fdf944af766d1
+  metadata.gz: d76f7513a5de8fe76529844d0a110f1901f3f9fc4968213f3ae872505370aec7ffd71ab6d349745a9af383b03d6d32ce19f972eccf585c6efd91281cc3d1f6e6
+  data.tar.gz: 72a9b35c92992f4ac0fa82f63b477b362bb358b752d1deb773c3613a29e07ea0b4cf144dbaf11fd43b1c1b5eec3b5719ad72e2d3064bea17e112f1dafe55fc0a

data/CHANGELOG.md

@@ -1,5 +1,16 @@
 ## [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)

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,6 +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.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>
@@ -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()
@@ -437,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>
 
@@ -571,6 +573,13 @@ async function copyJson() {
   font-weight: 500;
 }
 
+.field-title-badge {
+  font-size: 10px;
+  font-style: italic;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+
 .deprecated-badge {
   font-size: 10px;
   font-weight: 600;
@@ -1001,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 {
@@ -1148,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);
@@ -1163,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/views/HomeView.vue

@@ -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)
+    }
   })
 }
 
@@ -612,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);
@@ -627,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.11"
+    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.11
+  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