lutaml-jsonschema 0.1.0

data/frontend/src/stores/schemaStore.ts

@@ -0,0 +1,118 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { SpaDocument, SpaSchema, SpaDefinition, SpaProperty } from '../types'
+
+export type SelectedItem =
+  | { kind: 'schema'; schema: SpaSchema }
+  | { kind: 'definition'; schema: SpaSchema; definition: SpaDefinition }
+  | { kind: 'property'; schema: SpaSchema; property: SpaProperty }
+
+export const useSchemaStore = defineStore('schema', () => {
+  const data = ref<SpaDocument | null>(null)
+  const selectedSchemaName = ref<string | null>(null)
+  const selectedItemKey = ref<string | null>(null)
+
+  const metadata = computed(() => data.value?.metadata)
+  const schemas = computed(() => data.value?.schemas ?? [])
+  const searchIndex = computed(() => data.value?.searchIndex ?? [])
+
+  const selectedSchema = computed<SpaSchema | undefined>(() =>
+    schemas.value.find(s => s.name === selectedSchemaName.value)
+  )
+
+  const selectedItem = computed<SelectedItem | null>(() => {
+    const schema = selectedSchema.value
+    if (!schema) return null
+    if (!selectedItemKey.value) return { kind: 'schema', schema }
+
+    if (selectedItemKey.value.startsWith('def:')) {
+      const name = selectedItemKey.value.slice(4)
+      const definition = schema.definitions.find(d => d.name === name)
+      if (definition) return { kind: 'definition', schema, definition }
+    }
+
+    if (selectedItemKey.value.startsWith('prop:')) {
+      const name = selectedItemKey.value.slice(5)
+      const property = schema.properties.find(p => p.name === name)
+      if (property) return { kind: 'property', schema, property }
+    }
+
+    return { kind: 'schema', schema }
+  })
+
+  const schemaCounts = computed(() => ({
+    schemas: schemas.value.length,
+    properties: schemas.value.reduce((acc, s) => acc + s.properties.length, 0),
+    definitions: schemas.value.reduce((acc, s) => acc + s.definitions.length, 0),
+  }))
+
+  function loadFromWindow() {
+    if (typeof window !== 'undefined' && window.SCHEMA_DATA) {
+      const raw = window.SCHEMA_DATA
+      // Normalize: ensure arrays are always arrays (backend may omit empty ones)
+      for (const schema of raw.schemas) {
+        schema.properties = schema.properties ?? []
+        schema.definitions = schema.definitions ?? []
+        schema.required = schema.required ?? []
+        // Normalize: JSON key is "$ref" (Ruby maps it that way) but TypeScript uses "ref"
+        for (const prop of schema.properties) {
+          if (prop.$ref !== undefined) {
+            prop.ref = prop.$ref
+            delete prop.$ref
+          }
+        }
+        for (const def of schema.definitions) {
+          def.properties = def.properties ?? []
+          def.required = def.required ?? []
+          for (const prop of def.properties) {
+            if (prop.$ref !== undefined) {
+              prop.ref = prop.$ref
+              delete prop.$ref
+            }
+          }
+        }
+      }
+      raw.searchIndex = raw.searchIndex ?? []
+      data.value = raw
+    }
+  }
+
+  function selectSchema(name: string | null) {
+    selectedSchemaName.value = name
+    selectedItemKey.value = null
+  }
+
+  function selectDefinition(name: string) {
+    selectedItemKey.value = `def:${name}`
+  }
+
+  function selectProperty(name: string) {
+    selectedItemKey.value = `prop:${name}`
+  }
+
+  function clearSelection() {
+    selectedItemKey.value = null
+  }
+
+  function schemaByName(name: string): SpaSchema | undefined {
+    return schemas.value.find(s => s.name === name)
+  }
+
+  return {
+    data,
+    selectedSchemaName,
+    selectedItemKey,
+    metadata,
+    schemas,
+    searchIndex,
+    selectedSchema,
+    selectedItem,
+    schemaCounts,
+    loadFromWindow,
+    selectSchema,
+    selectDefinition,
+    selectProperty,
+    clearSelection,
+    schemaByName,
+  }
+})

data/frontend/src/stores/uiStore.ts

@@ -0,0 +1,78 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export type Theme = 'light' | 'dark' | 'system'
+
+export const useUiStore = defineStore('ui', () => {
+  const theme = ref<Theme>('system')
+  const resolvedTheme = ref<'light' | 'dark'>('light')
+  const sidebarCollapsed = ref(false)
+  const detailPanelOpen = ref(false)
+  const activePanelTab = ref<'overview' | 'definition'>('overview')
+  const searchOpen = ref(false)
+  const expandedSchemaNames = ref<Set<string>>(new Set())
+
+  const isDark = computed(() => resolvedTheme.value === 'dark')
+
+  function initTheme() {
+    const stored = localStorage.getItem('lutaml-jsonschema-theme') as Theme | null
+    if (stored) theme.value = stored
+    updateResolvedTheme()
+  }
+
+  function updateResolvedTheme() {
+    if (theme.value === 'system') {
+      resolvedTheme.value = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    } else {
+      resolvedTheme.value = theme.value
+    }
+    applyTheme()
+  }
+
+  function applyTheme() {
+    if (resolvedTheme.value === 'dark') {
+      document.documentElement.setAttribute('data-theme', 'dark')
+    } else {
+      document.documentElement.removeAttribute('data-theme')
+    }
+  }
+
+  function toggleTheme() {
+    const next = resolvedTheme.value === 'light' ? 'dark' : 'light'
+    theme.value = next
+    localStorage.setItem('lutaml-jsonschema-theme', next)
+    updateResolvedTheme()
+  }
+
+  function toggleSidebar() { sidebarCollapsed.value = !sidebarCollapsed.value }
+  function openDetailPanel() { detailPanelOpen.value = true }
+  function closeDetailPanel() { detailPanelOpen.value = false }
+  function setPanelTab(tab: 'overview' | 'definition') { activePanelTab.value = tab }
+  function openSearch() { searchOpen.value = true }
+  function closeSearch() { searchOpen.value = false }
+
+  function toggleSchemaExpanded(name: string) {
+    if (expandedSchemaNames.value.has(name)) {
+      expandedSchemaNames.value.delete(name)
+    } else {
+      expandedSchemaNames.value.add(name)
+    }
+  }
+
+  function isSchemaExpanded(name: string): boolean {
+    return expandedSchemaNames.value.has(name)
+  }
+
+  if (typeof window !== 'undefined') {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      if (theme.value === 'system') updateResolvedTheme()
+    })
+  }
+
+  return {
+    theme, resolvedTheme, sidebarCollapsed, detailPanelOpen, activePanelTab,
+    searchOpen, expandedSchemaNames, isDark,
+    initTheme, toggleTheme, toggleSidebar, openDetailPanel, closeDetailPanel,
+    setPanelTab, openSearch, closeSearch, toggleSchemaExpanded, isSchemaExpanded,
+  }
+})

data/frontend/src/style.css

@@ -0,0 +1,194 @@
+/* Lutaml-JSONSchema SPA - LutaML Branded Design */
+
+:root {
+  --color-primary: #5b9cd4;
+  --color-primary-light: #7db5e2;
+  --color-primary-dark: #26489e;
+  --color-primary-alpha: rgba(91, 156, 212, 0.12);
+
+  --color-accent: #dbab3e;
+  --color-accent-light: #f0ca6e;
+  --color-accent-alpha: rgba(219, 171, 62, 0.12);
+
+  --color-teal: #60c3a7;
+  --color-teal-alpha: rgba(96, 195, 167, 0.12);
+  --color-orange: #ea5624;
+  --color-orange-alpha: rgba(234, 86, 36, 0.12);
+  --color-red: #b31f24;
+  --color-red-alpha: rgba(179, 31, 36, 0.12);
+  --color-green: #7cc242;
+  --color-green-alpha: rgba(124, 194, 66, 0.12);
+
+  --bg-primary: #FAFAF9;
+  --bg-secondary: #F5F5F4;
+  --bg-elevated: #FFFFFF;
+  --bg-overlay: rgba(28, 25, 23, 0.5);
+  --bg-hover: rgba(28, 25, 23, 0.04);
+  --bg-active: rgba(28, 25, 23, 0.06);
+
+  --text-primary: #1C1917;
+  --text-secondary: #57534E;
+  --text-muted: #A8A29E;
+
+  --border-light: #E7E5E4;
+  --border-medium: #D6D3D1;
+  --border-focus: #5b9cd4;
+
+  --badge-schema: #26489e;
+  --badge-schema-bg: rgba(38, 72, 158, 0.12);
+  --badge-property: #60c3a7;
+  --badge-property-bg: rgba(96, 195, 167, 0.15);
+  --badge-definition: #dbab3e;
+  --badge-definition-bg: rgba(219, 171, 62, 0.15);
+  --badge-required: #5b9cd4;
+  --badge-required-bg: rgba(91, 156, 212, 0.12);
+  --badge-deprecated: #b31f24;
+  --badge-deprecated-bg: rgba(179, 31, 36, 0.12);
+
+  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.07), 0 2px 4px -1px rgba(28, 25, 23, 0.04);
+  --shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.08), 0 4px 6px -2px rgba(28, 25, 23, 0.04);
+
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Consolas', monospace;
+
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.75;
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+
+  --transition-fast: 100ms ease;
+  --transition-normal: 150ms ease;
+  --transition-slow: 200ms ease-out;
+}
+
+:root[data-theme="dark"] {
+  --bg-primary: #1a1a24;
+  --bg-secondary: #232736;
+  --bg-elevated: #2d3344;
+  --bg-overlay: rgba(0, 0, 0, 0.7);
+  --bg-hover: rgba(255, 255, 255, 0.06);
+  --bg-active: rgba(255, 255, 255, 0.10);
+
+  --text-primary: #e8edf4;
+  --text-secondary: #a8b4c8;
+  --text-muted: #6b7a8f;
+
+  --border-light: #3a4256;
+  --border-medium: #4a5572;
+  --border-focus: #5b9cd4;
+
+  --badge-schema: #5b9cd4;
+  --badge-schema-bg: rgba(91, 156, 212, 0.2);
+  --badge-property: #60c3a7;
+  --badge-property-bg: rgba(96, 195, 167, 0.2);
+  --badge-definition: #dbab3e;
+  --badge-definition-bg: rgba(219, 171, 62, 0.2);
+  --badge-required: #5b9cd4;
+  --badge-required-bg: rgba(91, 156, 212, 0.2);
+  --badge-deprecated: #b31f24;
+  --badge-deprecated-bg: rgba(179, 31, 36, 0.2);
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 600;
+  line-height: var(--leading-tight);
+  color: var(--text-primary);
+}
+h1 { font-size: var(--text-2xl); }
+h2 { font-size: var(--text-xl); }
+h3 { font-size: var(--text-lg); }
+
+code, pre { font-family: var(--font-mono); font-size: 0.9em; }
+code { background: var(--bg-secondary); padding: 0.125em 0.375em; border-radius: var(--radius-sm); }
+pre { background: var(--bg-secondary); padding: var(--space-4); border-radius: var(--radius-md); overflow-x: auto; }
+pre code { background: none; padding: 0; display: block; }
+
+a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
+a:hover { color: var(--color-primary-dark); text-decoration: underline; }
+
+button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; }
+
+.btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  gap: var(--space-2); padding: var(--space-2) var(--space-4);
+  font-size: var(--text-sm); font-weight: 500; border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+}
+.btn-primary { background: var(--color-primary); color: white; }
+.btn-primary:hover { background: var(--color-primary-dark); }
+.btn-secondary { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-medium); }
+.btn-secondary:hover { background: var(--bg-hover); }
+.btn-ghost { color: var(--text-secondary); }
+.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
+
+.badge {
+  display: inline-flex; align-items: center; padding: 0.125rem 0.5rem;
+  font-size: var(--text-xs); font-weight: 500; border-radius: var(--radius-sm);
+  text-transform: uppercase; letter-spacing: 0.025em;
+}
+
+.card {
+  background: var(--bg-elevated); border: 1px solid var(--border-light);
+  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
+}
+
+.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
+.table th, .table td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--border-light); }
+.table th { font-weight: 500; color: var(--text-secondary); background: var(--bg-secondary); }
+.table tr:hover td { background: var(--bg-hover); }
+
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+@keyframes slideIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
+
+.text-muted { color: var(--text-muted); }
+.text-secondary { color: var(--text-secondary); }
+.font-mono { font-family: var(--font-mono); }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

data/frontend/src/types.ts

@@ -0,0 +1,70 @@
+export interface SpaMetadata {
+  title?: string
+  version?: string
+  description?: string
+  baseUrl?: string
+  theme?: string
+}
+
+export interface SpaProperty {
+  name: string
+  title?: string
+  description?: string
+  type?: string
+  format?: string
+  required?: boolean
+  default?: string
+  pattern?: string
+  enum?: string[]
+  /** Resolved $ref — normalized from backend's "$ref" key during loadFromWindow() */
+  ref?: string
+  /** Raw JSON Schema $ref — present in window.SCHEMA_DATA before normalization */
+  $ref?: string
+  minLength?: number
+  maxLength?: number
+  minimum?: number
+  maximum?: number
+  itemsType?: string
+  deprecated?: boolean
+  examples?: string[]
+}
+
+export interface SpaDefinition {
+  name: string
+  title?: string
+  description?: string
+  type?: string
+  properties: SpaProperty[]
+  required: string[]
+  examples?: string[]
+}
+
+export interface SpaSchema {
+  name: string
+  title?: string
+  description?: string
+  type?: string
+  properties: SpaProperty[]
+  definitions: SpaDefinition[]
+  required: string[]
+  examples?: string[]
+}
+
+export interface SpaSearchEntry {
+  name: string
+  title?: string
+  type: string
+  schemaName: string
+}
+
+export interface SpaDocument {
+  metadata: SpaMetadata
+  schemas: SpaSchema[]
+  searchIndex: SpaSearchEntry[]
+}
+
+declare global {
+  interface Window {
+    SCHEMA_DATA: SpaDocument
+  }
+}