juxscript 1.1.71 → 1.1.73

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

@@ -23,7 +23,8 @@ try {
 // ═══════════════════════════════════════════════════════════════
 const directories = {
     source: rawConfig.directories?.source || './jux',
-    distribution: rawConfig.directories?.distribution || './.jux-dist'
+    distribution: rawConfig.directories?.distribution || './.jux-dist',
+    public: rawConfig.directories?.public || './public' // ✅ Configurable public folder
 };
 
 const defaults = {
@@ -35,7 +36,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, directories.public) // ✅ Use configured path
 };
 
 // ═══════════════════════════════════════════════════════════════
@@ -52,6 +54,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
 // ═══════════════════════════════════════════════════════════════
@@ -60,8 +69,9 @@ console.log(`\n`);
 const compiler = new JuxCompiler({
     srcDir: paths.source,
     distDir: paths.distribution,
+    publicDir: directories.public, // ✅ Pass configured public directory name
     defaults,
-    paths
+    paths // ✅ Pass resolved paths object (includes paths.public)
 });
 
 compiler.build()

package/machinery/compiler3.js

@@ -13,6 +13,7 @@ export class JuxCompiler {
         this.config = config;
         this.srcDir = config.srcDir || './jux';
         this.distDir = config.distDir || './.jux-dist';
+        this.publicDir = config.publicDir || './public'; // ✅ Configurable public path
         this.defaults = config.defaults || {};
         this.paths = config.paths || {};
         this._juxscriptExports = null;
@@ -430,6 +431,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 +501,83 @@ navigate(location.pathname);
         console.log(`\n✅ Build Complete!\n`);
         return { success: true, errors: [], warnings: validation.warnings };
     }
+
+    /**
+     * Copy public folder contents to dist
+     */
+    copyPublicFolder() {
+        // ✅ Use configured public path or resolve from paths object
+        const publicSrc = this.paths.public 
+            ? this.paths.public 
+            : path.resolve(process.cwd(), this.publicDir);
+
+        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.71",
+  "version": "1.1.73",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",