lutaml-jsonschema 0.1.12 → 0.1.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0ad24a6671a3bcf4e811c7588dbd4ca4fff96d589d625a7e6dd2507a74a115d4
-  data.tar.gz: 947415a532ef91f5287564a63a422f9c5021e01b5ec43a174d8e68b53e81dcca
+  metadata.gz: 105f1b74c4e82552c08ad6a406ab2da66979e1bad38b93a0d654a547868275d6
+  data.tar.gz: 25b463827ef7593125b58a781f4d3cb60c3a8861b2736b2590879ec957d0b6f4
 SHA512:
-  metadata.gz: d76f7513a5de8fe76529844d0a110f1901f3f9fc4968213f3ae872505370aec7ffd71ab6d349745a9af383b03d6d32ce19f972eccf585c6efd91281cc3d1f6e6
-  data.tar.gz: 72a9b35c92992f4ac0fa82f63b477b362bb358b752d1deb773c3613a29e07ea0b4cf144dbaf11fd43b1c1b5eec3b5719ad72e2d3064bea17e112f1dafe55fc0a
+  metadata.gz: 9e9e80db8d96d09d0da8990e71f8b637cb7e11bb7a0debed104d56eb71add45d4f14c3933286f07333f5194ee5addcfcb21dabc3c22a426919a16b8896a0e5a1
+  data.tar.gz: 8bdbe14abce145c588ff46c2efec874d9f7a7098e74a615442929821d93f8646f871b43eb3a04da4f4114a1dd6fddbfbd9009ee6000786462afe10891529eeb6

data/.rubocop_todo.yml

@@ -1,6 +1,6 @@
 # This configuration was generated by
 # `rubocop --auto-gen-config`
-# on 2026-05-08 02:42:09 UTC using RuboCop version 1.86.1.
+# on 2026-05-10 22:34:24 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
@@ -51,7 +51,7 @@ Lint/IneffectiveAccessModifier:
   Exclude:
     - 'lib/lutaml/jsonschema/schema_set.rb'
 
-# Offense count: 15
+# Offense count: 16
 # Configuration parameters: AllowedMethods, AllowedPatterns, CountRepeatedAttributes, Max.
 Metrics/AbcSize:
   Exclude:
@@ -78,7 +78,7 @@ Metrics/CyclomaticComplexity:
     - 'lib/lutaml/jsonschema/reference_resolver.rb'
     - 'lib/lutaml/jsonschema/schema_set.rb'
 
-# Offense count: 16
+# Offense count: 17
 # Configuration parameters: CountComments, CountAsOne, AllowedMethods, AllowedPatterns.
 Metrics/MethodLength:
   Max: 47

data/CHANGELOG.md

@@ -1,5 +1,124 @@
 ## [Unreleased]
 
+## [0.1.15] - 2026-05-10
+
+### Redoc-style UX improvements (round 16)
+
+- DetailPanel descriptions rendered with inline markdown (bold, italic, code, links)
+- Source viewer URLs are clickable links (Redoc jsonToHtml pattern)
+- Definition mini-table rows show description tooltip on hover
+- SeeMore component uses scrollHeight-based overflow detection (Redoc SeeMore pattern)
+- Landing page schema grid has search/filter input
+- Property sort toggle in SchemaBuilder (alphabetical vs required-first, Redoc sortPropsAlphabetically pattern)
+- Schema header meta badges with colored count chips (properties, required, definitions)
+- DetailPanel dark mode support (constraint colors, enum chips, example blocks)
+
+### Redoc-style UX improvements (round 17)
+
+- Sidebar tree shows properties alongside definitions with type labels
+- Copy link button in schema header for sharing current view via URL
+- selectedPropertyName computed added to schema store
+
+### Redoc-style UX improvements (round 18)
+
+- Mini-table required field names shown in bold with red asterisk (Redoc RequiredLabel pattern)
+- Mini-table shows uniqueItems badge for properties with unique constraint
+- Mini-table shows array items type `[type]` for array properties
+- Mini-table shows all properties when <= 8 (smart limit)
+
+### Redoc-style UX improvements (round 19)
+
+- Floating back-to-top button appears after scrolling 300px down
+- Back-to-top button responsive on mobile (smaller, closer to edge) (constraint colors, enum chips, example blocks)
+
+## [0.1.14] - 2026-05-10
+
+### Redoc-style UX improvements (round 15)
+
+- Markdown renderer converts `\n` to `<br>` for multi-line descriptions
+- Definition mini-table shows `$ref` target name with clickable navigation
+- Definition mini-table shows `const` badge for constant properties
+- Definition mini-table shows deprecated strikethrough on property names
+- Definition mini-table shows `N enum` label instead of just count
+- Definition card header shows `N examples` instead of `N ex`
+- Definition card expanded body shows required fields list and examples section
+- DetailPanel properties tab rows are clickable (navigate to property)
+- DetailPanel properties tab shows `$ref` target with clickable link
+- Improved circular reference label (shows type badge, name, hint text)
+- Source viewer: click on line number to highlight it
+- Landing page card descriptions rendered with markdown
+- Keyboard shortcut: `/` focuses search input from anywhere
+- Search input placeholder shows shortcut hint
+- Search results expand schema tree node automatically
+- Hash navigation expands schema tree node automatically
+- Definition mini-table type badges color-coded by type (string/number/integer/boolean/object/array)
+- Definition mini-table rows show hover effect
+
+## [0.1.13] - 2026-05-10
+
+### Backend: property-level composition resolution
+
+- Resolve `allOf` properties by merging sub-schemas into a unified type with merged properties
+- Resolve `anyOf`/`oneOf` properties by showing variant type labels (e.g. `anyOf: object | object`)
+- Resolve `not` properties with negated type label (e.g. `not string`)
+- Extract `$ref` from allOf sub-schemas for frontend definition expansion
+- Extract `resolve_prop_ref` helper to reduce complexity in `build_single_property`
+
+### Redoc-style UX improvements (round 7)
+
+- SeeMore description fade uses CSS mask-image instead of background gradient (works on any background)
+- Array type badge shows items range constraint inline (e.g. `array of string [ 1 .. 10 ]`)
+- Schema tree sidebar shows property count badge (P) alongside definition count (D)
+- Definition mini-table shows format (`<email>`) and enum count badges
+- Definition card description truncated to 2 lines when collapsed
+- Landing card stats show min/max properties count
+
+### Redoc-style UX improvements (round 8)
+
+- Auto-expand definitions with single property (Redoc expandSingleSchemaField pattern)
+- Clickable $ref navigation — clicking ref chip scrolls to definition
+- Source viewer line numbers highlight on hover
+- Definition mini-table shows composition source (allOf/anyOf/oneOf) badges
+- Scroll centering for definition and property navigation
+
+### Redoc-style UX improvements (round 9)
+
+- Definition card header shows required field names when ≤3 required fields
+- JSON preview shows hint when no fields are checked
+- Definition expanded body shows title, type, property count, and composition badges
+
+### Redoc-style UX improvements (round 10)
+
+- Clickable $id/$schema URLs in schema header (opens in new tab)
+- Keyboard support for definition card toggle (Enter/Space)
+- Nested builder shows parent property path breadcrumb
+
+### Redoc-style UX improvements (round 11)
+
+- Composition type badges with teal color coding (type-composition class)
+- Static label for composition properties instead of editable input
+- `isCompositionType()` helper for frontend composition type detection
+- Skip validation for composition type properties
+
+### Redoc-style UX improvements (round 12)
+
+- DetailPanel: clickable $ref link navigates to definition (closes panel, scrolls to def)
+- DetailPanel: readOnly/writeOnly access badges in property overview
+- DetailPanel: enum values shown as individual chips instead of comma-separated list
+- DetailPanel: schema overview shows property count and definition count
+
+### Redoc-style UX improvements (round 13)
+
+- Search results show description snippets (truncated to 80 chars)
+- Schema header breadcrumb shows Schema > Definition when a definition is selected
+- Clickable breadcrumb link navigates back to schema overview
+
+### Redoc-style UX improvements (round 14)
+
+- Property filter in SchemaBuilder when schema has >8 properties (filters by name, title, description, type)
+- Markdown renderer handles fenced code blocks (` ```code``` `)
+- Global CSS for markdown pre/code blocks in descriptions
+
 ## [0.1.12] - 2026-05-10
 
 ### Redoc-style UX improvements (round 6)

data/frontend/src/App.vue

@@ -4,17 +4,22 @@
     <div v-if="!uiStore.sidebarCollapsed" class="sidebar-overlay" @click="uiStore.toggleSidebar"></div>
     <div class="main-content">
       <AppHeader />
-      <div class="content-area">
+      <div class="content-area" ref="contentAreaRef" @scroll="handleScroll">
         <HomeView />
       </div>
     </div>
     <DetailPanel v-if="uiStore.detailPanelOpen" />
     <SearchModal v-if="uiStore.searchOpen" />
+    <button v-if="showBackToTop" class="back-to-top" @click="scrollToTop" title="Back to top">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path d="M8 13V3M4 7l4-4 4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useSchemaStore } from './stores/schemaStore'
 import { useUiStore } from './stores/uiStore'
 import AppHeader from './components/AppHeader.vue'
@@ -25,6 +30,18 @@ import HomeView from './views/HomeView.vue'
 
 const schemaStore = useSchemaStore()
 const uiStore = useUiStore()
+const contentAreaRef = ref<HTMLElement | null>(null)
+const showBackToTop = ref(false)
+
+function handleScroll() {
+  const el = contentAreaRef.value
+  if (!el) return
+  showBackToTop.value = el.scrollTop > 300
+}
+
+function scrollToTop() {
+  contentAreaRef.value?.scrollTo({ top: 0, behavior: 'smooth' })
+}
 
 onMounted(() => {
   uiStore.initTheme()
@@ -50,6 +67,10 @@ function handleHashNavigation() {
     const schemaName = decodeURIComponent(parts[0])
     schemaStore.selectSchema(schemaName)
 
+    if (!uiStore.isSchemaExpanded(schemaName)) {
+      uiStore.toggleSchemaExpanded(schemaName)
+    }
+
     if (parts.length >= 2) {
       const target = decodeURIComponent(parts[1])
       if (target.startsWith('def-')) {
@@ -107,6 +128,31 @@ function isInputFocused(): boolean {
   display: none;
 }
 
+.back-to-top {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-light);
+  box-shadow: var(--shadow-md);
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+  transition: all var(--transition-fast);
+}
+
+.back-to-top:hover {
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-lg);
+}
+
 @media (max-width: 768px) {
   .sidebar-overlay {
     display: block;
@@ -115,5 +161,10 @@ function isInputFocused(): boolean {
     background: rgba(0, 0, 0, 0.4);
     z-index: 39;
   }
+
+  .back-to-top {
+    bottom: 16px;
+    right: 16px;
+  }
 }
 </style>

data/frontend/src/components/AppSidebar.vue

@@ -43,8 +43,8 @@
             v-model="searchQuery"
             type="text"
             class="search-input"
-            placeholder="Search schemas, definitions..."
-            aria-label="Search schemas and definitions"
+            placeholder="Filter schemas..."
+            aria-label="Filter schemas and definitions"
             @keydown="handleSearchKey"
           />
           <button v-if="searchQuery" class="search-clear" aria-label="Clear search" @click="searchQuery = ''">
@@ -61,9 +61,12 @@
             :class="{ active: idx === activeResultIdx }"
             @click="goToSearchResult(result)"
           >
-            <span class="badge" :class="resultBadgeClass(result.type)">{{ resultTypeLabel(result.type) }}</span>
-            <span class="search-result-name">{{ result.title || result.name }}</span>
-            <span class="search-result-schema text-muted">{{ result.schemaName }}</span>
+            <div class="search-result-row">
+              <span class="badge" :class="resultBadgeClass(result.type)">{{ resultTypeLabel(result.type) }}</span>
+              <span class="search-result-name">{{ result.title || result.name }}</span>
+              <span class="search-result-schema text-muted">{{ result.schemaName }}</span>
+            </div>
+            <div v-if="result.description" class="search-result-desc text-muted">{{ truncateDesc(result.description) }}</div>
           </button>
         </div>
         <div v-else-if="debouncedQuery && !searchResults.length && searchQuery" class="search-no-results text-muted">
@@ -90,13 +93,28 @@
               </svg>
               <span class="schema-name">{{ schema.title || schema.name }}</span>
               <span v-if="schema.$id" class="schema-id-hint" :title="schema.$id">{{ schema.$id }}</span>
+              <span class="schema-badge-count">{{ schema.properties.length }}P</span>
               <span class="schema-badge-count">{{ schema.definitions.length }}D</span>
             </div>
 
             <div v-if="uiStore.isSchemaExpanded(schema.name)" class="schema-children">
+              <div
+                v-for="prop in schema.properties.slice(0, 10)"
+                :key="`p-${prop.name}`"
+                class="tree-item property-item"
+                :class="{ active: schema.name === schemaStore.selectedSchemaName && prop.name === schemaStore.selectedPropertyName }"
+                @click.stop="selectProperty(schema.name, prop.name)"
+              >
+                <span class="badge badge-property-sm">P</span>
+                <span class="tree-item-name">{{ prop.name }}</span>
+                <span class="tree-item-type">{{ prop.type || 'any' }}</span>
+              </div>
+              <div v-if="schema.properties.length > 10" class="tree-more text-muted">
+                +{{ schema.properties.length - 10 }} more
+              </div>
               <div
                 v-for="def in schema.definitions"
-                :key="def.name"
+                :key="`d-${def.name}`"
                 class="tree-item definition-item"
                 :class="{ active: schema.name === schemaStore.selectedSchemaName && def.name === schemaStore.selectedDefinitionName }"
                 @click.stop="selectDefinition(schema.name, def.name)"
@@ -232,6 +250,9 @@ function handleSearchKey(event: KeyboardEvent) {
 
 function goToSearchResult(result: SpaSearchEntry) {
   schemaStore.selectSchema(result.schemaName)
+  if (!uiStore.isSchemaExpanded(result.schemaName)) {
+    uiStore.toggleSchemaExpanded(result.schemaName)
+  }
   if (result.type === 'definition') {
     schemaStore.selectDefinition(result.name)
   } else if (result.type === 'property') {
@@ -275,6 +296,17 @@ function selectDefinition(schemaName: string, defName: string) {
   schemaStore.selectDefinition(defName)
   uiStore.closeDetailPanel()
 }
+
+function selectProperty(schemaName: string, propName: string) {
+  schemaStore.selectSchema(schemaName)
+  schemaStore.selectProperty(propName)
+  uiStore.openDetailPanel()
+}
+
+function truncateDesc(desc: string): string {
+  if (desc.length <= 80) return desc
+  return desc.slice(0, 77) + '...'
+}
 </script>
 
 <style scoped>
@@ -509,6 +541,19 @@ function selectDefinition(schemaName: string, defName: string) {
   flex-shrink: 0;
 }
 
+.tree-item-type {
+  font-size: 9px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  flex-shrink: 0;
+}
+
+.tree-more {
+  font-size: 10px;
+  padding: 2px var(--space-2) 2px 24px;
+  font-style: italic;
+}
+
 .badge-definition-sm {
   background: var(--badge-definition-bg);
   color: var(--badge-definition);
@@ -603,8 +648,8 @@ function selectDefinition(schemaName: string, defName: string) {
 
 .search-result-item {
   display: flex;
-  align-items: center;
-  gap: var(--space-2);
+  flex-direction: column;
+  gap: 2px;
   padding: 4px 6px;
   font-size: var(--text-xs);
   text-align: left;
@@ -616,6 +661,12 @@ function selectDefinition(schemaName: string, defName: string) {
   transition: background var(--transition-fast);
 }
 
+.search-result-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
 .search-result-item:hover,
 .search-result-item.active {
   background: var(--bg-hover);
@@ -639,6 +690,16 @@ function selectDefinition(schemaName: string, defName: string) {
 .search-result-schema {
   font-size: 10px;
   white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.search-result-desc {
+  font-size: 10px;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: 30px;
 }
 
 .stats-section {