@simahfud/klinecharts-pro 1.0.0

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,462 @@
+# KLineChart Pro
+
+[![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](LICENSE)
+[![KLineChart](https://img.shields.io/badge/based%20on-KLineChart-orange)](https://github.com/liihuu/KLineChart)
+
+A professional-grade, TradingView-inspired charting component built on [KLineChart](https://github.com/liihuu/KLineChart), powered by **SolidJS**. Features 25 built-in drawing tools, bar replay, keyboard shortcuts, multi-chart type support, and a complete custom tool API.
+
+> 🔗 **Repository**: [github.com/SiMahfud/klinechartpro](https://github.com/SiMahfud/klinechartpro)  
+> 📦 Forked from [klinecharts/pro](https://github.com/klinecharts/pro)
+
+---
+
+## ✨ Features
+
+### Core
+- 📊 Built on KLineChart with SolidJS rendering
+- 🎨 Light & Dark themes with CSS custom properties
+- 🌐 5 locales: Chinese, English, Indonesian, Japanese, Korean
+- 💾 Data persistence via localStorage (symbols, periods, indicators, drawings)
+- 🔔 Price alert system with browser notifications
+- 📈 Multi-symbol comparison mode
+- ⚡ Performance monitoring panel (FPS, memory, WS latency)
+- ♿ Full modal accessibility (focus trap, keyboard nav, ARIA)
+- 📱 Responsive layout with mobile support
+
+### Chart Types (6 types)
+
+| Type | Key | Description |
+|---|---|---|
+| **Candles** | `candle_solid` | Standard filled candlestick (default) |
+| **Hollow Candles** | `candle_stroke` | All candles outlined |
+| **Up Hollow** | `candle_up_stroke` | Up candles hollow, down filled |
+| **Down Hollow** | `candle_down_stroke` | Down candles hollow, up filled |
+| **OHLC Bars** | `ohlc` | Traditional open-high-low-close bars |
+| **Area** | `area` | Filled area chart |
+
+### Drawing Tools (25 built-in)
+
+| Category | Tools |
+|---|---|
+| **Lines** | Horizontal/Vertical (straight, ray, segment), Trend Line, Ray, Segment, Arrow, Price Line |
+| **Channels** | Price Channel, Parallel Line |
+| **Shapes** | Circle, Rectangle, Parallelogram, Triangle |
+| **Fibonacci** | Line, Segment, Circle, Spiral, Fan, Extension |
+| **Gann** | Gann Box |
+| **Waves** | XABCD, ABCD, 3-Wave, 5-Wave, 8-Wave, Any Wave |
+| **Trading** | Long Position, Short Position, Measure Tool |
+| **Annotation** | Volume Profile (FRVP), Price Range, Text Note, Anchored VWAP, Price Label |
+
+### Technical Indicators (26 built-in)
+
+**Main chart:** MA, EMA, SMA, BOLL, SAR, BBI  
+**Sub chart:** VOL, MACD, KDJ, RSI, BIAS, BRAR, CCI, DMI, CR, PSY, DMA, TRIX, OBV, VR, WR, MTM, EMV, ROC, PVT, AO
+
+### Advanced Features
+
+| Feature | Description |
+|---|---|
+| **⏯ Bar Replay** | Step through historical data bar by bar with play/pause/speed controls |
+| **⌨️ Keyboard Shortcuts** | Configurable hotkeys for all chart operations |
+| **🌳 Object Tree** | Manage all drawings — toggle visibility, select, delete |
+| **💾 Chart Templates** | Save/load indicator + style presets via localStorage |
+| **🏷️ Price Labels** | Custom price markers on Y-axis |
+| **🔗 Crosshair Sync** | Synchronize crosshair across multiple chart instances |
+| **🎨 Style Editor** | Edit drawing properties (color, width, style) via right-click |
+| **📋 Context Menu** | Right-click overlay menu with Edit/Hide/Delete actions |
+| **📊 Chart Type Selector** | Switch between 6 chart types from the toolbar |
+
+---
+
+## 📦 Installation
+
+### Using npm
+
+```bash
+npm install klinecharts @klinecharts/pro
+```
+
+### Using unpkg or jsDelivr (CDN)
+
+The library is published as a UMD bundle, so you can load it directly via `<script>` tags:
+
+```html
+<!-- KLineChart (dependency, must be loaded first) -->
+<script src="https://unpkg.com/klinecharts/dist/klinecharts.min.js"></script>
+
+<!-- KLineChart Pro -->
+<!-- using unpkg -->
+<script src="https://unpkg.com/@klinecharts/pro/dist/klinecharts-pro.umd.js"></script>
+<!-- OR using jsDelivr -->
+<script src="https://cdn.jsdelivr.net/npm/@klinecharts/pro/dist/klinecharts-pro.umd.js"></script>
+
+<!-- CSS styles (required) -->
+<link rel="stylesheet" href="https://unpkg.com/@klinecharts/pro/dist/klinecharts-pro.css" />
+```
+
+After loading, the global variable `klinechartspro` is available:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://unpkg.com/@klinecharts/pro/dist/klinecharts-pro.css" />
+</head>
+<body>
+  <div id="chart-container" style="width:100%;height:600px;"></div>
+
+  <script src="https://unpkg.com/klinecharts/dist/klinecharts.min.js"></script>
+  <script src="https://unpkg.com/@klinecharts/pro/dist/klinecharts-pro.umd.js"></script>
+  <script>
+    // Access via global: klinechartspro
+    const { KLineChartPro, DefaultDatafeed } = klinechartspro
+
+    const chart = new KLineChartPro({
+      container: document.getElementById('chart-container'),
+      symbol: { ticker: 'AAPL', name: 'Apple Inc.', market: 'stocks' },
+      period: { multiplier: 1, timespan: 'day', text: 'D' },
+      datafeed: new DefaultDatafeed('YOUR_POLYGON_API_KEY'),
+      theme: 'dark',
+      locale: 'en-US'
+    })
+  </script>
+</body>
+</html>
+```
+
+> **💡 Note**: For your fork, after running `npm run build-core`, the `dist/` folder will contain your customized UMD/ES bundles. You can self-host these files or publish to npm to use via CDN.
+
+### Building from source
+
+```bash
+git clone https://github.com/SiMahfud/klinechartpro.git
+cd klinechartpro
+npm install
+npm run build-core   # → dist/klinecharts-pro.umd.js + klinecharts-pro.js + klinecharts-pro.css
+```
+
+---
+
+## 🚀 Quick Start
+
+```typescript
+import { KLineChartPro, DefaultDatafeed } from 'klinecharts-pro'
+
+const chart = new KLineChartPro({
+  container: 'chart-container',
+  symbol: { ticker: 'AAPL', name: 'Apple Inc.', market: 'stocks' },
+  period: { multiplier: 1, timespan: 'day', text: 'D' },
+  datafeed: new DefaultDatafeed('YOUR_POLYGON_API_KEY'),
+  theme: 'dark',
+  locale: 'en-US'
+})
+
+// Wait for chart to be ready before calling methods
+await chart.ready()
+console.log('Chart initialized:', chart.getSymbol())
+```
+
+---
+
+## 🔧 API Reference
+
+### Core Methods
+
+```typescript
+// Theme
+chart.setTheme('dark')          // 'dark' | 'light'
+chart.getTheme()
+
+// Locale
+chart.setLocale('en-US')        // 'en-US' | 'zh-CN' | 'id-ID' | 'ja-JP' | 'ko-KR'
+chart.getLocale()
+
+// Symbol & Period
+chart.setSymbol({ ticker: 'MSFT', name: 'Microsoft' })
+chart.getSymbol()
+chart.setPeriod({ multiplier: 5, timespan: 'minute', text: '5m' })
+chart.getPeriod()
+
+// Timezone
+chart.setTimezone('Asia/Jakarta')
+chart.getTimezone()
+
+// Styles (deep partial merge)
+chart.setStyles({ candle: { bar: { upColor: '#26A69A' } } })
+chart.getStyles()
+```
+
+### Chart Type
+
+```typescript
+// Switch chart type
+chart.setChartType('ohlc')        // candle_solid | candle_stroke | candle_up_stroke | candle_down_stroke | ohlc | area
+chart.getChartType()              // Returns current type
+```
+
+### Bar Replay
+
+```typescript
+// Start replay using current chart data
+chart.startReplay('current')
+
+// Or start replay loading custom historical data
+chart.startReplay('custom')
+
+// Stop and restore original data
+chart.stopReplay()
+```
+
+**Programmatic control via `BarReplayManager`:**
+
+```typescript
+import { BarReplayManager } from 'klinecharts-pro'
+
+const replay = new BarReplayManager(chartWidget, datafeed)
+
+replay.setHandlers({
+  onStep: (index, total, bar) => console.log(`${index}/${total}`),
+  onPlay: () => console.log('Playing'),
+  onPause: () => console.log('Paused'),
+  onEnd: () => console.log('Replay ended'),
+  onStatusChange: (status) => console.log('Status:', status)
+})
+
+await replay.start({ dataSource: 'current', speed: 500, startFrom: 0 })
+
+// Controls
+replay.play()           // Auto-advance
+replay.pause()          // Pause
+replay.stepForward()    // Next bar
+replay.stepBackward()   // Previous bar
+replay.seekTo(50)       // Jump to index
+replay.setSpeed(100)    // 100ms per bar
+
+// State
+replay.getStatus()      // 'idle' | 'playing' | 'paused' | 'ended'
+replay.getIndex()       // Current position
+replay.getTotal()       // Total bars
+
+// Cleanup
+replay.stop()           // Restore original data
+replay.destroy()        // Full cleanup
+```
+
+### Object Tree & Style Editor
+
+```typescript
+// Open Object Tree modal (lists all overlays)
+chart.showObjectTree()
+
+// Open Style Editor for a specific overlay
+chart.showStyleEditor('overlay_id_123')
+```
+
+### Keyboard Shortcuts
+
+```typescript
+import { KeyboardShortcutManager } from 'klinecharts-pro'
+
+const shortcuts = new KeyboardShortcutManager(containerElement)
+
+shortcuts.register({ key: 'ctrl+z', description: 'Undo', callback: () => drawings.undo() })
+shortcuts.register({ key: 'ctrl+y', description: 'Redo', callback: () => drawings.redo() })
+shortcuts.register({ key: 'delete', callback: () => chart.removeOverlay() })
+shortcuts.register({ key: 'escape', callback: () => chart.removeOverlay() })
+
+// Disable during modals
+shortcuts.setEnabled(false)
+shortcuts.setEnabled(true)
+
+shortcuts.destroy()
+```
+
+### Chart Templates
+
+```typescript
+import { ChartTemplateManager } from 'klinecharts-pro'
+
+const templates = new ChartTemplateManager(chartStore)
+
+// Save current configuration
+templates.saveTemplate({
+  name: 'My Scalping Setup',
+  mainIndicators: ['EMA', 'BOLL'],
+  subIndicators: ['RSI', 'MACD'],
+  theme: 'dark',
+  period: { multiplier: 5, timespan: 'minute', text: '5m' },
+  createdAt: Date.now()
+})
+
+// List and load
+templates.getTemplateNames()                    // ['My Scalping Setup']
+const tmpl = templates.loadTemplate('My Scalping Setup')
+
+// Delete
+templates.deleteTemplate('My Scalping Setup')
+```
+
+### Crosshair Sync
+
+```typescript
+import { CrosshairSyncManager } from 'klinecharts-pro'
+
+const sync = new CrosshairSyncManager()
+
+sync.addChart(chart1)
+sync.addChart(chart2)
+// Moving crosshair on chart1 now moves it on chart2 and vice versa
+
+sync.removeChart(chart1)
+sync.destroy()
+```
+
+### Custom Indicators & Overlays
+
+```typescript
+import { registerCustomIndicator, registerCustomOverlay } from 'klinecharts-pro'
+
+// Register a custom indicator (auto-appears in Indicator menu)
+registerCustomIndicator({
+  template: { name: 'MyRSI', calc: (dataList) => { /* ... */ }, figures: [{ key: 'value', type: 'line' }] },
+  label: 'My Custom RSI',
+  paneType: 'sub'
+})
+
+// Register a custom overlay (auto-appears in Drawing menu)
+registerCustomOverlay({
+  template: { name: 'myTool', totalStep: 2, createPointFigures: (params) => { /* ... */ } },
+  label: 'My Tool'
+})
+```
+
+### Price Alerts
+
+```typescript
+chart.setAlert({ id: 'alert1', price: 150.00, condition: 'crosses_above', symbol: 'AAPL' })
+chart.getAlerts()
+chart.removeAlert('alert1')
+```
+
+### Multi-Symbol Comparison
+
+```typescript
+import { ComparisonManager } from 'klinecharts-pro'
+
+const comparison = new ComparisonManager(chartWidget, datafeed)
+await comparison.addSymbol({ ticker: 'MSFT' }, period, from, to)
+comparison.getSymbols()
+comparison.toggleVisibility('MSFT')
+comparison.removeSymbol('MSFT')
+comparison.destroy()
+```
+
+---
+
+## 📊 DefaultDatafeed
+
+```typescript
+import { DefaultDatafeed } from 'klinecharts-pro'
+
+// Uses Polygon.io API
+const datafeed = new DefaultDatafeed('YOUR_API_KEY')
+```
+
+Implements the `Datafeed` interface:
+
+```typescript
+interface Datafeed {
+  searchSymbols(search?: string): Promise<SymbolInfo[]>
+  getHistoryKLineData(symbol: SymbolInfo, period: Period, from: number, to: number): Promise<KLineData[]>
+  subscribe(symbol: SymbolInfo, period: Period, callback: DatafeedSubscribeCallback): void
+  unsubscribe(symbol: SymbolInfo, period: Period): void
+}
+```
+
+---
+
+## 🏗 Architecture
+
+```
+src/
+├── index.ts                    # Entry point + exports
+├── KLineChartPro.tsx           # Main class (lifecycle, API)
+├── ChartProComponent.tsx       # SolidJS component (all UI wiring)
+├── types.ts                    # TypeScript interfaces
+├── config.ts                   # Shared constants
+├── registry.ts                 # Custom tool registry (auto-menu)
+├── error.ts                    # Error handling system
+├── store.ts                    # localStorage persistence
+├── drawing-store.ts            # Undo/redo + drawing persistence
+├── comparison.ts               # Multi-symbol comparison
+├── bar-replay.ts               # Bar replay engine
+├── keyboard-shortcuts.ts       # Keyboard shortcut manager
+├── chart-template.ts           # Template save/load
+├── crosshair-sync.ts           # Multi-chart crosshair sync
+├── DefaultDatafeed.ts          # Polygon.io data feed
+├── i18n/                       # 5 locale files (168+ keys each)
+├── extension/                  # 25 overlay templates
+│   ├── longPosition.ts         # Long Position tool
+│   ├── shortPosition.ts        # Short Position tool
+│   ├── frvp.ts                 # Volume Profile
+│   ├── measure.ts              # Measure tool
+│   ├── priceRange.ts           # Price Range zone
+│   ├── textNote.ts             # Text annotation
+│   ├── anchoredVwap.ts         # Anchored VWAP
+│   ├── priceLabel.ts           # Price Label
+│   └── ... (17 more)
+├── widget/
+│   ├── period-bar/             # Toolbar (periods, chart type, settings)
+│   ├── drawing-bar/            # Drawing toolbar (8 groups)
+│   ├── replay-bar/             # Replay controls (play/pause/step/speed)
+│   ├── object-tree/            # Object manager modal
+│   ├── drawing-style-editor/   # Style editor modal
+│   ├── context-menu/           # Right-click menu
+│   ├── error-banner/           # Error notification
+│   ├── performance-panel/      # Debug panel
+│   ├── alert-modal/            # Price alerts UI
+│   └── ...
+├── component/                  # Reusable UI (Modal, Select, List, etc.)
+└── __tests__/                  # 38 unit tests (100% pass)
+```
+
+---
+
+## 🧪 Testing
+
+```bash
+# Run all tests
+npx vitest run
+
+# Run with verbose output
+npx vitest run --reporter=verbose
+
+# Watch mode
+npx vitest
+```
+
+Current status: **38/38 tests passing** ✅
+
+---
+
+## 🛠 Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start dev server
+npm run dev
+
+# Build for production
+npm run build-core
+
+# Run tests
+npx vitest run
+```
+
+---
+
+## 📄 License
+
+Apache License 2.0