juxscript 1.1.70 → 1.1.72

package/lib/components/modal.ts

@@ -16,7 +16,7 @@ export interface ModalOptions {
   icon?: EmojiIconType | undefined;
   close?: boolean;
   backdropClose?: boolean;
-  position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover';
+  position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover' | 'popover-top' | 'popover-bottom' | 'popover-left' | 'popover-right';
   size?: 'small' | 'medium' | 'large';
   actions?: Array<{ label: string; variant?: string; click?: () => void } | Array<BaseComponent<any>>>;
   style?: string;
@@ -29,7 +29,7 @@ type ModalState = {
   icon: EmojiIconType | undefined;
   close: boolean;
   backdropClose: boolean;
-  position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover';
+  position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover' | 'popover-top' | 'popover-bottom' | 'popover-left' | 'popover-right';
   size: string;
   open: boolean;
   actions: Array<{ label: string; variant?: string; click?: () => void } | Array<BaseComponent<any>>>;
@@ -102,6 +102,19 @@ export class Modal extends BaseComponent<ModalState> {
         modal.className = modal.className.replace(/jux-modal-(small|medium|large)/, `jux-modal-${value}`);
         break;
 
+      case 'position':
+        // Remove existing position classes
+        this._overlay.className = this._overlay.className
+          .split(' ')
+          .filter(c => !c.startsWith('jux-modal-position-'))
+          .join(' ');
+
+        // Add new position class
+        if (value) {
+          this._overlay.classList.add(`jux-modal-position-${value}`);
+        }
+        break;
+
       case 'actions':
         this._rebuildActions();
         break;
@@ -255,6 +268,11 @@ export class Modal extends BaseComponent<ModalState> {
     return this;
   }
 
+  position(value: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover' | 'popover-top' | 'popover-bottom' | 'popover-left' | 'popover-right'): this {
+    this.state.position = value;
+    return this;
+  }
+
   actions(value: Array<{ label: string; variant?: string; click?: () => void }>): this {
     this.state.actions = value;
     return this;
@@ -357,13 +375,19 @@ export class Modal extends BaseComponent<ModalState> {
   render(targetId?: string | HTMLElement | BaseComponent<any>): this {
     const container = this._setupContainer(targetId);
 
-    const { open, title, content, icon, size, close, backdropClose, actions, style, class: className } = this.state;
+    const { open, title, content, icon, size, position, close, backdropClose, actions, style, class: className } = this.state;
     const hasOpenSync = this._syncBindings.some(b => b.property === 'open');
 
     const overlay = document.createElement('div');
     overlay.className = 'jux-modal-overlay';
     overlay.id = this._id;
     overlay.style.display = open ? 'flex' : 'none';
+
+    // Add position class
+    if (position) {
+      overlay.classList.add(`jux-modal-position-${position}`);
+    }
+
     if (className) overlay.className += ` ${className}`;
     if (style) overlay.setAttribute('style', style);
     this._overlay = overlay;

package/lib/styles/modal.css

@@ -0,0 +1,402 @@
+/* ═══════════════════════════════════════════════════════════════════
+ * MODAL BASE STYLES
+ * ═══════════════════════════════════════════════════════════════════ */
+
+/* Modal Overlay - Base positioning */
+.jux-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Modal Container */
+.jux-modal {
+  position: relative;
+  background-color: #ffffff;
+  border: 1px solid #e4e4e7;
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  width: 100%;
+  max-width: 32rem;
+  z-index: 51;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+.jux-modal-small { max-width: 24rem; }
+.jux-modal-medium { max-width: 32rem; }
+.jux-modal-large { max-width: 48rem; }
+
+/* ═══════════════════════════════════════════════════════════════════
+ * POSITION VARIANTS
+ * ═══════════════════════════════════════════════════════════════════ */
+
+/* Center (default) */
+.jux-modal-position-center {
+  align-items: center;
+  justify-content: center;
+}
+
+/* Top position */
+.jux-modal-position-top {
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 2rem;
+}
+
+.jux-modal-position-top .jux-modal {
+  animation: modalSlideDown 0.3s ease-out;
+}
+
+@keyframes modalSlideDown {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Bottom position (bottom sheet) */
+.jux-modal-position-bottom {
+  align-items: flex-end;
+  justify-content: center;
+  padding: 0;
+}
+
+.jux-modal-position-bottom .jux-modal {
+  border-radius: 0.75rem 0.75rem 0 0;
+  max-height: 90vh;
+  overflow-y: auto;
+  width: 100%;
+  max-width: 100%;
+  animation: modalSlideUp 0.3s ease-out;
+}
+
+@keyframes modalSlideUp {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Fullscreen position */
+.jux-modal-position-fullscreen {
+  align-items: stretch;
+  justify-content: stretch;
+  padding: 0;
+}
+
+.jux-modal-position-fullscreen .jux-modal {
+  max-width: 100%;
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  margin: 0;
+  max-height: 100vh;
+  animation: modalFadeIn 0.2s ease-out;
+}
+
+@keyframes modalFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * POPOVER VARIANTS (Tooltip-style)
+ * ═══════════════════════════════════════════════════════════════════ */
+
+.jux-modal-position-popover-top,
+.jux-modal-position-popover-bottom,
+.jux-modal-position-popover-left,
+.jux-modal-position-popover-right {
+  background-color: rgba(0, 0, 0, 0.2);
+  backdrop-filter: none;
+}
+
+.jux-modal-position-popover-top .jux-modal,
+.jux-modal-position-popover-bottom .jux-modal,
+.jux-modal-position-popover-left .jux-modal,
+.jux-modal-position-popover-right .jux-modal {
+  max-width: 20rem;
+  padding: 1rem;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  border-radius: 0.5rem;
+}
+
+/* Popover Top */
+.jux-modal-position-popover-top {
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 1rem;
+}
+
+.jux-modal-position-popover-top .jux-modal {
+  animation: popoverSlideDown 0.2s ease-out;
+}
+
+@keyframes popoverSlideDown {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Popover Bottom */
+.jux-modal-position-popover-bottom {
+  align-items: flex-end;
+  justify-content: center;
+  padding-bottom: 1rem;
+}
+
+.jux-modal-position-popover-bottom .jux-modal {
+  animation: popoverSlideUp 0.2s ease-out;
+}
+
+@keyframes popoverSlideUp {
+  from {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Popover Left */
+.jux-modal-position-popover-left {
+  align-items: center;
+  justify-content: flex-start;
+  padding-left: 1rem;
+}
+
+.jux-modal-position-popover-left .jux-modal {
+  animation: popoverSlideRight 0.2s ease-out;
+}
+
+@keyframes popoverSlideRight {
+  from {
+    transform: translateX(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Popover Right */
+.jux-modal-position-popover-right {
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 1rem;
+}
+
+.jux-modal-position-popover-right .jux-modal {
+  animation: popoverSlideLeft 0.2s ease-out;
+}
+
+@keyframes popoverSlideLeft {
+  from {
+    transform: translateX(10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Smaller close button for popovers */
+.jux-modal-position-popover-top .jux-modal-close,
+.jux-modal-position-popover-bottom .jux-modal-close,
+.jux-modal-position-popover-left .jux-modal-close,
+.jux-modal-position-popover-right .jux-modal-close {
+  width: 1.25rem;
+  height: 1.25rem;
+  font-size: 1rem;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * MODAL CONTENT SECTIONS
+ * ═══════════════════════════════════════════════════════════════════ */
+
+/* Header */
+.jux-modal-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0;
+  text-align: left;
+}
+
+.jux-modal-header-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: #09090b;
+  margin-top: 0.125rem;
+}
+
+.jux-modal-header-title {
+  flex: 1;
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.2;
+  color: #09090b;
+}
+
+/* Body / Content */
+.jux-modal-content {
+  padding: 0;
+  font-size: 0.875rem;
+  color: #71717a;
+  line-height: 1.5;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Footer with Actions */
+.jux-modal-footer {
+  padding: 0;
+  padding-top: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+/* Modal Action Buttons */
+.jux-modal-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  height: 2.5rem;
+  padding: 0 1rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  border: 1px solid transparent;
+}
+
+.jux-modal-action-ghost {
+  background-color: transparent;
+  color: #09090b;
+  border: none;
+}
+.jux-modal-action-ghost:hover {
+  background-color: #f4f4f5;
+  color: #18181b;
+}
+
+.jux-modal-action-secondary {
+  border: 1px solid #e4e4e7;
+  background-color: #ffffff;
+  color: #09090b;
+}
+.jux-modal-action-secondary:hover {
+  background-color: #f4f4f5;
+  color: #18181b;
+}
+
+.jux-modal-action-primary {
+  background-color: #18181b;
+  color: #fafafa;
+  border: none;
+}
+.jux-modal-action-primary:hover {
+  background-color: #27272a;
+}
+
+.jux-modal-action-destructive {
+  background-color: #ef4444;
+  color: #ffffff;
+  border: none;
+}
+.jux-modal-action-destructive:hover {
+  background-color: #dc2626;
+}
+
+/* Close Button (X) */
+.jux-modal-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  border-radius: 0.125rem;
+  opacity: 0.7;
+  transition: opacity 0.15s ease;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: #71717a;
+  padding: 0.25rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.jux-modal-close:hover {
+  opacity: 1;
+  color: #09090b;
+}
+
+.jux-modal-close:focus-visible {
+  outline: 2px solid #18181b;
+  outline-offset: 2px;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * RESPONSIVE ADJUSTMENTS
+ * ═══════════════════════════════════════════════════════════════════ */
+
+@media (max-width: 640px) {
+  .jux-modal-position-top,
+  .jux-modal-position-center {
+    padding: 1rem;
+  }
+
+  .jux-modal-position-bottom .jux-modal {
+    max-height: 95vh;
+  }
+
+  .jux-modal-position-popover-top .jux-modal,
+  .jux-modal-position-popover-bottom .jux-modal,
+  .jux-modal-position-popover-left .jux-modal,
+  .jux-modal-position-popover-right .jux-modal {
+    max-width: calc(100vw - 2rem);
+  }
+}

package/machinery/build3.js

@@ -35,7 +35,8 @@ const defaults = {
 // Resolve absolute paths
 const paths = {
     source: path.resolve(PROJECT_ROOT, directories.source),
-    distribution: path.resolve(PROJECT_ROOT, directories.distribution)
+    distribution: path.resolve(PROJECT_ROOT, directories.distribution),
+    public: path.resolve(PROJECT_ROOT, 'public') // ✅ Add public path
 };
 
 // ═══════════════════════════════════════════════════════════════
@@ -52,6 +53,13 @@ if (fs.existsSync(paths.source)) {
     process.exit(1);
 }
 
+// ✅ Show public folder status
+if (fs.existsSync(paths.public)) {
+    console.log(`   ✓ public: ${paths.public}`);
+} else {
+    console.log(`   ℹ public: ${paths.public} (optional, not found)`);
+}
+
 // ═══════════════════════════════════════════════════════════════
 // RUN BUILD
 // ═══════════════════════════════════════════════════════════════

package/machinery/compiler3.js

@@ -430,6 +430,9 @@ navigate(location.pathname);
         }
         fs.mkdirSync(this.distDir, { recursive: true });
 
+        // ✅ Copy public folder if exists
+        this.copyPublicFolder();
+
         const { views, dataModules, sharedModules } = this.scanFiles();
         console.log(`📁 Found ${views.length} views, ${sharedModules.length} shared, ${dataModules.length} data`);
 
@@ -497,4 +500,81 @@ navigate(location.pathname);
         console.log(`\n✅ Build Complete!\n`);
         return { success: true, errors: [], warnings: validation.warnings };
     }
+
+    /**
+     * Copy public folder contents to dist
+     */
+    copyPublicFolder() {
+        const projectRoot = process.cwd();
+        const publicSrc = path.resolve(projectRoot, 'public');
+
+        if (!fs.existsSync(publicSrc)) {
+            return; // No public folder, skip
+        }
+
+        console.log('📦 Copying public assets...');
+
+        try {
+            this._copyDirRecursive(publicSrc, this.distDir, 0);
+            console.log('✅ Public assets copied');
+        } catch (err) {
+            console.warn('⚠️  Error copying public folder:', err.message);
+        }
+    }
+
+    /**
+     * Recursively copy directory contents
+     */
+    _copyDirRecursive(src, dest, depth = 0) {
+        const entries = fs.readdirSync(src, { withFileTypes: true });
+
+        entries.forEach(entry => {
+            // Skip hidden files and directories
+            if (entry.name.startsWith('.')) return;
+
+            const srcPath = path.join(src, entry.name);
+            const destPath = path.join(dest, entry.name);
+
+            if (entry.isDirectory()) {
+                // Create directory and recurse
+                if (!fs.existsSync(destPath)) {
+                    fs.mkdirSync(destPath, { recursive: true });
+                }
+                this._copyDirRecursive(srcPath, destPath, depth + 1);
+            } else {
+                // Copy file
+                fs.copyFileSync(srcPath, destPath);
+
+                // Log files at root level only
+                if (depth === 0) {
+                    const ext = path.extname(entry.name);
+                    const icon = this._getFileIcon(ext);
+                    console.log(`   ${icon} ${entry.name}`);
+                }
+            }
+        });
+    }
+
+    /**
+     * Get icon for file type
+     */
+    _getFileIcon(ext) {
+        const icons = {
+            '.html': '📄',
+            '.css': '🎨',
+            '.js': '📜',
+            '.json': '📋',
+            '.png': '🖼️',
+            '.jpg': '🖼️',
+            '.jpeg': '🖼️',
+            '.gif': '🖼️',
+            '.svg': '🎨',
+            '.ico': '🔖',
+            '.woff': '🔤',
+            '.woff2': '🔤',
+            '.ttf': '🔤',
+            '.eot': '🔤'
+        };
+        return icons[ext.toLowerCase()] || '📦';
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.70",
+  "version": "1.1.72",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",