lutaml 0.10.19 → 0.11.2

data/templates/static_site/components/content.liquid

@@ -1,481 +0,0 @@
-<div class="content-area">
-    <!-- Welcome Screen -->
-    <div x-show="currentView === 'welcome'" x-transition class="view-welcome">
-      <span class="welcome-logo">{{ lutamlIcon }}</span>
-      <h1 class="welcome-title" x-text="JSON.parse(config).title || 'UML Model Browser'"></h1>
-      <p class="welcome-subtitle">Browse packages, classes, associations, and diagrams.</p>
-
-      <div class="welcome-stats" x-show="data && data.metadata">
-        <div class="welcome-stat">
-          <div class="welcome-stat-value" x-text="data.metadata.statistics.packages"></div>
-          <div class="welcome-stat-label">Packages</div>
-        </div>
-        <div class="welcome-stat">
-          <div class="welcome-stat-value" x-text="data.metadata.statistics.classes"></div>
-          <div class="welcome-stat-label">Classes</div>
-        </div>
-        <div class="welcome-stat">
-          <div class="welcome-stat-value" x-text="data.metadata.statistics.attributes"></div>
-          <div class="welcome-stat-label">Attributes</div>
-        </div>
-        <div class="welcome-stat">
-          <div class="welcome-stat-value" x-text="data.metadata.statistics.associations"></div>
-          <div class="welcome-stat-label">Associations</div>
-        </div>
-      </div>
-
-      <div class="welcome-actions">
-        Select a package from the sidebar or press <kbd>/</kbd> to search.
-      </div>
-    </div>
-
-    <!-- Package Details -->
-    <div x-show="currentView === 'package'" x-transition class="view-package">
-      <template x-if="currentPackage && data.packages[currentPackage]">
-        <div class="package-details" x-data="{ get pkg() { return $store.app.data.packages[$store.app.currentPackage]; } }">
-          <div class="entity-header">
-            <div class="entity-title">
-              <h1 class="entity-name" x-text="pkg.name"></h1>
-              <p class="entity-subtitle" x-show="pkg.path"><code x-text="pkg.path"></code></p>
-            </div>
-            <span class="entity-badge badge-package">Package</span>
-          </div>
-
-          <div class="entity-metadata" x-show="pkg.stereotypes && pkg.stereotypes.length > 0">
-            <div class="metadata-item">
-              <span class="metadata-label">Stereotypes</span>
-              <span class="metadata-value">
-                <template x-for="s in pkg.stereotypes" :key="s">
-                  <span class="stereotype-tag" x-text="s"></span>
-                </template>
-              </span>
-            </div>
-          </div>
-
-          <div class="entity-definition" x-show="pkg.definition">
-            <div class="definition-content" x-html="pkg.definition"></div>
-          </div>
-
-          <!-- Empty State -->
-          <template x-if="(!pkg.subPackages || pkg.subPackages.length === 0) && (!pkg.classes || pkg.classes.length === 0) && (!pkg.diagrams || pkg.diagrams.length === 0)">
-            <div class="empty-state">
-              <p>This package is empty.</p>
-            </div>
-          </template>
-
-          <!-- Diagrams -->
-          <div class="section" x-show="pkg.diagrams && pkg.diagrams.length > 0">
-            <h3 class="section-title">Diagrams <span class="section-count" x-text="pkg.diagrams.length"></span></h3>
-            <div class="item-list">
-              <template x-for="diagramId in pkg.diagrams" :key="diagramId">
-                <div class="list-item" @click="$store.app.selectDiagram(diagramId)">
-                  <svg class="list-item-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
-                    <rect x="2" y="2" width="12" height="12" rx="1.5" stroke="currentColor" stroke-width="1.3"/>
-                    <path d="M2 6h12M6 6v8" stroke="currentColor" stroke-width="1.3"/>
-                  </svg>
-                  <span class="list-item-name" x-text="$store.app.data.diagrams[diagramId] && $store.app.data.diagrams[diagramId].name"></span>
-                  <span class="list-item-meta" x-show="$store.app.data.diagrams[diagramId] && $store.app.data.diagrams[diagramId].objectCount" x-text="`${$store.app.data.diagrams[diagramId].objectCount} objects`"></span>
-                  <span class="badge badge-diagram" x-show="$store.app.data.diagrams[diagramId]" x-text="$store.app.data.diagrams[diagramId] && $store.app.data.diagrams[diagramId].type"></span>
-                </div>
-              </template>
-            </div>
-          </div>
-
-          <!-- Sub-packages -->
-          <div class="section" x-show="pkg.subPackages && pkg.subPackages.length > 0">
-            <h3 class="section-title">Sub-packages <span class="section-count" x-text="pkg.subPackages.length"></span></h3>
-            <div class="item-list">
-              <template x-for="subPkgId in pkg.subPackages" :key="subPkgId">
-                <div class="list-item" @click="$store.app.selectPackage(subPkgId)">
-                  <svg class="list-item-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
-                    <path d="M2 5a2 2 0 012-2h3l1.5 2H12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2V5z" stroke="currentColor" stroke-width="1.2"/>
-                  </svg>
-                  <span class="list-item-name" x-text="data.packages[subPkgId].name"></span>
-                  <span class="list-item-meta" x-text="`${(data.packages[subPkgId].classes || []).length} classes`"></span>
-                </div>
-              </template>
-            </div>
-          </div>
-
-          <!-- Classes -->
-          <div class="section" x-show="pkg.classes && pkg.classes.length > 0">
-            <h3 class="section-title">Classes <span class="section-count" x-text="pkg.classes.length"></span></h3>
-            <div class="table-wrapper">
-              <table class="data-table">
-                <thead>
-                  <tr>
-                    <th>Name</th>
-                    <th>Type</th>
-                    <th>Stereotypes</th>
-                    <th>Attrs</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <template x-for="classId in pkg.classes" :key="classId">
-                    <tr @click="$store.app.selectClass(classId)" class="clickable-row">
-                      <td><button class="link-button" x-text="data.classes[classId].name"></button></td>
-                      <td><span class="badge" :class="'badge-' + (data.classes[classId].type === 'Enumeration' ? 'enum' : data.classes[classId].type === 'DataType' ? 'datatype' : 'class')" x-text="data.classes[classId].type"></span></td>
-                      <td>
-                        <template x-if="data.classes[classId].stereotypes && data.classes[classId].stereotypes.length > 0">
-                          <span>
-                            <template x-for="st in data.classes[classId].stereotypes" :key="st">
-                              <span class="stereotype-tag" x-text="st"></span>
-                            </template>
-                          </span>
-                        </template>
-                      </td>
-                      <td style="color: var(--text-muted); font-variant-numeric: tabular-nums;" x-text="(data.classes[classId].attributes || []).length"></td>
-                    </tr>
-                  </template>
-                </tbody>
-              </table>
-            </div>
-          </div>
-
-          <!-- Info message -->
-          <template x-if="(!pkg.classes || pkg.classes.length === 0) && pkg.diagrams && pkg.diagrams.length > 0">
-            <div class="info-message">
-              This package contains <strong x-text="pkg.diagrams.length"></strong> diagram(s) but no classes.
-            </div>
-          </template>
-        </div>
-      </template>
-    </div>
-
-    <!-- Class Details -->
-    <div x-show="currentView === 'class'" x-transition class="view-class">
-      <template x-if="currentClass && data.classes[currentClass]">
-        <div class="class-details" x-data="{
-          get cls() { return data.classes[currentClass]; },
-          isUmlBasicType(type) { return window.UMLUtils.isUmlBasicType(type); },
-          findClassByName(name) { return window.UMLUtils.findClassByName(data, name); },
-          getAssociationEnds(assoc, cls) {
-            if (!assoc || !cls) return { local: {}, remote: {}, direction: '↔' };
-            if (assoc.source && assoc.source.class === cls.xmiId) return { local: assoc.source, remote: assoc.target, direction: '→' };
-            if (assoc.target && assoc.target.class === cls.xmiId) return { local: assoc.target, remote: assoc.source, direction: '←' };
-            return { local: assoc.source || {}, remote: assoc.target || {}, direction: '↔' };
-          },
-          groupByParent(items) {
-            if (!items || items.length === 0) return [];
-            const groups = {};
-            items.forEach(item => {
-              if (!groups[item.inheritedFromName]) groups[item.inheritedFromName] = [];
-              groups[item.inheritedFromName].push(item);
-            });
-            return Object.values(groups);
-          }
-        }">
-          <div class="entity-header">
-            <div class="entity-title">
-              <h1 class="entity-name" x-text="cls.qualifiedName"></h1>
-              <p class="entity-subtitle" x-show="cls.name !== cls.qualifiedName" x-text="`(${cls.name})`"></p>
-            </div>
-            <span class="entity-badge" :class="'badge-' + (cls.type === 'Enumeration' ? 'enum' : cls.type === 'DataType' ? 'datatype' : cls.type === 'Interface' ? 'interface' : 'class')" x-text="cls.type"></span>
-            <span class="entity-badge badge-abstract" x-show="cls.isAbstract">Abstract</span>
-          </div>
-
-          <div class="entity-metadata">
-            <div class="metadata-item">
-              <span class="metadata-label">Package</span>
-              <span class="metadata-value"><button class="link-button" @click="selectPackage(cls.package)" x-text="data.packages[cls.package] && data.packages[cls.package].name"></button></span>
-            </div>
-            <div class="metadata-item" x-show="cls.stereotypes && cls.stereotypes.length > 0">
-              <span class="metadata-label">Stereotypes</span>
-              <span class="metadata-value">
-                <template x-for="st in cls.stereotypes" :key="st">
-                  <span class="stereotype-tag" x-text="st"></span>
-                </template>
-              </span>
-            </div>
-          </div>
-
-          <div class="entity-definition" x-show="cls.definition">
-            <div class="definition-content" x-html="cls.definition"></div>
-          </div>
-
-          <!-- Inheritance -->
-          <div class="section" x-show="(cls.generalizations && cls.generalizations.length > 0) || (cls.specializations && cls.specializations.length > 0)">
-            <h3 class="section-title">Inheritance</h3>
-
-            <div x-show="cls.generalizations && cls.generalizations.length > 0" style="margin-bottom: var(--space-4);">
-              <div class="section-title" style="font-size: var(--text-xs);">Extends</div>
-              <div class="item-list">
-                <template x-for="parentId in cls.generalizations" :key="parentId">
-                  <div class="list-item" @click="selectClass(parentId)">
-                    <svg class="list-item-icon" width="14" height="14" viewBox="0 0 14 14" fill="none">
-                      <polyline points="4 10 7 4 10 10" stroke="currentColor" stroke-width="1.3" fill="none"/>
-                    </svg>
-                    <span class="list-item-name" x-text="data.classes[parentId] && data.classes[parentId].name"></span>
-                    <span class="list-item-meta" x-text="data.classes[parentId] && data.classes[parentId].qualifiedName"></span>
-                  </div>
-                </template>
-              </div>
-            </div>
-
-            <div x-show="cls.specializations && cls.specializations.length > 0">
-              <div class="section-title" style="font-size: var(--text-xs);">Extended by</div>
-              <div class="item-list">
-                <template x-for="childId in cls.specializations" :key="childId">
-                  <div class="list-item" @click="selectClass(childId)">
-                    <svg class="list-item-icon" width="14" height="14" viewBox="0 0 14 14" fill="none">
-                      <polyline points="4 4 7 10 10 4" stroke="currentColor" stroke-width="1.3" fill="none"/>
-                    </svg>
-                    <span class="list-item-name" x-text="data.classes[childId] && data.classes[childId].name"></span>
-                  </div>
-                </template>
-              </div>
-            </div>
-          </div>
-
-          <!-- Attributes -->
-          <div class="section" x-show="cls.attributes && cls.attributes.length > 0">
-            <h3 class="section-title">Attributes <span class="section-count" x-text="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>
-                  <template x-for="attrId in cls.attributes" :key="attrId">
-                    <tr x-data="{ attr: data.attributes[attrId] }">
-                      <td>
-                        <code x-text="attr.name"></code>
-                        <div class="cell-description" x-show="attr.definition" x-text="attr.definition"></div>
-                      </td>
-                      <td>
-                        <template x-if="isUmlBasicType(attr.type)">
-                          <code class="uml-basic-type" x-text="attr.type"></code>
-                        </template>
-                        <template x-if="!isUmlBasicType(attr.type) && findClassByName(attr.type)">
-                          <button class="type-link" @click="selectClass(findClassByName(attr.type))" x-text="attr.type"></button>
-                        </template>
-                        <template x-if="!isUmlBasicType(attr.type) && !findClassByName(attr.type)">
-                          <span class="type-unresolved" x-text="attr.type"></span>
-                        </template>
-                      </td>
-                      <td><span class="visibility-badge" :data-visibility="attr.visibility" x-text="attr.visibility"></span></td>
-                      <td><code x-show="attr.cardinality" x-text="`${attr.cardinality.min}..${attr.cardinality.max}`"></code></td>
-                      <td>
-                        <span class="modifier-badge" x-show="attr.isStatic">static</span>
-                        <span class="modifier-badge" x-show="attr.isReadOnly">readOnly</span>
-                      </td>
-                    </tr>
-                  </template>
-                </tbody>
-              </table>
-            </div>
-          </div>
-
-          <!-- Inherited Attributes -->
-          <div class="section" x-show="cls.inheritedAttributes && cls.inheritedAttributes.length > 0">
-            <h3 class="section-title">Inherited Attributes <span class="section-count" x-text="cls.inheritedAttributes.length"></span></h3>
-            <template x-for="(parentGroup, idx) in groupByParent(cls.inheritedAttributes)" :key="idx">
-              <div class="inheritance-group">
-                <div class="inheritance-header">
-                  <span>From:</span>
-                  <button class="link-button" @click="selectClass(parentGroup[0].inheritedFrom)" x-text="parentGroup[0].inheritedFromName"></button>
-                </div>
-                <div class="table-wrapper">
-                  <table class="data-table inherited-table">
-                    <thead><tr><th>Name</th><th>Type</th><th>Visibility</th><th>Cardinality</th></tr></thead>
-                    <tbody>
-                      <template x-for="item in parentGroup" :key="item.attributeId">
-                        <tr x-data="{ attr: item.attribute }">
-                          <td><code x-text="attr.name"></code></td>
-                          <td>
-                            <template x-if="isUmlBasicType(attr.type)">
-                              <code class="uml-basic-type" x-text="attr.type"></code>
-                            </template>
-                            <template x-if="!isUmlBasicType(attr.type) && findClassByName(attr.type)">
-                              <button class="type-link" @click="selectClass(findClassByName(attr.type))" x-text="attr.type"></button>
-                            </template>
-                            <template x-if="!isUmlBasicType(attr.type) && !findClassByName(attr.type)">
-                              <span class="type-unresolved" x-text="attr.type"></span>
-                            </template>
-                          </td>
-                          <td><span class="visibility-badge" :data-visibility="attr.visibility" x-text="attr.visibility"></span></td>
-                          <td><code x-show="attr.cardinality" x-text="`${attr.cardinality.min}..${attr.cardinality.max}`"></code></td>
-                        </tr>
-                      </template>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </template>
-          </div>
-
-          <!-- Associations -->
-          <div class="section" x-show="cls.associations && cls.associations.length > 0">
-            <h3 class="section-title">Associations <span class="section-count" x-text="cls.associations.length"></span></h3>
-            <div class="table-wrapper">
-              <table class="data-table">
-                <thead><tr><th>Role</th><th>Target</th><th>Dir</th><th>Cardinality</th><th>Target Role</th><th>Target Card</th><th>Type</th></tr></thead>
-                <tbody>
-                  <template x-for="assocId in cls.associations" :key="assocId">
-                    <tr x-data="{
-                      assoc: data.associations[assocId],
-                      get ends() {
-                        if (!this.assoc || !cls) return { local: {}, remote: {}, direction: '↔' };
-                        if (this.assoc.source && this.assoc.source.class === cls.xmiId) return { local: this.assoc.source, remote: this.assoc.target, direction: '→' };
-                        if (this.assoc.target && this.assoc.target.class === cls.xmiId) return { local: this.assoc.target, remote: this.assoc.source, direction: '←' };
-                        return { local: this.assoc.source || {}, remote: this.assoc.target || {}, direction: '↔' };
-                      }
-                    }">
-                      <td>
-                        <code x-text="ends.local ? (ends.local.role || '(unnamed)') : ''"></code>
-                        <div class="cell-description" x-show="assoc && assoc.definition" x-text="assoc ? assoc.definition : ''"></div>
-                      </td>
-                      <td><button class="link-button" @click="ends.remote && ends.remote.class && selectClass(ends.remote.class)" x-text="ends.remote ? ends.remote.className : ''"></button></td>
-                      <td><span x-text="ends.direction"></span></td>
-                      <td><code x-show="ends.local && ends.local.cardinality" x-text="ends.local && ends.local.cardinality ? `${ends.local.cardinality.min}..${ends.local.cardinality.max}` : ''"></code></td>
-                      <td><code x-text="ends.remote ? (ends.remote.role || '(unnamed)') : ''"></code></td>
-                      <td><code x-show="ends.remote && ends.remote.cardinality" x-text="ends.remote && ends.remote.cardinality ? `${ends.remote.cardinality.min}..${ends.remote.cardinality.max}` : ''"></code></td>
-                      <td>
-                        <span x-show="ends.local && ends.local.aggregation === 'composite'" title="Composition">◆</span>
-                        <span x-show="ends.local && ends.local.aggregation === 'shared'" title="Aggregation">◇</span>
-                        <span x-show="!(ends.local && ends.local.aggregation) && !(ends.remote && ends.remote.aggregation)">—</span>
-                      </td>
-                    </tr>
-                  </template>
-                </tbody>
-              </table>
-            </div>
-          </div>
-
-          <!-- Inherited Associations -->
-          <div class="section" x-show="cls.inheritedAssociations && cls.inheritedAssociations.length > 0">
-            <h3 class="section-title">Inherited Associations <span class="section-count" x-text="cls.inheritedAssociations.length"></span></h3>
-            <template x-for="(parentGroup, idx) in groupByParent(cls.inheritedAssociations)" :key="idx">
-              <div class="inheritance-group">
-                <div class="inheritance-header">
-                  <span>From:</span>
-                  <button class="link-button" @click="selectClass(parentGroup[0].inheritedFrom)" x-text="parentGroup[0].inheritedFromName"></button>
-                </div>
-                <div class="table-wrapper">
-                  <table class="data-table inherited-table">
-                    <thead><tr><th>Role</th><th>Target</th><th>Dir</th><th>Cardinality</th><th>Target Role</th></tr></thead>
-                    <tbody>
-                      <template x-for="item in parentGroup" :key="item.associationId">
-                        <tr x-data="{
-                          assoc: data.associations[item.associationId],
-                          get ends() {
-                            if (!this.assoc || !cls) return { local: {}, remote: {}, direction: '↔' };
-                            if (this.assoc.source && this.assoc.source.class === cls.xmiId) return { local: this.assoc.source, remote: this.assoc.target, direction: '→' };
-                            if (this.assoc.target && this.assoc.target.class === cls.xmiId) return { local: this.assoc.target, remote: this.assoc.source, direction: '←' };
-                            return { local: this.assoc.source || {}, remote: this.assoc.target || {}, direction: '↔' };
-                          }
-                        }">
-                          <td><code x-text="ends.local ? (ends.local.role || '(unnamed)') : ''"></code></td>
-                          <td><button class="link-button" @click="ends.remote && ends.remote.class && selectClass(ends.remote.class)" x-text="ends.remote ? ends.remote.className : ''"></button></td>
-                          <td><span x-text="ends.direction"></span></td>
-                          <td><code x-show="ends.local && ends.local.cardinality" x-text="ends.local && ends.local.cardinality ? `${ends.local.cardinality.min}..${ends.local.cardinality.max}` : ''"></code></td>
-                          <td><code x-text="ends.remote ? (ends.remote.role || '(unnamed)') : ''"></code></td>
-                        </tr>
-                      </template>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </template>
-          </div>
-        </div>
-      </template>
-    </div>
-
-    <!-- Search Results -->
-    <div x-show="currentView === 'search'" x-transition class="view-search">
-      <div x-data="searchResultsView">
-        <h2 style="margin-bottom: var(--space-2);">Search Results</h2>
-        <p style="color: var(--text-muted); margin-bottom: var(--space-6); font-size: var(--text-sm);">
-          Showing results for "<strong x-text="searchQuery"></strong>"
-        </p>
-
-        <div x-show="searchResults.length === 0" class="empty-state">
-          <p>No results found.</p>
-        </div>
-
-        <div x-show="searchResults.length > 0">
-          <template x-for="group in groupedResults" :key="group.type">
-            <div class="result-group">
-              <h3 class="result-group-title" x-text="`${group.type}s (${group.items.length})`"></h3>
-              <div class="item-list">
-                <template x-for="result in group.items" :key="result.id">
-                  <div class="list-item" @click="openResult(result)">
-                    <span class="list-item-name" x-html="highlightMatches(result.name, searchQuery)"></span>
-                    <span class="list-item-meta" x-text="result.entityType"></span>
-                  </div>
-                </template>
-              </div>
-            </div>
-          </template>
-        </div>
-      </div>
-    </div>
-
-    <!-- Diagram View -->
-    <div x-show="currentView === 'diagram'" x-transition class="view-diagram">
-      <template x-if="currentDiagram && data.diagrams[currentDiagram]">
-        <div class="diagram-details" x-data="{
-          get diag() { return data.diagrams[currentDiagram]; },
-          get pkg() { return diag.package ? data.packages[diag.package] : null; },
-          diagramScale: 1.0,
-          diagramPanX: 0,
-          diagramPanY: 0,
-          isPanning: false,
-          panStartX: 0,
-          panStartY: 0,
-          zoom(factor) { this.diagramScale = Math.max(0.1, Math.min(5.0, this.diagramScale * factor)); },
-          resetView() { this.diagramScale = 1.0; this.diagramPanX = 0; this.diagramPanY = 0; },
-          startPan(e) { this.isPanning = true; this.panStartX = e.clientX - this.diagramPanX; this.panStartY = e.clientY - this.diagramPanY; },
-          doPan(e) { if (!this.isPanning) return; this.diagramPanX = e.clientX - this.panStartX; this.diagramPanY = e.clientY - this.panStartY; },
-          endPan() { this.isPanning = false; },
-          downloadSvg() {
-            const svgEl = document.querySelector('.diagram-svg-container svg');
-            if (!svgEl) return;
-            const d = new XMLSerializer().serializeToString(svgEl);
-            const blob = new Blob([d], { type: 'image/svg+xml' });
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url; a.download = (this.diag.name || 'diagram').replace(/[^a-zA-Z0-9_-]/g, '_') + '.svg';
-            a.click(); URL.revokeObjectURL(url);
-          }
-        }">
-          <div class="entity-header">
-            <div class="entity-title">
-              <h1 class="entity-name" x-text="diag.name"></h1>
-              <p class="diagram-meta">
-                <span x-text="diag.type"></span>
-                <span x-show="diag.objectCount"> · <span x-text="diag.objectCount"></span> elements, <span x-text="diag.linkCount"></span> connectors</span>
-              </p>
-            </div>
-            <div style="display: flex; gap: var(--space-2); align-items: center;">
-              <button class="link-button" x-show="diag.package" @click="selectPackage(diag.package)">&larr; Package</button>
-              <span class="entity-badge badge-diagram">Diagram</span>
-            </div>
-          </div>
-
-          <div class="diagram-toolbar" x-show="diag.svg">
-            <button class="btn-sm" @click="zoom(1.2)">Zoom In</button>
-            <button class="btn-sm" @click="zoom(0.8)">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"
-               x-show="diag.svg"
-               @wheel.prevent="zoom($event.deltaY > 0 ? 0.9 : 1.1)"
-               @mousedown="startPan($event)"
-               @mousemove="doPan($event)"
-               @mouseup="endPan()"
-               @mouseleave="endPan()"
-               :style="`transform: translate(${diagramPanX}px, ${diagramPanY}px) scale(${diagramScale}); transform-origin: center; cursor: ${isPanning ? 'grabbing' : 'grab'};`">
-            <div x-html="diag.svg"></div>
-          </div>
-
-          <div x-show="!diag.svg" class="empty-state">
-            <p>SVG rendering not available. Re-generate with <code>--render-diagrams</code> to include SVG.</p>
-          </div>
-        </div>
-      </template>
-    </div>
-  </div>

data/templates/static_site/components/diagram_list.liquid

@@ -1,52 +0,0 @@
-{%- comment -%}
-Diagram List Component
-Displays a list of available diagrams
-
-Parameters:
-- diagrams: Array of diagram objects
-- title: Optional title for the section
-{%- endcomment -%}
-
-{%- if diagrams and diagrams.size > 0 -%}
-<div class="diagram-list-section">
-  {%- if title -%}
-  <h3>{{ title }}</h3>
-  {%- endif -%}
-
-  <div class="diagram-list">
-    {%- for diagram in diagrams -%}
-    <div class="diagram-list-item" data-diagram-id="{{ diagram.id }}">
-      <div class="diagram-list-item-info">
-        <div class="diagram-list-item-name">{{ diagram.name }}</div>
-        <div class="diagram-list-item-meta">
-          {{ diagram.type | default: "Unknown" }}
-          • {{ diagram.objects | default: 0 }} objects
-          • {{ diagram.links | default: 0 }} connectors
-        </div>
-      </div>
-      <button
-        class="diagram-list-item-action"
-        onclick="showDiagram('{{ diagram.id }}')"
-        title="View diagram">
-        View
-      </button>
-    </div>
-    {%- endfor -%}
-  </div>
-</div>
-
-<script>
-  function showDiagram(diagramId) {
-    // Navigate to diagram view or open in modal
-    if (window.diagramViewer) {
-      window.diagramViewer.loadDiagram(diagramId);
-
-      // Scroll to diagram container
-      const container = document.getElementById('diagram-container');
-      if (container) {
-        container.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-      }
-    }
-  }
-</script>
-{%- endif -%}

data/templates/static_site/components/diagram_viewer.liquid

@@ -1,71 +0,0 @@
-{%- comment -%}
-Diagram Viewer Component
-Displays a UML diagram with interactive controls
-
-Parameters:
-- diagram: Diagram object with id, name, type, svgPath, objects, links
-{%- endcomment -%}
-
-<div class="diagram-section" data-diagram-id="{{ diagram.id }}">
-  <h3>{{ diagram.name }}</h3>
-
-  <div class="diagram-viewer">
-    <!-- Diagram Controls -->
-    <div class="diagram-controls">
-      <button id="diagram-zoom-in" title="Zoom In">
-        <span>🔍+</span> Zoom In
-      </button>
-      <button id="diagram-zoom-out" title="Zoom Out">
-        <span>🔍-</span> Zoom Out
-      </button>
-      <button id="diagram-reset" title="Reset View">
-        <span>⟲</span> Reset
-      </button>
-      <button id="diagram-download" title="Download SVG">
-        <span>⬇</span> Download
-      </button>
-    </div>
-
-    <!-- Diagram Container -->
-    <div id="diagram-container" class="diagram-container">
-      <div class="diagram-loading">
-        <p>Loading diagram...</p>
-      </div>
-    </div>
-
-    <!-- Diagram Metadata -->
-    <div class="diagram-metadata" id="diagram-metadata">
-      <div class="metadata-item">
-        <span class="metadata-label">Type:</span>
-        <span class="metadata-value">{{ diagram.type | default: "Unknown" }}</span>
-      </div>
-      <div class="metadata-item">
-        <span class="metadata-label">Objects:</span>
-        <span class="metadata-value">{{ diagram.objects | default: 0 }}</span>
-      </div>
-      <div class="metadata-item">
-        <span class="metadata-label">Connectors:</span>
-        <span class="metadata-value">{{ diagram.links | default: 0 }}</span>
-      </div>
-    </div>
-  </div>
-
-  <script>
-    // Load diagram when component is visible
-    (function() {
-      const diagramId = '{{ diagram.id }}';
-
-      // Wait for diagramViewer to be initialized
-      if (window.diagramViewer) {
-        window.diagramViewer.loadDiagram(diagramId);
-      } else {
-        // Wait for DOMContentLoaded
-        window.addEventListener('DOMContentLoaded', function() {
-          if (window.diagramViewer) {
-            window.diagramViewer.loadDiagram(diagramId);
-          }
-        });
-      }
-    })();
-  </script>
-</div>