juxscript 1.0.20 → 1.0.21

package/lib/components/write.ts

@@ -22,18 +22,10 @@ export interface WriteOptions {
  *   jux.write('Content').render('#container');
  *   
  *   // Write HTML
- *   jux.write('<strong>Bold text</strong>', { html: true }).render('#container');
+ *   jux.write('<strong>Bold text</strong>').html(true).render('#container');
  *   
  *   // Write with styling
- *   jux.write('Styled text', { 
- *     tagType: 'p',
- *     className: 'highlight',
- *     style: 'color: red;' 
- *   }).render('#container');
- *   
- *   // Append multiple writes
- *   jux.write('First').render('#container');
- *   jux.write('Second').render('#container');
+ *   jux.write('Styled text').style('color: red;').render('#container');
  */
 export class Write {
     private content: string;
@@ -50,54 +42,63 @@ export class Write {
             ...options
         };
     }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
     /**
-    * Set HTML mode (chainable setter)
-    */
+     * Set HTML mode (treat content as HTML)
+     */
     html(enabled: boolean = true): this {
         this.options.html = enabled;
         return this;
     }
+
     /**
-     * Render content to target element
-     * Falls back to body if no target specified
+     * Set tag type
      */
-    render(targetSelector?: string): this {
-        // Default to body if no target
-        const selector = targetSelector || 'body';
-        const target = document.querySelector(selector);
-
-        if (!target || !(target instanceof HTMLElement)) {
-            console.warn(`Write: Target element "${selector}" not found`);
-            return this;
-        }
+    tagType(value: string): this {
+        this.options.tagType = value;
+        return this;
+    }
 
-        const element = document.createElement(this.options.tagType!);
+    /**
+     * Set CSS class
+     */
+    className(value: string): this {
+        this.options.className = value;
+        return this;
+    }
 
-        // Set content (text or HTML)
-        if (this.options.html) {
-            element.innerHTML = this.content;
-        } else {
-            element.textContent = this.content;
-        }
+    /**
+     * Set inline styles
+     */
+    style(value: string): this {
+        this.options.style = value;
+        return this;
+    }
 
-        // Apply className
-        if (this.options.className) {
-            element.className = this.options.className;
-        }
+    /**
+     * Set custom attributes
+     */
+    attrs(attributes: Record<string, string>): this {
+        this.options.attributes = attributes;
+        return this;
+    }
 
-        // Apply inline styles
-        if (this.options.style) {
-            element.setAttribute('style', this.options.style);
-        }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER METHODS
+     * ═════════════════════════════════════════════════════════════════ */
 
-        // Apply custom attributes
-        if (this.options.attributes) {
-            Object.entries(this.options.attributes).forEach(([key, value]) => {
-                element.setAttribute(key, value);
-            });
-        }
+    /**
+     * Render content to target element
+     */
+    render(targetSelector?: string): this {
+        const target = this._getTarget(targetSelector);
+        if (!target) return this;
 
-        // Append to target
+        const element = this._createElement();
         target.appendChild(element);
 
         return this;
@@ -107,19 +108,14 @@ export class Write {
      * Replace target content (clear first, then render)
      */
     replace(targetSelector?: string): this {
-        const selector = targetSelector || 'body';
-        const target = document.querySelector(selector);
+        const target = this._getTarget(targetSelector);
+        if (!target) return this;
 
-        if (!target || !(target instanceof HTMLElement)) {
-            console.warn(`Write: Target element "${selector}" not found`);
-            return this;
-        }
-
-        // Clear existing content
         target.innerHTML = '';
+        const element = this._createElement();
+        target.appendChild(element);
 
-        // Render new content
-        return this.render(selector);
+        return this;
     }
 
     /**
@@ -127,35 +123,12 @@ export class Write {
      */
     before(targetSelector: string): this {
         const target = document.querySelector(targetSelector);
-
         if (!target || !(target instanceof HTMLElement)) {
             console.warn(`Write: Target element "${targetSelector}" not found`);
             return this;
         }
 
-        const element = document.createElement(this.options.tagType!);
-
-        if (this.options.html) {
-            element.innerHTML = this.content;
-        } else {
-            element.textContent = this.content;
-        }
-
-        if (this.options.className) {
-            element.className = this.options.className;
-        }
-
-        if (this.options.style) {
-            element.setAttribute('style', this.options.style);
-        }
-
-        if (this.options.attributes) {
-            Object.entries(this.options.attributes).forEach(([key, value]) => {
-                element.setAttribute(key, value);
-            });
-        }
-
-        // Insert before target
+        const element = this._createElement();
         target.parentNode?.insertBefore(element, target);
 
         return this;
@@ -166,35 +139,12 @@ export class Write {
      */
     after(targetSelector: string): this {
         const target = document.querySelector(targetSelector);
-
         if (!target || !(target instanceof HTMLElement)) {
             console.warn(`Write: Target element "${targetSelector}" not found`);
             return this;
         }
 
-        const element = document.createElement(this.options.tagType!);
-
-        if (this.options.html) {
-            element.innerHTML = this.content;
-        } else {
-            element.textContent = this.content;
-        }
-
-        if (this.options.className) {
-            element.className = this.options.className;
-        }
-
-        if (this.options.style) {
-            element.setAttribute('style', this.options.style);
-        }
-
-        if (this.options.attributes) {
-            Object.entries(this.options.attributes).forEach(([key, value]) => {
-                element.setAttribute(key, value);
-            });
-        }
-
-        // Insert after target
+        const element = this._createElement();
         target.parentNode?.insertBefore(element, target.nextSibling);
 
         return this;
@@ -204,87 +154,118 @@ export class Write {
      * Prepend to target (insert as first child)
      */
     prepend(targetSelector?: string): this {
-        const selector = targetSelector || 'body';
-        const target = document.querySelector(selector);
+        const target = this._getTarget(targetSelector);
+        if (!target) return this;
+
+        const element = this._createElement();
+        target.insertBefore(element, target.firstChild);
+
+        return this;
+    }
+
+    /**
+     * Append to target (alias for render)
+     */
+    append(targetSelector?: string): this {
+        return this.render(targetSelector);
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * PRIVATE HELPERS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    private _getTarget(selector?: string): HTMLElement | null {
+        const targetSelector = selector || 'body';
+        const target = document.querySelector(targetSelector);
 
         if (!target || !(target instanceof HTMLElement)) {
-            console.warn(`Write: Target element "${selector}" not found`);
-            return this;
+            console.warn(`Write: Target element "${targetSelector}" not found`);
+            return null;
         }
 
+        return target;
+    }
+
+    private _createElement(): HTMLElement {
         const element = document.createElement(this.options.tagType!);
 
+        // Set content (text or HTML)
         if (this.options.html) {
             element.innerHTML = this.content;
         } else {
             element.textContent = this.content;
         }
 
+        // Apply className
         if (this.options.className) {
             element.className = this.options.className;
         }
 
+        // Apply inline styles
         if (this.options.style) {
             element.setAttribute('style', this.options.style);
         }
 
+        // Apply custom attributes
         if (this.options.attributes) {
             Object.entries(this.options.attributes).forEach(([key, value]) => {
                 element.setAttribute(key, value);
             });
         }
 
-        // Prepend to target
-        target.insertBefore(element, target.firstChild);
-
-        return this;
-    }
-
-    /**
-     * Append to target (alias for render)
-     */
-    append(targetSelector?: string): this {
-        return this.render(targetSelector);
+        return element;
     }
 }
 
 /**
- * Factory function for quick writing
+ * Factory function - simple, no overloads
  */
 export function write(content: string, options: WriteOptions = {}): Write {
     return new Write(content, options);
 }
 
+/* ═════════════════════════════════════════════════════════════════
+ * SHORTHAND HELPERS
+ * ═════════════════════════════════════════════════════════════════ */
+
 /**
- * Shorthand helpers
+ * Write text (explicit)
  */
-
-// Write text (alias)
 export function writeText(content: string, options: Omit<WriteOptions, 'html'> = {}): Write {
     return new Write(content, { ...options, html: false });
 }
 
-// Write HTML (alias)
+/**
+ * Write HTML (explicit)
+ */
 export function writeHtml(content: string, options: Omit<WriteOptions, 'html'> = {}): Write {
     return new Write(content, { ...options, html: true });
 }
 
-// Write paragraph
+/**
+ * Write paragraph
+ */
 export function writeParagraph(content: string, options: Omit<WriteOptions, 'tagType'> = {}): Write {
     return new Write(content, { ...options, tagType: 'p' });
 }
 
-// Write heading
+/**
+ * Write heading
+ */
 export function writeHeading(content: string, level: 1 | 2 | 3 | 4 | 5 | 6 = 2, options: Omit<WriteOptions, 'tagType'> = {}): Write {
     return new Write(content, { ...options, tagType: `h${level}` });
 }
 
-// Write span
+/**
+ * Write span
+ */
 export function writeSpan(content: string, options: Omit<WriteOptions, 'tagType'> = {}): Write {
     return new Write(content, { ...options, tagType: 'span' });
 }
 
-// Write div (explicit)
+/**
+ * Write div (explicit)
+ */
 export function writeDiv(content: string, options: Omit<WriteOptions, 'tagType'> = {}): Write {
     return new Write(content, { ...options, tagType: 'div' });
 }

package/lib/jux.ts

@@ -4,35 +4,36 @@
  */
 
 import { state } from './reactivity/state.js';
+import { Guard, type GuardOptions, guard } from './components/guard.js';
 import { Data, data } from './components/data.js';
 import { table, Table, type TableOptions } from './components/table.js';
 import { hero, Hero, type HeroOptions } from './components/hero.js';
 import { card, Card, type CardOptions } from './components/card.js';
 import { button, Button, type ButtonOptions } from './components/button.js';
-import { header, Header, type HeaderOptions } from './components/header.js';
-import { footer, Footer, type FooterOptions } from './components/footer.js';
-import { main, Main, type MainOptions } from './components/main.js';
-import { sidebar, Sidebar, type SidebarOptions } from './components/sidebar.js';
+import {
+  element, Element, type ElementOptions,
+  header, footer, main, aside, section, article, div, span
+} from './components/element.js';
 import { container, Container, type ContainerOptions } from './components/container.js';
 import { modal, Modal, type ModalOptions } from './components/modal.js';
 import { tabs, Tabs, type TabsOptions, type Tab } from './components/tabs.js';
 import { list, List, type ListOptions, type ListItem } from './components/list.js';
 import { menu, Menu, type MenuOptions, type MenuItem } from './components/menu.js';
 import { nav, Nav, type NavOptions, type NavItem } from './components/nav.js';
-import { chart, Chart, type ChartOptions } from './components/chart.js';
 import { view, View, type ViewOptions } from './components/view.js';
 import { code, Code, type CodeOptions } from './components/code.js';
-import { input, Input, type InputOptions } from './components/input.js';
-import { app, App, AppOptions } from './components/app.js';
+import {
+  input, Input, type InputOptions,
+  text, number, email, password, tel, url, textarea, range, date, time, color
+} from './components/input.js';
+import { app, App, type AppOptions } from './components/app.js';
 import { style, Style } from './components/style.js';
 import { script, Script } from './components/script.js';
-import { layout, Layout } from './components/layout.js';
 import { ErrorHandler } from './components/error-handler.js';
 import { include, Include } from './components/include.js';
 import { themeToggle, ThemeToggle, type ThemeToggleOptions, type Theme } from './components/theme-toggle.js';
 import { tokenCalculator, TokenCalculator, type TokenCalculatorOptions } from './components/token-calculator.js';
 import { write, Write, type WriteOptions } from './components/write.js';
-import { element, Element, type ElementOptions } from './components/element.js';
 import { alert, Alert, type AlertOptions } from './components/alert.js';
 import { loading, Loading, type LoadingOptions } from './components/loading.js';
 import { checkbox, Checkbox, type CheckboxOptions } from './components/checkbox.js';
@@ -49,33 +50,30 @@ import { fileupload, FileUpload, type FileUploadOptions } from './components/fil
 import { req, Req, type RequestInfo } from './components/req.js';
 import { heading, Heading, type HeadingOptions } from './components/heading.js';
 import { paragraph, Paragraph, type ParagraphOptions } from './components/paragraph.js';
-import { barchart, BarChart, type BarChartOptions, type BarChartDataPoint } from './components/barchart.js';
-import { areachart, AreaChart, type AreaChartOptions, type AreaChartDataPoint } from './components/areachart.js';
-import { areachartsmooth, AreaChartSmooth, type AreaChartSmoothOptions, AreaChartSmoothDataPoint } from './components/areachartsmooth.js';
-import { doughnutchart, DoughnutChart, type DoughnutChartOptions, type DoughnutChartDataPoint } from './components/doughnutchart.js';
-import { kpicard, KPICard, type KPICardOptions } from './components/kpicard.js';
 import { divider, Divider, type DividerOptions } from './components/divider.js';
 import { icon as iconComponent, Icon, type IconOptions } from './components/icon.js';
 import { renderIcon, renderEmoji } from './components/icons.js';
+import { sidebar, Sidebar, type SidebarOptions } from './components/sidebar.js';
 
-// NEW: Export chart utilities
-export * from './components/chart-types.js';
-export * from './components/chart-utils.js';
+// ✅ NEW: Chart imports from /charts folder
+import { chart, Chart, type ChartOptions } from './components/charts/lib/chart.js';
+import { barchart, BarChart, type BarChartOptions } from './components/charts/barchart.js';
+import { areachart, AreaChart, type AreaChartOptions } from './components/charts/areachart.js';
+import { doughnutchart, DoughnutChart, type DoughnutChartOptions } from './components/charts/doughnutchart.js';
+import { kpicard, KPICard, type KPICardOptions } from './components/kpicard.js';
+import type { ChartDataPoint } from './components/charts/lib/BaseChart.js';
 
 /* -------------------------
  * Type Exports
  * ------------------------- */
 
 export type {
+  GuardOptions,
   HeroOptions,
   ButtonOptions,
   ContainerOptions,
   ListOptions,
   ListItem,
-  HeaderOptions,
-  FooterOptions,
-  MainOptions,
-  SidebarOptions,
   ModalOptions,
   TabsOptions,
   Tab,
@@ -115,16 +113,13 @@ export type {
   HeadingOptions,
   ParagraphOptions,
   BarChartOptions,
-  BarChartDataPoint,
   AreaChartOptions,
-  AreaChartDataPoint,
-  AreaChartSmoothOptions,
-  AreaChartSmoothDataPoint,
   DoughnutChartOptions,
-  DoughnutChartDataPoint,
   KPICardOptions,
+  ChartDataPoint,
   DividerOptions,
-  IconOptions
+  IconOptions,
+  SidebarOptions
 };
 
 /* -------------------------
@@ -132,6 +127,7 @@ export type {
  * ------------------------- */
 
 export {
+  Guard,
   Data,
   Hero,
   Card,
@@ -139,10 +135,6 @@ export {
   Container,
   List,
   Table,
-  Header,
-  Footer,
-  Main,
-  Sidebar,
   Modal,
   Tabs,
   Menu,
@@ -154,7 +146,6 @@ export {
   App,
   Style,
   Script,
-  Layout,
   Include,
   ThemeToggle,
   TokenCalculator,
@@ -178,11 +169,11 @@ export {
   Paragraph,
   BarChart,
   AreaChart,
-  AreaChartSmooth,
   DoughnutChart,
   KPICard,
   Divider,
-  Icon
+  Icon,
+  Sidebar
 };
 
 /* -------------------------
@@ -202,6 +193,7 @@ export interface JuxAPI {
 
   // Component factories
   data: typeof data;
+  guard: typeof guard;
   table: typeof table;
   hero: typeof hero;
   card: typeof card;
@@ -210,20 +202,24 @@ export interface JuxAPI {
   footer: typeof footer;
   main: typeof main;
   sidebar: typeof sidebar;
+  aside: typeof aside;
+  section: typeof section;
+  article: typeof article;
   container: typeof container;
   modal: typeof modal;
   tabs: typeof tabs;
   list: typeof list;
   menu: typeof menu;
   nav: typeof nav;
+  div: typeof div;
+  span: typeof span;
   chart: typeof chart;
   code: typeof code;
-  input: typeof input;
+
   view: typeof view;
   app: typeof app;
   style: typeof style;
   script: typeof script;
-  layout: typeof layout;
   include: typeof include;
   themeToggle: typeof themeToggle;
   tokenCalculator: typeof tokenCalculator;
@@ -246,10 +242,23 @@ export interface JuxAPI {
   paragraph: typeof paragraph;
   barchart: typeof barchart;
   areachart: typeof areachart;
-  areachartsmooth: typeof areachartsmooth;
   doughnutchart: typeof doughnutchart;
   kpicard: typeof kpicard;
   divider: typeof divider;
+
+  // Input factories
+  input: typeof input;
+  text: typeof text;
+  number: typeof number;
+  email: typeof email;
+  password: typeof password;
+  tel: typeof tel;
+  url: typeof url;
+  textarea: typeof textarea;
+  range: typeof range;
+  date: typeof date;
+  time: typeof time;
+  color: typeof color;
 }
 
 /* -------------------------
@@ -285,6 +294,7 @@ class Jux implements JuxAPI {
 
   // Component factory methods
   data = data;
+  guard = guard;
   table = table;
   hero = hero;
   card = card;
@@ -293,6 +303,9 @@ class Jux implements JuxAPI {
   footer = footer;
   main = main;
   sidebar = sidebar;
+  aside = aside;
+  section = section;
+  article = article;
   container = container;
   modal = modal;
   tabs = tabs;
@@ -300,14 +313,14 @@ class Jux implements JuxAPI {
   menu = menu;
   code = code;
   nav = nav;
-  input = input;
-  view = view;
+  div = div;
+  span = span;
   chart = chart;
+  view = view;
   app = app;
   include = include;
   style = style;
   script = script;
-  layout = layout;
   themeToggle = themeToggle;
   tokenCalculator = tokenCalculator;
   write = write;
@@ -329,10 +342,23 @@ class Jux implements JuxAPI {
   paragraph = paragraph;
   barchart = barchart;
   areachart = areachart;
-  areachartsmooth = areachartsmooth;
   doughnutchart = doughnutchart;
   kpicard = kpicard;
   divider = divider;
+
+  // Input factories
+  input = input;
+  text = text;
+  number = number;
+  email = email;
+  password = password;
+  tel = tel;
+  url = url;
+  textarea = textarea;
+  range = range;
+  date = date;
+  time = time;
+  color = color;
 }
 /**
  * Global jux singleton instance