lutaml-jsonschema 0.1.14 → 0.1.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 105f1b74c4e82552c08ad6a406ab2da66979e1bad38b93a0d654a547868275d6
-  data.tar.gz: 25b463827ef7593125b58a781f4d3cb60c3a8861b2736b2590879ec957d0b6f4
+  metadata.gz: a01871af7f67b7fac28c6c32abf7397d48af9c14cc95004849310f8f1b3d13cc
+  data.tar.gz: 119580a2cacbf4374811f05765074442fa06d25e733f81b65aec40f18a1069b0
 SHA512:
-  metadata.gz: 9e9e80db8d96d09d0da8990e71f8b637cb7e11bb7a0debed104d56eb71add45d4f14c3933286f07333f5194ee5addcfcb21dabc3c22a426919a16b8896a0e5a1
-  data.tar.gz: 8bdbe14abce145c588ff46c2efec874d9f7a7098e74a615442929821d93f8646f871b43eb3a04da4f4114a1dd6fddbfbd9009ee6000786462afe10891529eeb6
+  metadata.gz: 17e159091bff17f2d15ec5aefac90e6bff786a3df02677cb40bb24f635e4f2fc3785173d9336d5f7e5636a230cb1c1a21ade16d4d3155841d7ddcd3ae7d3207d
+  data.tar.gz: d3c1630021ee7690da9dff15293668fef1dc464c26493f7347d726c6e976f946c1e89057180023eb6aff4851ed011f9894ef6475b1118dfd823f4ce258bba69e

data/.rubocop_todo.yml

@@ -1,6 +1,6 @@
 # This configuration was generated by
 # `rubocop --auto-gen-config`
-# on 2026-05-10 22:34:24 UTC using RuboCop version 1.86.1.
+# on 2026-05-13 07:41:21 UTC using RuboCop version 1.86.1.
 # The point is for the user to remove these configuration records
 # one by one as the offenses are removed from the code base.
 # Note that changes in the inspected code, or installation of new

data/frontend/src/components/DetailPanel.vue

@@ -168,7 +168,8 @@
                     <td class="constraint-key">Enum</td>
                     <td>
                       <div class="enum-values-list">
-                        <span v-for="e in propertyItem.enum" :key="e" class="enum-value-chip">{{ e }}</span>
+                        <span v-for="e in visibleEnumValues(propertyItem.name, propertyItem.enum)" :key="e" class="enum-value-chip">{{ e }}</span>
+                        <button v-if="propertyItem.enum.length > 8 && !detailEnumExpanded.has(propertyItem.name)" class="enum-more-btn" @click="toggleDetailEnum(propertyItem.name)">+{{ propertyItem.enum.length - 8 }} more</button>
                       </div>
                     </td>
                   </tr>
@@ -260,12 +261,15 @@
               <div v-if="examples.length" class="example-group">
                 <h4 class="example-label">Provided Examples</h4>
                 <div v-for="(ex, idx) in examples" :key="idx" class="example-block">
-                  <pre class="example-pre"><code>{{ formatExample(ex) }}</code></pre>
+                  <div v-if="isComplexExample(ex)" class="example-collapsible" @click="toggleExampleCollapse($event)" @keydown="handleExampleKey($event)">
+                    <pre class="example-pre" v-html="renderExampleHtml(ex)"></pre>
+                  </div>
+                  <pre v-else class="example-pre"><code>{{ formatExample(ex) }}</code></pre>
                 </div>
               </div>
               <div v-if="generatedExample" class="example-group">
                 <h4 class="example-label">Generated Example</h4>
-                <pre class="example-pre example-generated"><code>{{ generatedExample }}</code></pre>
+                <pre class="example-pre example-generated" v-html="renderExampleHtml(generatedExample)"></pre>
               </div>
               <p v-if="!examples.length && !generatedExample" class="text-muted">No examples available.</p>
             </div>
@@ -281,10 +285,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { computed, ref, reactive, onMounted, onUnmounted } from 'vue'
 import { useSchemaStore, type SelectedItem } from '../stores/schemaStore'
 import { useUiStore } from '../stores/uiStore'
 import { renderInlineMarkdown } from '../composables/useMarkdownLite'
+import { jsonToCollapsibleHtml } from '../composables/useJsonViewer'
 import type { SpaProperty } from '../types'
 
 const schemaStore = useSchemaStore()
@@ -292,6 +297,17 @@ const uiStore = useUiStore()
 
 const panelRef = ref<HTMLElement | null>(null)
 const closeBtnRef = ref<HTMLButtonElement | null>(null)
+const detailEnumExpanded = reactive(new Set<string>())
+
+function visibleEnumValues(name: string, enums: string[]): string[] {
+  if (detailEnumExpanded.has(name) || enums.length <= 8) return enums
+  return enums.slice(0, 8)
+}
+
+function toggleDetailEnum(name: string) {
+  if (detailEnumExpanded.has(name)) detailEnumExpanded.delete(name)
+  else detailEnumExpanded.add(name)
+}
 
 onMounted(() => {
   closeBtnRef.value?.focus()
@@ -514,6 +530,56 @@ function navigateToProperty(name: string) {
   uiStore.closeDetailPanel()
   schemaStore.selectProperty(name)
 }
+
+function isComplexExample(value: unknown): boolean {
+  if (typeof value === 'string') {
+    try { return typeof JSON.parse(value) === 'object' } catch { return false }
+  }
+  return typeof value === 'object' && value !== null
+}
+
+function renderExampleHtml(value: unknown): string {
+  let parsed: unknown
+  if (typeof value === 'string') {
+    try { parsed = JSON.parse(value) } catch { return escapeHtml(value) }
+  } else {
+    parsed = value
+  }
+  try {
+    return jsonToCollapsibleHtml(parsed, 3)
+  } catch {
+    return escapeHtml(typeof parsed === 'string' ? parsed : JSON.stringify(parsed, null, 2))
+  }
+}
+
+function escapeHtml(t: string): string {
+  return t.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+function toggleExampleCollapse(event: MouseEvent) {
+  const target = event.target as HTMLElement
+  if (!target.classList.contains('jv-toggle')) return
+  const parent = target.parentElement
+  if (!parent) return
+  const children = parent.querySelector('.jv-children')
+  if (!children) return
+  const isCollapsed = children.classList.contains('jv-collapsed')
+  if (isCollapsed) {
+    children.classList.remove('jv-collapsed')
+    target.setAttribute('aria-label', 'collapse')
+  } else {
+    children.classList.add('jv-collapsed')
+    target.setAttribute('aria-label', 'expand')
+  }
+}
+
+function handleExampleKey(event: KeyboardEvent) {
+  if (event.key !== 'Enter' && event.key !== ' ') return
+  const target = event.target as HTMLElement
+  if (!target.classList.contains('jv-toggle')) return
+  event.preventDefault()
+  toggleExampleCollapse(event as unknown as MouseEvent)
+}
 </script>
 
 <style scoped>
@@ -820,6 +886,20 @@ function navigateToProperty(name: string) {
   color: var(--text-primary);
 }
 
+.enum-more-btn {
+  font-size: 11px;
+  color: var(--color-primary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 1px 4px;
+  font-family: var(--font-mono);
+}
+
+.enum-more-btn:hover {
+  text-decoration: underline;
+}
+
 .constraint-table td:first-child {
   font-weight: 500;
   color: var(--text-secondary);
@@ -896,6 +976,103 @@ function navigateToProperty(name: string) {
   border-color: var(--color-primary-alpha);
 }
 
+.example-collapsible {
+  cursor: default;
+}
+
+.example-pre :deep(ul) {
+  list-style: none;
+  padding-left: var(--space-4);
+  margin: 0;
+}
+
+.example-pre :deep(li) {
+  margin: 0;
+}
+
+.example-pre :deep(.jv-toggle) {
+  background: none;
+  border: 1px solid var(--border-medium);
+  border-radius: 2px;
+  cursor: pointer;
+  width: 14px;
+  height: 14px;
+  font-size: 9px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  padding: 0;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
+.example-pre :deep(.jv-toggle:hover) {
+  background: var(--bg-hover);
+}
+
+.example-pre :deep(.jv-toggle[aria-label="expand"])::after { content: '+'; }
+.example-pre :deep(.jv-toggle[aria-label="collapse"])::after { content: '−'; }
+
+.example-pre :deep(.jv-ellipsis) {
+  display: none;
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+  font-style: italic;
+  margin-left: 4px;
+}
+
+.example-pre :deep(.jv-children.jv-collapsed) {
+  display: none;
+}
+
+.example-pre :deep(.jv-children.jv-collapsed + .jv-ellipsis) {
+  display: inline;
+}
+
+.example-pre :deep(.jv-key) {
+  color: var(--color-primary-dark);
+  font-weight: 500;
+}
+
+.example-pre :deep(.jv-punct) {
+  color: var(--text-muted);
+}
+
+.example-pre :deep(.jv-string) {
+  color: var(--color-green);
+}
+
+.example-pre :deep(.jv-number) {
+  color: var(--color-orange);
+}
+
+.example-pre :deep(.jv-boolean) {
+  color: var(--color-accent);
+}
+
+.example-pre :deep(.jv-null) {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.example-pre :deep(.jv-link) {
+  color: var(--color-green);
+  text-decoration: underline;
+}
+
+.example-pre :deep(.jv-row:hover) {
+  background: var(--bg-hover);
+  border-radius: 2px;
+}
+
+:root[data-theme="dark"] .example-pre :deep(.jv-key) { color: var(--color-primary-light); }
+:root[data-theme="dark"] .example-pre :deep(.jv-string) { color: var(--color-teal); }
+:root[data-theme="dark"] .example-pre :deep(.jv-number) { color: var(--color-accent-light); }
+:root[data-theme="dark"] .example-pre :deep(.jv-boolean) { color: var(--color-primary-light); }
+:root[data-theme="dark"] .example-pre :deep(.jv-toggle) { border-color: rgba(255, 255, 255, 0.2); }
+
 .panel-content :deep(.md-code) {
   font-family: var(--font-mono);
   font-size: inherit;
@@ -914,6 +1091,37 @@ function navigateToProperty(name: string) {
   text-decoration: underline;
 }
 
+.panel-content :deep(.md-heading) {
+  font-weight: 600;
+  margin: var(--space-2) 0 var(--space-1);
+  color: var(--text-primary);
+}
+
+.panel-content :deep(.md-list) {
+  margin: var(--space-1) 0;
+  padding-left: var(--space-5);
+  font-size: inherit;
+}
+
+.panel-content :deep(.md-list li) {
+  margin-bottom: 2px;
+}
+
+.panel-content :deep(.md-pre) {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-sm);
+  padding: var(--space-2);
+  margin: var(--space-2) 0;
+  overflow-x: auto;
+  font-size: var(--text-sm);
+}
+
+.panel-content :deep(.md-pre code) {
+  font-family: var(--font-mono);
+  font-size: inherit;
+}
+
 /* Dark mode overrides */
 :root[data-theme="dark"] .detail-panel {
   border-left: 1px solid rgba(255, 255, 255, 0.08);

data/frontend/src/components/SchemaBuilder.vue

@@ -33,9 +33,11 @@
             :aria-label="`Include ${field.prop.name}`"
             @change="toggleField(field, ($event.target as HTMLInputElement).checked)"
           />
-          <button class="field-name" :class="{ dimmed: !field.included, deprecated: field.prop.deprecated }" :aria-label="`View details for ${field.prop.name}`" @click="openPropertyDetail(field.prop)">
+          <span class="field-bullet" aria-hidden="true"></span>
+          <button class="field-name" :class="{ dimmed: !field.included, deprecated: field.prop.deprecated, expandable: !!field.resolvedDef }" :aria-label="field.resolvedDef ? `${field.expanded ? 'Collapse' : 'Expand'} ${field.prop.name}` : `View details for ${field.prop.name}`" @click="field.resolvedDef && field.included ? (field.expanded = !field.expanded) : openPropertyDetail(field.prop)">
             <span v-if="field.prop.title && field.prop.title !== field.prop.name" class="field-human-title">{{ field.prop.title }}</span>
             <span class="font-mono">{{ field.prop.name }}</span>
+            <span v-if="field.resolvedDef" class="field-expand-icon" :class="{ expanded: field.expanded }">&#9654;</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>
@@ -247,7 +249,7 @@
             </button>
           </div>
         </div>
-        <pre ref="jsonBlockRef" class="json-block" @click="handleJsonClick" @dblclick="selectJsonBlock" v-html="highlightedJson"></pre>
+        <pre ref="jsonBlockRef" class="json-block" @click="handleJsonClick" @keydown="handleJsonKey" @dblclick="selectJsonBlock" v-html="highlightedJson"></pre>
         <div v-if="!hasIncludedFields" class="json-empty-hint">
           <span class="text-muted">Check fields to build JSON</span>
         </div>
@@ -433,6 +435,19 @@ function collapseAllJson() {
 function handleJsonClick(event: MouseEvent) {
   const target = event.target as HTMLElement
   if (!target.classList.contains('jv-toggle')) return
+  toggleJsonNode(target)
+}
+
+function handleJsonKey(event: KeyboardEvent) {
+  const target = event.target as HTMLElement
+  if (!target.classList.contains('jv-toggle')) return
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    toggleJsonNode(target)
+  }
+}
+
+function toggleJsonNode(target: HTMLElement) {
   const parent = target.parentElement
   if (!parent) return
   const children = parent.querySelector('.jv-children')
@@ -628,6 +643,23 @@ async function copyJson() {
   cursor: default;
 }
 
+.field-bullet {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--border-medium);
+  flex-shrink: 0;
+  margin-left: -2px;
+}
+
+.field-bullet + .field-name.dimmed {
+  opacity: 0.35;
+}
+
+.field-bullet + .field-name.dimmed + .field-bullet {
+  opacity: 0.35;
+}
+
 .field-name {
   font-weight: 600;
   font-size: var(--text-sm);
@@ -666,6 +698,21 @@ async function copyJson() {
   opacity: 0.7;
 }
 
+.field-name.expandable .font-mono:hover {
+  color: var(--color-primary);
+}
+
+.field-expand-icon {
+  font-size: 8px;
+  color: var(--text-muted);
+  transition: transform var(--transition-fast);
+  margin-left: 2px;
+}
+
+.field-expand-icon.expanded {
+  transform: rotate(90deg);
+}
+
 .field-type-badge {
   font-size: 11px;
   font-weight: 500;
@@ -937,6 +984,38 @@ async function copyJson() {
   text-decoration: underline;
 }
 
+.field-desc :deep(.md-heading) {
+  font-weight: 600;
+  margin: var(--space-2) 0 var(--space-1);
+  color: var(--text-primary);
+  font-size: inherit;
+}
+
+.field-desc :deep(.md-list) {
+  margin: var(--space-1) 0;
+  padding-left: var(--space-5);
+  font-size: inherit;
+}
+
+.field-desc :deep(.md-list li) {
+  margin-bottom: 2px;
+}
+
+.field-desc :deep(.md-pre) {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-sm);
+  padding: var(--space-2);
+  margin: var(--space-2) 0;
+  overflow-x: auto;
+  font-size: var(--text-xs);
+}
+
+.field-desc :deep(.md-pre code) {
+  font-family: var(--font-mono);
+  font-size: inherit;
+}
+
 .field-constraints {
   display: flex;
   flex-wrap: wrap;

data/frontend/src/composables/useMarkdownLite.ts

@@ -1,6 +1,7 @@
 /**
  * Lightweight inline Markdown renderer for schema descriptions.
- * Handles: **bold**, *italic*, `code`, [link](url), ```fenced code blocks```
+ * Handles: **bold**, *italic*, `code`, [link](url), ```fenced code blocks```,
+ * bullet lists (-, *, +), numbered lists (1.), headings (###).
  */
 export function renderInlineMarkdown(text: string): string {
   if (!text) return ''
@@ -8,12 +9,82 @@ export function renderInlineMarkdown(text: string): string {
 
   // Fenced code blocks: ```lang\n...\n```  (must run before inline code)
   html = html.replace(/```[\w]*\n([\s\S]*?)```/g, (_match, code: string) => {
-    return `<pre class="md-pre"><code>${code.trim()}</code></pre>`
+    return `\x00FENCED${code.trim()}\x00ENDFENCED`
   })
 
-  // Line breaks: \n → <br> (after fenced code blocks are extracted)
+  // Split into lines for block-level processing
+  const lines = html.split('\n')
+  const result: string[] = []
+  let inUl = false
+  let inOl = false
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+
+    // Skip fenced code block internals (already escaped)
+    if (line.includes('\x00FENCED') || line.includes('\x00ENDFENCED')) {
+      if (inUl) { result.push('</ul>'); inUl = false }
+      if (inOl) { result.push('</ol>'); inOl = false }
+      result.push(line)
+      continue
+    }
+
+    // Heading: ### text
+    const headingMatch = line.match(/^(#{1,4})\s+(.+)$/)
+    if (headingMatch) {
+      if (inUl) { result.push('</ul>'); inUl = false }
+      if (inOl) { result.push('</ol>'); inOl = false }
+      const level = headingMatch[1].length
+      result.push(`<h${level + 2} class="md-heading">${headingMatch[2]}</h${level + 2}>`)
+      continue
+    }
+
+    // Bullet list: -, *, + followed by space
+    const ulMatch = line.match(/^(\s*)([-*+])\s+(.+)$/)
+    if (ulMatch) {
+      if (inOl) { result.push('</ol>'); inOl = false }
+      if (!inUl) { result.push('<ul class="md-list">'); inUl = true }
+      result.push(`<li>${applyInline(ulMatch[3])}</li>`)
+      continue
+    }
+
+    // Numbered list: 1. text
+    const olMatch = line.match(/^(\s*)\d+\.\s+(.+)$/)
+    if (olMatch) {
+      if (inUl) { result.push('</ul>'); inUl = false }
+      if (!inOl) { result.push('<ol class="md-list">'); inOl = true }
+      result.push(`<li>${applyInline(olMatch[2])}</li>`)
+      continue
+    }
+
+    // Close list if non-list line encountered
+    if (inUl) { result.push('</ul>'); inUl = false }
+    if (inOl) { result.push('</ol>'); inOl = false }
+
+    // Regular line
+    result.push(line)
+  }
+
+  if (inUl) result.push('</ul>')
+  if (inOl) result.push('</ol>')
+
+  html = result.join('\n')
+
+  // Restore fenced code blocks
+  html = html.replace(/\x00FENCED([\s\S]*?)\x00ENDFENCED/g, (_match, code: string) => {
+    return `<pre class="md-pre"><code>${code}</code></pre>`
+  })
+
+  // Line breaks: \n → <br> (after block elements are formed)
   html = html.replace(/\n/g, '<br>')
 
+  // Apply inline formatting to the whole output
+  html = applyInline(html)
+
+  return html
+}
+
+function applyInline(html: string): string {
   // Links: [text](url)
   html = html.replace(
     /\[([^\]]+)\]\(([^)]+)\)/g,
@@ -27,7 +98,6 @@ export function renderInlineMarkdown(text: string): string {
   html = html.replace(/(?<!_)_(?!_)(.+?)(?<!_)_(?!_)/g, '<em>$1</em>')
   // Code: `text`
   html = html.replace(/`([^`]+)`/g, '<code class="md-code">$1</code>')
-
   return html
 }
 

data/frontend/src/views/HomeView.vue

@@ -187,15 +187,18 @@
       <div v-if="viewMode === 'source'" class="schema-section">
         <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 copy-btn-wrap" @click="copySource">
-              Copy
-              <span v-if="sourceCopied" class="copy-tooltip">Copied!</span>
-            </button>
+            <span class="text-muted">Source JSON Schema</span>
+            <div class="source-toolbar-actions">
+              <button class="btn btn-ghost btn-sm copy-btn-wrap" @click="copySource">
+                Copy
+                <span v-if="sourceCopied" class="copy-tooltip">Copied!</span>
+              </button>
+              <button class="btn btn-ghost btn-sm" @click="expandSourceAll">Expand all</button>
+              <button class="btn btn-ghost btn-sm" @click="collapseSourceAll">Collapse all</button>
+            </div>
           </div>
           <div class="source-code-wrapper">
-            <div class="source-lines" aria-hidden="true"><span v-for="n in sourceLineCount" :key="n" :class="{ 'source-line-active': n === activeSourceLine }" @click="activeSourceLine = n">{{ n }}</span></div>
-            <pre class="source-pre" @dblclick="selectSourceBlock"><code v-html="highlightedSource"></code></pre>
+            <pre ref="sourcePreRef" class="source-pre" @click="handleSourceClick" @keydown="handleSourceKey" @dblclick="selectSourceBlock"><code v-html="highlightedSource"></code></pre>
           </div>
         </div>
         <div v-else class="source-empty">
@@ -208,7 +211,10 @@
     <div v-else class="landing-page">
       <div class="landing-header">
         <div>
-          <h1>{{ schemaStore.metadata?.title || 'JSON Schema Documentation' }}</h1>
+          <div class="landing-title-row">
+            <h1>{{ schemaStore.metadata?.title || 'JSON Schema Documentation' }}</h1>
+            <span v-if="schemaStore.metadata?.version" class="version-badge">v{{ schemaStore.metadata.version }}</span>
+          </div>
           <p v-if="schemaStore.metadata?.description" class="landing-description">{{ schemaStore.metadata.description }}</p>
           <div class="landing-subtitle">
             <span>{{ schemaStore.schemaCounts.schemas }} schemas</span>
@@ -216,6 +222,10 @@
             <span>{{ schemaStore.schemaCounts.properties }} properties</span>
             <span class="separator">&middot;</span>
             <span>{{ schemaStore.schemaCounts.definitions }} definitions</span>
+            <template v-if="schemaStore.metadata?.baseUrl">
+              <span class="separator">&middot;</span>
+              <a :href="schemaStore.metadata.baseUrl" target="_blank" rel="noopener" class="landing-base-url">{{ schemaStore.metadata.baseUrl }}</a>
+            </template>
           </div>
           <div v-if="schemaStore.schemas.length > 3" class="landing-search">
             <input
@@ -294,6 +304,7 @@ import { useUiStore } from '../stores/uiStore'
 import SchemaBuilder from '../components/SchemaBuilder.vue'
 import { downloadFile } from '../composables/useDownload'
 import { renderInlineMarkdown } from '../composables/useMarkdownLite'
+import { jsonToCollapsibleHtml } from '../composables/useJsonViewer'
 import { copyToClipboard } from '../composables/useClipboard'
 import type { SpaSchema, SpaProperty } from '../types'
 
@@ -305,6 +316,7 @@ const sourceCopied = ref(false)
 const activeSourceLine = ref(-1)
 const landingSearch = ref('')
 const linkCopied = ref(false)
+const sourcePreRef = ref<HTMLElement | null>(null)
 
 const selectedDefinitionTitle = computed(() => {
   const name = schemaStore.selectedDefinitionName
@@ -348,7 +360,11 @@ function collapseAllDefs() {
 const highlightedSource = computed(() => {
   const src = schemaStore.selectedSchema?.sourceJson
   if (!src) return ''
-  return syntaxHighlight(src)
+  try {
+    return jsonToCollapsibleHtml(JSON.parse(src), 2)
+  } catch {
+    return syntaxHighlight(src)
+  }
 })
 
 const sourceLineCount = computed(() => {
@@ -392,7 +408,7 @@ function syntaxHighlight(json: string): string {
 }
 
 function selectSourceBlock() {
-  const el = document.querySelector('.source-pre') as HTMLElement | null
+  const el = sourcePreRef.value
   if (!el) return
   const range = document.createRange()
   range.selectNodeContents(el)
@@ -403,6 +419,57 @@ function selectSourceBlock() {
   }
 }
 
+function handleSourceClick(event: MouseEvent) {
+  const target = event.target as HTMLElement
+  if (!target.classList.contains('jv-toggle')) return
+  toggleSourceNode(target)
+}
+
+function handleSourceKey(event: KeyboardEvent) {
+  const target = event.target as HTMLElement
+  if (!target.classList.contains('jv-toggle')) return
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    toggleSourceNode(target)
+  }
+}
+
+function toggleSourceNode(target: HTMLElement) {
+  const parent = target.parentElement
+  if (!parent) return
+  const children = parent.querySelector('.jv-children')
+  if (!children) return
+  const isCollapsed = children.classList.contains('jv-collapsed')
+  if (isCollapsed) {
+    children.classList.remove('jv-collapsed')
+    target.setAttribute('aria-label', 'collapse')
+  } else {
+    children.classList.add('jv-collapsed')
+    target.setAttribute('aria-label', 'expand')
+  }
+}
+
+function expandSourceAll() {
+  const container = sourcePreRef.value
+  if (!container) return
+  container.querySelectorAll('.jv-collapsed').forEach(el => el.classList.remove('jv-collapsed'))
+  container.querySelectorAll('.jv-toggle').forEach(btn => btn.setAttribute('aria-label', 'collapse'))
+}
+
+function collapseSourceAll() {
+  const container = sourcePreRef.value
+  if (!container) return
+  const children = container.querySelectorAll('.jv-children')
+  children.forEach((el, i) => {
+    if (i === 0) return
+    el.classList.add('jv-collapsed')
+  })
+  container.querySelectorAll('.jv-toggle').forEach((btn, i) => {
+    if (i === 0) return
+    btn.setAttribute('aria-label', 'expand')
+  })
+}
+
 function selectSchema(name: string) {
   schemaStore.selectSchema(name)
 }
@@ -814,6 +881,11 @@ watch(() => schemaStore.selectedItemKey, (key) => {
   font-size: var(--text-xs);
 }
 
+.source-toolbar-actions {
+  display: flex;
+  gap: var(--space-2);
+}
+
 /* Copy button tooltip */
 .copy-btn-wrap {
   position: relative;
@@ -852,56 +924,112 @@ watch(() => schemaStore.selectedItemKey, (key) => {
 }
 
 .source-code-wrapper {
-  display: flex;
   max-height: 70vh;
   overflow: auto;
 }
 
-.source-lines {
-  display: flex;
-  flex-direction: column;
-  padding: var(--space-4) var(--space-2) var(--space-4) var(--space-3);
-  text-align: right;
-  user-select: none;
-  flex-shrink: 0;
-  background: var(--bg-secondary);
-  border-right: 1px solid var(--border-light);
+.source-pre :deep(.json-key) { color: var(--color-primary-dark); }
+.source-pre :deep(.json-string) { color: var(--color-green); }
+.source-pre :deep(.json-number) { color: var(--color-orange); }
+.source-pre :deep(.json-boolean) { color: var(--color-accent); }
+.source-pre :deep(.json-null) { color: var(--text-muted); }
+
+.source-pre :deep(.json-url) {
+  color: var(--color-green);
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+.source-pre :deep(.json-url:hover) {
+  text-decoration-style: solid;
 }
 
-.source-lines span {
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  line-height: var(--leading-relaxed);
+/* Collapsible JSON in source viewer */
+.source-pre :deep(ul) {
+  list-style: none;
+  padding-left: var(--space-4);
+  margin: 0;
+}
+
+.source-pre :deep(li) {
+  margin: 0;
+}
+
+.source-pre :deep(.jv-toggle) {
+  background: none;
+  border: 1px solid var(--border-medium);
+  border-radius: 2px;
+  cursor: pointer;
+  width: 14px;
+  height: 14px;
+  font-size: 9px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   color: var(--text-muted);
-  display: block;
-  padding: 0 4px;
+  padding: 0;
+  margin-right: 4px;
+  vertical-align: middle;
+  transition: background var(--transition-fast);
 }
 
-.source-lines span:hover {
+.source-pre :deep(.jv-toggle:hover) {
   background: var(--bg-hover);
-  border-radius: 2px;
 }
 
-.source-lines span.source-line-active {
-  background: var(--color-primary-alpha);
-  color: var(--color-primary);
-  border-radius: 2px;
-  font-weight: 600;
+.source-pre :deep(.jv-toggle[aria-label="expand"])::after { content: '+'; }
+.source-pre :deep(.jv-toggle[aria-label="collapse"])::after { content: '−'; }
+
+.source-pre :deep(.jv-ellipsis) {
+  display: none;
+  color: var(--text-muted);
+  font-size: var(--text-xs);
+  font-style: italic;
+  margin-left: 4px;
 }
 
-.source-pre :deep(.json-key) { color: var(--color-primary-dark); }
-.source-pre :deep(.json-string) { color: var(--color-green); }
-.source-pre :deep(.json-number) { color: var(--color-orange); }
-.source-pre :deep(.json-boolean) { color: var(--color-accent); }
-.source-pre :deep(.json-null) { color: var(--text-muted); }
+.source-pre :deep(.jv-children.jv-collapsed) {
+  display: none;
+}
 
-.source-pre :deep(.json-url) {
+.source-pre :deep(.jv-children.jv-collapsed + .jv-ellipsis) {
+  display: inline;
+}
+
+.source-pre :deep(.jv-key) {
+  color: var(--color-primary-dark);
+  font-weight: 500;
+}
+
+.source-pre :deep(.jv-punct) {
+  color: var(--text-muted);
+}
+
+.source-pre :deep(.jv-string) {
+  color: var(--color-green);
+}
+
+.source-pre :deep(.jv-number) {
+  color: var(--color-orange);
+}
+
+.source-pre :deep(.jv-boolean) {
+  color: var(--color-accent);
+}
+
+.source-pre :deep(.jv-null) {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.source-pre :deep(.jv-link) {
   color: var(--color-green);
   text-decoration: underline;
-  text-decoration-style: dotted;
 }
-.source-pre :deep(.json-url:hover) {
-  text-decoration-style: solid;
+
+.source-pre :deep(.jv-row:hover) {
+  background: var(--bg-hover);
+  border-radius: 2px;
 }
 
 :root[data-theme="dark"] .source-pre :deep(.json-key) { color: var(--color-primary-light); }
@@ -910,23 +1038,18 @@ watch(() => schemaStore.selectedItemKey, (key) => {
 :root[data-theme="dark"] .source-pre :deep(.json-boolean) { color: var(--color-primary-light); }
 :root[data-theme="dark"] .source-pre :deep(.json-null) { color: var(--text-muted); }
 
+:root[data-theme="dark"] .source-pre :deep(.jv-key) { color: var(--color-primary-light); }
+:root[data-theme="dark"] .source-pre :deep(.jv-string) { color: var(--color-teal); }
+:root[data-theme="dark"] .source-pre :deep(.jv-number) { color: var(--color-accent-light); }
+:root[data-theme="dark"] .source-pre :deep(.jv-boolean) { color: var(--color-primary-light); }
+:root[data-theme="dark"] .source-pre :deep(.jv-null) { color: var(--text-muted); }
+:root[data-theme="dark"] .source-pre :deep(.jv-toggle) { border-color: rgba(255, 255, 255, 0.2); }
+:root[data-theme="dark"] .source-pre :deep(.jv-punct) { color: var(--panel-dark-muted); }
+:root[data-theme="dark"] .source-pre :deep(.jv-row:hover) { background: rgba(255, 255, 255, 0.06); }
+
 :root[data-theme="dark"] .source-code-wrapper {
   background: var(--panel-dark-bg);
 }
-:root[data-theme="dark"] .source-lines {
-  background: rgba(0, 0, 0, 0.15);
-  border-right-color: rgba(255, 255, 255, 0.08);
-}
-:root[data-theme="dark"] .source-lines span {
-  color: var(--panel-dark-muted);
-}
-:root[data-theme="dark"] .source-lines span:hover {
-  background: rgba(255, 255, 255, 0.06);
-}
-:root[data-theme="dark"] .source-lines span.source-line-active {
-  background: rgba(91, 156, 212, 0.2);
-  color: var(--color-primary-light);
-}
 :root[data-theme="dark"] .source-pre {
   color: var(--panel-dark-text);
 }
@@ -1039,6 +1162,48 @@ watch(() => schemaStore.selectedItemKey, (key) => {
   text-decoration: underline;
 }
 
+.def-card-desc :deep(.md-heading),
+.def-body-desc :deep(.md-heading),
+.schema-desc :deep(.md-heading) {
+  font-weight: 600;
+  margin: var(--space-2) 0 var(--space-1);
+  color: var(--text-primary);
+  font-size: inherit;
+}
+
+.def-card-desc :deep(.md-list),
+.def-body-desc :deep(.md-list),
+.schema-desc :deep(.md-list) {
+  margin: var(--space-1) 0;
+  padding-left: var(--space-5);
+  font-size: inherit;
+}
+
+.def-card-desc :deep(.md-list li),
+.def-body-desc :deep(.md-list li),
+.schema-desc :deep(.md-list li) {
+  margin-bottom: 2px;
+}
+
+.def-card-desc :deep(.md-pre),
+.def-body-desc :deep(.md-pre),
+.schema-desc :deep(.md-pre) {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-sm);
+  padding: var(--space-2);
+  margin: var(--space-2) 0;
+  overflow-x: auto;
+  font-size: var(--text-xs);
+}
+
+.def-card-desc :deep(.md-pre code),
+.def-body-desc :deep(.md-pre code),
+.schema-desc :deep(.md-pre code) {
+  font-family: var(--font-mono);
+  font-size: inherit;
+}
+
 .def-card-info {
   padding: 0 var(--space-4) var(--space-3);
   margin-top: calc(var(--space-1) * -1);
@@ -1349,6 +1514,27 @@ watch(() => schemaStore.selectedItemKey, (key) => {
   margin-bottom: var(--space-2);
 }
 
+.landing-title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+.landing-title-row h1 {
+  margin-bottom: 0;
+}
+
+.version-badge {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-muted);
+  background: var(--bg-secondary);
+  padding: 2px 8px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-light);
+  font-family: var(--font-mono);
+}
+
 .landing-description {
   font-size: var(--text-base);
   color: var(--text-secondary);
@@ -1411,6 +1597,17 @@ watch(() => schemaStore.selectedItemKey, (key) => {
   margin: 0 var(--space-1);
 }
 
+.landing-base-url {
+  color: var(--color-primary);
+  text-decoration: none;
+  font-size: var(--text-sm);
+  font-family: var(--font-mono);
+}
+
+.landing-base-url:hover {
+  text-decoration: underline;
+}
+
 .schema-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -1484,6 +1681,16 @@ watch(() => schemaStore.selectedItemKey, (key) => {
   text-decoration: underline;
 }
 
+.schema-card-desc :deep(.md-list) {
+  margin: var(--space-1) 0;
+  padding-left: var(--space-5);
+  font-size: inherit;
+}
+
+.schema-card-desc :deep(.md-pre) {
+  display: none;
+}
+
 .schema-card-meta {
   margin-bottom: var(--space-2);
 }

data/lib/lutaml/jsonschema/version.rb

@@ -2,6 +2,6 @@
 
 module Lutaml
   module Jsonschema
-    VERSION = "0.1.14"
+    VERSION = "0.1.15"
   end
 end

metadata

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