phase-1: optimize code

2026-06-04 01:36:28 -04:00
parent 19fc052d14
commit b75e8bda72
89 changed files with 11189 additions and 845 deletions
@@ -0,0 +1,139 @@
+<script>
+  // size: 'sm' | 'md' | 'lg'
+  // label: optional text shown below (lg only)
+  let { size = 'md', label = null } = $props();
+</script>
+
+{#if size === 'sm'}
+  <!-- Compact dot-pulse for buttons -->
+  <span class="dot-pulse">
+    <span></span><span></span><span></span>
+  </span>
+{:else}
+  <!-- Market chart line animation for md / lg -->
+  <div class="chart-wrap" data-size={size}>
+    <svg
+      viewBox="0 0 160 60"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="chart-svg"
+      aria-hidden="true"
+    >
+      <!-- Faint grid lines -->
+      <line x1="0" y1="15" x2="160" y2="15" stroke="#1e293b" stroke-width="1" />
+      <line x1="0" y1="30" x2="160" y2="30" stroke="#1e293b" stroke-width="1" />
+      <line x1="0" y1="45" x2="160" y2="45" stroke="#1e293b" stroke-width="1" />
+
+      <!-- The market line — rises, dips, spikes, recovers -->
+      <polyline
+        class="chart-line"
+        points="
+          0,45
+          12,38
+          22,42
+          32,28
+          42,32
+          52,18
+          62,24
+          72,14
+          82,20
+          92,10
+          104,22
+          114,16
+          124,28
+          134,20
+          148,8
+          160,12
+        "
+      />
+
+      <!-- Glowing dot at the leading edge -->
+      <circle class="chart-dot" cx="160" cy="12" r="3" />
+    </svg>
+
+    {#if label}
+      <span class="chart-label">{label}</span>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  /* ── Dot pulse (sm) ─────────────────────────────────────────────── */
+  .dot-pulse {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+  }
+
+  .dot-pulse span {
+    display: block;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: #60a5fa;
+    animation: dot-bounce 0.9s ease-in-out infinite;
+  }
+
+  .dot-pulse span:nth-child(2) { animation-delay: 0.15s; }
+  .dot-pulse span:nth-child(3) { animation-delay: 0.30s; }
+
+  @keyframes dot-bounce {
+    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
+    40%           { transform: scale(1);   opacity: 1;   }
+  }
+
+  /* ── Chart wrap (md / lg) ───────────────────────────────────────── */
+  .chart-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 14px;
+  }
+
+  .chart-wrap[data-size="md"] .chart-svg { width: 120px; height: 45px; }
+  .chart-wrap[data-size="lg"] .chart-svg { width: 200px; height: 75px; }
+
+  .chart-svg { overflow: visible; }
+
+  /* The animated line */
+  .chart-line {
+    stroke: #3b82f6;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    fill: none;
+    /* total path length ≈ 220 — animate draw-in then loop */
+    stroke-dasharray: 220;
+    stroke-dashoffset: 220;
+    animation: draw-line 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+
+  @keyframes draw-line {
+    0%   { stroke-dashoffset: 220; opacity: 1; }
+    70%  { stroke-dashoffset: 0;   opacity: 1; }
+    85%  { stroke-dashoffset: 0;   opacity: 0; }
+    100% { stroke-dashoffset: 220; opacity: 0; }
+  }
+
+  /* Glowing dot that appears when the line finishes drawing */
+  .chart-dot {
+    fill: #3b82f6;
+    filter: drop-shadow(0 0 4px #3b82f6);
+    opacity: 0;
+    animation: dot-appear 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+
+  @keyframes dot-appear {
+    0%   { opacity: 0; }
+    60%  { opacity: 0; }
+    70%  { opacity: 1; }
+    85%  { opacity: 1; }
+    100% { opacity: 0; }
+  }
+
+  .chart-label {
+    font-size: 12px;
+    color: #475569;
+    letter-spacing: 0.02em;
+  }
+</style>