zengeld-canvas 0.1.8 → 0.1.9

package/README.md

@@ -13,6 +13,7 @@ WebAssembly bindings for the zengeld-canvas chart rendering engine. Built in Rus
 - **12 Series Types** - Candlestick, HeikinAshi, Line, Area, Histogram, Baseline, and more
 - **14 Multi-Chart Layouts** - Grid, split, and custom layouts for dashboards
 - **High Performance** - Native Rust speed via WebAssembly
+- **Theme System** - 4 built-in presets (dark, light, high_contrast, cyberpunk) + runtime customization
 
 ## Installation
 
@@ -23,45 +24,65 @@ npm install zengeld-canvas
 ## Quick Start
 
 ```javascript
-import init, { Chart, JsBar } from 'zengeld-canvas';
-
-async function main() {
-  await init();
-
-  // Create sample OHLCV data
-  const bars = [
-    new JsBar(1703721600n, 100.0, 105.0, 98.0, 103.0, 1000.0)
-  ];
-
-  // Create chart
-  const chart = new Chart(800, 600);
-  chart.setBars(bars);
-  chart.candlesticks();
-  chart.sma(20, "#2196F3");
-
-  // Render to SVG
-  const svg = chart.renderSvg();
-
-  // Use in DOM
-  document.getElementById('chart').innerHTML = svg;
-}
-
-main();
+import init, { Chart, JsBar, JsUITheme, JsRuntimeTheme } from 'zengeld-canvas';
+
+await init();
+
+// Create chart
+const chart = new Chart(800, 600);
+chart.setBars(bars);
+chart.candlesticks();
+chart.sma(20, "#2196F3");
+const svg = chart.renderSvg();
+
+// With theme preset
+const theme = JsUITheme.cyberpunk();
+const chart2 = new Chart(800, 600);
+chart2.setBars(bars);
+chart2.candlesticks();
+chart2.background(theme.background);
+chart2.colors(theme.candle_up_body, theme.candle_down_body);
+
+// Runtime theme (modifiable)
+const runtime = JsRuntimeTheme.fromPreset("dark");
+runtime.background = "#1a0a2e";  // Custom background
+runtime.candle_up_body = "#00ffff";  // Cyan
+const json = runtime.toJson();
 ```
 
 ## Examples
 
 <table>
   <tr>
-    <td align="center"><img src="https://raw.githubusercontent.com/zengeld/zengeld-canvas/main/crates/canvas/chart_output/09_dark_theme.svg" width="400"/><br/><b>Dark Theme</b></td>
-    <td align="center"><img src="https://raw.githubusercontent.com/zengeld/zengeld-canvas/main/crates/canvas/chart_output/05_with_macd.svg" width="400"/><br/><b>MACD Indicator</b></td>
+    <td align="center"><img src="https://raw.githubusercontent.com/zengeld/zengeld-canvas/main/crates/canvas/chart_output/09_light_theme.svg" width="400"/><br/><b>Light Theme</b></td>
+    <td align="center"><img src="https://raw.githubusercontent.com/zengeld/zengeld-canvas/main/crates/canvas/chart_output/09b_high_contrast_theme.svg" width="400"/><br/><b>High Contrast Theme</b></td>
   </tr>
   <tr>
-    <td align="center"><img src="https://raw.githubusercontent.com/zengeld/zengeld-canvas/main/crates/canvas/chart_output/14_multichart_1_3.svg" width="400"/><br/><b>Multi-Chart Layout</b></td>
-    <td align="center"><img src="https://raw.githubusercontent.com/zengeld/zengeld-canvas/main/crates/canvas/chart_output/19_primitives_channels.svg" width="400"/><br/><b>Channels</b></td>
+    <td align="center"><img src="https://raw.githubusercontent.com/zengeld/zengeld-canvas/main/crates/canvas/chart_output/09c_cyberpunk_theme.svg" width="400"/><br/><b>Cyberpunk Theme</b></td>
+    <td align="center"><img src="https://raw.githubusercontent.com/zengeld/zengeld-canvas/main/crates/canvas/chart_output/09d_runtime_theme.svg" width="400"/><br/><b>Runtime Custom Theme</b></td>
   </tr>
 </table>
 
+## Theme System
+
+Built-in presets: `dark()`, `light()`, `highContrast()`, `cyberpunk()`
+
+```javascript
+import { JsUITheme, JsRuntimeTheme } from 'zengeld-canvas';
+
+// Static themes
+const dark = JsUITheme.dark();
+const light = JsUITheme.light();
+
+// Runtime themes (modifiable, JSON support)
+const runtime = JsRuntimeTheme.fromPreset("dark");
+runtime.background = "#1a0a2e";
+const json = runtime.toJson();
+
+// Available presets
+const presets = JsRuntimeTheme.presets();  // ["dark", "light", "high_contrast", "cyberpunk"]
+```
+
 ## Drawing Primitives
 
 | Category | Count | Examples |

package/package.json

@@ -5,7 +5,7 @@
     "zengeld"
   ],
   "description": "WebAssembly bindings for zengeld-canvas chart rendering engine",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "license": "MIT OR Apache-2.0",
   "repository": {
   "homepage": "https://github.com/zengeld/zengeld-canvas",

package/zengeld_canvas_wasm.d.ts

@@ -744,6 +744,64 @@ export class JsChartConfig {
   constructor();
 }
 
+export class JsRuntimeTheme {
+  private constructor();
+  free(): void;
+  [Symbol.dispose](): void;
+  /**
+   * Create from preset name: "dark", "light", "high_contrast", "cyberpunk"
+   */
+  static fromPreset(name: string): JsRuntimeTheme;
+  /**
+   * Create high contrast theme
+   */
+  static highContrast(): JsRuntimeTheme;
+  /**
+   * Serialize to pretty JSON string
+   */
+  toJsonPretty(): string;
+  /**
+   * Create dark theme
+   */
+  static dark(): JsRuntimeTheme;
+  /**
+   * Create light theme
+   */
+  static light(): JsRuntimeTheme;
+  /**
+   * Get available preset names
+   */
+  static presets(): string[];
+  /**
+   * Serialize to JSON string
+   */
+  toJson(): string;
+  /**
+   * Create cyberpunk theme
+   */
+  static cyberpunk(): JsRuntimeTheme;
+  /**
+   * Deserialize from JSON string
+   */
+  static fromJson(json: string): JsRuntimeTheme | undefined;
+  background: string;
+  lineColor: string;
+  scaleText: string;
+  accent: string;
+  danger: string;
+  toolbarBg: string;
+  maFast: string;
+  maSlow: string;
+  success: string;
+  scaleBg: string;
+  textPrimary: string;
+  gridLine: string;
+  candleUpBody: string;
+  crosshairLine: string;
+  candleDownBody: string;
+  name: string;
+}
+
 export class JsTheme {
   private constructor();
   free(): void;
@@ -757,6 +815,44 @@ export class JsTheme {
   readonly candleUp: string;
 }
 
+export class JsUITheme {
+  private constructor();
+  free(): void;
+  [Symbol.dispose](): void;
+  /**
+   * Create high contrast theme (accessibility)
+   */
+  static highContrast(): JsUITheme;
+  /**
+   * Create dark theme (TradingView-like)
+   */
+  static dark(): JsUITheme;
+  /**
+   * Create light theme
+   */
+  static light(): JsUITheme;
+  /**
+   * Create cyberpunk/neon theme
+   */
+  static cyberpunk(): JsUITheme;
+  readonly background: string;
+  readonly lineColor: string;
+  readonly scaleText: string;
+  readonly toolbarBg: string;
+  readonly textPrimary: string;
+  readonly candleUpBody: string;
+  readonly crosshairLine: string;
+  readonly candleDownBody: string;
+  readonly name: string;
+  readonly accent: string;
+  readonly danger: string;
+  readonly maFast: string;
+  readonly maSlow: string;
+  readonly success: string;
+  readonly scaleBg: string;
+  readonly gridLine: string;
+}
+
 export class JsViewport {
   free(): void;
   [Symbol.dispose](): void;
@@ -782,7 +878,9 @@ export interface InitOutput {
   readonly __wbg_chart_free: (a: number, b: number) => void;
   readonly __wbg_jsbar_free: (a: number, b: number) => void;
   readonly __wbg_jschartconfig_free: (a: number, b: number) => void;
+  readonly __wbg_jsruntimetheme_free: (a: number, b: number) => void;
   readonly __wbg_jstheme_free: (a: number, b: number) => void;
+  readonly __wbg_jsuitheme_free: (a: number, b: number) => void;
   readonly __wbg_jsviewport_free: (a: number, b: number) => void;
   readonly chart_abcdPattern: (a: number, b: number, c: number) => void;
   readonly chart_acceleratorOscillator: (a: number) => void;
@@ -972,6 +1070,47 @@ export interface InitOutput {
   readonly jsbar_timestamp: (a: number) => bigint;
   readonly jsbar_volume: (a: number) => number;
   readonly jschartconfig_new: () => number;
+  readonly jsruntimetheme_accent: (a: number) => [number, number];
+  readonly jsruntimetheme_background: (a: number) => [number, number];
+  readonly jsruntimetheme_candleDownBody: (a: number) => [number, number];
+  readonly jsruntimetheme_candleUpBody: (a: number) => [number, number];
+  readonly jsruntimetheme_crosshairLine: (a: number) => [number, number];
+  readonly jsruntimetheme_cyberpunk: () => number;
+  readonly jsruntimetheme_danger: (a: number) => [number, number];
+  readonly jsruntimetheme_dark: () => number;
+  readonly jsruntimetheme_fromJson: (a: number, b: number) => number;
+  readonly jsruntimetheme_fromPreset: (a: number, b: number) => number;
+  readonly jsruntimetheme_gridLine: (a: number) => [number, number];
+  readonly jsruntimetheme_highContrast: () => number;
+  readonly jsruntimetheme_light: () => number;
+  readonly jsruntimetheme_lineColor: (a: number) => [number, number];
+  readonly jsruntimetheme_maFast: (a: number) => [number, number];
+  readonly jsruntimetheme_maSlow: (a: number) => [number, number];
+  readonly jsruntimetheme_name: (a: number) => [number, number];
+  readonly jsruntimetheme_presets: () => [number, number];
+  readonly jsruntimetheme_scaleBg: (a: number) => [number, number];
+  readonly jsruntimetheme_scaleText: (a: number) => [number, number];
+  readonly jsruntimetheme_set_accent: (a: number, b: number, c: number) => void;
+  readonly jsruntimetheme_set_background: (a: number, b: number, c: number) => void;
+  readonly jsruntimetheme_set_candleDownBody: (a: number, b: number, c: number) => void;
+  readonly jsruntimetheme_set_candleUpBody: (a: number, b: number, c: number) => void;
+  readonly jsruntimetheme_set_crosshairLine: (a: number, b: number, c: number) => void;
+  readonly jsruntimetheme_set_danger: (a: number, b: number, c: number) => void;
+  readonly jsruntimetheme_set_gridLine: (a: number, b: number, c: number) => void;
+  readonly jsruntimetheme_set_lineColor: (a: number, b: number, c: number) => void;
+  readonly jsruntimetheme_set_maFast: (a: number, b: number, c: number) => void;
+  readonly jsruntimetheme_set_maSlow: (a: number, b: number, c: number) => void;
+  readonly jsruntimetheme_set_name: (a: number, b: number, c: number) => void;
+  readonly jsruntimetheme_set_scaleBg: (a: number, b: number, c: number) => void;
+  readonly jsruntimetheme_set_scaleText: (a: number, b: number, c: number) => void;
+  readonly jsruntimetheme_set_success: (a: number, b: number, c: number) => void;
+  readonly jsruntimetheme_set_textPrimary: (a: number, b: number, c: number) => void;
+  readonly jsruntimetheme_set_toolbarBg: (a: number, b: number, c: number) => void;
+  readonly jsruntimetheme_success: (a: number) => [number, number];
+  readonly jsruntimetheme_textPrimary: (a: number) => [number, number];
+  readonly jsruntimetheme_toJson: (a: number) => [number, number];
+  readonly jsruntimetheme_toJsonPretty: (a: number) => [number, number];
+  readonly jsruntimetheme_toolbarBg: (a: number) => [number, number];
   readonly jstheme_bgColor: (a: number) => [number, number];
   readonly jstheme_candleDown: (a: number) => [number, number];
   readonly jstheme_candleUp: (a: number) => [number, number];
@@ -979,6 +1118,26 @@ export interface InitOutput {
   readonly jstheme_gridColor: (a: number) => [number, number];
   readonly jstheme_light: () => number;
   readonly jstheme_textColor: (a: number) => [number, number];
+  readonly jsuitheme_accent: (a: number) => [number, number];
+  readonly jsuitheme_background: (a: number) => [number, number];
+  readonly jsuitheme_candleDownBody: (a: number) => [number, number];
+  readonly jsuitheme_candleUpBody: (a: number) => [number, number];
+  readonly jsuitheme_crosshairLine: (a: number) => [number, number];
+  readonly jsuitheme_cyberpunk: () => number;
+  readonly jsuitheme_danger: (a: number) => [number, number];
+  readonly jsuitheme_dark: () => number;
+  readonly jsuitheme_gridLine: (a: number) => [number, number];
+  readonly jsuitheme_highContrast: () => number;
+  readonly jsuitheme_light: () => number;
+  readonly jsuitheme_lineColor: (a: number) => [number, number];
+  readonly jsuitheme_maFast: (a: number) => [number, number];
+  readonly jsuitheme_maSlow: (a: number) => [number, number];
+  readonly jsuitheme_name: (a: number) => [number, number];
+  readonly jsuitheme_scaleBg: (a: number) => [number, number];
+  readonly jsuitheme_scaleText: (a: number) => [number, number];
+  readonly jsuitheme_success: (a: number) => [number, number];
+  readonly jsuitheme_textPrimary: (a: number) => [number, number];
+  readonly jsuitheme_toolbarBg: (a: number) => [number, number];
   readonly jsviewport_barWidth: (a: number) => number;
   readonly jsviewport_chartHeight: (a: number) => number;
   readonly jsviewport_chartWidth: (a: number) => number;
@@ -992,6 +1151,7 @@ export interface InitOutput {
   readonly __wbindgen_free: (a: number, b: number, c: number) => void;
   readonly __wbindgen_malloc: (a: number, b: number) => number;
   readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;
+  readonly __externref_drop_slice: (a: number, b: number) => void;
   readonly __externref_table_alloc: () => number;
   readonly __wbindgen_start: () => void;
 }