@oddsmith/ui 0.0.0

package/src/components/streaks/sf-streaks.scss

@@ -0,0 +1,351 @@
+:host {
+      display: block;
+      font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .container {
+      position: relative;
+      padding: 32px;
+      border-radius: 24px;
+      background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 50%, #0a0a1a 100%);
+      border: 1px solid rgba(99, 102, 241, 0.3);
+      overflow: hidden;
+      max-width: 600px;
+    }
+
+    /* Animated background glow */
+    .container::before {
+      content: '';
+      position: absolute;
+      top: -50%;
+      left: -50%;
+      width: 200%;
+      height: 200%;
+      background: radial-gradient(
+        circle at 30% 30%,
+        rgba(99, 102, 241, 0.15) 0%,
+        transparent 50%
+      );
+      animation: pulse 8s ease-in-out infinite;
+      pointer-events: none;
+    }
+
+    .container::after {
+      content: '';
+      position: absolute;
+      bottom: -30%;
+      right: -30%;
+      width: 60%;
+      height: 60%;
+      background: radial-gradient(
+        circle,
+        rgba(236, 72, 153, 0.1) 0%,
+        transparent 60%
+      );
+      animation: pulse 6s ease-in-out infinite reverse;
+      pointer-events: none;
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 0.5; transform: scale(1); }
+      50% { opacity: 1; transform: scale(1.1); }
+    }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 24px;
+      position: relative;
+      z-index: 1;
+    }
+
+    .title-section {
+      flex: 1;
+    }
+
+    .title {
+      font-size: 1.75rem;
+      font-weight: 700;
+      margin: 0 0 8px 0;
+      background: linear-gradient(135deg, #fff 0%, #a5b4fc 50%, #ec4899 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      letter-spacing: -0.02em;
+    }
+
+    .subtitle {
+      font-size: 0.9rem;
+      color: rgba(255, 255, 255, 0.7);
+      margin: 0;
+      line-height: 1.5;
+      max-width: 320px;
+    }
+
+    .wheel-container {
+      position: relative;
+      width: 100px;
+      height: 100px;
+      flex-shrink: 0;
+    }
+
+    .wheel {
+      width: 100%;
+      height: 100%;
+      animation: float 4s ease-in-out infinite;
+    }
+
+    .wheel-ring {
+      position: absolute;
+      inset: -8px;
+      border-radius: 50%;
+      border: 2px solid transparent;
+      background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(236, 72, 153, 0.5)) border-box;
+      -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+      mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      animation: spin 20s linear infinite;
+    }
+
+    @keyframes float {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-8px); }
+    }
+
+    @keyframes spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+
+    .steps-container {
+      display: flex;
+      gap: 12px;
+      position: relative;
+      z-index: 1;
+    }
+
+    /* Connection line */
+    .steps-container::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 24px;
+      right: 24px;
+      height: 2px;
+      background: linear-gradient(90deg, 
+        rgba(99, 102, 241, 0.5) 0%,
+        rgba(168, 85, 247, 0.5) 50%,
+        rgba(236, 72, 153, 0.5) 100%
+      );
+      transform: translateY(-50%);
+      z-index: 0;
+    }
+
+    .step {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      position: relative;
+      z-index: 1;
+    }
+
+    .step-box {
+      width: 100%;
+      aspect-ratio: 1;
+      border-radius: 16px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      background: rgba(255, 255, 255, 0.03);
+      backdrop-filter: blur(12px);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .step-box::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(135deg, 
+        transparent 0%,
+        rgba(99, 102, 241, 0.1) 50%,
+        transparent 100%
+      );
+      opacity: 0;
+      transition: opacity 0.4s ease;
+    }
+
+    .step-box:hover::before {
+      opacity: 1;
+    }
+
+    .step-box:hover {
+      transform: translateY(-4px);
+      border-color: rgba(99, 102, 241, 0.4);
+      box-shadow: 
+        0 8px 32px rgba(99, 102, 241, 0.2),
+        0 0 0 1px rgba(99, 102, 241, 0.2);
+    }
+
+    .step-box.completed {
+      background: linear-gradient(135deg, 
+        rgba(34, 197, 94, 0.15) 0%,
+        rgba(34, 197, 94, 0.05) 100%
+      );
+      border-color: rgba(34, 197, 94, 0.4);
+    }
+
+    .step-box.completed:hover {
+      border-color: rgba(34, 197, 94, 0.6);
+      box-shadow: 
+        0 8px 32px rgba(34, 197, 94, 0.2),
+        0 0 0 1px rgba(34, 197, 94, 0.3);
+    }
+
+    .step-box.reward {
+      background: linear-gradient(135deg, 
+        rgba(236, 72, 153, 0.15) 0%,
+        rgba(168, 85, 247, 0.15) 100%
+      );
+      border-color: rgba(236, 72, 153, 0.4);
+      animation: glow 2s ease-in-out infinite;
+    }
+
+    .step-box.reward:hover {
+      border-color: rgba(236, 72, 153, 0.6);
+      box-shadow: 
+        0 8px 32px rgba(236, 72, 153, 0.3),
+        0 0 0 1px rgba(236, 72, 153, 0.3);
+    }
+
+    @keyframes glow {
+      0%, 100% { 
+        box-shadow: 
+          0 0 20px rgba(236, 72, 153, 0.2),
+          inset 0 0 20px rgba(236, 72, 153, 0.05);
+      }
+      50% { 
+        box-shadow: 
+          0 0 30px rgba(236, 72, 153, 0.4),
+          inset 0 0 30px rgba(236, 72, 153, 0.1);
+      }
+    }
+
+    .step-label {
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: rgba(255, 255, 255, 0.9);
+      letter-spacing: 0.05em;
+    }
+
+    .step-icon {
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .check-icon {
+      width: 100%;
+      height: 100%;
+      color: #22c55e;
+      animation: checkIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    @keyframes checkIn {
+      0% { 
+        transform: scale(0) rotate(-45deg);
+        opacity: 0;
+      }
+      50% { transform: scale(1.2) rotate(0deg); }
+      100% { transform: scale(1) rotate(0deg); opacity: 1; }
+    }
+
+    .gift-icon {
+      width: 100%;
+      height: 100%;
+      color: #ec4899;
+      animation: bounce 1s ease-in-out infinite;
+    }
+
+    @keyframes bounce {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-4px); }
+    }
+
+    .pending-icon {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.2);
+      border: 2px solid rgba(255, 255, 255, 0.3);
+    }
+
+    .progress-bar {
+      margin-top: 20px;
+      position: relative;
+      z-index: 1;
+    }
+
+    .progress-track {
+      height: 6px;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 3px;
+      overflow: hidden;
+    }
+
+    .progress-fill {
+      height: 100%;
+      background: linear-gradient(90deg, #22c55e 0%, #10b981 100%);
+      border-radius: 3px;
+      transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+    }
+
+    .progress-fill::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.3) 50%,
+        transparent 100%
+      );
+      animation: shimmer 2s infinite;
+    }
+
+    @keyframes shimmer {
+      0% { transform: translateX(-100%); }
+      100% { transform: translateX(100%); }
+    }
+
+    .progress-text {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 8px;
+      font-size: 0.75rem;
+      color: rgba(255, 255, 255, 0.5);
+    }
+
+    .progress-percentage {
+      color: #22c55e;
+      font-weight: 600;
+    }

package/src/components/streaks/sf-streaks.ts

@@ -0,0 +1,235 @@
+import { LitElement, html, PropertyValues } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { scss } from '../../lib/lit/scss.js';
+import {
+  SF_STREAKS_TAG,
+  DEFAULT_STREAKS_TITLE,
+  DEFAULT_STREAKS_SUBTITLE,
+  DEFAULT_STREAKS_STEPS,
+} from './constants.js';
+import { STREAKS_STEP_CLICK } from './events.js';
+import type { StreaksStep } from './types.js';
+import renderTemplate from './sf-streaks.html?lit-html';
+import styles from './sf-streaks.scss?inline';
+
+@customElement(SF_STREAKS_TAG)
+export class SfStreaks extends LitElement {
+  static override styles = scss(styles);
+
+  static override properties = {
+    streaksTitle: { type: String, attribute: 'streak-title' },
+    streaksSubtitle: { type: String, attribute: 'streak-subtitle' },
+    streaksSteps: { type: Array, attribute: false },
+    _animatedProgress: { type: Number, state: true },
+  };
+
+  private _streaksTitle = DEFAULT_STREAKS_TITLE;
+  private _streaksSubtitle = DEFAULT_STREAKS_SUBTITLE;
+  private _streaksSteps: StreaksStep[] = [...DEFAULT_STREAKS_STEPS];
+  private _progress = 0;
+
+  get streaksTitle() {
+    return this._streaksTitle;
+  }
+  set streaksTitle(value: string) {
+    const oldVal = this._streaksTitle;
+    this._streaksTitle = value;
+    this.requestUpdate('streaksTitle', oldVal);
+  }
+
+  get streaksSubtitle() {
+    return this._streaksSubtitle;
+  }
+  set streaksSubtitle(value: string) {
+    const oldVal = this._streaksSubtitle;
+    this._streaksSubtitle = value;
+    this.requestUpdate('streaksSubtitle', oldVal);
+  }
+
+  get streaksSteps() {
+    return this._streaksSteps;
+  }
+  set streaksSteps(value: StreaksStep[]) {
+    const oldVal = this._streaksSteps;
+    this._streaksSteps = value;
+    this.requestUpdate('streaksSteps', oldVal);
+  }
+
+  get _animatedProgress() {
+    return this._progress;
+  }
+  set _animatedProgress(value: number) {
+    const oldVal = this._progress;
+    this._progress = value;
+    this.requestUpdate('_animatedProgress', oldVal);
+  }
+
+  override firstUpdated() {
+    requestAnimationFrame(() => {
+      this._animatedProgress = this.progress;
+    });
+  }
+
+  override updated(changedProperties: PropertyValues) {
+    if (changedProperties.has('streaksSteps')) {
+      this._animatedProgress = this.progress;
+    }
+  }
+
+  get completedCount() {
+    return this._streaksSteps.filter((s) => s.completed).length;
+  }
+
+  get progress() {
+    return (this.completedCount / this._streaksSteps.length) * 100;
+  }
+
+  private _handleStepClick(step: StreaksStep) {
+    this.dispatchEvent(
+      new CustomEvent(STREAKS_STEP_CLICK, {
+        detail: { step },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _renderCheckIcon() {
+    return html`
+      <svg
+        class="check-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="3"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <polyline points="20 6 9 17 4 12"></polyline>
+      </svg>
+    `;
+  }
+
+  private _renderGiftIcon() {
+    return html`
+      <svg
+        class="gift-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <polyline points="20 12 20 22 4 22 4 12"></polyline>
+        <rect x="2" y="7" width="20" height="5"></rect>
+        <line x1="12" y1="22" x2="12" y2="7"></line>
+        <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path>
+        <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path>
+      </svg>
+    `;
+  }
+
+  _renderSteps() {
+    return this._streaksSteps.map(
+      (step) => html`
+        <div class="step">
+          <div
+            class=${classMap({
+              'step-box': true,
+              completed: step.completed,
+              reward: !!step.isReward && !step.completed,
+            })}
+            @click=${() => this._handleStepClick(step)}
+          >
+            <span class="step-label">${step.label}</span>
+            <div class="step-icon">
+              ${step.completed
+                ? this._renderCheckIcon()
+                : step.isReward
+                  ? this._renderGiftIcon()
+                  : html`<div class="pending-icon"></div>`}
+            </div>
+          </div>
+        </div>
+      `,
+    );
+  }
+
+  _renderWheel() {
+    return html`
+      <svg class="wheel" viewBox="0 0 100 100" fill="none">
+        <defs>
+          <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+            <feGaussianBlur stdDeviation="2" result="coloredBlur" />
+            <feMerge>
+              <feMergeNode in="coloredBlur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+          <linearGradient id="segment1" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#ef4444" />
+            <stop offset="100%" style="stop-color:#dc2626" />
+          </linearGradient>
+          <linearGradient id="segment2" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#f97316" />
+            <stop offset="100%" style="stop-color:#ea580c" />
+          </linearGradient>
+          <linearGradient id="segment3" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#eab308" />
+            <stop offset="100%" style="stop-color:#ca8a04" />
+          </linearGradient>
+          <linearGradient id="segment4" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#22c55e" />
+            <stop offset="100%" style="stop-color:#16a34a" />
+          </linearGradient>
+          <linearGradient id="segment5" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#3b82f6" />
+            <stop offset="100%" style="stop-color:#2563eb" />
+          </linearGradient>
+          <linearGradient id="segment6" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#a855f7" />
+            <stop offset="100%" style="stop-color:#9333ea" />
+          </linearGradient>
+        </defs>
+        <g filter="url(#glow)">
+          <path d="M50 50 L50 10 A40 40 0 0 1 84.64 30 Z" fill="url(#segment1)" />
+          <path d="M50 50 L84.64 30 A40 40 0 0 1 84.64 70 Z" fill="url(#segment2)" />
+          <path d="M50 50 L84.64 70 A40 40 0 0 1 50 90 Z" fill="url(#segment3)" />
+          <path d="M50 50 L50 90 A40 40 0 0 1 15.36 70 Z" fill="url(#segment4)" />
+          <path d="M50 50 L15.36 70 A40 40 0 0 1 15.36 30 Z" fill="url(#segment5)" />
+          <path d="M50 50 L15.36 30 A40 40 0 0 1 50 10 Z" fill="url(#segment6)" />
+        </g>
+        <circle
+          cx="50"
+          cy="50"
+          r="12"
+          fill="#1a1a3a"
+          stroke="rgba(255,255,255,0.2)"
+          stroke-width="2"
+        />
+        <circle cx="50" cy="50" r="6" fill="#6366f1" />
+        <polygon points="50,2 46,12 54,12" fill="#fff" filter="url(#glow)" />
+        <circle
+          cx="50"
+          cy="50"
+          r="44"
+          fill="none"
+          stroke="rgba(255,255,255,0.1)"
+          stroke-width="2"
+        />
+      </svg>
+    `;
+  }
+
+  override render() {
+    return renderTemplate(this);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sf-streaks': SfStreaks;
+  }
+}

package/src/components/streaks/types.ts

@@ -0,0 +1,7 @@
+/** A single step in the streaks progress track. */
+export interface StreaksStep {
+  id: string;
+  label: string;
+  completed: boolean;
+  isReward?: boolean;
+}

package/src/lib/lit/component.ts

@@ -0,0 +1,10 @@
+import { customElement } from './safe-custom-element.js';
+
+export interface ComponentOptions {
+  selector: string;
+}
+
+/** Angular-style `@Component` — registers a Lit class as a custom element. */
+export function Component(options: ComponentOptions) {
+  return customElement(options.selector);
+}

package/src/lib/lit/safe-custom-element.ts

@@ -0,0 +1,12 @@
+/**
+ * Registers a custom element only if the tag is not already in the registry.
+ * Use instead of Lit's `@customElement` when HMR or duplicate bundles are possible.
+ */
+export function customElement(tag: string) {
+  return <T extends CustomElementConstructor>(cls: T): T => {
+    if (!customElements.get(tag)) {
+      customElements.define(tag, cls);
+    }
+    return cls;
+  };
+}

package/src/lib/lit/scss.ts

@@ -0,0 +1,6 @@
+import { unsafeCSS, type CSSResult } from 'lit';
+
+/** Compiled SCSS string → adoptable shadow-root stylesheet. */
+export function scss(stylesheet: string): CSSResult {
+  return unsafeCSS(stylesheet);
+}

package/src/vite-env.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="vite/client" />
+
+declare module '*.scss?inline' {
+  const css: string;
+  export default css;
+}
+
+declare module '*.theme.json' {
+  import type { SfLeaderboardTheme } from './theme/types.js';
+  const theme: SfLeaderboardTheme;
+  export default theme;
+}
+
+declare module '*.html?lit-html' {
+  import type { TemplateResult } from 'lit';
+
+  export default function render(host: unknown): TemplateResult;
+}