lutaml-jsonschema 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fcb6ad4f8e4b98d7610fb58a9556af739f9c3c1ba348de4faf9dfdd83b39f8fc
-  data.tar.gz: f772f3eb0c0e204d3217ff5c72377ae4a6568daf29015f143eafd7e22d7ed6a6
+  metadata.gz: a31e1dc445c583474f10cf52d8468991193679ab428af9d46a0f760492373a2d
+  data.tar.gz: 7dfe7fd154e030c64a9670b4d0c694b83e397fa8cff9d08d83222869bbfc1917
 SHA512:
-  metadata.gz: 2b8238500b470d461a05119853f1aad9049c2dd92ced3afb7c2c072ccca9e890f0c08a1ac86600dbdd42df47bc21cc2c5893eecf4de4bb0f59e2cdac62897c79
-  data.tar.gz: 7ec354115ae70763afff045959ba6a2fce37d9f14c1221f254c653a241fc0bae9f2696e3490eb2e5f23b491f140c554b6ec83615d00481529130e9f1af7f636e
+  metadata.gz: 2a884595f8021d51474b547a1a06087aec67a5286250ba493f74657f8d9c7e3b8fdfc089c2cad865a90b9fceff984f877f1376c82adceb0928cfc33807b765c7
+  data.tar.gz: f01cba83ee80adda6d6bc5ef16494fd23bbee7f0258759f4ea7ddc55305b9c535ab5c2ac4a0be15d8acc5fcbfef8d8f81b5a6655309501d3e2a9cde7f20bb475

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"
@@ -146,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>
@@ -203,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
@@ -276,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;

data/frontend/src/types.ts

@@ -61,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

@@ -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
 

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.3"
+    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.3
+  version: 0.1.4
 platform: ruby
 authors:
 - Ribose Inc.