lutaml 0.10.19 → 0.11.2

data/frontend/package.json

@@ -1,26 +0,0 @@
-{
-  "name": "lutaml-uml-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

@@ -1,59 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-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

@@ -1,127 +0,0 @@
-<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

@@ -1,119 +0,0 @@
-<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

@@ -1,247 +0,0 @@
-<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

@@ -1,79 +0,0 @@
-<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>