juxscript 1.1.2 → 1.1.4

package/lib/components/view.ts

@@ -1,190 +0,0 @@
-import { getOrCreateContainer } from './helpers.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 {
-  state: ViewState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
-
-  constructor(id: string, options: ViewOptions = {}) {
-    this._id = id;
-    this.id = id;
-
-    this.state = {
-      title: options.title ?? '',
-      description: options.description ?? '',
-      children: Array.isArray(options.children) ? [...options.children] : []
-    };
-  }
-
-  /* -------------------------
-   * 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._id);
-    }
-
-    this.container = container;
-    const { title, description, children } = this.state;
-
-    const view = document.createElement('div');
-    view.className = 'jux-view';
-    view.id = this._id;
-
-    // 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;
-
-      // Get child ID
-      let childId: string | null = null;
-      if ((child as any).id) {
-        childId = (child as any).id;
-      } else if ((child as any)._id) {
-        childId = (child as any)._id;
-      } else {
-        childId = `${this._id}-child-${i}`;
-      }
-
-      // Create wrapper for child
-      const childWrapper = document.createElement('div');
-      childWrapper.className = 'jux-view-item';
-      childWrapper.id = `${childId}-wrapper`;
-      content.appendChild(childWrapper);
-
-      // Render child INTO the wrapper
-      if (typeof (child as any).render === 'function') {
-        try {
-          // Pass the wrapper element directly
-          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>`;
-        }
-      } else {
-        // If no render method, try to append directly
-        if (child instanceof HTMLElement) {
-          childWrapper.appendChild(child);
-        }
-      }
-    }
-
-    view.appendChild(content);
-    container.appendChild(view);
-
-    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._id || typeof juxComponent._id !== 'string') {
-      throw new Error('View.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
-
-    return this.render(`#${juxComponent._id}`);
-  }
-}
-
-/**
- * Factory helper
- */
-export function view(id: string, options: ViewOptions = {}): View {
-  return new View(id, options);
-}

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/layouts/default.css

@@ -1,260 +0,0 @@
-/* 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;
-  }
-}