@miozu/jera 0.8.0 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miozu/jera",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Zero-dependency, AI-first component library for Svelte 5",
   "type": "module",
   "svelte": "./src/index.js",

package/src/components/layout/PageHeader.svelte

@@ -142,8 +142,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2.5rem;
-    height: 2.5rem;
+    width: var(--space-10);
+    height: var(--space-10);
     border-radius: var(--radius-lg);
     background: color-mix(in srgb, var(--color-base0D) 10%, transparent);
     color: var(--color-base0D);
@@ -255,7 +255,7 @@
   .toolbar-search {
     flex: 1;
     min-width: 0;
-    max-width: 24rem;
+    max-width: var(--page-header-search-max-width, 24rem);
   }
 
   .toolbar-filters {

package/src/components/navigation/ScrollNav.svelte

@@ -145,17 +145,17 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2rem;
-    height: 2rem;
+    width: var(--space-8);
+    height: var(--space-8);
     padding: 0;
     background: var(--color-base01);
     border: 1px solid var(--color-base02);
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
     color: var(--color-base05);
     cursor: pointer;
     pointer-events: all;
     transition: all 0.15s ease;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-sm);
   }
 
   .scroll-btn:hover {

package/src/components/primitives/MemberCard.svelte

@@ -164,16 +164,16 @@
   .member-avatar {
     position: relative;
     flex-shrink: 0;
-    width: 2.5rem;
-    height: 2.5rem;
+    width: var(--space-10);
+    height: var(--space-10);
     border-radius: var(--radius-lg);
     background: color-mix(in srgb, var(--color-base0D) 15%, transparent);
     overflow: hidden;
   }
 
   .member-card-compact .member-avatar {
-    width: 2rem;
-    height: 2rem;
+    width: var(--space-8);
+    height: var(--space-8);
     border-radius: var(--radius-md);
   }
 
@@ -202,9 +202,9 @@
     position: absolute;
     bottom: 0;
     right: 0;
-    width: 0.75rem;
-    height: 0.75rem;
-    border-radius: 9999px;
+    width: var(--space-3);
+    height: var(--space-3);
+    border-radius: var(--radius-full);
     border: 2px solid var(--color-base00);
   }
 

package/src/components/primitives/MetricCard.svelte

@@ -67,39 +67,43 @@
   });
 </script>
 
+{#snippet cardContent()}
+  <div class="metric-header">
+    {#if icon}
+      <span class="metric-icon">
+        {@render icon()}
+      </span>
+    {/if}
+    <span class="metric-label">{label}</span>
+    {#if badge}
+      <span class="metric-badge">
+        {@render badge()}
+      </span>
+    {/if}
+  </div>
+
+  <div class="metric-body">
+    <span class="metric-value {status ? `metric-value-${status}` : ''}">
+      {value}{#if unit}<span class="metric-unit">{unit}</span>{/if}
+    </span>
+    {#if sublabel}
+      <span class="metric-sublabel">{sublabel}</span>
+    {/if}
+  </div>
+
+  {#if progress !== null}
+    <div class="metric-progress">
+      <div class="metric-progress-bar {progressVariant}" style="width: {Math.min(100, Math.max(0, progress))}%"></div>
+    </div>
+  {/if}
+{/snippet}
+
 {#if href}
   <a
     {href}
     class="metric-card {status ? `metric-card-${status}` : ''} metric-card-clickable {className}"
   >
-    <div class="metric-header">
-      {#if icon}
-        <span class="metric-icon">
-          {@render icon()}
-        </span>
-      {/if}
-      <span class="metric-label">{label}</span>
-      {#if badge}
-        <span class="metric-badge">
-          {@render badge()}
-        </span>
-      {/if}
-    </div>
-
-    <div class="metric-body">
-      <span class="metric-value {status ? `metric-value-${status}` : ''}">
-        {value}{#if unit}<span class="metric-unit">{unit}</span>{/if}
-      </span>
-      {#if sublabel}
-        <span class="metric-sublabel">{sublabel}</span>
-      {/if}
-    </div>
-
-    {#if progress !== null}
-      <div class="metric-progress">
-        <div class="metric-progress-bar {progressVariant}" style="width: {Math.min(100, Math.max(0, progress))}%"></div>
-      </div>
-    {/if}
+    {@render cardContent()}
   </a>
 {:else}
   <div
@@ -108,34 +112,7 @@
     role={onclick ? 'button' : undefined}
     tabindex={onclick ? 0 : undefined}
   >
-    <div class="metric-header">
-      {#if icon}
-        <span class="metric-icon">
-          {@render icon()}
-        </span>
-      {/if}
-      <span class="metric-label">{label}</span>
-      {#if badge}
-        <span class="metric-badge">
-          {@render badge()}
-        </span>
-      {/if}
-    </div>
-
-    <div class="metric-body">
-      <span class="metric-value {status ? `metric-value-${status}` : ''}">
-        {value}{#if unit}<span class="metric-unit">{unit}</span>{/if}
-      </span>
-      {#if sublabel}
-        <span class="metric-sublabel">{sublabel}</span>
-      {/if}
-    </div>
-
-    {#if progress !== null}
-      <div class="metric-progress">
-        <div class="metric-progress-bar {progressVariant}" style="width: {Math.min(100, Math.max(0, progress))}%"></div>
-      </div>
-    {/if}
+    {@render cardContent()}
   </div>
 {/if}
 

package/src/components/primitives/Tooltip.svelte

@@ -76,7 +76,12 @@
   {/if}
 
   {#if visible && (text || content)}
-    <div class="tooltip tooltip-{position}" role="tooltip">
+    <div
+      class="tooltip tooltip-{position} {content ? 'tooltip-interactive' : ''}"
+      role="tooltip"
+      onmouseenter={content ? show : undefined}
+      onmouseleave={content ? hide : undefined}
+    >
       <div class="tooltip-content">
         {#if content}
           {@render content()}
@@ -102,6 +107,10 @@
     animation: tooltip-enter 0.15s ease-out;
   }
 
+  .tooltip-interactive {
+    pointer-events: auto;
+  }
+
   @keyframes tooltip-enter {
     from {
       opacity: 0;