lutaml-jsonschema 0.1.0

data/frontend/src/components/SearchModal.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="search-modal-overlay" @click.self="closeSearch">
+    <div class="search-modal">
+      <div class="search-input-wrapper">
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" class="search-icon">
+          <circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5"/>
+          <path d="M12 12l4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
+        <input
+          ref="inputRef"
+          v-model="search.query.value"
+          type="text"
+          class="search-input"
+          placeholder="Search schemas, properties, definitions..."
+          @keydown="handleKeydown"
+        />
+        <button v-if="search.query.value" class="clear-btn" @click="search.query.value = ''">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+            <path d="M4 4l6 6M10 4l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+        </button>
+      </div>
+
+      <div class="search-results" v-if="search.query.value">
+        <div v-if="search.isSearching.value" class="search-loading">
+          Searching...
+        </div>
+        <div v-else-if="!search.hasResults.value" class="search-empty">
+          No results found for "{{ search.query.value }}"
+        </div>
+        <div v-else class="search-results-list">
+          <div
+            v-for="(result, index) in search.results.value"
+            :key="result.id"
+            class="search-result"
+            :class="{ focused: focusedIndex === index }"
+            @click="search.selectResult(result)"
+            @mouseenter="focusedIndex = index"
+          >
+            <span class="result-icon">
+              <svg v-if="result.type === 'schema'" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.3"/>
+                <path d="M5 6h6M5 8h4M5 10h5" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+              </svg>
+              <svg v-else-if="result.type === 'definition'" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.3" stroke-dasharray="3 2"/>
+              </svg>
+              <svg v-else width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <circle cx="8" cy="8" r="5" stroke="currentColor" stroke-width="1.3"/>
+              </svg>
+            </span>
+            <div class="result-content">
+              <span class="result-name" v-html="highlightMatch(result.name)"></span>
+              <span class="result-schema">{{ result.schemaName }}</span>
+            </div>
+            <span :class="['badge', `badge-${result.type}`]">{{ result.type }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="search-footer">
+        <div class="search-hints">
+          <span><kbd>↑</kbd><kbd>↓</kbd> Navigate</span>
+          <span><kbd>↵</kbd> Select</span>
+          <span><kbd>Esc</kbd> Close</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from 'vue'
+import { useSearch } from '../composables/useSearch'
+
+const search = useSearch()
+const inputRef = ref<HTMLInputElement | null>(null)
+const focusedIndex = ref(0)
+
+onMounted(() => {
+  nextTick(() => inputRef.value?.focus())
+})
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    focusedIndex.value = Math.min(focusedIndex.value + 1, search.results.value.length - 1)
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    focusedIndex.value = Math.max(focusedIndex.value - 1, 0)
+  } else if (e.key === 'Enter' && search.results.value[focusedIndex.value]) {
+    e.preventDefault()
+    search.selectResult(search.results.value[focusedIndex.value])
+  } else if (e.key === 'Escape') {
+    search.closeSearch()
+  }
+}
+
+function closeSearch() {
+  search.closeSearch()
+}
+
+function highlightMatch(text: string): string {
+  const query = search.query.value
+  if (!query) return text
+  const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi')
+  return text.replace(regex, '<mark>$1</mark>')
+}
+</script>
+
+<style scoped>
+.search-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--bg-overlay);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 10vh;
+  z-index: 1000;
+  animation: fadeIn var(--transition-fast);
+}
+
+.search-modal {
+  width: 100%;
+  max-width: 560px;
+  background: var(--bg-elevated);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+  animation: slideIn var(--transition-slow);
+}
+
+.search-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--border-light);
+}
+
+.search-icon {
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.search-input {
+  flex: 1;
+  border: none;
+  background: none;
+  font-size: var(--text-base);
+  color: var(--text-primary);
+  outline: none;
+}
+
+.search-input::placeholder {
+  color: var(--text-muted);
+}
+
+.clear-btn {
+  padding: var(--space-1);
+  color: var(--text-muted);
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
+}
+
+.clear-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.search-results {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.search-loading,
+.search-empty {
+  padding: var(--space-8);
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.search-results-list {
+  padding: var(--space-2);
+}
+
+.search-result {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: background var(--transition-fast);
+}
+
+.search-result:hover,
+.search-result.focused {
+  background: var(--bg-hover);
+}
+
+.result-icon {
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+}
+
+.result-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.result-name {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.result-name :deep(mark) {
+  background: var(--color-accent-alpha);
+  color: var(--color-accent);
+  padding: 0 2px;
+  border-radius: 2px;
+}
+
+.result-schema {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+
+.badge-schema {
+  background: var(--badge-schema-bg);
+  color: var(--badge-schema);
+}
+
+.badge-property {
+  background: var(--badge-property-bg);
+  color: var(--badge-property);
+}
+
+.badge-definition {
+  background: var(--badge-definition-bg);
+  color: var(--badge-definition);
+}
+
+.search-footer {
+  padding: var(--space-3) var(--space-4);
+  border-top: 1px solid var(--border-light);
+  background: var(--bg-secondary);
+}
+
+.search-hints {
+  display: flex;
+  gap: var(--space-4);
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+
+.search-hints kbd {
+  padding: 2px 5px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-sm);
+  margin-right: 2px;
+}
+</style>

data/frontend/src/composables/useBuilderField.ts

@@ -0,0 +1,92 @@
+import { resolveSchemaRef } from './useDefinitionResolver'
+import {
+  primaryType,
+  initialValue,
+  arrayDefaultValue,
+  parsePropertyValue,
+  parseArrayItem,
+} from './useSchemaTypes'
+import type { SpaProperty, SpaSchema, SpaDefinition } from '../types'
+
+/**
+ * Typed field state for the SchemaBuilder.
+ * Each property in a schema becomes one BuilderField.
+ */
+export interface BuilderField {
+  prop: SpaProperty
+  included: boolean
+  isRequired: boolean
+  rawValue: string
+  expanded: boolean
+  resolvedDef: SpaDefinition | null
+  nestedJson: Record<string, unknown>
+  arrayItems: string[]
+}
+
+/**
+ * Factory: create a BuilderField from a property definition.
+ * Resolves $ref, determines required status, initializes defaults.
+ */
+export function createField(
+  prop: SpaProperty,
+  requiredNames: string[],
+  schema: SpaSchema,
+): BuilderField {
+  const isReq = requiredNames.includes(prop.name) || prop.required === true
+  const def = resolveSchemaRef(prop.ref, schema)
+  const isArray = primaryType(prop.type) === 'array'
+
+  return {
+    prop,
+    included: isReq,
+    isRequired: isReq,
+    rawValue: initialValue(prop),
+    expanded: false,
+    resolvedDef: def,
+    nestedJson: def ? buildDefaultJson(def.properties) : {},
+    arrayItems: isArray ? [arrayDefaultValue(prop.itemsType)] : [],
+  }
+}
+
+/**
+ * Build a default JSON object from a list of properties.
+ * Uses initial values and type-based parsing.
+ */
+export function buildDefaultJson(properties: SpaProperty[]): Record<string, unknown> {
+  const obj: Record<string, unknown> = {}
+  for (const prop of properties) {
+    const t = primaryType(prop.type)
+    const isArray = t === 'array'
+
+    if (isArray) {
+      const items = [arrayDefaultValue(prop.itemsType)]
+      obj[prop.name] = items.map(item => parseArrayItem(item, prop.itemsType))
+    } else {
+      obj[prop.name] = parsePropertyValue(initialValue(prop), prop)
+    }
+  }
+  return obj
+}
+
+/**
+ * Check whether expanding this field would create a circular reference.
+ */
+export function isCircular(field: BuilderField, visited: ReadonlySet<string>): boolean {
+  return !!field.resolvedDef && visited.has(field.resolvedDef.name)
+}
+
+/**
+ * Parse a field's current state to its runtime JSON value.
+ * Handles nested objects (via nestedJson), arrays (via arrayItems),
+ * and primitive values (via parsePropertyValue).
+ */
+export function parseFieldValue(field: BuilderField): unknown {
+  const prop = field.prop
+  const t = primaryType(prop.type)
+
+  if (t === 'array') {
+    return field.arrayItems.map(item => parseArrayItem(item, prop.itemsType))
+  }
+
+  return parsePropertyValue(field.rawValue, prop)
+}

data/frontend/src/composables/useDefinitionResolver.ts

@@ -0,0 +1,17 @@
+import type { SpaSchema, SpaDefinition } from '../types'
+
+/**
+ * Resolve a JSON Schema $ref string to its SpaDefinition.
+ * Handles: #/definitions/NAME and #/$defs/NAME patterns.
+ * Returns null if the ref is empty, malformed, or not found.
+ */
+export function resolveSchemaRef(ref: string | undefined, schema: SpaSchema): SpaDefinition | null {
+  if (!ref) return null
+
+  const match = ref.match(/^#\/(?:definitions|\$defs)\/([^/]+)$/)
+  if (match) {
+    return schema.definitions.find(d => d.name === match[1]) ?? null
+  }
+
+  return null
+}

data/frontend/src/composables/useSchemaTypes.ts

@@ -0,0 +1,152 @@
+import type { SpaProperty } from '../types'
+
+/**
+ * Extract the primary JSON Schema type from a type string.
+ * Handles union types like "string,integer" by returning the first component.
+ */
+export function primaryType(type?: string): string {
+  const t = (type || '').split(',')[0].trim()
+  return t || 'any'
+}
+
+/**
+ * Human-readable type display for the type badge.
+ * Shows array<> notation for arrays and format suffix for strings.
+ */
+export function displayType(prop: SpaProperty): string {
+  const t = primaryType(prop.type)
+  if (t === 'array' && prop.itemsType) return `array<${prop.itemsType}>`
+  if (prop.format) return `${t} (${prop.format})`
+  return t
+}
+
+/**
+ * HTML input type based on JSON Schema format keyword.
+ * Falls back to "text" for unrecognised formats.
+ */
+export function formatInputType(format?: string): string {
+  switch (format) {
+    case 'email': return 'email'
+    case 'uri':
+    case 'uri-reference': return 'url'
+    case 'date': return 'date'
+    case 'time': return 'time'
+    case 'date-time': return 'datetime-local'
+    default: return 'text'
+  }
+}
+
+/**
+ * Default string value based on format when no example/default is available.
+ */
+export function formatDefault(format?: string): string {
+  switch (format) {
+    case 'uri':
+    case 'uri-reference': return 'https://example.com'
+    case 'date-time': return '2024-01-01T00:00:00Z'
+    case 'date': return '2024-01-01'
+    case 'time': return '00:00:00Z'
+    case 'email': return 'user@example.com'
+    case 'uuid': return '00000000-0000-0000-0000-000000000000'
+    default: return 'string'
+  }
+}
+
+/**
+ * The first meaningful value for a property: examples[0], default, first enum,
+ * or a type-based fallback.
+ */
+export function initialValue(prop: SpaProperty): string {
+  if (prop.examples?.length) return prop.examples[0]
+  if (prop.default != null) return String(prop.default)
+  if (prop.enum?.length) return prop.enum[0]
+
+  const t = primaryType(prop.type)
+  switch (t) {
+    case 'integer': return '0'
+    case 'number': return '0.0'
+    case 'boolean': return 'false'
+    case 'string': return formatDefault(prop.format)
+    default: return ''
+  }
+}
+
+/**
+ * HTML input type for individual array item elements.
+ */
+export function arrayItemInputType(itemsType?: string): string {
+  switch (itemsType) {
+    case 'integer':
+    case 'number': return 'number'
+    case 'boolean': return 'checkbox'
+    default: return 'text'
+  }
+}
+
+/**
+ * Default string value for a new array item.
+ */
+export function arrayDefaultValue(itemsType?: string): string {
+  switch (itemsType) {
+    case 'integer': return '0'
+    case 'number': return '0.0'
+    case 'boolean': return 'false'
+    default: return ''
+  }
+}
+
+/**
+ * Parse a single array item string to its correct runtime type.
+ */
+export function parseArrayItem(item: string, itemsType?: string): unknown {
+  switch (itemsType) {
+    case 'integer': return parseInt(item, 10) || 0
+    case 'number': return parseFloat(item) || 0.0
+    case 'boolean': return item === 'true'
+    default: return item
+  }
+}
+
+/**
+ * Check whether a property is an object (type=object or has a $ref without a type).
+ */
+export function isObjectProperty(prop: SpaProperty): boolean {
+  const t = primaryType(prop.type)
+  return t === 'object' || (!prop.type && !!prop.ref)
+}
+
+/**
+ * Check whether a property has constraints that should be displayed as chips.
+ */
+export function hasConstraints(prop: SpaProperty): boolean {
+  return !!(
+    (prop.enum?.length && isObjectProperty(prop)) ||
+    prop.pattern ||
+    prop.minimum != null ||
+    prop.maximum != null ||
+    prop.minLength != null ||
+    prop.maxLength != null ||
+    prop.default != null ||
+    prop.examples?.length
+  )
+}
+
+/**
+ * Parse a property's raw string value to its correct runtime type.
+ * Handles enums, booleans, numbers, arrays, and objects.
+ */
+export function parsePropertyValue(rawValue: string, prop: SpaProperty): unknown {
+  const t = primaryType(prop.type)
+  if (prop.enum?.length) return rawValue
+  if (t === 'boolean') return rawValue === 'true'
+  if (t === 'integer') {
+    const n = parseInt(rawValue, 10)
+    return isNaN(n) ? 0 : n
+  }
+  if (t === 'number') {
+    const n = parseFloat(rawValue)
+    return isNaN(n) ? 0 : n
+  }
+  if (t === 'object' && !prop.ref) return {}
+  return rawValue
+}

data/frontend/src/composables/useSearch.ts

@@ -0,0 +1,104 @@
+import { ref, computed, watch } from 'vue'
+import { useSchemaStore } from '../stores/schemaStore'
+import { useUiStore } from '../stores/uiStore'
+
+interface SearchResult {
+  id: string
+  type: 'schema' | 'property' | 'definition'
+  name: string
+  schemaName: string
+  doc?: string
+}
+
+export function useSearch() {
+  const schemaStore = useSchemaStore()
+  const uiStore = useUiStore()
+
+  const query = ref('')
+  const results = ref<SearchResult[]>([])
+  const isSearching = ref(false)
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+  function buildSearchEntries(): SearchResult[] {
+    const entries: SearchResult[] = []
+    for (const schema of schemaStore.schemas) {
+      entries.push({
+        id: `schema:${schema.name}`,
+        type: 'schema',
+        name: schema.title || schema.name,
+        schemaName: schema.name,
+        doc: schema.description,
+      })
+      for (const prop of schema.properties) {
+        entries.push({
+          id: `property:${schema.name}:${prop.name}`,
+          type: 'property',
+          name: prop.name,
+          schemaName: schema.name,
+          doc: prop.description,
+        })
+      }
+      for (const def of schema.definitions) {
+        entries.push({
+          id: `definition:${schema.name}:${def.name}`,
+          type: 'definition',
+          name: def.title || def.name,
+          schemaName: schema.name,
+          doc: def.description,
+        })
+      }
+    }
+    return entries
+  }
+
+  function search() {
+    if (!query.value.trim()) {
+      results.value = []
+      return
+    }
+
+    isSearching.value = true
+    const q = query.value.toLowerCase().trim()
+    const entries = buildSearchEntries()
+
+    results.value = entries.filter(e =>
+      e.name.toLowerCase().includes(q) ||
+      (e.doc && e.doc.toLowerCase().includes(q))
+    ).slice(0, 50)
+
+    isSearching.value = false
+  }
+
+  function debouncedSearch() {
+    if (debounceTimer) clearTimeout(debounceTimer)
+    debounceTimer = setTimeout(search, 150)
+  }
+
+  watch(query, debouncedSearch)
+
+  const hasResults = computed(() => results.value.length > 0)
+
+  function selectResult(result: SearchResult) {
+    schemaStore.selectSchema(result.schemaName)
+    if (result.type === 'definition') {
+      schemaStore.selectDefinition(result.name)
+    }
+    uiStore.openDetailPanel()
+    closeSearch()
+  }
+
+  function closeSearch() {
+    uiStore.closeSearch()
+    query.value = ''
+    results.value = []
+  }
+
+  return {
+    query,
+    results,
+    isSearching,
+    hasResults,
+    selectResult,
+    closeSearch,
+  }
+}

data/frontend/src/router.ts

@@ -0,0 +1,14 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: () => import('./views/HomeView.vue'),
+    },
+  ],
+})
+
+export default router