lutaml-jsonschema 0.1.2 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 80d56fbc558fd39c49bc397b01a2cd3cdf5d19b475483fbe50968b6cc7c8e6f6
-  data.tar.gz: 6cee07bff101bcbd7ed60639af85d99376c2b899c23be949a73401ecda5d6cb8
+  metadata.gz: a31e1dc445c583474f10cf52d8468991193679ab428af9d46a0f760492373a2d
+  data.tar.gz: 7dfe7fd154e030c64a9670b4d0c694b83e397fa8cff9d08d83222869bbfc1917
 SHA512:
-  metadata.gz: fd8be87137f96a96c1cfc5ebc608a8cdc8a6726541ab1812e99e25f502db980efb83a464baa3e43b92520b2e25bacbb396c91792778cca6235efeb021ba3f9e3
-  data.tar.gz: 479d21b5e4df3626fe75c6c4c88ee61f16db6467b9774e024c0f4c6e120c6aa1e86a599819b3ff766896d2a867593aa7ca0b080142e4307aeae224da245f2d55
+  metadata.gz: 2a884595f8021d51474b547a1a06087aec67a5286250ba493f74657f8d9c7e3b8fdfc089c2cad865a90b9fceff984f877f1376c82adceb0928cfc33807b765c7
+  data.tar.gz: f01cba83ee80adda6d6bc5ef16494fd23bbee7f0258759f4ea7ddc55305b9c535ab5c2ac4a0be15d8acc5fcbfef8d8f81b5a6655309501d3e2a9cde7f20bb475

data/frontend/src/__tests__/useSchemaTypes.test.ts

@@ -11,6 +11,7 @@ import {
   isObjectProperty,
   hasConstraints,
   parsePropertyValue,
+  humanizeConstraints,
 } from '../composables/useSchemaTypes'
 import type { SpaProperty } from '../types'
 
@@ -205,6 +206,79 @@ describe('hasConstraints', () => {
   it('returns true for const', () => {
     expect(hasConstraints(prop({ const: 'fixed' }))).toBe(true)
   })
+
+  it('returns true for exclusiveMinimum', () => {
+    expect(hasConstraints(prop({ exclusiveMinimum: 0 }))).toBe(true)
+  })
+
+  it('returns true for exclusiveMaximum', () => {
+    expect(hasConstraints(prop({ exclusiveMaximum: 100 }))).toBe(true)
+  })
+
+  it('returns true for contentMediaType', () => {
+    expect(hasConstraints(prop({ contentMediaType: 'text/html' }))).toBe(true)
+  })
+
+  it('returns true for contentEncoding', () => {
+    expect(hasConstraints(prop({ contentEncoding: 'base64' }))).toBe(true)
+  })
+})
+
+describe('humanizeConstraints', () => {
+  it('returns string range constraint', () => {
+    const chips = humanizeConstraints(prop({ type: 'string', minLength: 1, maxLength: 100 }))
+    expect(chips).toEqual([{ label: '1..100 characters' }])
+  })
+
+  it('returns numeric >= and <= constraints', () => {
+    const chips = humanizeConstraints(prop({ type: 'integer', minimum: 0, maximum: 100 }))
+    expect(chips.map(c => c.label)).toEqual(['>= 0', '<= 100'])
+  })
+
+  it('returns exclusive bounds with > and <', () => {
+    const chips = humanizeConstraints(prop({ type: 'number', exclusiveMinimum: 0, exclusiveMaximum: 100 }))
+    expect(chips.map(c => c.label)).toEqual(['> 0', '< 100'])
+  })
+
+  it('returns array range constraint', () => {
+    const chips = humanizeConstraints(prop({ type: 'array', minItems: 1, maxItems: 10 }))
+    expect(chips).toEqual([{ label: '1..10 items' }])
+  })
+
+  it('returns unique for uniqueItems', () => {
+    const chips = humanizeConstraints(prop({ type: 'array', uniqueItems: true }))
+    expect(chips.map(c => c.label)).toEqual(['unique'])
+  })
+
+  it('returns const chip', () => {
+    const chips = humanizeConstraints(prop({ const: 'v1' }))
+    expect(chips.map(c => c.label)).toEqual(['const: v1'])
+  })
+
+  it('returns pattern chip', () => {
+    const chips = humanizeConstraints(prop({ pattern: '^[a-z]+$' }))
+    expect(chips.map(c => c.label)).toEqual(['^[a-z]+$'])
+  })
+
+  it('returns default chip', () => {
+    const chips = humanizeConstraints(prop({ default: 'hello' }))
+    expect(chips.map(c => c.label)).toEqual(['default: hello'])
+  })
+
+  it('returns multipleOf chip', () => {
+    const chips = humanizeConstraints(prop({ type: 'integer', multipleOf: 5 }))
+    expect(chips.map(c => c.label)).toEqual(['multiple of 5'])
+  })
+
+  it('returns empty array for no constraints', () => {
+    const chips = humanizeConstraints(prop({ type: 'string' }))
+    expect(chips).toEqual([])
+  })
+
+  it('returns contentMediaType and contentEncoding', () => {
+    const chips = humanizeConstraints(prop({ contentMediaType: 'text/html', contentEncoding: 'base64' }))
+    expect(chips.map(c => c.label)).toEqual(['content-type: text/html', 'encoding: base64'])
+  })
 })
 
 describe('parsePropertyValue', () => {

data/frontend/src/components/AppSidebar.vue

@@ -62,6 +62,7 @@
               >
                 <span class="badge badge-definition-sm">D</span>
                 <span class="tree-item-name">{{ def.title || def.name }}</span>
+                <span class="tree-item-count">{{ def.properties.length }}</span>
               </div>
             </div>
           </div>
@@ -342,6 +343,15 @@ function selectDefinition(schemaName: string, defName: string) {
   text-overflow: ellipsis;
 }
 
+.tree-item-count {
+  font-size: 10px;
+  color: var(--text-muted);
+  background: var(--bg-primary);
+  padding: 0px 4px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
 .badge-definition-sm {
   background: var(--badge-definition-bg);
   color: var(--badge-definition);

data/frontend/src/components/DetailPanel.vue

@@ -102,6 +102,46 @@
                     <td class="constraint-key">Items</td>
                     <td>{{ (item as any).property.itemsType }}</td>
                   </tr>
+                  <tr v-if="(item as any).property.exclusiveMinimum != null">
+                    <td class="constraint-key">Exclusive Min</td>
+                    <td>{{ (item as any).property.exclusiveMinimum }}</td>
+                  </tr>
+                  <tr v-if="(item as any).property.exclusiveMaximum != null">
+                    <td class="constraint-key">Exclusive Max</td>
+                    <td>{{ (item as any).property.exclusiveMaximum }}</td>
+                  </tr>
+                  <tr v-if="(item as any).property.minItems != null">
+                    <td class="constraint-key">Min Items</td>
+                    <td>{{ (item as any).property.minItems }}</td>
+                  </tr>
+                  <tr v-if="(item as any).property.maxItems != null">
+                    <td class="constraint-key">Max Items</td>
+                    <td>{{ (item as any).property.maxItems }}</td>
+                  </tr>
+                  <tr v-if="(item as any).property.uniqueItems">
+                    <td class="constraint-key">Unique Items</td>
+                    <td>Yes</td>
+                  </tr>
+                  <tr v-if="(item as any).property.multipleOf != null">
+                    <td class="constraint-key">Multiple Of</td>
+                    <td>{{ (item as any).property.multipleOf }}</td>
+                  </tr>
+                  <tr v-if="(item as any).property.const != null">
+                    <td class="constraint-key">Const</td>
+                    <td class="font-mono">{{ (item as any).property.const }}</td>
+                  </tr>
+                  <tr v-if="(item as any).property.contentMediaType">
+                    <td class="constraint-key">Content Type</td>
+                    <td>{{ (item as any).property.contentMediaType }}</td>
+                  </tr>
+                  <tr v-if="(item as any).property.contentEncoding">
+                    <td class="constraint-key">Content Encoding</td>
+                    <td>{{ (item as any).property.contentEncoding }}</td>
+                  </tr>
+                  <tr v-if="(item as any).property.additionalProperties === false">
+                    <td class="constraint-key">Additional Props</td>
+                    <td>Denied</td>
+                  </tr>
                 </tbody>
               </table>
             </div>
@@ -204,7 +244,11 @@ const hasConstraints = computed(() => {
   const p = item.value.property
   return p.minimum != null || p.maximum != null ||
     p.minLength != null || p.maxLength != null ||
-    p.pattern || p.enum?.length || p.itemsType
+    p.pattern || p.enum?.length || p.itemsType ||
+    p.exclusiveMinimum != null || p.exclusiveMaximum != null ||
+    p.minItems != null || p.maxItems != null || p.uniqueItems ||
+    p.multipleOf != null || p.const != null ||
+    p.contentMediaType || p.contentEncoding
 })
 
 type TabId = 'overview' | 'properties'

data/frontend/src/components/SchemaBuilder.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="builder-layout">
     <div class="builder-fields">
-      <div v-for="field in fields" :key="field.prop.name" class="field-row">
+      <div v-for="(field, idx) in sortedFields" :key="field.prop.name" class="field-row" :class="{ 'field-row-alt': idx % 2 === 1 }">
         <div class="field-main">
           <input
             type="checkbox"
@@ -113,20 +113,10 @@
         <div v-if="field.prop.description" class="field-desc text-secondary">{{ field.prop.description }}</div>
 
         <div v-if="hasConstraints(field.prop) || field.prop.ref" class="field-constraints">
-          <span v-if="field.prop.ref" class="constraint-chip">ref → {{ field.resolvedDef?.title || field.resolvedDef?.name || field.prop.ref }}</span>
+          <span v-if="field.prop.ref" class="constraint-chip chip-ref">ref → {{ field.resolvedDef?.title || field.resolvedDef?.name || field.prop.ref }}</span>
           <span v-if="field.prop.enum?.length && isObjectProperty(field.prop)" class="constraint-chip">enum: {{ field.prop.enum.join(' | ') }}</span>
-          <span v-if="field.prop.pattern" class="constraint-chip font-mono">/{{ field.prop.pattern }}/</span>
-          <span v-if="field.prop.minimum != null" class="constraint-chip">min: {{ field.prop.minimum }}</span>
-          <span v-if="field.prop.maximum != null" class="constraint-chip">max: {{ field.prop.maximum }}</span>
-          <span v-if="field.prop.minLength != null" class="constraint-chip">minLength: {{ field.prop.minLength }}</span>
-          <span v-if="field.prop.maxLength != null" class="constraint-chip">maxLength: {{ field.prop.maxLength }}</span>
-          <span v-if="field.prop.default != null" class="constraint-chip">default: {{ field.prop.default }}</span>
-          <span v-if="field.prop.const != null" class="constraint-chip">const: {{ field.prop.const }}</span>
-          <span v-if="field.prop.minItems != null" class="constraint-chip">minItems: {{ field.prop.minItems }}</span>
-          <span v-if="field.prop.maxItems != null" class="constraint-chip">maxItems: {{ field.prop.maxItems }}</span>
-          <span v-if="field.prop.uniqueItems" class="constraint-chip">unique</span>
-          <span v-if="field.prop.multipleOf != null" class="constraint-chip">multipleOf: {{ field.prop.multipleOf }}</span>
-          <span v-if="field.prop.examples?.length" class="constraint-chip">e.g. {{ field.prop.examples.join(', ') }}</span>
+          <span v-for="(chip, idx) in humanizeConstraints(field.prop)" :key="idx" class="constraint-chip" :class="chip.class">{{ chip.label }}</span>
+          <span v-if="field.prop.additionalProperties === false" class="constraint-chip chip-locked">no additional properties</span>
         </div>
 
         <!-- Nested object builder -->
@@ -156,7 +146,7 @@
         </div>
       </div>
 
-      <div v-if="!fields.length" class="empty-hint">
+      <div v-if="!sortedFields.length" class="empty-hint">
         <p class="text-muted">No properties defined.</p>
       </div>
     </div>
@@ -169,7 +159,7 @@
             {{ copied ? 'Copied!' : 'Copy' }}
           </button>
         </div>
-        <pre class="json-block"><code>{{ outputJson }}</code></pre>
+        <pre class="json-block"><code v-html="highlightedJson"></code></pre>
       </div>
     </div>
   </div>
@@ -186,6 +176,7 @@ import {
   arrayDefaultValue,
   isObjectProperty,
   hasConstraints,
+  humanizeConstraints,
 } from '../composables/useSchemaTypes'
 import {
   createField,
@@ -212,6 +203,14 @@ const copied = ref(false)
 
 const fields = ref<BuilderField[]>(props.properties.map(p => createField(p, props.required, props.schema, props.allSchemas)))
 
+const sortedFields = computed(() => {
+  return [...fields.value].sort((a, b) => {
+    if (a.isRequired && !b.isRequired) return -1
+    if (!a.isRequired && b.isRequired) return 1
+    return 0
+  })
+})
+
 function toggleField(field: BuilderField, checked: boolean) {
   field.included = checked
   if (!checked) field.expanded = false
@@ -236,6 +235,23 @@ const outputObj = computed(() => {
 
 watch(outputObj, (v) => { emit('update:json', v) }, { immediate: true, deep: true })
 
+const highlightedJson = computed(() => syntaxHighlight(outputJson.value))
+
+function syntaxHighlight(json: string): string {
+  return json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    .replace(/("(\\u[\da-fA-F]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g, (match) => {
+      let cls = 'json-number'
+      if (/^"/.test(match)) {
+        cls = /:$/.test(match) ? 'json-key' : 'json-string'
+      } else if (/true|false/.test(match)) {
+        cls = 'json-boolean'
+      } else if (/null/.test(match)) {
+        cls = 'json-null'
+      }
+      return `<span class="${cls}">${match}</span>`
+    })
+}
+
 async function copyJson() {
   try {
     await navigator.clipboard.writeText(outputJson.value)
@@ -268,6 +284,14 @@ async function copyJson() {
   background: var(--bg-hover);
 }
 
+.field-row-alt {
+  background: var(--bg-secondary);
+}
+
+.field-row-alt:hover {
+  background: var(--bg-hover);
+}
+
 .field-main {
   display: flex;
   align-items: center;
@@ -463,6 +487,16 @@ async function copyJson() {
   border-radius: var(--radius-sm);
 }
 
+.constraint-chip.chip-pattern {
+  font-family: var(--font-mono);
+}
+
+.constraint-chip.chip-locked {
+  color: var(--color-orange);
+  background: var(--color-orange-alpha);
+  font-weight: 500;
+}
+
 .nested-section {
   margin-left: 22px;
   margin-top: var(--space-2);
@@ -535,6 +569,15 @@ async function copyJson() {
   color: var(--text-primary);
 }
 
+.json-block :deep(.json-key) { color: var(--color-primary-dark); }
+.json-block :deep(.json-string) { color: var(--color-green); }
+.json-block :deep(.json-number) { color: var(--color-orange); }
+.json-block :deep(.json-boolean) { color: var(--color-accent); }
+.json-block :deep(.json-null) { color: var(--text-muted); }
+
+:root[data-theme="dark"] .json-block :deep(.json-key) { color: var(--color-primary-light); }
+:root[data-theme="dark"] .json-block :deep(.json-string) { color: var(--color-teal); }
+
 .empty-hint {
   padding: var(--space-8);
   text-align: center;

data/frontend/src/composables/useSchemaTypes.ts

@@ -132,7 +132,11 @@ export function hasConstraints(prop: SpaProperty): boolean {
     prop.maxItems != null ||
     prop.uniqueItems ||
     prop.multipleOf != null ||
-    prop.const != null
+    prop.const != null ||
+    prop.exclusiveMinimum != null ||
+    prop.exclusiveMaximum != null ||
+    prop.contentMediaType ||
+    prop.contentEncoding
   )
 }
 
@@ -155,3 +159,46 @@ export function parsePropertyValue(rawValue: string, prop: SpaProperty): unknown
   if (t === 'object' && !prop.ref) return {}
   return rawValue
 }
+
+export interface ConstraintChip {
+  label: string
+  class?: string
+}
+
+export function humanizeConstraints(prop: SpaProperty): ConstraintChip[] {
+  const chips: ConstraintChip[] = []
+  const t = primaryType(prop.type)
+
+  if (prop.const != null) chips.push({ label: `const: ${prop.const}`, class: 'chip-const' })
+
+  if (t === 'string' || !t || t === 'any') {
+    if (prop.minLength != null && prop.maxLength != null)
+      chips.push({ label: `${prop.minLength}..${prop.maxLength} characters` })
+    else if (prop.minLength != null) chips.push({ label: `>= ${prop.minLength} characters` })
+    else if (prop.maxLength != null) chips.push({ label: `<= ${prop.maxLength} characters` })
+  }
+
+  if (t === 'integer' || t === 'number') {
+    if (prop.minimum != null) chips.push({ label: `>= ${prop.minimum}` })
+    if (prop.exclusiveMinimum != null) chips.push({ label: `> ${prop.exclusiveMinimum}` })
+    if (prop.maximum != null) chips.push({ label: `<= ${prop.maximum}` })
+    if (prop.exclusiveMaximum != null) chips.push({ label: `< ${prop.exclusiveMaximum}` })
+    if (prop.multipleOf != null) chips.push({ label: `multiple of ${prop.multipleOf}` })
+  }
+
+  if (t === 'array') {
+    if (prop.minItems != null && prop.maxItems != null)
+      chips.push({ label: `${prop.minItems}..${prop.maxItems} items` })
+    else if (prop.minItems != null) chips.push({ label: `>= ${prop.minItems} items` })
+    else if (prop.maxItems != null) chips.push({ label: `<= ${prop.maxItems} items` })
+    if (prop.uniqueItems) chips.push({ label: 'unique', class: 'chip-unique' })
+  }
+
+  if (prop.pattern) chips.push({ label: `${prop.pattern}`, class: 'chip-pattern' })
+  if (prop.default != null) chips.push({ label: `default: ${prop.default}`, class: 'chip-default' })
+  if (prop.examples?.length) chips.push({ label: `e.g. ${prop.examples.join(', ')}`, class: 'chip-example' })
+  if (prop.contentMediaType) chips.push({ label: `content-type: ${prop.contentMediaType}` })
+  if (prop.contentEncoding) chips.push({ label: `encoding: ${prop.contentEncoding}` })
+
+  return chips
+}

data/frontend/src/types.ts

@@ -34,6 +34,11 @@ export interface SpaProperty {
   uniqueItems?: boolean
   multipleOf?: number
   const?: string
+  exclusiveMinimum?: number
+  exclusiveMaximum?: number
+  additionalProperties?: boolean
+  contentMediaType?: string
+  contentEncoding?: string
 }
 
 export interface SpaDefinition {
@@ -56,6 +61,9 @@ export interface SpaSchema {
   required: string[]
   examples?: string[]
   sourceJson?: string
+  $schema?: string
+  $id?: string
+  additionalProperties?: boolean
 }
 
 export interface SpaSearchEntry {

data/frontend/src/views/HomeView.vue

@@ -6,13 +6,19 @@
         <div class="schema-header-info">
           <div class="schema-title-row">
             <h1>{{ schemaStore.selectedSchema.title || schemaStore.selectedSchema.name }}</h1>
-            <button
-              v-if="schemaStore.selectedSchema.sourceJson"
-              class="btn btn-outline btn-sm"
-              @click="downloadSchema(schemaStore.selectedSchema)"
-            >
-              Download JSON
-            </button>
+            <div class="schema-actions">
+              <div class="view-toggle">
+                <button class="toggle-btn" :class="{ active: viewMode === 'builder' }" @click="viewMode = 'builder'">Builder</button>
+                <button class="toggle-btn" :class="{ active: viewMode === 'source' }" @click="viewMode = 'source'">Source</button>
+              </div>
+              <button
+                v-if="schemaStore.selectedSchema.sourceJson"
+                class="btn btn-outline btn-sm"
+                @click="downloadSchema(schemaStore.selectedSchema)"
+              >
+                Download JSON
+              </button>
+            </div>
           </div>
           <span v-if="schemaStore.selectedSchema.title && schemaStore.selectedSchema.title !== schemaStore.selectedSchema.name" class="schema-name-hint font-mono text-muted">{{ schemaStore.selectedSchema.name }}</span>
           <p v-if="schemaStore.selectedSchema.description" class="schema-desc text-secondary">{{ schemaStore.selectedSchema.description }}</p>
@@ -21,6 +27,11 @@
             <span class="text-muted">{{ schemaStore.selectedSchema.properties.length }} properties</span>
             <span v-if="schemaStore.selectedSchema.required.length" class="text-muted">&middot; {{ schemaStore.selectedSchema.required.length }} required</span>
             <span v-if="schemaStore.selectedSchema.definitions.length" class="text-muted">&middot; {{ schemaStore.selectedSchema.definitions.length }} definitions</span>
+            <span v-if="schemaStore.selectedSchema.additionalProperties === false" class="badge badge-locked">no additional properties</span>
+          </div>
+          <div v-if="schemaStore.selectedSchema.$schema || schemaStore.selectedSchema.$id" class="schema-id-row">
+            <span v-if="schemaStore.selectedSchema.$schema" class="meta-id-chip font-mono text-muted" title="JSON Schema version">{{ schemaStore.selectedSchema.$schema }}</span>
+            <span v-if="schemaStore.selectedSchema.$id" class="meta-id-chip font-mono text-muted" title="Schema $id">{{ schemaStore.selectedSchema.$id }}</span>
           </div>
           <div v-if="schemaStore.selectedSchema.required.length" class="schema-required">
             <span class="required-label text-muted">Required:</span>
@@ -35,6 +46,8 @@
         </div>
       </div>
 
+      <!-- Builder View -->
+      <template v-if="viewMode === 'builder'">
       <!-- Properties -->
       <div class="schema-section">
         <SchemaBuilder
@@ -47,7 +60,13 @@
 
       <!-- Definitions -->
       <div v-if="schemaStore.selectedSchema.definitions.length" class="schema-section">
-        <h2 class="section-heading">Definitions</h2>
+        <div class="section-heading-row">
+          <h2 class="section-heading">Definitions</h2>
+          <div class="section-actions">
+            <button class="btn btn-ghost btn-sm" @click="expandAllDefs">Expand All</button>
+            <button class="btn btn-ghost btn-sm" @click="collapseAllDefs">Collapse All</button>
+          </div>
+        </div>
         <div class="def-list">
           <div
             v-for="def in schemaStore.selectedSchema.definitions"
@@ -86,6 +105,17 @@
           </div>
         </div>
       </div>
+      </template>
+
+      <!-- Source JSON View -->
+      <div v-if="viewMode === 'source'" class="schema-section">
+        <div v-if="schemaStore.selectedSchema.sourceJson" class="source-viewer">
+          <pre class="source-pre"><code v-html="highlightedSource"></code></pre>
+        </div>
+        <div v-else class="source-empty">
+          <p class="text-muted">Source JSON Schema not available for this schema.</p>
+        </div>
+      </div>
     </div>
 
     <!-- Landing Page -->
@@ -132,9 +162,10 @@
               <span class="badge badge-type-sm">{{ schema.type || 'any' }}</span>
             </div>
             <div class="schema-card-stats">
-              <span>{{ schema.properties.length }} properties</span>
-              <span>{{ schema.definitions.length }} definitions</span>
+              <span>{{ schema.properties.length }} props</span>
+              <span>{{ schema.definitions.length }} defs</span>
               <span v-if="schema.required.length">{{ schema.required.length }} required</span>
+              <span v-if="schema.examples?.length">{{ schema.examples.length }} examples</span>
             </div>
           </div>
         </div>
@@ -152,6 +183,38 @@ import type { SpaSchema } from '../types'
 
 const schemaStore = useSchemaStore()
 const expandedDefs = reactive(new Set<string>())
+const viewMode = ref<'builder' | 'source'>('builder')
+
+function expandAllDefs() {
+  for (const def of schemaStore.selectedSchema?.definitions ?? []) {
+    expandedDefs.add(def.name)
+  }
+}
+
+function collapseAllDefs() {
+  expandedDefs.clear()
+}
+
+const highlightedSource = computed(() => {
+  const src = schemaStore.selectedSchema?.sourceJson
+  if (!src) return ''
+  return syntaxHighlight(src)
+})
+
+function syntaxHighlight(json: string): string {
+  return json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    .replace(/("(\\u[\da-fA-F]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g, (match) => {
+      let cls = 'json-number'
+      if (/^"/.test(match)) {
+        cls = /:$/.test(match) ? 'json-key' : 'json-string'
+      } else if (/true|false/.test(match)) {
+        cls = 'json-boolean'
+      } else if (/null/.test(match)) {
+        cls = 'json-null'
+      }
+      return `<span class="${cls}">${match}</span>`
+    })
+}
 
 function selectSchema(name: string) {
   schemaStore.selectSchema(name)
@@ -228,6 +291,44 @@ watch(() => schemaStore.selectedDefinitionName, (name) => {
   margin: 0;
 }
 
+.schema-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+
+.view-toggle {
+  display: flex;
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.toggle-btn {
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--text-muted);
+  background: transparent;
+  transition: all var(--transition-fast);
+  border: none;
+}
+
+.toggle-btn:not(:last-child) {
+  border-right: 1px solid var(--border-medium);
+}
+
+.toggle-btn.active {
+  background: var(--color-primary-alpha);
+  color: var(--color-primary);
+}
+
+.toggle-btn:hover:not(.active) {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
 .schema-name-hint {
   font-size: var(--text-xs);
   display: block;
@@ -245,6 +346,34 @@ watch(() => schemaStore.selectedDefinitionName, (name) => {
   align-items: center;
   gap: var(--space-2);
   margin-top: var(--space-2);
+  flex-wrap: wrap;
+}
+
+.schema-id-row {
+  display: flex;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
+  flex-wrap: wrap;
+}
+
+.meta-id-chip {
+  font-size: 10px;
+  background: var(--bg-secondary);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  max-width: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.badge-locked {
+  font-size: 10px;
+  color: var(--color-orange);
+  background: var(--color-orange-alpha);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  font-weight: 500;
 }
 
 .schema-required {
@@ -331,6 +460,51 @@ watch(() => schemaStore.selectedDefinitionName, (name) => {
   color: var(--text-primary);
 }
 
+.section-heading-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-4);
+}
+
+.section-actions {
+  display: flex;
+  gap: var(--space-2);
+}
+
+/* Source viewer */
+.source-viewer {
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.source-pre {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  font-size: var(--text-sm);
+  line-height: var(--leading-relaxed);
+  overflow-x: auto;
+  max-height: 70vh;
+  overflow-y: auto;
+  margin: 0;
+}
+
+.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); }
+
+:root[data-theme="dark"] .source-pre :deep(.json-key) { color: var(--color-primary-light); }
+:root[data-theme="dark"] .source-pre :deep(.json-string) { color: var(--color-teal); }
+
+.source-empty {
+  padding: var(--space-8);
+  text-align: center;
+}
+
 /* Definitions */
 .def-list {
   display: flex;

data/lib/lutaml/jsonschema/spa/spa_builder.rb

@@ -30,7 +30,7 @@ module Lutaml
         end
 
         def build_schemas
-          @schema_set.schemas.map do |name, schema|
+          @schema_set.schemas.to_a.map do |name, schema|
             build_spa_schema(name, schema)
           end
         end
@@ -53,6 +53,9 @@ module Lutaml
             required: all_required,
             examples: schema.examples,
             source_json: @schema_set.source_json(name) || "",
+            dollar_schema: schema.dollar_schema,
+            dollar_id: schema.dollar_id,
+            additional_properties: schema.additional_properties,
           )
         end
 
@@ -154,6 +157,11 @@ all_required = root_schema.required)
               unique_items: resolved.unique_items,
               multiple_of: resolved.multiple_of,
               const_value: resolved.const,
+              exclusive_minimum: resolved.exclusive_minimum,
+              exclusive_maximum: resolved.exclusive_maximum,
+              additional_properties: resolved.additional_properties,
+              content_type: resolved.content_type,
+              content_encoding: resolved.content_encoding,
             )
           end
         end

data/lib/lutaml/jsonschema/spa/spa_property.rb

@@ -28,6 +28,11 @@ module Lutaml
         attribute :unique_items, :boolean
         attribute :multiple_of, :float
         attribute :const_value, :string
+        attribute :exclusive_minimum, :float
+        attribute :exclusive_maximum, :float
+        attribute :additional_properties, :boolean
+        attribute :content_type, :string
+        attribute :content_encoding, :string
 
         json do
           map "name", to: :name
@@ -54,6 +59,11 @@ module Lutaml
           map "uniqueItems", to: :unique_items
           map "multipleOf", to: :multiple_of
           map "const", to: :const_value
+          map "exclusiveMinimum", to: :exclusive_minimum
+          map "exclusiveMaximum", to: :exclusive_maximum
+          map "additionalProperties", to: :additional_properties
+          map "contentMediaType", to: :content_type
+          map "contentEncoding", to: :content_encoding
         end
       end
     end

data/lib/lutaml/jsonschema/spa/spa_schema.rb

@@ -15,6 +15,9 @@ module Lutaml
         attribute :required, :string, collection: true
         attribute :examples, :string, collection: true
         attribute :source_json, :string, default: -> { "" }
+        attribute :dollar_schema, :string
+        attribute :dollar_id, :string
+        attribute :additional_properties, :boolean
 
         json do
           map "name", to: :name
@@ -26,6 +29,9 @@ module Lutaml
           map "required", to: :required
           map "examples", to: :examples
           map "sourceJson", to: :source_json
+          map "$schema", to: :dollar_schema
+          map "$id", to: :dollar_id
+          map "additionalProperties", to: :additional_properties
         end
       end
     end

data/lib/lutaml/jsonschema/version.rb

@@ -2,6 +2,6 @@
 
 module Lutaml
   module Jsonschema
-    VERSION = "0.1.2"
+    VERSION = "0.1.4"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lutaml-jsonschema
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.4
 platform: ruby
 authors:
 - Ribose Inc.