@sriinnu/runic 1.0.0

package/docs/design/mockups/hybridiconconcept.svg

@@ -0,0 +1,62 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 48" fill="none">
+  <!-- OPTION C: Hybrid - Infinity Outline + Usage Bar + Provider Badge -->
+  <!-- Optimized for 40×24pt menubar rendering (80×48px @2x) -->
+
+  <!-- Background for demonstration (remove in production) -->
+  <rect x="0" y="0" width="80" height="48" fill="#F0F0F0" opacity="0.3"/>
+
+  <!-- Infinity outline (thinner stroke, serves as frame) -->
+  <path d="M 12,24
+           C 12,14 20,10 28,14
+           C 36,18 36,24 40,24
+           C 44,24 44,18 52,14
+           C 60,10 68,14 68,24
+           C 68,34 60,38 52,34
+           C 44,30 44,24 40,24
+           C 36,24 36,30 28,34
+           C 20,38 12,34 12,24 Z"
+        stroke="#14B8A6"
+        stroke-width="6"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        opacity="0.4"/>
+
+  <!-- Center usage bar (consolidated metric) -->
+  <g id="usage-bar">
+    <!-- Bar background (container) -->
+    <rect x="32" y="16" width="16" height="16" rx="3" fill="#14B8A6" opacity="0.15"/>
+
+    <!-- Bar fill (shows 65% usage from bottom) -->
+    <rect x="32" y="26.4" width="16" height="9.6" rx="3" fill="#14B8A6">
+      <title>Usage: 65%</title>
+    </rect>
+
+    <!-- Gradient overlay for depth -->
+    <defs>
+      <linearGradient id="barGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+        <stop offset="0%" style="stop-color:#2DD4BF;stop-opacity:0.3"/>
+        <stop offset="100%" style="stop-color:#0F766E;stop-opacity:0.1"/>
+      </linearGradient>
+    </defs>
+    <rect x="32" y="26.4" width="16" height="9.6" rx="3" fill="url(#barGradient)"/>
+  </g>
+
+  <!-- Provider badge (top-right corner) -->
+  <g id="provider-badge" transform="translate(62, 6)">
+    <!-- Badge background circle -->
+    <circle cx="6" cy="6" r="7" fill="#FFFFFF" stroke="#14B8A6" stroke-width="1.5"/>
+
+    <!-- Claude icon example: vertical slits -->
+    <rect x="4" y="4" width="1.5" height="4" fill="#14B8A6"/>
+    <rect x="6.5" y="4" width="1.5" height="4" fill="#14B8A6"/>
+  </g>
+
+  <!-- Annotations for demonstration (remove in production) -->
+  <g opacity="0.4">
+    <text x="2" y="10" font-family="system-ui" font-size="7" fill="#666">Infinity Outline</text>
+    <text x="25" y="42" font-family="system-ui" font-size="7" fill="#666">Center Bar</text>
+    <text x="52" y="24" font-family="system-ui" font-size="7" fill="#666">Provider</text>
+    <text x="56" y="30" font-family="system-ui" font-size="7" fill="#666">Badge</text>
+  </g>
+</svg>

package/docs/design/mockups/infinityiconconcept.svg

@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 48" fill="none">
+  <!-- OPTION A: Infinity Symbol + Provider Icon -->
+  <!-- Optimized for 40×24pt menubar rendering (80×48px @2x) -->
+
+  <!-- Infinity path - creates the "watching eyes" effect -->
+  <!-- Left loop center: (20, 24), Right loop center: (60, 24) -->
+  <path d="M 12,24
+           C 12,14 20,10 28,14
+           C 36,18 36,24 40,24
+           C 44,24 44,18 52,14
+           C 60,10 68,14 68,24
+           C 68,34 60,38 52,34
+           C 44,30 44,24 40,24
+           C 36,24 36,30 28,34
+           C 20,38 12,34 12,24 Z"
+        stroke="#14B8A6"
+        stroke-width="8"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"/>
+
+  <!-- Provider icon placeholder - center gap -->
+  <!-- This would be replaced with actual provider icon (Claude, Codex, etc.) -->
+  <g id="provider-icon-placeholder">
+    <!-- Circle background for visibility -->
+    <circle cx="40" cy="24" r="8" fill="#FFFFFF" opacity="0.9"/>
+
+    <!-- Example: Claude-style vertical slits -->
+    <rect x="36" y="20" width="2" height="8" fill="#14B8A6"/>
+    <rect x="42" y="20" width="2" height="8" fill="#14B8A6"/>
+  </g>
+
+  <!-- Visual annotations (remove in production) -->
+  <g id="annotations" opacity="0.3" stroke="#666" stroke-width="0.5" fill="none" stroke-dasharray="2,2">
+    <!-- Center gap boundary -->
+    <rect x="30" y="16" width="20" height="16"/>
+    <!-- Loop centers -->
+    <circle cx="20" cy="24" r="2" fill="#FF0000"/>
+    <circle cx="60" cy="24" r="2" fill="#FF0000"/>
+  </g>
+</svg>

package/docs/design/mockups/infinityiconstates.svg

@@ -0,0 +1,129 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 240" fill="none">
+  <!-- OPTION A: All States Demonstration -->
+  <!-- Shows different pressure levels, providers, and conditions -->
+
+  <!-- Grid layout: 4 columns × 3 rows -->
+
+  <!-- Row 1: Pressure States -->
+  <g id="state-safe" transform="translate(10, 10)">
+    <text x="0" y="-5" font-family="system-ui" font-size="10" fill="#333">Safe (0-50%)</text>
+    <rect x="0" y="0" width="80" height="48" fill="#F0F0F0" rx="4"/>
+    <path d="M 12,24 C 12,14 20,10 28,14 C 36,18 36,24 40,24 C 44,24 44,18 52,14 C 60,10 68,14 68,24 C 68,34 60,38 52,34 C 44,30 44,24 40,24 C 36,24 36,30 28,34 C 20,38 12,34 12,24 Z"
+          stroke="#14B8A6" stroke-width="8" fill="none" stroke-linecap="round"/>
+    <circle cx="40" cy="24" r="8" fill="#FFFFFF"/>
+    <rect x="36" y="20" width="2" height="8" fill="#14B8A6"/>
+    <rect x="42" y="20" width="2" height="8" fill="#14B8A6"/>
+  </g>
+
+  <g id="state-warning" transform="translate(95, 10)">
+    <text x="0" y="-5" font-family="system-ui" font-size="10" fill="#333">Warning (50-80%)</text>
+    <rect x="0" y="0" width="80" height="48" fill="#F0F0F0" rx="4"/>
+    <path d="M 12,24 C 12,14 20,10 28,14 C 36,18 36,24 40,24 C 44,24 44,18 52,14 C 60,10 68,14 68,24 C 68,34 60,38 52,34 C 44,30 44,24 40,24 C 36,24 36,30 28,34 C 20,38 12,34 12,24 Z"
+          stroke="#FFB84D" stroke-width="8" fill="none" stroke-linecap="round"/>
+    <circle cx="40" cy="24" r="8" fill="#FFFFFF"/>
+    <rect x="36" y="20" width="2" height="8" fill="#FFB84D"/>
+    <rect x="42" y="20" width="2" height="8" fill="#FFB84D"/>
+  </g>
+
+  <g id="state-critical" transform="translate(180, 10)">
+    <text x="0" y="-5" font-family="system-ui" font-size="10" fill="#333">Critical (80-100%)</text>
+    <rect x="0" y="0" width="80" height="48" fill="#F0F0F0" rx="4"/>
+    <path d="M 12,24 C 12,14 20,10 28,14 C 36,18 36,24 40,24 C 44,24 44,18 52,14 C 60,10 68,14 68,24 C 68,34 60,38 52,34 C 44,30 44,24 40,24 C 36,24 36,30 28,34 C 20,38 12,34 12,24 Z"
+          stroke="#FF4F70" stroke-width="8" fill="none" stroke-linecap="round"/>
+    <circle cx="40" cy="24" r="8" fill="#FFFFFF"/>
+    <rect x="36" y="20" width="2" height="8" fill="#FF4F70"/>
+    <rect x="42" y="20" width="2" height="8" fill="#FF4F70"/>
+  </g>
+
+  <g id="state-stale" transform="translate(265, 10)">
+    <text x="0" y="-5" font-family="system-ui" font-size="10" fill="#333">Stale Data</text>
+    <rect x="0" y="0" width="80" height="48" fill="#F0F0F0" rx="4"/>
+    <path d="M 12,24 C 12,14 20,10 28,14 C 36,18 36,24 40,24 C 44,24 44,18 52,14 C 60,10 68,14 68,24 C 68,34 60,38 52,34 C 44,30 44,24 40,24 C 36,24 36,30 28,34 C 20,38 12,34 12,24 Z"
+          stroke="#14B8A6" stroke-width="8" fill="none" stroke-linecap="round" opacity="0.55"/>
+    <circle cx="40" cy="24" r="8" fill="#FFFFFF" opacity="0.55"/>
+    <rect x="36" y="20" width="2" height="8" fill="#14B8A6" opacity="0.55"/>
+    <rect x="42" y="20" width="2" height="8" fill="#14B8A6" opacity="0.55"/>
+  </g>
+
+  <!-- Row 2: Provider Variations -->
+  <g id="provider-claude" transform="translate(10, 85)">
+    <text x="0" y="-5" font-family="system-ui" font-size="10" fill="#333">Claude</text>
+    <rect x="0" y="0" width="80" height="48" fill="#F0F0F0" rx="4"/>
+    <path d="M 12,24 C 12,14 20,10 28,14 C 36,18 36,24 40,24 C 44,24 44,18 52,14 C 60,10 68,14 68,24 C 68,34 60,38 52,34 C 44,30 44,24 40,24 C 36,24 36,30 28,34 C 20,38 12,34 12,24 Z"
+          stroke="#14B8A6" stroke-width="8" fill="none" stroke-linecap="round"/>
+    <!-- Claude: vertical slits -->
+    <rect x="35" y="20" width="2" height="8" fill="#14B8A6"/>
+    <rect x="43" y="20" width="2" height="8" fill="#14B8A6"/>
+  </g>
+
+  <g id="provider-codex" transform="translate(95, 85)">
+    <text x="0" y="-5" font-family="system-ui" font-size="10" fill="#333">Codex</text>
+    <rect x="0" y="0" width="80" height="48" fill="#F0F0F0" rx="4"/>
+    <path d="M 12,24 C 12,14 20,10 28,14 C 36,18 36,24 40,24 C 44,24 44,18 52,14 C 60,10 68,14 68,24 C 68,34 60,38 52,34 C 44,30 44,24 40,24 C 36,24 36,30 28,34 C 20,38 12,34 12,24 Z"
+          stroke="#14B8A6" stroke-width="8" fill="none" stroke-linecap="round"/>
+    <!-- Codex: square eyes -->
+    <rect x="33" y="21" width="4" height="4" fill="#14B8A6"/>
+    <rect x="43" y="21" width="4" height="4" fill="#14B8A6"/>
+  </g>
+
+  <g id="provider-gemini" transform="translate(180, 85)">
+    <text x="0" y="-5" font-family="system-ui" font-size="10" fill="#333">Gemini</text>
+    <rect x="0" y="0" width="80" height="48" fill="#F0F0F0" rx="4"/>
+    <path d="M 12,24 C 12,14 20,10 28,14 C 36,18 36,24 40,24 C 44,24 44,18 52,14 C 60,10 68,14 68,24 C 68,34 60,38 52,34 C 44,30 44,24 40,24 C 36,24 36,30 28,34 C 20,38 12,34 12,24 Z"
+          stroke="#14B8A6" stroke-width="8" fill="none" stroke-linecap="round"/>
+    <!-- Gemini: diamond -->
+    <path d="M 40,18 L 46,24 L 40,30 L 34,24 Z" fill="#14B8A6"/>
+  </g>
+
+  <g id="provider-cursor" transform="translate(265, 85)">
+    <text x="0" y="-5" font-family="system-ui" font-size="10" fill="#333">Cursor</text>
+    <rect x="0" y="0" width="80" height="48" fill="#F0F0F0" rx="4"/>
+    <path d="M 12,24 C 12,14 20,10 28,14 C 36,18 36,24 40,24 C 44,24 44,18 52,14 C 60,10 68,14 68,24 C 68,34 60,38 52,34 C 44,30 44,24 40,24 C 36,24 36,30 28,34 C 20,38 12,34 12,24 Z"
+          stroke="#14B8A6" stroke-width="8" fill="none" stroke-linecap="round"/>
+    <!-- Cursor: arrow pointer -->
+    <path d="M 44,24 L 36,20 L 36,28 Z" fill="#14B8A6"/>
+  </g>
+
+  <!-- Row 3: Special States -->
+  <g id="template-mode-light" transform="translate(10, 160)">
+    <text x="0" y="-5" font-family="system-ui" font-size="10" fill="#333">Template (Light)</text>
+    <rect x="0" y="0" width="80" height="48" fill="#FFFFFF" rx="4"/>
+    <path d="M 12,24 C 12,14 20,10 28,14 C 36,18 36,24 40,24 C 44,24 44,18 52,14 C 60,10 68,14 68,24 C 68,34 60,38 52,34 C 44,30 44,24 40,24 C 36,24 36,30 28,34 C 20,38 12,34 12,24 Z"
+          stroke="#000000" stroke-width="8" fill="none" stroke-linecap="round" opacity="0.85"/>
+    <rect x="36" y="20" width="2" height="8" fill="#000000" opacity="0.85"/>
+    <rect x="42" y="20" width="2" height="8" fill="#000000" opacity="0.85"/>
+  </g>
+
+  <g id="template-mode-dark" transform="translate(95, 160)">
+    <text x="0" y="-5" font-family="system-ui" font-size="10" fill="#333">Template (Dark)</text>
+    <rect x="0" y="0" width="80" height="48" fill="#2C2C2C" rx="4"/>
+    <path d="M 12,24 C 12,14 20,10 28,14 C 36,18 36,24 40,24 C 44,24 44,18 52,14 C 60,10 68,14 68,24 C 68,34 60,38 52,34 C 44,30 44,24 40,24 C 36,24 36,30 28,34 C 20,38 12,34 12,24 Z"
+          stroke="#FFFFFF" stroke-width="8" fill="none" stroke-linecap="round" opacity="0.85"/>
+    <rect x="36" y="20" width="2" height="8" fill="#FFFFFF" opacity="0.85"/>
+    <rect x="42" y="20" width="2" height="8" fill="#FFFFFF" opacity="0.85"/>
+  </g>
+
+  <g id="combined-providers" transform="translate(180, 160)">
+    <text x="0" y="-5" font-family="system-ui" font-size="10" fill="#333">Multiple Providers</text>
+    <rect x="0" y="0" width="80" height="48" fill="#F0F0F0" rx="4"/>
+    <path d="M 12,24 C 12,14 20,10 28,14 C 36,18 36,24 40,24 C 44,24 44,18 52,14 C 60,10 68,14 68,24 C 68,34 60,38 52,34 C 44,30 44,24 40,24 C 36,24 36,30 28,34 C 20,38 12,34 12,24 Z"
+          stroke="#14B8A6" stroke-width="8" fill="none" stroke-linecap="round"/>
+    <!-- Combined: stacked dots -->
+    <circle cx="37" cy="21" r="2.5" fill="#14B8A6"/>
+    <circle cx="43" cy="21" r="2.5" fill="#14B8A6"/>
+    <circle cx="37" cy="27" r="2.5" fill="#14B8A6"/>
+    <circle cx="43" cy="27" r="2.5" fill="#14B8A6"/>
+  </g>
+
+  <g id="syncing-state" transform="translate(265, 160)">
+    <text x="0" y="-5" font-family="system-ui" font-size="10" fill="#333">Syncing (Animated)</text>
+    <rect x="0" y="0" width="80" height="48" fill="#F0F0F0" rx="4"/>
+    <path d="M 12,24 C 12,14 20,10 28,14 C 36,18 36,24 40,24 C 44,24 44,18 52,14 C 60,10 68,14 68,24 C 68,34 60,38 52,34 C 44,30 44,24 40,24 C 36,24 36,30 28,34 C 20,38 12,34 12,24 Z"
+          stroke="#14B8A6" stroke-width="8" fill="none" stroke-linecap="round">
+      <!-- Pulse animation -->
+      <animate attributeName="opacity" values="1;0.5;1" dur="1.5s" repeatCount="indefinite"/>
+    </path>
+    <rect x="36" y="20" width="2" height="8" fill="#14B8A6"/>
+    <rect x="42" y="20" width="2" height="8" fill="#14B8A6"/>
+  </g>
+</svg>

package/docs/design/mockups/wavelogorefined.svg

@@ -0,0 +1,48 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 52" fill="none">
+  <!-- OPTION B: Wave Logo Refined -->
+  <!-- Enhanced version of current design with improvements -->
+  <!-- Optimized for 42×26pt menubar rendering (84×52px @2x) -->
+
+  <!-- Background for demonstration (remove in production) -->
+  <rect x="0" y="0" width="84" height="52" fill="#F0F0F0" opacity="0.3"/>
+
+  <!-- Wave/knot session window (thicker, more prominent) -->
+  <path d="M 14 26
+           C 14 16 26 16 36 26
+           C 46 36 58 36 58 26
+           C 58 16 46 16 36 26
+           C 26 36 14 36 14 26"
+        stroke="#14B8A6"
+        stroke-width="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        fill="none"/>
+
+  <!-- Telemetry knot (center accent) - slightly larger -->
+  <circle cx="36" cy="26" r="10" fill="#2DD4BF"/>
+
+  <!-- Usage bars (wider and taller for better visibility) -->
+  <!-- Increased from 8px to 10px width -->
+  <g fill="#0F766E">
+    <!-- Bar 1: Session usage (70% of max height) -->
+    <rect x="28" y="21" width="5" height="14" rx="2.5">
+      <title>Session: 70%</title>
+    </rect>
+
+    <!-- Bar 2: Weekly usage (85% of max height) -->
+    <rect x="34.5" y="19" width="5" height="18" rx="2.5">
+      <title>Weekly: 85%</title>
+    </rect>
+
+    <!-- Bar 3: Credits remaining (55% of max height) -->
+    <rect x="41" y="23" width="5" height="12" rx="2.5">
+      <title>Credits: 55%</title>
+    </rect>
+  </g>
+
+  <!-- Annotations for demonstration (remove in production) -->
+  <g opacity="0.4">
+    <text x="2" y="12" font-family="system-ui" font-size="8" fill="#666">Wave Path</text>
+    <text x="2" y="48" font-family="system-ui" font-size="8" fill="#666">Usage Bars (10px wide)</text>
+  </g>
+</svg>