lutaml 0.10.7 → 0.10.8

data/templates/static_site/components/header.liquid

@@ -1,134 +1,114 @@
-<header class="app-header" role="banner">
-  <div class="header-content">
-    <div class="header-left">
-      <button
-        @click="sidebarVisible = !sidebarVisible"
-        class="sidebar-toggle"
-        aria-label="Toggle sidebar"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <line x1="3" y1="12" x2="21" y2="12"></line>
-          <line x1="3" y1="6" x2="21" y2="6"></line>
-          <line x1="3" y1="18" x2="21" y2="18"></line>
-        </svg>
-      </button>
-
-      <h1 class="app-title">
-        <a href="#/" @click.prevent="showWelcome()">{{ config.title }}</a>
-      </h1>
-    </div>
+<header class="app-header">
+  <div class="header-left">
+    <button @click="$store.app.sidebarVisible = !$store.app.sidebarVisible" class="sidebar-toggle icon-btn" aria-label="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="home-btn icon-btn" @click="showWelcome()" title="Overview">
+      <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>
+    </button>
+    <span class="header-breadcrumb">
+      <span x-text="JSON.parse(config).title || 'UML Model Browser'"></span>
+    </span>
+  </div>
 
-    <div class="header-center" x-data="searchComponent">
-      <div class="search-wrapper">
-        <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <circle cx="11" cy="11" r="8"></circle>
-          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-        </svg>
+  <div class="header-center" x-data="searchComponent">
+    <button class="search-trigger" @click="$refs.searchInput.focus()">
+      <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 packages, classes...</span>
+      <kbd>/</kbd>
+    </button>
 
-        <input
-          type="search"
-          x-model="query"
-          @input.debounce.300ms="performSearch()"
-          @keydown.arrow-down.prevent="selectNext()"
-          @keydown.arrow-up.prevent="selectPrevious()"
-          @keydown.enter.prevent="openSelected()"
-          @keydown.escape="closeSearch()"
-          @focus="showResults = query.length >= 2"
-          placeholder="Search... (Press / or Ctrl+K)"
-          class="search-input"
-          x-ref="searchInput"
-          aria-label="Search UML model"
-        >
+    <!-- Hidden functional input -->
+    <input type="search" x-model="query" x-ref="searchInput"
+      @input.debounce.300ms="performSearch()"
+      @keydown.arrow-down.prevent="selectNext()"
+      @keydown.arrow-up.prevent="selectPrevious()"
+      @keydown.enter.prevent="openSelected()"
+      @keydown.escape="closeSearch()"
+      @blur="showResults = false"
+      style="position:absolute;opacity:0;pointer-events:none;width:0;height:0;"
+      aria-label="Search">
 
-        <button
-          x-show="query.length > 0"
-          @click="clearSearch()"
-          class="search-clear"
-          aria-label="Clear search"
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <line x1="18" y1="6" x2="6" y2="18"></line>
-            <line x1="6" y1="6" x2="18" y2="18"></line>
+    <!-- Search Modal Overlay -->
+    <div x-show="showResults && query.length >= 2"
+      @click.away="showResults = false"
+      x-transition
+      class="search-modal-overlay"
+      @mousedown.prevent style="padding-top: 5vh;">
+      <div class="search-modal" @click.stop>
+        <div class="search-input-wrapper">
+          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" style="color: var(--text-muted); flex-shrink: 0;">
+            <circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5"/>
+            <path d="M12 12l4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
           </svg>
-        </button>
-
-        <kbd class="search-hint">Ctrl+K</kbd>
-      </div>
-
-      <!-- Search Results Overlay -->
-      <div
-        x-show="showResults && query.length >= 2"
-        @click.away="showResults = false"
-        x-transition:enter="transition ease-out duration-200"
-        x-transition:enter-start="opacity-0 transform scale-95"
-        x-transition:enter-end="opacity-100 transform scale-100"
-        class="search-results-overlay"
-        role="listbox"
-      >
-        <div class="search-results-header">
-          <span x-text="`${results.length} result${results.length !== 1 ? 's' : ''}`"></span>
-          <span class="search-hint-text">Use ↑↓ to navigate, Enter to open, Esc to close</span>
+          <input type="text" x-model="query"
+            @input.debounce.300ms="performSearch()"
+            @keydown.arrow-down.prevent="selectNext()"
+            @keydown.arrow-up.prevent="selectPrevious()"
+            @keydown.enter.prevent="openSelected()"
+            @keydown.escape="closeSearch()"
+            class="search-input"
+            placeholder="Search packages, classes, attributes...">
+          <button x-show="query.length > 0" @click="clearSearch()" style="padding: var(--space-1); color: var(--text-muted);">
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+              <path d="M4 4l6 6M10 4l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+            </svg>
+          </button>
         </div>
 
-        <!-- Results list -->
-        <div class="search-results-list" x-show="results.length > 0">
-          <template x-for="(result, index) in results" :key="result.id">
-            <div
-              @click="openResult(result)"
-              @mouseenter="selectedIndex = index"
-              :class="{ 'selected': selectedIndex === index }"
-              class="search-result-item"
-              role="option"
-              :aria-selected="selectedIndex === index"
-            >
-              <div class="result-icon" :data-type="result.type">
-                <span x-text="getTypeIcon(result.type)"></span>
-              </div>
-
-              <div class="result-info">
-                <div class="result-name">
-                  <span x-html="highlightMatches(result.name, query)"></span>
-                  <span class="result-type-badge" x-text="result.entityType"></span>
+        <div class="search-results">
+          <div x-show="results.length === 0" class="search-empty">
+            No results for "<span x-text="query"></span>"
+          </div>
+          <div class="search-results-list" x-show="results.length > 0">
+            <template x-for="(result, index) in results" :key="result.id">
+              <div class="search-result"
+                @click="openResult(result)"
+                @mouseenter="selectedIndex = index"
+                :class="{ focused: selectedIndex === index }">
+                <span class="result-icon">
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                    <rect x="3" y="3" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.3"/>
+                  </svg>
+                </span>
+                <div class="result-content">
+                  <span class="result-name" x-html="highlightMatches(result.name, query)"></span>
+                  <span class="result-path" x-text="result.qualifiedName || result.package"></span>
                 </div>
-                <div class="result-path" x-text="result.qualifiedName || result.package"></div>
-              </div>
-
-              <div class="result-score">
-                <div class="score-bar" :style="`width: ${Math.min((result.score / maxScore) * 100, 100)}%`"></div>
               </div>
-            </div>
-          </template>
+            </template>
+          </div>
         </div>
 
-        <!-- No Results Message INSIDE overlay -->
-        <div class="search-no-results" x-show="results.length === 0">
-          <p>No results found for "<span x-text="query"></span>"</p>
-          <p class="search-suggestion">Try different keywords or check spelling</p>
+        <div class="search-footer">
+          <div class="search-hints">
+            <span><kbd>↑</kbd><kbd>↓</kbd> Navigate</span>
+            <span><kbd>↵</kbd> Select</span>
+            <span><kbd>Esc</kbd> Close</span>
+          </div>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="header-right">
-      <button
-        @click="toggleTheme()"
-        class="theme-toggle"
-        :aria-label="darkMode ? 'Switch to light mode' : 'Switch to dark mode'"
-      >
-        <svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <circle cx="12" cy="12" r="5"></circle>
-          <line x1="12" y1="1" x2="12" y2="3"></line>
-          <line x1="12" y1="21" x2="12" y2="23"></line>
-          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-          <line x1="1" y1="12" x2="3" y2="12"></line>
-          <line x1="21" y1="12" x2="23" y2="12"></line>
-          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-        </svg>
-        <svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-        </svg>
-      </button>
-    </div>
+  <div class="header-right">
+    <button class="icon-btn" @click="toggleTheme()" :title="darkMode ? 'Light mode' : 'Dark mode'">
+      <svg x-show="!darkMode" 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>
+      <svg x-show="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>
+    </button>
   </div>
-</header>
+</header>

data/templates/static_site/components/sidebar.liquid

@@ -1,46 +1,76 @@
-<aside
-  class="sidebar"
-  x-show="sidebarVisible"
-  x-transition
-  :aria-hidden="!sidebarVisible"
-  role="navigation"
-  aria-label="Package navigation"
->
-  <div class="sidebar-header">
-    <h2>Packages</h2>
-    <div class="sidebar-actions">
-      <button
-        @click="expandAll()"
-        class="icon-button"
-        title="Expand all packages"
-        aria-label="Expand all packages"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <polyline points="7 13 12 18 17 13"></polyline>
-          <polyline points="7 6 12 11 17 6"></polyline>
-        </svg>
-      </button>
-      <button
-        @click="collapseAll()"
-        class="icon-button"
-        title="Collapse all packages"
-        aria-label="Collapse all packages"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <polyline points="17 11 12 6 7 11"></polyline>
-          <polyline points="17 18 12 13 7 18"></polyline>
+<aside class="sidebar" :class="{ collapsed: !$store.app.sidebarVisible }">
+  <div class="sidebar-content">
+    <!-- Branding Header -->
+    <div class="sidebar-branding">
+      <span class="branding-logo">{{ lutamlIcon }}</span>
+      <div class="branding-text">
+        <span class="branding-title" x-text="JSON.parse(config).title || 'UML Model'"></span>
+        <span class="branding-subtitle">LutaML Browser</span>
+      </div>
+    </div>
+
+    <!-- Overview -->
+    <div class="sidebar-section" style="padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-light);">
+      <button class="overview-btn" :class="{ active: currentView === 'welcome' }" @click="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>
-  </div>
 
-  <div class="sidebar-content" x-data="packageTree">
-    <template x-if="data && data.packageTree">
-      <div x-data="renderTree(data.packageTree)" x-html="treeHtml"></div>
-    </template>
+    <!-- Package Tree -->
+    <div class="sidebar-section" style="flex: 1; overflow: auto; padding: var(--space-3); border-bottom: none;">
+      <div class="section-header">
+        <span class="section-title">Packages</span>
+        <div style="display: flex; gap: 2px;">
+          <button @click="expandAll()" class="icon-btn" style="width: 22px; height: 22px;" title="Expand all">
+            <svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M2 4l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+          </button>
+          <button @click="collapseAll()" class="icon-btn" style="width: 22px; height: 22px;" title="Collapse all">
+            <svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M2 8l4-4 4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+          </button>
+        </div>
+      </div>
+
+      <div x-data="packageTree">
+        <template x-if="data && data.packageTree">
+          <div x-data="renderTree(data.packageTree)" x-html="treeHtml"></div>
+        </template>
+        <div x-show="!data" style="padding: var(--space-4); text-align: center; color: var(--text-muted); font-size: var(--text-sm);">
+          Loading...
+        </div>
+      </div>
+    </div>
+
+    <!-- Stats Grid -->
+    <div class="sidebar-section" style="background: var(--bg-primary); padding: var(--space-3) var(--space-4);">
+      <div class="stats-grid" x-show="data && data.metadata">
+        <div class="stat-item">
+          <span class="stat-value" x-text="data.metadata.statistics.packages"></span>
+          <span class="stat-label">Packages</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-value" x-text="data.metadata.statistics.classes"></span>
+          <span class="stat-label">Classes</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-value" x-text="data.metadata.statistics.associations"></span>
+          <span class="stat-label">Assoc</span>
+        </div>
+      </div>
+    </div>
 
-    <div x-show="!data" class="sidebar-loading">
-      <p>Loading packages...</p>
+    <!-- Footer -->
+    <div class="sidebar-footer">
+      <span class="lutaml-logo">{{ lutamlFullLogo }}</span>
+      <div style="display: flex; flex-direction: column; gap: 1px; min-width: 0;">
+        <span class="footer-text" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+          Generated with <a href="https://github.com/lutaml/lutaml" target="_blank" rel="noopener">LutaML</a>
+        </span>
+        <span class="footer-text" x-show="data && data.metadata && data.metadata.generatedAt" x-text="data.metadata.generatedAt"></span>
+      </div>
     </div>
   </div>
-</aside>
+</aside>

data/templates/static_site/multi_file.liquid

@@ -7,15 +7,20 @@
   <meta name="description" content="{{ config.description }}">
   <meta name="generator" content="{{ buildInfo.generator }}">
 
+  <!-- Google Fonts — Inter + JetBrains Mono -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+
   <!-- Styles (external) -->
   <link rel="stylesheet" href="assets/styles.css">
 </head>
 <body>
   <div id="app" x-data="app" x-init="init()" :class="{ 'dark': darkMode }">
-    {% include 'components/header' %}
+    {% include 'components/sidebar' %}
 
-    <div class="main-layout">
-      {% include 'components/sidebar' %}
+    <div class="main-content">
+      {% include 'components/header' %}
       {% include 'components/content' %}
     </div>
   </div>
@@ -23,11 +28,9 @@
   <!-- Data URLs (external JSON files{% if config.apiMode %} or API endpoints{% endif %}) -->
   <script>
     {% if config.apiMode %}
-    // API mode: fetch from server endpoints
     window.UML_DATA_URL = '/api/data';
     window.SEARCH_INDEX_URL = '/api/search/index';
     {% else %}
-    // Static mode: load from JSON files
     window.UML_DATA_URL = 'data/model.json';
     window.SEARCH_INDEX_URL = 'data/search.json';
     {% endif %}
@@ -43,4 +46,4 @@
   <!-- Application Scripts (external) -->
   <script src="assets/app.js"></script>
 </body>
-</html>
+</html>

data/templates/static_site/single_file.liquid

@@ -7,6 +7,11 @@
   <meta name="description" content="{{ config.description }}">
   <meta name="generator" content="{{ buildInfo.generator }}">
 
+  <!-- Google Fonts — Inter + JetBrains Mono -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+
   <!-- Styles (embedded) -->
   <style>
     {{ styles }}
@@ -14,10 +19,10 @@
 </head>
 <body>
   <div id="app" x-data="app" x-init="init()" :class="{ 'dark': darkMode }">
-    {{ header }}
+    {{ sidebar }}
 
-    <div class="main-layout">
-      {{ sidebar }}
+    <div class="main-content">
+      {{ header }}
       {{ content }}
     </div>
   </div>
@@ -49,4 +54,4 @@
     {{ scripts }}
   </script>
 </body>
-</html>
+</html>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lutaml
 version: !ruby/object:Gem::Version
-  version: 0.10.7
+  version: 0.10.8
 platform: ruby
 authors:
 - Ribose Inc.
@@ -948,6 +948,8 @@ files:
 - lib/lutaml/xml/parsers/xml.rb
 - lutaml.gemspec
 - plateau_all_packages.lur
+- templates/static_site/assets/images/lutaml-full.svg
+- templates/static_site/assets/images/lutaml-icon.svg
 - templates/static_site/assets/scripts/app.js
 - templates/static_site/assets/scripts/core/state.js
 - templates/static_site/assets/scripts/core/utils.js