ea 0.3.1 → 0.5.0

data/frontend/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "ea-spa",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "lunr": "^2.3.9",
+    "pinia": "^2.2.0",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.0",
+    "@vitest/browser": "^4.1.7",
+    "puppeteer": "^25.0.4",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0",
+    "vitest": "^4.1.7",
+    "vue-tsc": "^2.2.0"
+  }
+}

data/frontend/src/App.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { onMounted, watch } from 'vue'
+import { useDataStore } from './stores/dataStore'
+import { useUiStore } from './stores/uiStore'
+import AppSidebar from './components/AppSidebar.vue'
+import AppHeader from './components/AppHeader.vue'
+import WelcomeView from './components/WelcomeView.vue'
+import PackageDetails from './components/PackageDetails.vue'
+import ClassDetails from './components/ClassDetails.vue'
+import DiagramView from './components/DiagramView.vue'
+import SearchResults from './components/SearchResults.vue'
+
+const data = useDataStore()
+const ui = useUiStore()
+
+onMounted(async () => {
+  const win = window as any
+  if (win.__SPA_DATA__) {
+    data.loadFromEmbedded()
+  } else if (win.__SPA_DATA_URL__) {
+    await data.loadFromUrl(win.__SPA_DATA_URL__, win.__SPA_SEARCH_URL__)
+  }
+
+  ui.navigateToHash()
+  window.addEventListener('hashchange', () => ui.navigateToHash())
+
+  const saved = localStorage.getItem('uml-browser-preferences')
+  if (saved) {
+    try {
+      const prefs = JSON.parse(saved)
+      if (prefs.darkMode !== undefined) ui.darkMode = prefs.darkMode
+      if (prefs.sidebarVisible !== undefined) ui.sidebarVisible = prefs.sidebarVisible
+    } catch {}
+  }
+})
+
+watch(() => [ui.darkMode, ui.sidebarVisible], () => {
+  localStorage.setItem(
+    'uml-browser-preferences',
+    JSON.stringify({ darkMode: ui.darkMode, sidebarVisible: ui.sidebarVisible }),
+  )
+})
+</script>
+
+<template>
+  <div class="app-layout" :data-theme="ui.darkMode ? 'dark' : 'light'">
+    <AppSidebar />
+    <div class="main-content">
+      <AppHeader />
+      <div class="content-area">
+        <WelcomeView v-if="ui.currentView === 'welcome'" />
+        <PackageDetails v-else-if="ui.currentView === 'package'" />
+        <ClassDetails v-else-if="ui.currentView === 'class'" />
+        <DiagramView v-else-if="ui.currentView === 'diagram'" />
+        <SearchResults v-else-if="ui.currentView === 'search'" />
+      </div>
+    </div>
+  </div>
+</template>

data/frontend/src/app.ts

@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import './styles/main.css'
+
+const app = createApp(App)
+app.use(createPinia())
+app.mount('#app')

data/frontend/src/components/AppHeader.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useUiStore } from '../stores/uiStore'
+
+const ui = useUiStore()
+const searchInput = ref<HTMLInputElement | null>(null)
+const showSearchModal = ref(false)
+const searchQuery = ref('')
+const searchResults = ref<any[]>([])
+const selectedIndex = ref(0)
+
+function openSearch() {
+  showSearchModal.value = true
+  setTimeout(() => searchInput.value?.focus(), 50)
+}
+
+function closeSearch() {
+  showSearchModal.value = false
+  searchQuery.value = ''
+  searchResults.value = []
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+    e.preventDefault()
+    openSearch()
+  }
+  if (e.key === '/' && !showSearchModal.value) {
+    const target = e.target as HTMLElement
+    if (target.tagName !== 'INPUT' && target.tagName !== 'TEXTAREA') {
+      e.preventDefault()
+      openSearch()
+    }
+  }
+}
+
+function navigateTo(id: string, type: string) {
+  if (type === 'class') ui.selectClass(id)
+  else if (type === 'package') ui.selectPackage(id)
+  closeSearch()
+}
+
+onMounted(() => window.addEventListener('keydown', handleKeydown))
+onUnmounted(() => window.removeEventListener('keydown', handleKeydown))
+</script>
+
+<template>
+  <header class="header">
+    <div class="header-left">
+      <button class="btn btn-ghost sidebar-toggle" @click="ui.toggleSidebar()" title="Toggle sidebar">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <path d="M3 5h14M3 10h14M3 15h14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
+      </button>
+      <button class="btn btn-ghost home-btn" @click="ui.showWelcome()" title="Overview">
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+          <path d="M3 8.5L9 3.5L15 8.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M4 8.5V14.5C4 14.5 4 15.5 5 15.5H13C13 15.5 14 15.5 14 14.5V8.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+      <span class="header-breadcrumb" v-if="ui.breadcrumbs.length">
+        <template v-for="(crumb, i) in ui.breadcrumbs" :key="i">
+          <span v-if="i > 0" class="breadcrumb-sep">/</span>
+          <a v-if="crumb.id" href="#" @click.prevent="navigateTo(crumb.id, crumb.type || '')">{{ crumb.label }}</a>
+          <span v-else>{{ crumb.label }}</span>
+        </template>
+      </span>
+    </div>
+
+    <div class="header-center">
+      <button class="search-trigger" @click="openSearch">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <circle cx="7" cy="7" r="5" stroke="currentColor" stroke-width="1.5"/>
+          <path d="M11 11l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+        </svg>
+        <span class="search-placeholder">Search classes, packages...</span>
+        <kbd class="search-kbd">/</kbd>
+      </button>
+    </div>
+
+    <div class="header-right">
+      <button class="btn btn-ghost theme-btn" @click="ui.toggleDarkMode()" :title="ui.darkMode ? 'Light mode' : 'Dark mode'">
+        <svg v-if="ui.darkMode" width="18" height="18" viewBox="0 0 18 18" fill="none">
+          <path d="M9 3V2M9 16v-1M3 9H2M16 9h-1M4.22 4.22l-.7-.7M14.48 14.48l-.7-.7M4.22 13.78l-.7.7M14.48 3.52l-.7.7" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+          <circle cx="9" cy="9" r="3.5" stroke="currentColor" stroke-width="1.3"/>
+        </svg>
+        <svg v-else width="18" height="18" viewBox="0 0 18 18" fill="none">
+          <circle cx="9" cy="9" r="4" stroke="currentColor" stroke-width="1.4"/>
+          <path d="M9 2v1.5M9 14.5V16M2 9h1.5M14.5 9H16M4.22 4.22l1.06 1.06M12.72 12.72l1.06 1.06M4.22 13.78l1.06-1.06M12.72 5.28l1.06-1.06" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
+        </svg>
+      </button>
+    </div>
+  </header>
+
+  <Teleport to="body">
+    <div class="search-modal-overlay" v-if="showSearchModal" @click.self="closeSearch">
+      <div class="search-modal">
+        <div class="search-input-wrapper">
+          <input ref="searchInput" v-model="searchQuery" placeholder="Search classes, packages, attributes..."
+                 @keydown.escape="closeSearch" autofocus />
+        </div>
+        <div class="search-results" v-if="searchResults.length">
+          <div v-for="(result, i) in searchResults" :key="result.id"
+               class="search-result" :class="{ focused: i === selectedIndex }"
+               @click="navigateTo(result.entityId, result.type)">
+            <span class="result-icon">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.2"/>
+              </svg>
+            </span>
+            <div class="result-content">
+              <span class="result-name">{{ result.name }}</span>
+              <span class="result-path">{{ result.entityType }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="search-footer">
+          <span class="search-hints">
+            <span><kbd>↑↓</kbd> navigate</span>
+            <span><kbd>Enter</kbd> select</span>
+            <span><kbd>Esc</kbd> close</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

data/frontend/src/components/AppSidebar.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useDataStore } from '../stores/dataStore'
+import { useUiStore } from '../stores/uiStore'
+import PackageTreeNode from './PackageTreeNode.vue'
+
+const data = useDataStore()
+const ui = useUiStore()
+
+const LUTAML_LOGO_LIGHT = 'https://raw.githubusercontent.com/lutaml/branding/refs/heads/main/svg/lutaml-logo_logo-icon-light.svg'
+const LUTAML_LOGO_DARK = 'https://raw.githubusercontent.com/lutaml/branding/refs/heads/main/svg/lutaml-logo_logo-icon-dark.svg'
+const LUTAML_FULL_LIGHT = 'https://raw.githubusercontent.com/lutaml/branding/refs/heads/main/svg/lutaml-logo_logo-full-light.svg'
+const LUTAML_FULL_DARK = 'https://raw.githubusercontent.com/lutaml/branding/refs/heads/main/svg/lutaml-logo_logo-full-dark.svg'
+
+const brandingLogo = computed(() => {
+  const logos = data.metadata?.appearance?.logos
+  if (logos?.square) {
+    const variant = ui.darkMode ? logos.square.dark : logos.square.light
+    return variant?.url || variant?.path || (ui.darkMode ? LUTAML_LOGO_DARK : LUTAML_LOGO_LIGHT)
+  }
+  return ui.darkMode ? LUTAML_LOGO_DARK : LUTAML_LOGO_LIGHT
+})
+
+const footerLogo = computed(() => {
+  return ui.darkMode ? LUTAML_FULL_DARK : LUTAML_FULL_LIGHT
+})
+
+function formatDate(isoString?: string): string {
+  if (!isoString) return ''
+  try {
+    const date = new Date(isoString)
+    return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
+  } catch {
+    return isoString
+  }
+}
+</script>
+
+<template>
+  <aside class="sidebar" :class="{ collapsed: !ui.sidebarVisible }">
+    <div class="sidebar-content">
+      <!-- Branding -->
+      <div class="sidebar-branding">
+        <img :src="brandingLogo" alt="Logo" class="branding-logo" />
+        <div class="branding-text">
+          <span class="branding-title">{{ data.metadata?.title || 'LutaML' }}</span>
+          <span class="branding-subtitle">UML Browser</span>
+        </div>
+      </div>
+
+      <!-- Overview -->
+      <div class="sidebar-section overview-section">
+        <button class="overview-btn" :class="{ active: ui.currentView === 'welcome' }"
+                @click="ui.showWelcome()">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path d="M2 7.5L8 2.5L14 7.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M3 7.5V13.5C3 13.5 3 14 4 14H12C12 14 13 14 13 13.5V7.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <span>Overview</span>
+        </button>
+      </div>
+
+      <!-- Package Tree -->
+      <div class="sidebar-section tree-section">
+        <div class="section-header">
+          <span class="section-title">Packages</span>
+          <div class="tree-controls">
+            <button class="btn btn-ghost" @click="ui.expandAll()" title="Expand All">
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                <path d="M2 5l5 5 5-5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </button>
+            <button class="btn btn-ghost" @click="ui.collapseAll()" title="Collapse All">
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                <path d="M2 9l5-5 5 5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div class="package-tree" v-if="data.packageTree">
+          <PackageTreeNode :node="data.packageTree" />
+        </div>
+        <div v-else class="loading">Loading...</div>
+      </div>
+
+      <!-- Stats -->
+      <div class="sidebar-section stats-section" v-if="data.metadata">
+        <div class="stats-grid">
+          <div class="stat-item">
+            <span class="stat-value">{{ data.metadata.statistics.packages }}</span>
+            <span class="stat-label">Packages</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-value">{{ data.metadata.statistics.classes }}</span>
+            <span class="stat-label">Classes</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-value">{{ data.metadata.statistics.associations }}</span>
+            <span class="stat-label">Associations</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="sidebar-footer">
+        <a href="https://www.lutaml.org" target="_blank" rel="noopener" class="footer-brand" title="LutaML">
+          <img :src="footerLogo" alt="LutaML" class="lutaml-logo" />
+        </a>
+        <div class="footer-text-group">
+          <span class="footer-text" v-if="data.metadata?.generated">
+            Generated {{ formatDate(data.metadata.generated) }} with
+            <a href="https://github.com/lutaml/lutaml" target="_blank" rel="noopener">LutaML</a>
+            v{{ data.metadata.version || '?' }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>

data/frontend/src/components/ClassDetails.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useDataStore } from '../stores/dataStore'
+import { useUiStore } from '../stores/uiStore'
+
+const data = useDataStore()
+const ui = useUiStore()
+
+const cls = computed(() =>
+  ui.currentClassId ? data.getClassById(ui.currentClassId) : null,
+)
+
+function formatCardinality(c: any): string {
+  if (!c) return ''
+  return `${c.min || '0'}..${c.max || '*'}`
+}
+
+function resolveType(typeName: string): { isBasic: boolean; classId: string | null } {
+  const basicTypes = new Set([
+    'String', 'Integer', 'Boolean', 'Real', 'UnlimitedNatural',
+    'DateTime', 'URI', 'Any', 'Object',
+  ])
+  if (basicTypes.has(typeName)) return { isBasic: true, classId: null }
+  const found = data.findClassByName(typeName)
+  return { isBasic: false, classId: found ? found.id : null }
+}
+
+function associationTarget(assoc: any): any {
+  if (!cls.value) return null
+  if (assoc.source?.class !== cls.value.xmiId) return assoc.source
+  return assoc.target
+}
+
+function badgeType(c: any): string {
+  if (c.literals && c.literals.length > 0) return 'ENUMERATION'
+  return c.type?.toUpperCase() || 'CLASS'
+}
+</script>
+
+<template>
+  <div class="detail-view" v-if="cls">
+    <div class="entity-header">
+      <div class="entity-title">
+        <h2 class="entity-name">{{ cls.qualifiedName }}</h2>
+        <div class="entity-subtitle" v-if="cls.package">
+          <a href="#" class="link-button" @click.prevent="ui.selectPackage(cls.package!, data.getPackageById(cls.package!)?.name)">
+            {{ data.getPackageById(cls.package)?.name || cls.package }}
+          </a>
+        </div>
+      </div>
+      <span class="entity-badge" :class="'badge-' + badgeType(cls)">{{ badgeType(cls) }}</span>
+      <span class="entity-badge badge-abstract" v-if="cls.isAbstract">abstract</span>
+    </div>
+
+    <div class="entity-metadata" v-if="cls.stereotypes.length">
+      <div class="metadata-item">
+        <span class="metadata-label">Stereotypes</span>
+        <span class="metadata-value">
+          <span v-for="s in cls.stereotypes" :key="s" class="stereotype-tag">&laquo;{{ s }}&raquo;</span>
+        </span>
+      </div>
+    </div>
+
+    <div class="entity-definition" v-if="cls.definition">
+      <div class="definition-content">{{ cls.definition }}</div>
+    </div>
+
+    <!-- Inheritance -->
+    <div class="section" v-if="cls.generalizations.length || cls.specializations.length">
+      <h3 class="section-title">Inheritance</h3>
+      <div v-if="cls.generalizations.length" class="inheritance-group">
+        <div class="inheritance-header">&#8593; Extends</div>
+        <div v-for="parentId in cls.generalizations" :key="parentId" class="list-item clickable-row"
+             @click="ui.selectClass(parentId)">
+          <span class="list-item-name">{{ data.getClassById(parentId)?.name || parentId }}</span>
+        </div>
+      </div>
+      <div v-if="cls.specializations.length" class="inheritance-group">
+        <div class="inheritance-header">&#8595; Extended by</div>
+        <div v-for="childId in cls.specializations" :key="childId" class="list-item clickable-row"
+             @click="ui.selectClass(childId)">
+          <span class="list-item-name">{{ data.getClassById(childId)?.name || childId }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Attributes -->
+    <div class="section" v-if="cls.attributes.length">
+      <h3 class="section-title">Attributes <span class="section-count">{{ cls.attributes.length }}</span></h3>
+      <div class="table-wrapper">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Type</th>
+              <th>Visibility</th>
+              <th>Cardinality</th>
+              <th>Modifiers</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="attrId in cls.attributes" :key="attrId" class="clickable-row">
+              <td>{{ data.getAttributeById(attrId)?.name }}</td>
+              <td>
+                <template v-if="data.getAttributeById(attrId)?.type">
+                  <a v-if="resolveType(data.getAttributeById(attrId)!.type).classId"
+                     href="#" class="type-link"
+                     @click.prevent="ui.selectClass(resolveType(data.getAttributeById(attrId)!.type).classId!)">
+                    {{ data.getAttributeById(attrId)?.type }}
+                  </a>
+                  <span v-else-if="resolveType(data.getAttributeById(attrId)!.type).isBasic"
+                        class="uml-basic-type">
+                    {{ data.getAttributeById(attrId)?.type }}
+                  </span>
+                  <span v-else class="type-unresolved">{{ data.getAttributeById(attrId)?.type }}</span>
+                </template>
+              </td>
+              <td>
+                <span v-if="data.getAttributeById(attrId)?.visibility"
+                      class="visibility-badge"
+                      :data-visibility="data.getAttributeById(attrId)?.visibility">
+                  {{ data.getAttributeById(attrId)?.visibility }}
+                </span>
+              </td>
+              <td>{{ formatCardinality(data.getAttributeById(attrId)?.cardinality) }}</td>
+              <td>
+                <span v-if="data.getAttributeById(attrId)?.isStatic" class="modifier-badge">static</span>
+                <span v-if="data.getAttributeById(attrId)?.isReadOnly" class="modifier-badge">readonly</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- Inherited Attributes -->
+    <div class="section" v-if="cls.inheritedAttributes.length">
+      <h3 class="section-title">Inherited Attributes</h3>
+      <div v-for="ia in cls.inheritedAttributes" :key="ia.attributeId" class="inheritance-group">
+        <div class="inheritance-header">From {{ ia.inheritedFromName }}</div>
+        <div class="table-wrapper">
+          <table class="data-table inherited-table">
+            <thead>
+              <tr><th>Name</th><th>Type</th><th>Cardinality</th></tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>{{ ia.attribute.name }}</td>
+                <td>{{ ia.attribute.type }}</td>
+                <td>{{ formatCardinality(ia.attribute.cardinality) }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- Operations -->
+    <div class="section" v-if="cls.operations.length">
+      <h3 class="section-title">Operations <span class="section-count">{{ cls.operations.length }}</span></h3>
+      <div class="table-wrapper">
+        <table class="data-table">
+          <thead>
+            <tr><th>Name</th><th>Return</th><th>Visibility</th><th>Modifiers</th></tr>
+          </thead>
+          <tbody>
+            <tr v-for="opId in cls.operations" :key="opId" class="clickable-row">
+              <td>
+                {{ data.getOperationById(opId)?.name }}(
+                <span v-if="data.getOperationById(opId)?.parameters.length">
+                  {{ data.getOperationById(opId)?.parameters.map(p => `${p.name}: ${p.type || '?'}`).join(', ') }}
+                </span>
+                )
+              </td>
+              <td>{{ data.getOperationById(opId)?.returnType || 'void' }}</td>
+              <td>
+                <span v-if="data.getOperationById(opId)?.visibility"
+                      class="visibility-badge"
+                      :data-visibility="data.getOperationById(opId)?.visibility">
+                  {{ data.getOperationById(opId)?.visibility }}
+                </span>
+              </td>
+              <td>
+                <span v-if="data.getOperationById(opId)?.isStatic" class="modifier-badge">static</span>
+                <span v-if="data.getOperationById(opId)?.isAbstract" class="modifier-badge">abstract</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- Associations -->
+    <div class="section" v-if="cls.associations.length">
+      <h3 class="section-title">Associations <span class="section-count">{{ cls.associations.length }}</span></h3>
+      <div class="table-wrapper">
+        <table class="data-table">
+          <thead>
+            <tr><th>Name</th><th>Target</th><th>Cardinality</th><th>Aggregation</th></tr>
+          </thead>
+          <tbody>
+            <tr v-for="assocId in cls.associations" :key="assocId">
+              <td>{{ data.getAssociationById(assocId)?.name }}</td>
+              <td>
+                <template v-if="associationTarget(data.getAssociationById(assocId))">
+                  <a v-if="associationTarget(data.getAssociationById(assocId))?.className"
+                     href="#" class="type-link"
+                     @click.prevent="() => {
+                       const found = data.findClassByName(associationTarget(data.getAssociationById(assocId))?.className || '')
+                       if (found) ui.selectClass(found.id)
+                     }">
+                    {{ associationTarget(data.getAssociationById(assocId))?.className }}
+                  </a>
+                </template>
+              </td>
+              <td>{{ formatCardinality(associationTarget(data.getAssociationById(assocId))?.cardinality) }}</td>
+              <td>{{ associationTarget(data.getAssociationById(assocId))?.aggregation }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- Inherited Associations -->
+    <div class="section" v-if="cls.inheritedAssociations.length">
+      <h3 class="section-title">Inherited Associations</h3>
+      <div v-for="ia in cls.inheritedAssociations" :key="ia.associationId" class="inheritance-group">
+        <div class="inheritance-header">From {{ ia.inheritedFromName }}</div>
+        <div class="list-item">
+          <span class="list-item-name">{{ data.getAssociationById(ia.associationId)?.name }}</span>
+          <span class="list-item-meta">{{ ia.localRole }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Enum Literals -->
+    <div class="section" v-if="cls.literals.length">
+      <h3 class="section-title">Literals <span class="section-count">{{ cls.literals.length }}</span></h3>
+      <div class="item-list">
+        <div v-for="lit in cls.literals" :key="lit.name" class="list-item">
+          <span class="list-item-name">{{ lit.name }}</span>
+          <span v-if="lit.definition" class="list-item-meta">{{ lit.definition }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

data/frontend/src/components/DiagramView.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useDataStore } from '../stores/dataStore'
+import { useUiStore } from '../stores/uiStore'
+
+const data = useDataStore()
+const ui = useUiStore()
+
+const diagram = computed(() =>
+  ui.currentDiagramId ? data.getDiagramById(ui.currentDiagramId) : null,
+)
+
+const zoom = ref(1)
+const panX = ref(0)
+const panY = ref(0)
+
+function zoomIn() { zoom.value = Math.min(zoom.value * 1.2, 5) }
+function zoomOut() { zoom.value = Math.max(zoom.value / 1.2, 0.1) }
+function resetView() { zoom.value = 1; panX.value = 0; panY.value = 0 }
+
+function onWheel(e: WheelEvent) {
+  e.preventDefault()
+  if (e.deltaY < 0) zoomIn()
+  else zoomOut()
+}
+
+function downloadSvg() {
+  if (!diagram.value?.svg) return
+  const blob = new Blob([diagram.value.svg], { type: 'image/svg+xml' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `${diagram.value.name || 'diagram'}.svg`
+  a.click()
+  URL.revokeObjectURL(url)
+}
+
+const svgTransform = computed(() =>
+  `translate(${panX.value}px, ${panY.value}px) scale(${zoom.value})`
+)
+</script>
+
+<template>
+  <div class="detail-view" v-if="diagram">
+    <div class="entity-header">
+      <div class="entity-title">
+        <h2 class="entity-name">{{ diagram.name }}</h2>
+      </div>
+      <span class="entity-badge badge-diagram">Diagram</span>
+    </div>
+
+    <div class="entity-metadata">
+      <div class="metadata-item" v-if="diagram.type">
+        <span class="metadata-label">Type</span>
+        <span class="metadata-value">{{ diagram.type }}</span>
+      </div>
+      <div class="metadata-item">
+        <span class="metadata-label">Elements</span>
+        <span class="metadata-value">{{ diagram.objectCount }}</span>
+      </div>
+      <div class="metadata-item">
+        <span class="metadata-label">Connectors</span>
+        <span class="metadata-value">{{ diagram.linkCount }}</span>
+      </div>
+    </div>
+
+    <div class="diagram-toolbar" v-if="diagram.svg">
+      <button class="btn-sm" @click="zoomIn">Zoom In</button>
+      <button class="btn-sm" @click="zoomOut">Zoom Out</button>
+      <button class="btn-sm" @click="resetView">Reset</button>
+      <button class="btn-sm" @click="downloadSvg">Download SVG</button>
+    </div>
+
+    <div class="diagram-svg-container" v-if="diagram.svg" @wheel="onWheel">
+      <div class="diagram-svg" :style="{ transform: svgTransform }"
+           v-html="diagram.svg" />
+    </div>
+  </div>
+</template>