juxscript 1.0.62 → 1.0.64

package/lib/components/write.ts

@@ -1,272 +0,0 @@
-/**
- * Write - Simple content writer with no component tracking
- * Perfect for quick HTML output without ID management
- */
-
-export interface WriteOptions {
-    tagType?: string;
-    className?: string;
-    style?: string;
-    attributes?: Record<string, string>;
-    html?: boolean; // If true, treat content as HTML; if false, treat as text
-}
-
-/**
- * Write content directly to a target element
- * 
- * Usage:
- *   // Write text (defaults to body)
- *   jux.write('Hello World!').render();
- *   
- *   // Write to specific target
- *   jux.write('Content').render('#container');
- *   
- *   // Write HTML
- *   jux.write('<strong>Bold text</strong>').html(true).render('#container');
- *   
- *   // Write with styling
- *   jux.write('Styled text').style('color: red;').render('#container');
- */
-export class Write {
-    private content: string;
-    private options: WriteOptions;
-
-    constructor(content: string, options: WriteOptions = {}) {
-        this.content = content;
-        this.options = {
-            tagType: 'div',
-            className: '',
-            style: '',
-            attributes: {},
-            html: false,
-            ...options
-        };
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    /**
-     * Set HTML mode (treat content as HTML)
-     */
-    html(enabled: boolean = true): this {
-        this.options.html = enabled;
-        return this;
-    }
-
-    /**
-     * Set tag type
-     */
-    tagType(value: string): this {
-        this.options.tagType = value;
-        return this;
-    }
-
-    /**
-     * Set CSS class
-     */
-    className(value: string): this {
-        this.options.className = value;
-        return this;
-    }
-
-    /**
-     * Set inline styles
-     */
-    style(value: string): this {
-        this.options.style = value;
-        return this;
-    }
-
-    /**
-     * Set custom attributes
-     */
-    attrs(attributes: Record<string, string>): this {
-        this.options.attributes = attributes;
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER METHODS
-     * ═════════════════════════════════════════════════════════════════ */
-
-    /**
-     * Render content to target element
-     */
-    render(targetSelector?: string): this {
-        const target = this._getTarget(targetSelector);
-        if (!target) return this;
-
-        const element = this._createElement();
-        target.appendChild(element);
-
-        return this;
-    }
-
-    /**
-     * Replace target content (clear first, then render)
-     */
-    replace(targetSelector?: string): this {
-        const target = this._getTarget(targetSelector);
-        if (!target) return this;
-
-        target.innerHTML = '';
-        const element = this._createElement();
-        target.appendChild(element);
-
-        return this;
-    }
-
-    /**
-     * Render before target element
-     */
-    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 = this._createElement();
-        target.parentNode?.insertBefore(element, target);
-
-        return this;
-    }
-
-    /**
-     * Render after target element
-     */
-    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 = this._createElement();
-        target.parentNode?.insertBefore(element, target.nextSibling);
-
-        return this;
-    }
-
-    /**
-     * Prepend to target (insert as first child)
-     */
-    prepend(targetSelector?: string): this {
-        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 "${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);
-            });
-        }
-
-        return element;
-    }
-}
-
-/**
- * Factory function - simple, no overloads
- */
-export function write(content: string, options: WriteOptions = {}): Write {
-    return new Write(content, options);
-}
-
-/* ═════════════════════════════════════════════════════════════════
- * SHORTHAND HELPERS
- * ═════════════════════════════════════════════════════════════════ */
-
-/**
- * Write text (explicit)
- */
-export function writeText(content: string, options: Omit<WriteOptions, 'html'> = {}): Write {
-    return new Write(content, { ...options, html: false });
-}
-
-/**
- * Write HTML (explicit)
- */
-export function writeHtml(content: string, options: Omit<WriteOptions, 'html'> = {}): Write {
-    return new Write(content, { ...options, html: true });
-}
-
-/**
- * Write paragraph
- */
-export function writeParagraph(content: string, options: Omit<WriteOptions, 'tagType'> = {}): Write {
-    return new Write(content, { ...options, tagType: 'p' });
-}
-
-/**
- * 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
- */
-export function writeSpan(content: string, options: Omit<WriteOptions, 'tagType'> = {}): Write {
-    return new Write(content, { ...options, tagType: 'span' });
-}
-
-/**
- * Write div (explicit)
- */
-export function writeDiv(content: string, options: Omit<WriteOptions, 'tagType'> = {}): Write {
-    return new Write(content, { ...options, tagType: 'div' });
-}
-

package/lib/jux.ts

@@ -1,365 +0,0 @@
-/**
- * Jux Runtime - Shared across all pages
- * Imports all components and provides the jux global object
- */
-
-import { state } from './reactivity/state.js';
-import { fetchAPI, type FetchConfig, type FetchResult } from './utils/fetch.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 {
-  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 { view, View, type ViewOptions } from './components/view.js';
-import { code, Code, type CodeOptions } from './components/code.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 { 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 { 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';
-import { select, Select, type SelectOptions, type SelectOption } from './components/select.js';
-import { radio, Radio, type RadioOptions, type RadioOption } from './components/radio.js';
-import { switchComponent, Switch, type SwitchOptions } from './components/switch.js';
-import { badge, Badge, type BadgeOptions } from './components/badge.js';
-import { progress, Progress, type ProgressOptions } from './components/progress.js';
-import { tooltip, Tooltip, type TooltipOptions } from './components/tooltip.js';
-import { dialog, Dialog, type DialogOptions } from './components/dialog.js';
-import { dropdown, Dropdown, type DropdownOptions, type DropdownItem } from './components/dropdown.js';
-import { datepicker, DatePicker, type DatePickerOptions } from './components/datepicker.js';
-import { fileupload, FileUpload, type FileUploadOptions } from './components/fileupload.js';
-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 { 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';
-import { grid, Grid } from './components/grid.js';
-
-
-/* -------------------------
- * Type Exports
- * ------------------------- */
-
-export type {
-  GuardOptions,
-  HeroOptions,
-  ButtonOptions,
-  ContainerOptions,
-  ListOptions,
-  ListItem,
-  ModalOptions,
-  TabsOptions,
-  Tab,
-  MenuOptions,
-  MenuItem,
-  NavOptions,
-  NavItem,
-  ViewOptions,
-  TableOptions,
-  CodeOptions,
-  InputOptions,
-  CardOptions,
-  AppOptions,
-  ThemeToggleOptions,
-  Theme,
-  TokenCalculatorOptions,
-  WriteOptions,
-  ElementOptions,
-  AlertOptions,
-  LoadingOptions,
-  CheckboxOptions,
-  SelectOptions,
-  SelectOption,
-  RadioOptions,
-  RadioOption,
-  SwitchOptions,
-  BadgeOptions,
-  ProgressOptions,
-  TooltipOptions,
-  DialogOptions,
-  DropdownOptions,
-  DropdownItem,
-  DatePickerOptions,
-  FileUploadOptions,
-  RequestInfo,
-  HeadingOptions,
-  ParagraphOptions,
-  DividerOptions,
-  IconOptions,
-  SidebarOptions
-};
-
-/* -------------------------
- * Class Exports
- * ------------------------- */
-
-export {
-  Guard,
-  Data,
-  Hero,
-  Card,
-  Button,
-  Container,
-  List,
-  Table,
-  Modal,
-  Tabs,
-  Menu,
-  Nav,
-  Code,
-  Input,
-  View,
-  App,
-  Style,
-  Script,
-  Include,
-  ThemeToggle,
-  TokenCalculator,
-  Write,
-  Element,
-  Alert,
-  Loading,
-  Checkbox,
-  Select,
-  Radio,
-  Switch,
-  Badge,
-  Progress,
-  Tooltip,
-  Dialog,
-  Dropdown,
-  DatePicker,
-  FileUpload,
-  Req,
-  Heading,
-  Paragraph,
-  Divider,
-  Icon,
-  Sidebar,
-  Grid
-};
-
-/* -------------------------
- * Jux API Interface
- * ------------------------- */
-
-export interface JuxAPI {
-  // Utility methods
-  apiUrl: string;
-  param(name: string): string | null;
-  req: typeof req;
-  fetch: typeof fetchAPI;
-
-  // Icon utilities
-  icon: typeof renderIcon;
-  emoji: typeof renderEmoji;
-  iconComponent: typeof iconComponent;
-
-  // Component factories
-  data: typeof data;
-  guard: typeof guard;
-  table: typeof table;
-  hero: typeof hero;
-  card: typeof card;
-  button: typeof button;
-  header: typeof header;
-  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;
-  code: typeof code;
-
-  view: typeof view;
-  app: typeof app;
-  style: typeof style;
-  script: typeof script;
-  include: typeof include;
-  themeToggle: typeof themeToggle;
-  tokenCalculator: typeof tokenCalculator;
-  write: typeof write;
-  element: typeof element;
-  alert: typeof alert;
-  loading: typeof loading;
-  checkbox: typeof checkbox;
-  select: typeof select;
-  radio: typeof radio;
-  switch: typeof switchComponent;
-  badge: typeof badge;
-  progress: typeof progress;
-  tooltip: typeof tooltip;
-  dialog: typeof dialog;
-  dropdown: typeof dropdown;
-  datepicker: typeof datepicker;
-  fileupload: typeof fileupload;
-  heading: typeof heading;
-  paragraph: typeof paragraph;
-  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;
-  grid: typeof grid;
-}
-
-/* -------------------------
- * Jux Singleton
- * ------------------------- */
-
-class Jux implements JuxAPI {
-  apiUrl: string = '/api/query';
-
-  /**
-   * Get URL parameter or juxContext value
-   */
-  param(name: string): string | null {
-    if (typeof window !== 'undefined' && (window as any).juxContext?.[name] !== undefined) {
-      return (window as any).juxContext[name];
-    }
-
-    if (typeof window !== 'undefined') {
-      const urlParams = new URLSearchParams(window.location.search);
-      return urlParams.get(name);
-    }
-
-    return null;
-  }
-
-  // Request utilities
-  req = req;
-
-  // Fetch utility
-  fetch = fetchAPI;
-
-  // Icon utilities
-  icon = renderIcon;
-  emoji = renderEmoji;
-  iconComponent = iconComponent;
-
-  // Component factory methods
-  data = data;
-  guard = guard;
-  table = table;
-  hero = hero;
-  card = card;
-  button = button;
-  header = header;
-  footer = footer;
-  main = main;
-  sidebar = sidebar;
-  aside = aside;
-  section = section;
-  article = article;
-  container = container;
-  modal = modal;
-  tabs = tabs;
-  list = list;
-  menu = menu;
-  code = code;
-  nav = nav;
-  div = div;
-  span = span;
-  view = view;
-  app = app;
-  include = include;
-  style = style;
-  script = script;
-  themeToggle = themeToggle;
-  tokenCalculator = tokenCalculator;
-  write = write;
-  element = element;
-  alert = alert;
-  loading = loading;
-  checkbox = checkbox;
-  select = select;
-  radio = radio;
-  switch = switchComponent;
-  badge = badge;
-  progress = progress;
-  tooltip = tooltip;
-  dialog = dialog;
-  dropdown = dropdown;
-  datepicker = datepicker;
-  fileupload = fileupload;
-  heading = heading;
-  paragraph = paragraph;
-  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;
-  grid = grid;
-}
-/**
- * Global jux singleton instance
- */
-const jux = new Jux();
-
-// Make jux available globally in browser
-if (typeof window !== 'undefined') {
-  (window as any).jux = jux;
-}
-
-/* -------------------------
- * Exports
- * ------------------------- */
-
-export {
-  jux,
-  state,
-  req,
-  ErrorHandler,
-  renderIcon,
-  renderEmoji
-};