lutaml-jsonschema 0.1.9 → 0.1.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d756394e76dba6d56e58308f5b5bf05dee2426f3ed1f06741db6d42e2b9b0722
-  data.tar.gz: 1dda2ab2e8d89fc28c62df3a278d4bba0ef3e0bcb21a38176fc3816c4922927d
+  metadata.gz: c2817082f5751466a6e7bae6f77310304d3b58127a392c1e60341d561b65706a
+  data.tar.gz: 2c6f4b882f26600890a7a21a241e3a3709fa155df21097ca3c484513cef5e4ba
 SHA512:
-  metadata.gz: 24cc7e89987cd5d49cf5bda35a6a43af05f6de286755d2f324128eca05d643972095eb56d9375406f714ebf11f2b5731563d02f2c8a20f6972fc056ba0727b94
-  data.tar.gz: 9d65c1d9e86e2321d561f5853ac2d1617231b267f0ff0d32dbeab6e28f6b4067ecf1fc5fa8458df7db49fbe6dc4fc0e6cf8664abaf5f4a714b7a48cb3ca2442c
+  metadata.gz: 4f1ca6699188d725ac053c230043316a96dbdb1fda2cf1c880a48e848ab31c6d4270e19f37f392c10d3205eafb27f529f5443f00fa39d20ec5f7f06dc32daa64
+  data.tar.gz: 905835a47ca2348e8bd2cd5b5f2bc526a115782fbd3264c61b212e7c61192e87d6dbd1e9193f0d9598c9f4bf28916f410cf8fcee0919f1b747cf8f6119ac0516

data/CHANGELOG.md

@@ -1,5 +1,18 @@
 ## [Unreleased]
 
+## [0.1.10] - 2026-05-09
+
+### Redoc-style UX improvements
+
+- JSON viewer collapsed objects show key names (e.g. `{a, b, c}`), arrays show item count
+- Sidebar auto-scrolls to active schema node on selection
+- Search results sorted by relevance: exact name > starts with > contains > description
+- Copy button shows positioned tooltip overlay instead of text swap
+- Mobile sidebar backdrop overlay (click-to-close)
+- DetailPanel overview shows definition-level metadata: required fields, composition badges, property range, additionalProperties
+- Nullable badge for union types (e.g. `string,null`) in SchemaBuilder
+- Focus trap in DetailPanel: focus moves to panel on open, Tab/Shift+Tab trapped, Escape closes
+
 ## [0.1.0] - 2026-05-05
 
 - Initial release

data/frontend/src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="app-layout">
     <AppSidebar />
+    <div v-if="!uiStore.sidebarCollapsed" class="sidebar-overlay" @click="uiStore.toggleSidebar"></div>
     <div class="main-content">
       <AppHeader />
       <div class="content-area">
@@ -100,4 +101,19 @@ function isInputFocused(): boolean {
   padding: var(--space-6);
   background: var(--bg-primary);
 }
+
+/* Mobile sidebar overlay — hidden on desktop, shown on mobile when sidebar open */
+.sidebar-overlay {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .sidebar-overlay {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 39;
+  }
+}
 </style>

data/frontend/src/components/AppSidebar.vue

@@ -69,7 +69,7 @@
         <div v-else-if="debouncedQuery && !searchResults.length && searchQuery" class="search-no-results text-muted">
           No results found
         </div>
-        <div v-else class="schema-tree">
+        <div v-else class="schema-tree" ref="sidebarTreeRef">
           <div
             v-for="schema in schemaStore.schemas"
             :key="schema.name"
@@ -150,13 +150,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, nextTick } from 'vue'
 import { useSchemaStore } from '../stores/schemaStore'
 import { useUiStore } from '../stores/uiStore'
 import type { SpaSearchEntry } from '../types'
 
 const schemaStore = useSchemaStore()
 const uiStore = useUiStore()
+const sidebarTreeRef = ref<HTMLElement | null>(null)
 
 const searchQuery = ref('')
 const debouncedQuery = ref('')
@@ -177,16 +178,41 @@ watch(searchQuery, (q) => {
 const searchResults = computed(() => {
   const q = debouncedQuery.value.trim().toLowerCase()
   if (!q) return []
-  return schemaStore.searchIndex.filter(entry =>
-    entry.name.toLowerCase().includes(q) ||
-    (entry.title && entry.title.toLowerCase().includes(q)) ||
-    entry.schemaName.toLowerCase().includes(q) ||
-    (entry.description && entry.description.toLowerCase().includes(q)),
-  ).slice(0, 15)
+  const scored = schemaStore.searchIndex
+    .map(entry => {
+      let score = 0
+      const nameLower = entry.name.toLowerCase()
+      const titleLower = (entry.title || '').toLowerCase()
+      const descLower = (entry.description || '').toLowerCase()
+      const schemaLower = entry.schemaName.toLowerCase()
+      if (nameLower === q) score += 100
+      else if (nameLower.startsWith(q)) score += 50
+      else if (nameLower.includes(q)) score += 30
+      if (titleLower === q) score += 80
+      else if (titleLower.startsWith(q)) score += 40
+      else if (titleLower.includes(q)) score += 20
+      if (descLower.includes(q)) score += 10
+      if (schemaLower.includes(q)) score += 5
+      return { entry, score }
+    })
+    .filter(r => r.score > 0)
+    .sort((a, b) => b.score - a.score)
+    .slice(0, 15)
+    .map(r => r.entry)
+  return scored
 })
 
 watch(searchResults, () => { activeResultIdx.value = -1 })
 
+watch(() => schemaStore.selectedSchemaName, () => {
+  nextTick(() => {
+    const container = sidebarTreeRef.value
+    if (!container) return
+    const active = container.querySelector('.schema-node-header.active') as HTMLElement | null
+    if (active) active.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+  })
+})
+
 function handleSearchKey(event: KeyboardEvent) {
   if (event.key === 'ArrowDown') {
     activeResultIdx.value = Math.min(activeResultIdx.value + 1, searchResults.value.length - 1)

data/frontend/src/components/DetailPanel.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="detail-panel-overlay" @click.self="uiStore.closeDetailPanel">
-    <aside class="detail-panel">
+    <aside class="detail-panel" ref="panelRef">
       <div class="panel-header">
         <div class="panel-title">
           <h2 v-if="item">{{ itemTitle }}</h2>
         </div>
-        <button class="btn btn-ghost" @click="uiStore.closeDetailPanel">
+        <button ref="closeBtnRef" class="btn btn-ghost" @click="uiStore.closeDetailPanel" aria-label="Close panel">
           <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
             <path d="M5 5l8 8M13 5l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
           </svg>
@@ -98,6 +98,32 @@
                   <span class="meta-label">Additional</span>
                   <span class="badge badge-locked-detail">Denied</span>
                 </div>
+                <div v-if="definitionItem && definitionItem.required?.length" class="meta-row">
+                  <span class="meta-label">Required</span>
+                  <div class="meta-tags">
+                    <span v-for="r in definitionItem.required" :key="r" class="badge badge-required-sm">{{ r }}</span>
+                  </div>
+                </div>
+                <div v-if="definitionItem && (definitionItem.hasAllOf || definitionItem.hasAnyOf || definitionItem.hasOneOf)" class="meta-row">
+                  <span class="meta-label">Composition</span>
+                  <div class="meta-tags">
+                    <span v-if="definitionItem.hasAllOf" class="badge badge-composition-detail">allOf</span>
+                    <span v-if="definitionItem.hasAnyOf" class="badge badge-composition-detail">anyOf</span>
+                    <span v-if="definitionItem.hasOneOf" class="badge badge-composition-detail">oneOf</span>
+                  </div>
+                </div>
+                <div v-if="definitionItem && (definitionItem.minProperties != null || definitionItem.maxProperties != null)" class="meta-row">
+                  <span class="meta-label">Properties</span>
+                  <span class="text-secondary">
+                    <template v-if="definitionItem.minProperties != null && definitionItem.maxProperties != null">{{ definitionItem.minProperties }}..{{ definitionItem.maxProperties }}</template>
+                    <template v-else-if="definitionItem.minProperties != null">&ge; {{ definitionItem.minProperties }}</template>
+                    <template v-else>&le; {{ definitionItem.maxProperties }}</template>
+                  </span>
+                </div>
+                <div v-if="definitionItem && definitionItem.additionalProperties === false" class="meta-row">
+                  <span class="meta-label">Additional</span>
+                  <span class="badge badge-locked-detail">Denied</span>
+                </div>
               </div>
             </div>
 
@@ -241,7 +267,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { useSchemaStore, type SelectedItem } from '../stores/schemaStore'
 import { useUiStore } from '../stores/uiStore'
 import type { SpaProperty } from '../types'
@@ -249,6 +275,33 @@ import type { SpaProperty } from '../types'
 const schemaStore = useSchemaStore()
 const uiStore = useUiStore()
 
+const panelRef = ref<HTMLElement | null>(null)
+const closeBtnRef = ref<HTMLButtonElement | null>(null)
+
+onMounted(() => {
+  closeBtnRef.value?.focus()
+  document.addEventListener('keydown', trapFocus)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', trapFocus)
+})
+
+function trapFocus(e: KeyboardEvent) {
+  if (e.key !== 'Tab' || !panelRef.value) return
+  const focusable = panelRef.value.querySelectorAll<HTMLElement>(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+  )
+  if (!focusable.length) return
+  const first = focusable[0]
+  const last = focusable[focusable.length - 1]
+  if (e.shiftKey) {
+    if (document.activeElement === first) { e.preventDefault(); last.focus() }
+  } else {
+    if (document.activeElement === last) { e.preventDefault(); first.focus() }
+  }
+}
+
 const item = computed<SelectedItem | null>(() => schemaStore.selectedItem)
 const schema = computed(() => schemaStore.selectedSchema)
 
@@ -379,6 +432,11 @@ const propertyItem = computed<SpaProperty | null>(() => {
   if (item.value?.kind !== 'property') return null
   return item.value.property
 })
+
+const definitionItem = computed(() => {
+  if (item.value?.kind !== 'definition') return null
+  return item.value.definition
+})
 </script>
 
 <style scoped>

data/frontend/src/components/SchemaBuilder.vue

@@ -25,6 +25,7 @@
           <span v-if="field.prop.deprecated" class="deprecated-badge">deprecated</span>
           <span v-if="field.prop.readOnly" class="readonly-badge">read-only</span>
           <span v-if="field.prop.writeOnly" class="writeonly-badge">write-only</span>
+          <span v-if="isNullableType(field.prop.type)" class="nullable-badge">nullable</span>
           <span v-if="field.prop.compositionSource" class="composition-badge">{{ field.prop.compositionSource }}</span>
 
           <div class="field-control">
@@ -209,8 +210,9 @@
           <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" @click="copyJson">
-              {{ copied ? 'Copied!' : 'Copy' }}
+            <button class="btn btn-ghost btn-sm copy-btn-wrap" @click="copyJson">
+              Copy
+              <span v-if="copied" class="copy-tooltip">Copied!</span>
             </button>
           </div>
         </div>
@@ -405,6 +407,10 @@ function typeBadgeClass(prop: SpaProperty): string {
   }
 }
 
+function isNullableType(type?: string): boolean {
+  return (type || '').split(',').map(s => s.trim()).includes('null')
+}
+
 function truncatedPattern(pattern: string): { text: string; truncated: boolean } {
   if (pattern.length <= MAX_PATTERN_LEN) return { text: pattern, truncated: false }
   if (expandedPatterns.value.has(pattern)) return { text: pattern, truncated: true }
@@ -583,6 +589,18 @@ async function copyJson() {
   background: var(--color-orange-alpha);
 }
 
+.nullable-badge {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  background: var(--bg-secondary);
+  border: 1px dashed var(--border-medium);
+  padding: 1px 5px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
 .composition-badge {
   font-size: 10px;
   font-weight: 600;
@@ -1048,13 +1066,10 @@ async function copyJson() {
   display: none;
   color: var(--text-muted);
   font-size: var(--text-xs);
+  font-style: italic;
   margin-left: 4px;
 }
 
-.json-block :deep(.jv-ellipsis::after) {
-  content: ' … ';
-}
-
 .json-block :deep(.jv-children.jv-collapsed) {
   display: none;
 }
@@ -1106,6 +1121,33 @@ async function copyJson() {
   gap: var(--space-1);
 }
 
+/* Copy button tooltip */
+.copy-btn-wrap {
+  position: relative;
+}
+
+.copy-tooltip {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  font-size: var(--text-xs);
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-light);
+  box-shadow: var(--shadow-md);
+  white-space: nowrap;
+  pointer-events: none;
+  animation: tooltipFade var(--transition-slow);
+}
+
+@keyframes tooltipFade {
+  from { opacity: 0; transform: translateX(-50%) translateY(2px); }
+  to { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
 .empty-hint {
   padding: var(--space-8);
   text-align: center;

data/frontend/src/composables/useJsonViewer.ts

@@ -56,7 +56,7 @@ function renderArray(arr: unknown[], maxExpand: number, level: number): string {
     html += '</div></li>'
   })
   html += '</ul>'
-  html += `<span class="jv-ellipsis"></span>`
+  html += `<span class="jv-ellipsis">${arr.length} items</span>`
   html += punct(']')
   return html
 }
@@ -76,7 +76,8 @@ function renderObject(obj: Record<string, unknown>, maxExpand: number, level: nu
     html += '</div></li>'
   })
   html += '</ul>'
-  html += `<span class="jv-ellipsis"></span>`
+  const previewKeys = keys.length <= 5 ? keys : [...keys.slice(0, 5), `+${keys.length - 5}`]
+  html += `<span class="jv-ellipsis">${previewKeys.map(k => escHtml(k)).join(', ')}</span>`
   html += punct('}')
   return html
 }

data/frontend/src/views/HomeView.vue

@@ -136,8 +136,9 @@
         <div v-if="schemaStore.selectedSchema.sourceJson" class="source-viewer">
           <div class="source-toolbar">
             <span class="text-muted">{{ sourceLineCount }} lines</span>
-            <button class="btn btn-ghost btn-sm" @click="copySource">
-              {{ sourceCopied ? 'Copied!' : 'Copy' }}
+            <button class="btn btn-ghost btn-sm copy-btn-wrap" @click="copySource">
+              Copy
+              <span v-if="sourceCopied" class="copy-tooltip">Copied!</span>
             </button>
           </div>
           <div class="source-code-wrapper">
@@ -592,6 +593,33 @@ watch(() => schemaStore.selectedItemKey, (key) => {
   font-size: var(--text-xs);
 }
 
+/* Copy button tooltip */
+.copy-btn-wrap {
+  position: relative;
+}
+
+.copy-tooltip {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  font-size: var(--text-xs);
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-light);
+  box-shadow: var(--shadow-md);
+  white-space: nowrap;
+  pointer-events: none;
+  animation: tooltipFade var(--transition-slow);
+}
+
+@keyframes tooltipFade {
+  from { opacity: 0; transform: translateX(-50%) translateY(2px); }
+  to { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
 .source-code-wrapper {
   display: flex;
   max-height: 70vh;

data/lib/lutaml/jsonschema/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: lutaml-jsonschema
 version: !ruby/object:Gem::Version
-  version: 0.1.9
+  version: 0.1.10
 platform: ruby
 authors:
 - Ribose Inc.
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-05-08 00:00:00.000000000 Z
+date: 2026-05-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: json