juxscript 1.0.3 → 1.0.5

package/lib/jux.ts

@@ -3,11 +3,11 @@
  * Imports all components and provides the jux global object
  */
 
-import { Reactive } from './components/reactivity.js';
+import { state } from './reactivity/state.js';
 import { Data, data } from './components/data.js';
 import { table, Table, type TableOptions, type TableColumn } from './components/table.js';
 import { hero, Hero, type HeroOptions } from './components/hero.js';
-import { card, Card, type CardOptions, type CardAction } from './components/card.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';
@@ -23,13 +23,34 @@ 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 { node, Node, type NodeOptions } from './components/node.js';
-import { App } from './components/app.js';
-import { Style } from './components/style.js';
-import { Script } from './components/script.js';
-import { Layout } from './components/layout.js';
+import { app, App, 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 { theme, Theme } from './components/theme.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';
+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 { barchart, BarChart, type BarChartOptions, type BarChartDataPoint } from './components/barchart.js';
+
 
 /* -------------------------
  * Type Exports
@@ -58,9 +79,34 @@ export type {
   ChartOptions,
   CodeOptions,
   InputOptions,
-  NodeOptions,
   CardOptions,
-  CardAction
+  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,
+  BarChartOptions,
+  BarChartDataPoint
 };
 
 /* -------------------------
@@ -68,7 +114,6 @@ export type {
  * ------------------------- */
 
 export {
-  Reactive,
   Data,
   Hero,
   Card,
@@ -88,22 +133,101 @@ export {
   Code,
   Input,
   View,
-  Node,
   App,
   Style,
   Script,
   Layout,
-  Theme
+  Include,
+  ThemeToggle,
+  TokenCalculator,
+  Write,
+  Element,
+  Alert,
+  Loading,
+  Checkbox,
+  Select,
+  Radio,
+  Switch,
+  Badge,
+  Progress,
+  Tooltip,
+  Dialog,
+  Dropdown,
+  DatePicker,
+  FileUpload,
+  Req,
+  Heading,
+  Paragraph,
+  BarChart
 };
 
+/* -------------------------
+ * Jux API Interface
+ * ------------------------- */
+
+export interface JuxAPI {
+  // Utility methods
+  apiUrl: string;
+  param(name: string): string | null;
+  req: typeof req;
+
+  // Component factories
+  data: typeof data;
+  table: typeof table;
+  hero: typeof hero;
+  card: typeof card;
+  button: typeof button;
+  header: typeof header;
+  footer: typeof footer;
+  main: typeof main;
+  sidebar: typeof sidebar;
+  container: typeof container;
+  modal: typeof modal;
+  tabs: typeof tabs;
+  list: typeof list;
+  menu: typeof menu;
+  nav: typeof nav;
+  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;
+  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;
+  barchart: typeof barchart;
+}
+
 /* -------------------------
  * Jux Singleton
  * ------------------------- */
 
-class Jux {
+class Jux implements JuxAPI {
   apiUrl: string = '/api/query';
 
-  // Utility methods
+  /**
+   * 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];
@@ -117,7 +241,10 @@ class Jux {
     return null;
   }
 
-  // Component methods
+  // Request utilities
+  req = req;
+
+  // Component factory methods
   data = data;
   table = table;
   hero = hero;
@@ -135,69 +262,52 @@ class Jux {
   code = code;
   nav = nav;
   input = input;
-  node = node;
   view = view;
   chart = chart;
-  theme = theme;
-
-  // App-level configuration methods
-  app(): App {
-    return new App();
-  }
-
-  style(contentOrUrl: string): Style {
-    return new Style(contentOrUrl);
-  }
-
-  script(contentOrSrc: string): Script {
-    return new Script(contentOrSrc);
-  }
-
-  layout(juxFile: string): Layout {
-    return new Layout(juxFile);
-  }
+  app = app;
+  include = include;
+  style = style;
+  script = script;
+  layout = layout;
+  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;
+  barchart = barchart;
 }
 
+/**
+ * Global jux singleton instance
+ */
 const jux = new Jux();
 
+// Make jux available globally in browser
+if (typeof window !== 'undefined') {
+  (window as any).jux = jux;
+}
+
 /* -------------------------
  * Exports
- * 
- * ⚠️  IMPORTANT: When adding a new component:
- *     1. Import it at the top
- *     2. Add to Jux class as a method
- *     3. Export as $ alias below
- *     4. Update machinery/compiler → COMPONENT_ALIASES array
  * ------------------------- */
 
 export {
   jux,
-  // $ aliases - just re-export the factory functions
-  table as $table,
-  hero as $hero,
-  card as $card,
-  button as $button,
-  header as $header,
-  footer as $footer,
-  main as $main,
-  sidebar as $sidebar,
-  container as $container,
-  modal as $modal,
-  tabs as $tabs,
-  list as $list,
-  menu as $menu,
-  code as $code,
-  nav as $nav,
-  input as $input,
-  node as $node,
-  view as $view,
-  chart as $chart,
-  data as $data,
-  App as $app,
-  Style as $style,
-  Script as $script,
-  Layout as $layout,
-  theme as $theme,
-
+  state,
+  req,
   ErrorHandler
 };