juxscript 1.0.19 → 1.0.20

package/lib/components/card.ts

@@ -1,94 +1,68 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
-/**
- * Card component options
- */
 export interface CardOptions {
   title?: string;
-  subtitle?: string;
   content?: string;
-  image?: string;
-  variant?: 'default' | 'elevated' | 'outlined';
+  footer?: string;
+  variant?: string;
+  hoverable?: boolean;
   style?: string;
   class?: string;
 }
 
-/**
- * Card component state
- */
 type CardState = {
   title: string;
-  subtitle: string;
   content: string;
-  image: string;
+  footer: string;
   variant: string;
+  hoverable: boolean;
   style: string;
   class: string;
-  hasActions: boolean;
 };
 
-/**
- * Card component
- * 
- * Usage:
- *   const card = jux.card('myCard', {
- *     title: 'Card Title',
- *     content: 'Card content here'
- *   });
- *   card.render();
- * 
- *   // Add actions (any components)
- *   jux.button('view-btn').label('View').render('#myCard-actions');
- *   jux.button('delete-btn').label('Delete').render('#myCard-actions');
- */
 export class Card {
   state: CardState;
   container: HTMLElement | null = null;
   _id: string;
   id: string;
 
+  // CRITICAL: Store bind/sync instructions for deferred wiring
+  private _bindings: Array<{ event: string, handler: Function }> = [];
+  private _syncBindings: Array<{
+    property: string,
+    stateObj: State<any>,
+    toState?: Function,
+    toComponent?: Function
+  }> = [];
+
   constructor(id: string, options: CardOptions = {}) {
     this._id = id;
     this.id = id;
 
     this.state = {
       title: options.title ?? '',
-      subtitle: options.subtitle ?? '',
       content: options.content ?? '',
-      image: options.image ?? '',
+      footer: options.footer ?? '',
       variant: options.variant ?? 'default',
+      hoverable: options.hoverable ?? false,
       style: options.style ?? '',
-      class: options.class ?? '',
-      hasActions: false
+      class: options.class ?? ''
     };
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
-
   title(value: string): this {
     this.state.title = value;
     return this;
   }
 
-  subtitle(value: string): this {
-    this.state.subtitle = value;
-    return this;
-  }
-
   content(value: string): this {
     this.state.content = value;
     return this;
   }
 
-  image(value: string): this {
-    this.state.image = value;
-    return this;
-  }
-
-  variant(value: string): this {
-    this.state.variant = value;
+  footer(value: string): this {
+    this.state.footer = value;
     return this;
   }
 
@@ -102,118 +76,120 @@ export class Card {
     return this;
   }
 
-  /**
-   * Enable actions region
-   * Creates an empty actions container that components can render into
-   */
-  withActions(): this {
-    this.state.hasActions = true;
+  bind(event: string, handler: Function): this {
+    this._bindings.push({ event, handler });
     return this;
   }
 
-  /* -------------------------
-   * Render
-   * ------------------------- */
+  sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+    if (!stateObj || typeof stateObj.subscribe !== 'function') {
+      throw new Error(`Card.sync: Expected a State object for property "${property}"`);
+    }
+    this._syncBindings.push({ property, stateObj, toState, toComponent });
+    return this;
+  }
 
   render(targetId?: string): this {
+    // === 1. SETUP: Get or create container ===
     let container: HTMLElement;
-
     if (targetId) {
       const target = document.querySelector(targetId);
       if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`Card: Target element "${targetId}" not found`);
+        throw new Error(`Card: Target "${targetId}" not found`);
       }
       container = target;
     } else {
       container = getOrCreateContainer(this._id);
     }
-
     this.container = container;
-    const { title, subtitle, content, image, variant, style, class: className, hasActions } = this.state;
 
-    // Create card element
+    // === 2. PREPARE: Destructure state ===
+    const { title, content, footer, variant, hoverable, style, class: className } = this.state;
+
+    // === 3. BUILD: Create DOM elements ===
     const card = document.createElement('div');
     card.className = `jux-card jux-card-${variant}`;
     card.id = this._id;
+    if (hoverable) card.classList.add('jux-card-hoverable');
+    if (className) card.className += ` ${className}`;
+    if (style) card.setAttribute('style', style);
 
-    if (className) {
-      card.className += ` ${className}`;
-    }
-
-    if (style) {
-      card.setAttribute('style', style);
-    }
-
-    // Image
-    if (image) {
-      const img = document.createElement('img');
-      img.className = 'jux-card-image';
-      img.src = image;
-      img.alt = title || 'Card image';
-      card.appendChild(img);
-    }
-
-    // Content wrapper
-    const cardBody = document.createElement('div');
-    cardBody.className = 'jux-card-body';
-
-    // Title
     if (title) {
-      const titleEl = document.createElement('h3');
-      titleEl.className = 'jux-card-title';
-      titleEl.textContent = title;
-      cardBody.appendChild(titleEl);
+      const header = document.createElement('div');
+      header.className = 'jux-card-header';
+      header.textContent = title;
+      card.appendChild(header);
     }
 
-    // Subtitle
-    if (subtitle) {
-      const subtitleEl = document.createElement('p');
-      subtitleEl.className = 'jux-card-subtitle';
-      subtitleEl.textContent = subtitle;
-      cardBody.appendChild(subtitleEl);
-    }
+    const body = document.createElement('div');
+    body.className = 'jux-card-body';
+    body.innerHTML = content;
+    card.appendChild(body);
 
-    // Content
-    if (content) {
-      const contentEl = document.createElement('p');
-      contentEl.className = 'jux-card-content';
-      contentEl.textContent = content;
-      cardBody.appendChild(contentEl);
+    if (footer) {
+      const footerEl = document.createElement('div');
+      footerEl.className = 'jux-card-footer';
+      footerEl.innerHTML = footer;
+      card.appendChild(footerEl);
     }
 
-    card.appendChild(cardBody);
-
-    // Actions region (empty container for user to populate)
-    if (hasActions) {
-      const actionsEl = document.createElement('div');
-      actionsEl.className = 'jux-card-actions';
-      actionsEl.id = `${this._id}-actions`;
-      card.appendChild(actionsEl);
-    }
+    // === 4. WIRE: Attach event listeners and sync bindings ===
+
+    // Wire custom bindings from .bind() calls
+    this._bindings.forEach(({ event, handler }) => {
+      card.addEventListener(event, handler as EventListener);
+    });
+
+    // Wire sync bindings from .sync() calls
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'title') {
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          const header = card.querySelector('.jux-card-header');
+          if (header) {
+            header.textContent = transformed;
+          }
+          this.state.title = transformed;
+        });
+      }
+      else if (property === 'content') {
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          body.innerHTML = transformed;
+          this.state.content = transformed;
+        });
+      }
+      else if (property === 'footer') {
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          const footerEl = card.querySelector('.jux-card-footer');
+          if (footerEl) {
+            footerEl.innerHTML = transformed;
+          }
+          this.state.footer = transformed;
+        });
+      }
+    });
 
+    // === 5. RENDER: Append to DOM and finalize ===
     container.appendChild(card);
     return this;
   }
 
-  /**
-   * Render to another Jux component's container
-   */
   renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Card.renderTo: Invalid component - not an object');
+    if (!juxComponent?._id) {
+      throw new Error('Card.renderTo: Invalid component');
     }
-
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Card.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
-
     return this.render(`#${juxComponent._id}`);
   }
 }
 
-/**
- * Factory helper
- */
 export function card(id: string, options: CardOptions = {}): Card {
   return new Card(id, options);
 }

package/lib/components/chart-types.ts

@@ -0,0 +1,159 @@
+import { State } from '../reactivity/state.js';
+
+/**
+ * Shared chart data point
+ */
+export interface ChartDataPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+
+/**
+ * Shared chart theme type
+ */
+export type ChartTheme = 'google' | 'seriesa' | 'hr' | 'figma' | 'notion' | 'chalk' | 'mint';
+
+/**
+ * Shared chart style mode type
+ */
+export type ChartStyleMode = 'default' | 'gradient' | 'outline' | 'dashed' | 'glow' | 'glass';
+
+/**
+ * Shared chart orientation type
+ */
+export type ChartOrientation = 'vertical' | 'horizontal';
+
+/**
+ * Shared chart direction type
+ */
+export type ChartDirection = 'normal' | 'reverse';
+
+/**
+ * Shared legend orientation type
+ */
+export type LegendOrientation = 'horizontal' | 'vertical';
+
+/**
+ * Base chart options shared across all chart types
+ */
+export interface BaseChartOptions {
+    data?: ChartDataPoint[];
+    title?: string;
+    subtitle?: string;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    showTicksX?: boolean;
+    showTicksY?: boolean;
+    showScaleX?: boolean;
+    showScaleY?: boolean;
+    scaleXUnit?: string;
+    scaleYUnit?: string;
+    showLegend?: boolean;
+    legendOrientation?: LegendOrientation;
+    showDataTable?: boolean;
+    showDataLabels?: boolean;
+    animate?: boolean;
+    animationDuration?: number;
+    width?: number;
+    height?: number;
+    colors?: string[];
+    class?: string;
+    style?: string;
+    theme?: ChartTheme;
+    styleMode?: ChartStyleMode;
+    borderRadius?: number;
+}
+
+/**
+ * Bar/Area chart specific options (with orientation support)
+ */
+export interface BarAreaChartOptions extends BaseChartOptions {
+    chartOrientation?: ChartOrientation;
+    chartDirection?: ChartDirection;
+}
+
+/**
+ * Doughnut chart specific options
+ */
+export interface DoughnutChartOptions extends BaseChartOptions {
+    // Doughnut-specific options can be added here
+}
+
+/**
+ * Base chart state shared across all chart types
+ */
+export interface BaseChartState {
+    data: ChartDataPoint[];
+    title: string;
+    subtitle: string;
+    xAxisLabel: string;
+    yAxisLabel: string;
+    showTicksX: boolean;
+    showTicksY: boolean;
+    showScaleX: boolean;
+    showScaleY: boolean;
+    scaleXUnit: string;
+    scaleYUnit: string;
+    showLegend: boolean;
+    legendOrientation: LegendOrientation;
+    showDataTable: boolean;
+    showDataLabels: boolean;
+    animate: boolean;
+    animationDuration: number;
+    width: number;
+    height: number;
+    colors: string[];
+    class: string;
+    style: string;
+    theme?: ChartTheme;
+    styleMode: ChartStyleMode;
+    borderRadius: number;
+}
+
+/**
+ * Bar/Area chart state with orientation
+ */
+export interface BarAreaChartState extends BaseChartState {
+    chartOrientation: ChartOrientation;
+    chartDirection: ChartDirection;
+}
+
+/**
+ * Doughnut chart state
+ */
+export interface DoughnutChartState extends BaseChartState {
+    // Doughnut-specific state can be added here
+}
+
+/**
+ * Property mapping for syncState
+ * Maps state property names to component method names
+ */
+export interface ChartPropertyMapping {
+    [stateProperty: string]: string | ((value: any) => void);
+}
+
+/**
+ * Chart state object (all properties as State objects)
+ */
+export interface ChartStateObject {
+    chartType?: State<string>;
+    chartTheme?: State<ChartTheme>;
+    chartStyleMode?: State<ChartStyleMode>;
+    borderRadius?: State<number>;
+    chartTitle?: State<string>;
+    chartWidth?: State<number>;
+    chartHeight?: State<number>;
+    showTicksX?: State<boolean>;
+    showTicksY?: State<boolean>;
+    showLegend?: State<boolean>;
+    showDataTable?: State<boolean>;
+    showDataLabels?: State<boolean>;
+    animate?: State<boolean>;
+    animationDuration?: State<number>;
+    legendOrientation?: State<LegendOrientation>;
+    chartOrientation?: State<ChartOrientation>;
+    chartDirection?: State<ChartDirection>;
+    [key: string]: State<any> | undefined;
+}

package/lib/components/chart-utils.ts

@@ -0,0 +1,160 @@
+import { ChartDataPoint, ChartTheme } from './chart-types.js';
+import {
+    googleTheme,
+    seriesaTheme,
+    hrTheme,
+    figmaTheme,
+    notionTheme,
+    chalkTheme,
+    mintTheme
+} from '../themes/charts.js';
+
+/**
+ * Lighten a hex color by a percentage
+ */
+export function lightenColor(color: string, percent: number): string {
+    const num = parseInt(color.replace('#', ''), 16);
+    const r = Math.min(255, Math.floor((num >> 16) + ((255 - (num >> 16)) * percent / 100)));
+    const g = Math.min(255, Math.floor(((num >> 8) & 0x00FF) + ((255 - ((num >> 8) & 0x00FF)) * percent / 100)));
+    const b = Math.min(255, Math.floor((num & 0x0000FF) + ((255 - (num & 0x0000FF)) * percent / 100)));
+    return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
+}
+
+/**
+ * Get theme configuration by name
+ */
+export function getThemeConfig(themeName: ChartTheme): any {
+    const themes: Record<ChartTheme, any> = {
+        google: googleTheme,
+        seriesa: seriesaTheme,
+        hr: hrTheme,
+        figma: figmaTheme,
+        notion: notionTheme,
+        chalk: chalkTheme,
+        mint: mintTheme
+    };
+    return themes[themeName];
+}
+
+/**
+ * Create legend HTML element
+ */
+export function createLegend(data: ChartDataPoint[], colors: string[], className: string): HTMLElement {
+    const legend = document.createElement('div');
+    legend.className = `${className}-legend`;
+
+    data.forEach((point, index) => {
+        const color = point.color || colors[index % colors.length];
+
+        const item = document.createElement('div');
+        item.className = `${className}-legend-item`;
+
+        const swatch = document.createElement('div');
+        swatch.className = `${className}-legend-swatch`;
+        swatch.style.background = color;
+
+        const label = document.createElement('span');
+        label.className = `${className}-legend-label`;
+        label.textContent = point.label;
+
+        item.appendChild(swatch);
+        item.appendChild(label);
+        legend.appendChild(item);
+    });
+
+    return legend;
+}
+
+/**
+ * Create data table HTML element
+ */
+export function createDataTable(
+    data: ChartDataPoint[],
+    xAxisLabel: string,
+    yAxisLabel: string,
+    className: string,
+    chartOrientation?: 'vertical' | 'horizontal'
+): HTMLElement {
+    const table = document.createElement('table');
+    table.className = `${className}-table`;
+
+    const thead = document.createElement('thead');
+    const headerRow = document.createElement('tr');
+
+    // Swap headers based on orientation for bar/area charts
+    const columnHeaders = chartOrientation === 'horizontal'
+        ? [yAxisLabel || 'Label', xAxisLabel || 'Value']
+        : [xAxisLabel || 'Label', yAxisLabel || 'Value'];
+
+    columnHeaders.forEach(text => {
+        const th = document.createElement('th');
+        th.textContent = text;
+        headerRow.appendChild(th);
+    });
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+
+    const tbody = document.createElement('tbody');
+    data.forEach(point => {
+        const row = document.createElement('tr');
+
+        const labelCell = document.createElement('td');
+        labelCell.textContent = point.label;
+
+        const valueCell = document.createElement('td');
+        valueCell.textContent = point.value.toString();
+
+        row.appendChild(labelCell);
+        row.appendChild(valueCell);
+        tbody.appendChild(row);
+    });
+    table.appendChild(tbody);
+
+    return table;
+}
+
+/**
+ * Apply theme styles to document
+ */
+export function applyThemeStyles(themeName: ChartTheme, className: string, baseStyles: string): void {
+    const theme = getThemeConfig(themeName);
+    if (!theme) return;
+
+    // Inject base styles (once)
+    const baseStyleId = `${className}-base-styles`;
+    if (!document.getElementById(baseStyleId)) {
+        const style = document.createElement('style');
+        style.id = baseStyleId;
+        style.textContent = baseStyles;
+        document.head.appendChild(style);
+    }
+
+    // Inject font (once per theme)
+    if (theme.font && !document.querySelector(`link[href="${theme.font}"]`)) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = theme.font;
+        document.head.appendChild(link);
+    }
+
+    // Apply theme-specific styles
+    const styleId = `${className}-theme-${themeName}`;
+    let styleElement = document.getElementById(styleId) as HTMLStyleElement;
+
+    if (!styleElement) {
+        styleElement = document.createElement('style');
+        styleElement.id = styleId;
+        document.head.appendChild(styleElement);
+    }
+
+    // Generate CSS with theme variables
+    const variablesCSS = Object.entries(theme.variables)
+        .map(([key, value]) => `  ${key}: ${value};`)
+        .join('\n');
+
+    styleElement.textContent = `
+.${className}.theme-${themeName} {
+${variablesCSS}
+}
+`;
+}