lutaml-jsonschema 0.1.9 → 0.1.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d756394e76dba6d56e58308f5b5bf05dee2426f3ed1f06741db6d42e2b9b0722
-  data.tar.gz: 1dda2ab2e8d89fc28c62df3a278d4bba0ef3e0bcb21a38176fc3816c4922927d
+  metadata.gz: c119b203d422df51dd4ef79c0e28ae59d1a3e8a01536c74baef3931f35481428
+  data.tar.gz: fd6e00bacd9f5d5ea9bab4afdff42adb786e1b0d7293f571c71e1e1dacb1d8f6
 SHA512:
-  metadata.gz: 24cc7e89987cd5d49cf5bda35a6a43af05f6de286755d2f324128eca05d643972095eb56d9375406f714ebf11f2b5731563d02f2c8a20f6972fc056ba0727b94
-  data.tar.gz: 9d65c1d9e86e2321d561f5853ac2d1617231b267f0ff0d32dbeab6e28f6b4067ecf1fc5fa8458df7db49fbe6dc4fc0e6cf8664abaf5f4a714b7a48cb3ca2442c
+  metadata.gz: 56edc028665efb3442c0ffe58eb7fe62576c02686cabf184fc2337749c6d460e9a7f817aef2e7737a8cc6b1a2dc1bd61ee0765ae5df558df1fde73e9ac0cc0a3
+  data.tar.gz: fed677f3dfb49ad12f056a494e73c2dceee12929f7f15c1753a6aac9d03387bba4ab1aa68c33bdb2ee152af46dd4a0a76898d3466575ad88cf0fdf944af766d1

data/CHANGELOG.md

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

@@ -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>
@@ -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">
@@ -205,16 +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" @click="copyJson">
-              {{ copied ? 'Copied!' : 'Copy' }}
+            <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>
@@ -389,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 {
@@ -405,6 +419,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 }
@@ -545,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 {
@@ -583,6 +602,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;
@@ -982,6 +1013,7 @@ async function copyJson() {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  color: var(--panel-dark-muted);
 }
 
 .toolbar-label {
@@ -993,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;
@@ -1005,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) {
@@ -1020,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;
@@ -1046,15 +1087,12 @@ 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;
 }
 
-.json-block :deep(.jv-ellipsis::after) {
-  content: ' … ';
-}
-
 .json-block :deep(.jv-children.jv-collapsed) {
   display: none;
 }
@@ -1064,48 +1102,72 @@ 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);
 }
 
+/* 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/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

@@ -136,13 +136,14 @@
         <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">
             <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">
@@ -284,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)
 }
@@ -592,6 +605,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.11"
   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.11
 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