juxscript 1.0.0

package/lib/components/view.ts

@@ -0,0 +1,174 @@
+import { Reactive, getOrCreateContainer } from './reactivity.js';
+
+/**
+ * View component options
+ */
+export interface ViewOptions {
+  title?: string;
+  description?: string;
+  children?: any[];
+}
+
+/**
+ * View component state
+ */
+type ViewState = {
+  title: string;
+  description: string;
+  children: any[];
+};
+
+/**
+ * View component - container for organizing page content
+ *
+ * Usage:
+ *   const view = jux.view('myView', {
+ *     title: 'Dashboard',
+ *     description: 'Main dashboard view'
+ *   });
+ *   view.add(component1);
+ *   await view.render();
+ */
+export class View extends Reactive {
+  state!: ViewState;
+  container: HTMLElement | null = null;
+
+  constructor(componentId: string, options: ViewOptions = {}) {
+    super();
+    this._setComponentId(componentId);
+
+    this.state = this._createReactiveState({
+      title: options.title ?? '',
+      description: options.description ?? '',
+      children: Array.isArray(options.children) ? [...options.children] : [],
+    }) as ViewState;
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  title(value: string): this {
+    this.state.title = value;
+    return this;
+  }
+
+  description(value: string): this {
+    this.state.description = value;
+    return this;
+  }
+
+  add(component: any | any[]): this {
+    if (Array.isArray(component)) {
+      this.state.children.push(...component);
+    } else {
+      this.state.children.push(component);
+    }
+    return this;
+  }
+
+  /* -------------------------
+   * Render
+   * ------------------------- */
+
+  async render(targetId?: string): Promise<this> {
+    let container: HTMLElement;
+
+    if (targetId) {
+      const target = document.querySelector(targetId);
+      if (!target || !(target instanceof HTMLElement)) {
+        throw new Error(`View: Target element "${targetId}" not found`);
+      }
+      container = target;
+    } else {
+      container = getOrCreateContainer(this._componentId) as HTMLElement;
+    }
+
+    this.container = container;
+    const { title, description, children } = this.state;
+
+    const view = document.createElement('div');
+    view.className = 'jux-view';
+    view.id = this._componentId;
+
+    // View header
+    if (title || description) {
+      const header = document.createElement('div');
+      header.className = 'jux-view-header';
+
+      if (title) {
+        const titleEl = document.createElement('h1');
+        titleEl.className = 'jux-view-title';
+        titleEl.textContent = title;
+        header.appendChild(titleEl);
+      }
+
+      if (description) {
+        const descEl = document.createElement('p');
+        descEl.className = 'jux-view-description';
+        descEl.textContent = description;
+        header.appendChild(descEl);
+      }
+
+      view.appendChild(header);
+    }
+
+    // View content
+    const content = document.createElement('div');
+    content.className = 'jux-view-content';
+
+    // Render children
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (!child) continue;
+
+      let childId = (child as any)._componentId ?? `view-child-${i}`;
+
+      const childWrapper = document.createElement('div');
+      childWrapper.className = 'jux-view-item';
+      childWrapper.id = childId;
+      content.appendChild(childWrapper);
+
+      // Event binding - render children
+      if (typeof (child as any).render === 'function') {
+        try {
+          const result = (child as any).render(childWrapper);
+          if (result && typeof (result as any).then === 'function') {
+            await result;
+          }
+        } catch (err) {
+          console.error(`View: Error rendering child ${i}:`, err);
+          childWrapper.innerHTML = `<div style="color: #ff6b6b; padding: 1rem;">Error: ${(err as Error).message}</div>`;
+        }
+      }
+    }
+
+    view.appendChild(content);
+    container.appendChild(view);
+
+    this.emit('rendered');
+    return this;
+  }
+
+  /**
+   * Render to another Jux component's container
+   */
+  async renderTo(juxComponent: any): Promise<this> {
+    if (!juxComponent || typeof juxComponent !== 'object') {
+      throw new Error('View.renderTo: Invalid component - not an object');
+    }
+
+    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
+      throw new Error('View.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    }
+
+    return this.render(`#${juxComponent._componentId}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function view(componentId: string, options: ViewOptions = {}): View {
+  return new View(componentId, options);
+}

package/lib/jux.ts

@@ -0,0 +1,203 @@
+/**
+ * Jux Runtime - Shared across all pages
+ * Imports all components and provides the jux global object
+ */
+
+import { Reactive } from './components/reactivity.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 { 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 { 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 { 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 { ErrorHandler } from './components/error-handler.js';
+import { theme, Theme } from './components/theme.js';
+
+/* -------------------------
+ * Type Exports
+ * ------------------------- */
+
+export type {
+  HeroOptions,
+  ButtonOptions,
+  ContainerOptions,
+  ListOptions,
+  ListItem,
+  HeaderOptions,
+  FooterOptions,
+  MainOptions,
+  SidebarOptions,
+  ModalOptions,
+  TabsOptions,
+  Tab,
+  MenuOptions,
+  MenuItem,
+  NavOptions,
+  NavItem,
+  ViewOptions,
+  TableOptions,
+  TableColumn,
+  ChartOptions,
+  CodeOptions,
+  InputOptions,
+  NodeOptions,
+  CardOptions,
+  CardAction
+};
+
+/* -------------------------
+ * Class Exports
+ * ------------------------- */
+
+export {
+  Reactive,
+  Data,
+  Hero,
+  Card,
+  Button,
+  Container,
+  List,
+  Table,
+  Header,
+  Footer,
+  Main,
+  Sidebar,
+  Modal,
+  Tabs,
+  Menu,
+  Nav,
+  Chart,
+  Code,
+  Input,
+  View,
+  Node,
+  App,
+  Style,
+  Script,
+  Layout,
+  Theme
+};
+
+/* -------------------------
+ * Jux Singleton
+ * ------------------------- */
+
+class Jux {
+  apiUrl: string = '/api/query';
+
+  // Utility methods
+  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;
+  }
+
+  // Component methods
+  data = data;
+  table = table;
+  hero = hero;
+  card = card;
+  button = button;
+  header = header;
+  footer = footer;
+  main = main;
+  sidebar = sidebar;
+  container = container;
+  modal = modal;
+  tabs = tabs;
+  list = list;
+  menu = menu;
+  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);
+  }
+}
+
+const jux = new 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,
+
+  ErrorHandler
+};

package/lib/layouts/default.css

@@ -0,0 +1,260 @@
+/* Default Layout Grid (Notion-style) */
+
+#app {
+  
+  display: grid;
+  grid-template-areas:
+    "header header"
+    "sidebar main"
+    "footer footer";
+  grid-template-columns: 250px 1fr;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+}
+
+/* Header */
+#appheader {
+  grid-area: header;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: var(--color-surface-elevated);
+  border-bottom: var(--border-width) solid var(--color-border);
+  display: flex;
+  align-items: center;
+  padding: var(--space-md) var(--space-lg);
+  gap: var(--space-lg);
+}
+
+#appheader-logo {
+  flex-shrink: 0;
+}
+
+#appheader-nav {
+  flex: 1;
+  display: flex;
+  gap: var(--space-md);
+}
+
+#appheader-actions {
+  flex-shrink: 0;
+  display: flex;
+  gap: var(--space-sm);
+}
+
+/* Subheader - Hidden in default layout */
+#appsubheader {
+  display: none;
+}
+
+#appsubheader-breadcrumbs,
+#appsubheader-tabs,
+#appsubheader-actions {
+  display: none;
+}
+
+/* Sidebar */
+#appsidebar {
+  grid-area: sidebar;
+  overflow-y: auto;
+  background: var(--color-surface-base);
+  border-right: var(--border-width) solid var(--color-border);
+  transition: transform var(--transition-base);
+  display: flex;
+  flex-direction: column;
+}
+
+#appsidebar-header {
+  padding: var(--space-md);
+  border-bottom: var(--border-width) solid var(--color-border);
+  flex-shrink: 0;
+}
+
+#appsidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-sm);
+}
+
+#appsidebar-footer {
+  padding: var(--space-md);
+  border-top: var(--border-width) solid var(--color-border);
+  flex-shrink: 0;
+}
+
+/* Main */
+#appmain {
+  grid-area: main;
+  overflow-y: auto;
+  padding: var(--space-xl);
+  background: var(--color-background);
+}
+
+/* Aside - Hidden in default layout */
+#appaside {
+  display: none;
+}
+
+#appaside-header,
+#appaside-content,
+#appaside-footer {
+  display: none;
+}
+
+/* Footer */
+#appfooter {
+  grid-area: footer;
+  background: var(--color-surface-elevated);
+  border-top: var(--border-width) solid var(--color-border);
+  padding: var(--space-lg) var(--space-xl);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#appfooter-content {
+  flex: 1;
+}
+
+#appfooter-legal {
+  flex-shrink: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+/* Modal */
+#appmodal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2000;
+  display: none;
+}
+
+#appmodal[aria-hidden="false"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#appmodal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+}
+
+#appmodal-container {
+  position: relative;
+  background: var(--color-surface-elevated);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-2xl);
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+#appmodal-header {
+  padding: var(--space-lg);
+  border-bottom: var(--border-width) solid var(--color-border);
+  flex-shrink: 0;
+}
+
+#appmodal-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-lg);
+}
+
+#appmodal-footer {
+  padding: var(--space-lg);
+  border-top: var(--border-width) solid var(--color-border);
+  flex-shrink: 0;
+  display: flex;
+  gap: var(--space-sm);
+  justify-content: flex-end;
+}
+
+/* Tablet (portrait) */
+@media (max-width: 1024px) {
+  #app {
+    grid-template-columns: 200px 1fr;
+  }
+  
+  #appmain {
+    padding: var(--space-lg);
+  }
+  
+  #appheader {
+    padding: var(--space-sm) var(--space-md);
+    gap: var(--space-md);
+  }
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+  #app {
+    grid-template-areas:
+      "header"
+      "main"
+      "footer";
+    grid-template-columns: 1fr;
+  }
+  
+  #appsidebar {
+    position: fixed;
+    top: 60px;
+    left: 0;
+    bottom: 0;
+    width: 280px;
+    max-width: 80vw;
+    z-index: 99;
+    transform: translateX(-100%);
+    box-shadow: var(--shadow-xl);
+  }
+  
+  #appsidebar.visible {
+    transform: translateX(0);
+  }
+  
+  #appmain {
+    padding: var(--space-md);
+  }
+  
+  #appheader {
+    padding: var(--space-xs) var(--space-md);
+  }
+  
+  #appfooter {
+    padding: var(--space-md) var(--space-lg);
+    flex-direction: column;
+    gap: var(--space-sm);
+    text-align: center;
+  }
+}
+
+/* Small mobile */
+@media (max-width: 480px) {
+  #appsidebar {
+    width: 100%;
+    max-width: 100vw;
+  }
+  
+  #appmain {
+    padding: var(--space-sm);
+  }
+  
+  #appfooter {
+    padding: var(--space-sm) var(--space-md);
+    font-size: var(--font-size-sm);
+  }
+  
+  #appmodal-container {
+    max-width: 95vw;
+    max-height: 95vh;
+  }
+}

package/lib/layouts/default.jux

@@ -0,0 +1,8 @@
+//empty layout file
+import { $hero } from '/lib/jux.js';
+
+$hero('layout-hero', {
+  title: '...Default Layout.... ',
+  subtitle: 'This is the default layout provided by JUX.',
+  description: 'You can customize this layout by creating your own layout files.'
+}).render();