juxscript 1.1.115 → 1.1.117

package/dom-structure-map.json

@@ -1,6 +1,6 @@
 {
   "totalComponents": 69,
-  "generatedAt": "2026-02-13T03:14:49.691Z",
+  "generatedAt": "2026-02-13T04:55:13.466Z",
   "components": [
     {
       "file": "alert.js",

package/lib/components/base/LayoutExtensions.d.ts

@@ -63,6 +63,13 @@ export interface LayoutExtensions {
     flexShrink(value: string | number): this;
     flexBasis(value: string): this;
     alignSelf(value: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'): this;
+    flexDirection(value: 'row' | 'column' | 'row-reverse' | 'column-reverse'): this;
+    flexWrap(value: 'nowrap' | 'wrap' | 'wrap-reverse'): this;
+    alignItems(value: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'): this;
+    justifyContent(value: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'): this;
+    gap(value: string): this;
+    rowGap(value: string): this;
+    columnGap(value: string): this;
     transform(value: string): this;
     transformOrigin(value: string): this;
     rotate(degrees: number): this;

package/lib/components/base/LayoutExtensions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutExtensions.d.ts","sourceRoot":"","sources":["LayoutExtensions.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"LayoutExtensions.d.ts","sourceRoot":"","sources":["LayoutExtensions.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,WAAW,gBAAgB;IAE7B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAGpC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAG/B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,IAAI,CAAC;IAG5E,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAGtC,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IACjE,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAC7D,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAI3D,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAGtC,QAAQ,CAAC,KAAK,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAC;IAC/E,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAGrC,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,IAAI,CAAC;IAChE,SAAS,CAAC,KAAK,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,IAAI,CAAC;IACjE,SAAS,CAAC,KAAK,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,IAAI,CAAC;IAGjE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAGrF,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACvC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACzC,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC;IAE/F,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,GAAG,IAAI,CAAC;IAChF,QAAQ,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,GAAG,cAAc,GAAG,IAAI,CAAC;IAC1D,UAAU,CAAC,KAAK,EAAE,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC;IACvF,cAAc,CAAC,KAAK,EAAE,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,IAAI,CAAC;IACtH,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAG/B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,KAAK,IAAI,IAAI,CAAC;IACd,KAAK,IAAI,IAAI,CAAC;IACd,QAAQ,IAAI,IAAI,CAAC;IAGjB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAG/B,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC5C,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;IAG1D,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACzC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;IAChE,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACzC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,WAAW,GAAG,IAAI,CAAC;IAC9E,UAAU,CAAC,KAAK,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,GAAG,IAAI,CAAC;IAC/E,QAAQ,CAAC,KAAK,EAAE,QAAQ,GAAG,YAAY,GAAG,IAAI,CAAC;CAClD;AAsCD;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,aAAa,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC,GAAG,CAAC,GAAG,gBAAgB,CAsKtG"}

package/lib/components/base/LayoutExtensions.js

@@ -134,6 +134,14 @@ export function applyLayoutExtensions(component) {
     ext.flexShrink = (v) => { addInlineStyle(component, 'flex-shrink', String(v)); return ext; };
     ext.flexBasis = (v) => { addInlineStyle(component, 'flex-basis', v); return ext; };
     ext.alignSelf = (v) => { addInlineStyle(component, 'align-self', v); return ext; };
+    // ✅ NEW flex container properties
+    ext.flexDirection = (v) => { addInlineStyle(component, 'flex-direction', v); return ext; };
+    ext.flexWrap = (v) => { addInlineStyle(component, 'flex-wrap', v); return ext; };
+    ext.alignItems = (v) => { addInlineStyle(component, 'align-items', v); return ext; };
+    ext.justifyContent = (v) => { addInlineStyle(component, 'justify-content', v); return ext; };
+    ext.gap = (v) => { addInlineStyle(component, 'gap', v); return ext; };
+    ext.rowGap = (v) => { addInlineStyle(component, 'row-gap', v); return ext; };
+    ext.columnGap = (v) => { addInlineStyle(component, 'column-gap', v); return ext; };
     // Transform
     ext.transform = (v) => { addInlineStyle(component, 'transform', v); return ext; };
     ext.transformOrigin = (v) => { addInlineStyle(component, 'transform-origin', v); return ext; };

package/lib/components/base/LayoutExtensions.ts

@@ -85,6 +85,14 @@ export interface LayoutExtensions {
     flexShrink(value: string | number): this;
     flexBasis(value: string): this;
     alignSelf(value: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'): this;
+    // ✅ NEW flex container properties
+    flexDirection(value: 'row' | 'column' | 'row-reverse' | 'column-reverse'): this;
+    flexWrap(value: 'nowrap' | 'wrap' | 'wrap-reverse'): this;
+    alignItems(value: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'): this;
+    justifyContent(value: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'): this;
+    gap(value: string): this;
+    rowGap(value: string): this;
+    columnGap(value: string): this;
 
     // Transform (inline styles)
     transform(value: string): this;
@@ -275,6 +283,15 @@ export function applyLayoutExtensions<T extends BaseComponent<any>>(component: T
     ext.flexBasis = (v) => { addInlineStyle(component, 'flex-basis', v); return ext; };
     ext.alignSelf = (v) => { addInlineStyle(component, 'align-self', v); return ext; };
 
+    // ✅ NEW flex container properties
+    ext.flexDirection = (v) => { addInlineStyle(component, 'flex-direction', v); return ext; };
+    ext.flexWrap = (v) => { addInlineStyle(component, 'flex-wrap', v); return ext; };
+    ext.alignItems = (v) => { addInlineStyle(component, 'align-items', v); return ext; };
+    ext.justifyContent = (v) => { addInlineStyle(component, 'justify-content', v); return ext; };
+    ext.gap = (v) => { addInlineStyle(component, 'gap', v); return ext; };
+    ext.rowGap = (v) => { addInlineStyle(component, 'row-gap', v); return ext; };
+    ext.columnGap = (v) => { addInlineStyle(component, 'column-gap', v); return ext; };
+
     // Transform
     ext.transform = (v) => { addInlineStyle(component, 'transform', v); return ext; };
     ext.transformOrigin = (v) => { addInlineStyle(component, 'transform-origin', v); return ext; };

package/lib/styles/nav.css

@@ -0,0 +1,322 @@
+/* ═══════════════════════════════════════════════════════════════════
+ * NAV COMPONENT STYLES
+ * Modern navigation with horizontal/vertical layouts
+ * ═══════════════════════════════════════════════════════════════════ */
+
+/* Base Nav Container */
+.jux-nav {
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+/* Nav Items Container */
+.jux-nav-items {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: 0;
+}
+
+/* Individual Nav Item Wrapper */
+.jux-nav-item-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+/* Nav Links */
+.jux-nav-link {
+    display: inline-flex;
+    align-items: center;
+    padding: 8px 20px;
+    color: #374151; /* gray-700 */
+    font-weight: 500;
+    font-size: 15px;
+    text-decoration: none;
+    transition: all 0.2s ease;
+    border-radius: 6px;
+    position: relative;
+}
+
+.jux-nav-link:hover {
+    color: #7c3aed; /* purple-600 */
+    background-color: rgba(124, 58, 237, 0.05);
+}
+
+.jux-nav-link:active {
+    transform: scale(0.98);
+}
+
+/* Active/Current Link State */
+.jux-nav-link.active,
+.jux-nav-link[aria-current="page"] {
+    color: #7c3aed;
+    font-weight: 600;
+}
+
+/* Underline effect on hover */
+.jux-nav-link::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 2px;
+    background-color: #7c3aed;
+    transform: translateX(-50%);
+    transition: width 0.3s ease;
+}
+
+.jux-nav-link:hover::after,
+.jux-nav-link.active::after {
+    width: 80%;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * HORIZONTAL NAV (Default)
+ * ═══════════════════════════════════════════════════════════════════ */
+
+.jux-nav-horizontal .jux-nav-items {
+    flex-direction: row;
+    gap: 8px;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * VERTICAL NAV
+ * ═══════════════════════════════════════════════════════════════════ */
+
+.jux-nav-vertical {
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.jux-nav-vertical .jux-nav-items {
+    flex-direction: column;
+    gap: 4px;
+    width: 100%;
+}
+
+.jux-nav-vertical .jux-nav-item-wrapper {
+    width: 100%;
+}
+
+.jux-nav-vertical .jux-nav-link {
+    width: 100%;
+    justify-content: flex-start;
+}
+
+.jux-nav-vertical .jux-nav-link::after {
+    display: none; /* No underline in vertical mode */
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * SIZE VARIANTS
+ * ═══════════════════════════════════════════════════════════════════ */
+
+/* Small Nav */
+.jux-nav-sm .jux-nav-link {
+    padding: 6px 14px;
+    font-size: 13px;
+}
+
+/* Large Nav */
+.jux-nav-lg .jux-nav-link {
+    padding: 12px 24px;
+    font-size: 16px;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * STYLE VARIANTS
+ * ═══════════════════════════════════════════════════════════════════ */
+
+/* Pills Style */
+.jux-nav-pills .jux-nav-link {
+    border-radius: 50px;
+}
+
+.jux-nav-pills .jux-nav-link:hover,
+.jux-nav-pills .jux-nav-link.active {
+    background-color: #7c3aed;
+    color: white;
+}
+
+.jux-nav-pills .jux-nav-link::after {
+    display: none; /* No underline for pills */
+}
+
+/* Tabs Style */
+.jux-nav-tabs {
+    border-bottom: 2px solid #e5e7eb;
+}
+
+.jux-nav-tabs .jux-nav-link {
+    border-radius: 0;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -2px;
+    padding-bottom: 10px;
+}
+
+.jux-nav-tabs .jux-nav-link::after {
+    display: none;
+}
+
+.jux-nav-tabs .jux-nav-link:hover {
+    background-color: transparent;
+    border-bottom-color: #d1d5db;
+}
+
+.jux-nav-tabs .jux-nav-link.active {
+    border-bottom-color: #7c3aed;
+    background-color: transparent;
+}
+
+/* Minimal Style (no background on hover) */
+.jux-nav-minimal .jux-nav-link:hover {
+    background-color: transparent;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * DROPDOWN SUPPORT
+ * ═══════════════════════════════════════════════════════════════════ */
+
+.jux-nav-item-wrapper.has-dropdown {
+    position: relative;
+}
+
+.jux-nav-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    min-width: 200px;
+    margin-top: 8px;
+    padding: 8px;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-10px);
+    transition: all 0.2s ease;
+    z-index: 1000;
+}
+
+.jux-nav-item-wrapper.has-dropdown:hover .jux-nav-dropdown,
+.jux-nav-item-wrapper.has-dropdown:focus-within .jux-nav-dropdown {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.jux-nav-dropdown-item {
+    display: block;
+    padding: 10px 16px;
+    color: #374151;
+    text-decoration: none;
+    border-radius: 6px;
+    transition: all 0.15s ease;
+}
+
+.jux-nav-dropdown-item:hover {
+    background-color: rgba(124, 58, 237, 0.08);
+    color: #7c3aed;
+}
+
+/* Dropdown Arrow Indicator */
+.jux-nav-link.has-dropdown-arrow::after {
+    content: '▼';
+    margin-left: 6px;
+    font-size: 10px;
+    transition: transform 0.2s ease;
+}
+
+.jux-nav-item-wrapper.has-dropdown:hover .jux-nav-link.has-dropdown-arrow::after {
+    transform: rotate(180deg);
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * MOBILE RESPONSIVE
+ * ═══════════════════════════════════════════════════════════════════ */
+
+@media (max-width: 768px) {
+    .jux-nav-horizontal.jux-nav-mobile-vertical .jux-nav-items {
+        flex-direction: column;
+        width: 100%;
+        gap: 4px;
+    }
+
+    .jux-nav-horizontal.jux-nav-mobile-vertical .jux-nav-item-wrapper {
+        width: 100%;
+    }
+
+    .jux-nav-horizontal.jux-nav-mobile-vertical .jux-nav-link {
+        width: 100%;
+        justify-content: flex-start;
+    }
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * DARK MODE SUPPORT
+ * ═══════════════════════════════════════════════════════════════════ */
+
+.dark .jux-nav-link {
+    color: #d1d5db; /* gray-300 */
+}
+
+.dark .jux-nav-link:hover {
+    color: #a78bfa; /* purple-400 */
+    background-color: rgba(167, 139, 250, 0.1);
+}
+
+.dark .jux-nav-link.active {
+    color: #a78bfa;
+}
+
+.dark .jux-nav-tabs {
+    border-bottom-color: #374151;
+}
+
+.dark .jux-nav-dropdown {
+    background: #1f2937;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+}
+
+.dark .jux-nav-dropdown-item {
+    color: #d1d5db;
+}
+
+.dark .jux-nav-dropdown-item:hover {
+    background-color: rgba(167, 139, 250, 0.15);
+    color: #a78bfa;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * ANIMATIONS
+ * ═══════════════════════════════════════════════════════════════════ */
+
+@keyframes nav-fade-in {
+    from {
+        opacity: 0;
+        transform: translateY(-5px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.jux-nav-items.animate-in {
+    animation: nav-fade-in 0.3s ease-out;
+}
+
+.jux-nav-item-wrapper {
+    animation: nav-fade-in 0.3s ease-out backwards;
+}
+
+.jux-nav-item-wrapper:nth-child(1) { animation-delay: 0ms; }
+.jux-nav-item-wrapper:nth-child(2) { animation-delay: 50ms; }
+.jux-nav-item-wrapper:nth-child(3) { animation-delay: 100ms; }
+.jux-nav-item-wrapper:nth-child(4) { animation-delay: 150ms; }
+.jux-nav-item-wrapper:nth-child(5) { animation-delay: 200ms; }
+.jux-nav-item-wrapper:nth-child(6) { animation-delay: 250ms; }

package/lib/styles/stacks.css

@@ -7,7 +7,6 @@
 .jux-vstack {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
 }
 
 .jux-vstack-tight { gap: 0.5rem; }
@@ -19,7 +18,6 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 1rem;
 }
 
 .jux-hstack-tight { gap: 0.5rem; }

package/machinery/compiler3.js

@@ -568,176 +568,672 @@ navigate(location.pathname);
     }
 
     /**
-     * ✅ Build method with source copy step
+     * Copy ONLY public assets (CSS, images, fonts) to dist
+     * ❌ Does NOT copy .jux files (they are compiled separately)
+     */
+    async copyPublicAssets() {
+        const { publicDir, distDir, paths } = this.config;
+
+        // Resolve public folder path
+        const publicPath = paths?.public || path.resolve(this.config.srcDir, '..', publicDir);
+
+        if (!fs.existsSync(publicPath)) {
+            console.log(`ℹ️  No public folder found at ${publicPath}, skipping asset copy`);
+            return;
+        }
+
+        console.log(`📦 Copying public assets from ${publicPath}...`);
+
+        // ✅ ONLY copy known asset file types
+        const assetTypes = [
+            '.css', '.scss', '.sass', '.less',           // Stylesheets
+            '.jpg', '.jpeg', '.png', '.gif', '.svg',     // Images
+            '.ico', '.webp', '.avif',                     // Icons/modern images
+            '.woff', '.woff2', '.ttf', '.eot', '.otf',   // Fonts
+            '.mp4', '.webm', '.ogg',                      // Video
+            '.mp3', '.wav', '.m4a',                       // Audio
+            '.pdf', '.txt', '.json', '.xml'               // Documents
+        ];
+
+        const copyRecursive = (src, dest) => {
+            if (!fs.existsSync(src)) return;
+
+            const entries = fs.readdirSync(src, { withFileTypes: true });
+
+            for (const entry of entries) {
+                const srcPath = path.join(src, entry.name);
+                const destPath = path.join(dest, entry.name);
+
+                if (entry.isDirectory()) {
+                    fs.mkdirSync(destPath, { recursive: true });
+                    copyRecursive(srcPath, destPath);
+                } else {
+                    const ext = path.extname(entry.name).toLowerCase();
+
+                    // ✅ ONLY copy known asset types
+                    // ❌ SKIP .jux files (they're bundled into entry.js)
+                    if (assetTypes.includes(ext)) {
+                        fs.copyFileSync(srcPath, destPath);
+                        console.log(`   ✓ ${entry.name}`);
+                    } else if (ext === '.jux') {
+                        // Silently skip .jux files
+                        continue;
+                    } else {
+                        // Warn about unknown file types
+                        console.warn(`   ⚠️  Skipped: ${entry.name} (unknown type: ${ext})`);
+                    }
+                }
+            }
+        };
+
+        copyRecursive(publicPath, distDir);
+    }
+
+    /**
+     * Main build pipeline
      */
     async build() {
-        console.log('🔨 Building JUX application...\n');
+        console.log('🔨 Building JUX project...\n');
 
         try {
-            const startTime = Date.now();
+            // 1. Clean dist
+            if (fs.existsSync(this.config.distDir)) {
+                fs.rmSync(this.config.distDir, { recursive: true, force: true });
+            }
+            fs.mkdirSync(this.config.distDir, { recursive: true });
 
-            // Scan files
-            const { views, dataModules, sharedModules } = this.scanFiles();
+            // 2. Scan .jux files
+            const juxFiles = this.scanJuxFiles(this.config.srcDir);
+            console.log(`📂 Found ${juxFiles.length} .jux files\n`);
 
-            console.log(`📂 Found ${views.length} views, ${dataModules.length} data modules, ${sharedModules.length} shared modules\n`);
+            // 3. ✅ Bundle all .jux files → entry.js
+            await this.bundleJuxFiles(juxFiles);
 
-            // Load juxscript exports for validation
-            await this.loadJuxscriptExports();
+            // 4. ✅ Bundle vendor libraries → bundle.js
+            await this.bundleVendorFiles();
 
-            // Ensure dist directory exists
-            if (!fs.existsSync(this.distDir)) {
-                fs.mkdirSync(this.distDir, { recursive: true });
-            }
+            // 5. Copy public assets (CSS, images, etc.)
+            await this.copyPublicAssets();
+
+            // 6. Generate index.html (with entry.js + bundle.js)
+            await this.generateIndexHtml();
+
+            console.log('\n✅ Build completed successfully!\n');
+            console.log(`📁 Output: ${this.config.distDir}`);
+            console.log(`   ✓ entry.js (${juxFiles.length} .jux files bundled)`);
+            console.log(`   ✓ bundle.js (vendor libraries)`);
+            console.log(`   ✓ index.html`);
+            console.log(`   ✓ Public assets copied\n`);
 
-            // ✅ Copy source files to dist/jux BEFORE generating entry point
-            console.log('📋 Copying source files to dist...');
-            this._copySourceToDist();
-            console.log('✅ Source files copied\n');
-
-            // Generate entry point
-            const entryCode = this.generateEntryPoint(views, dataModules, sharedModules);
-            const entryPath = path.join(this.distDir, 'entry.js');
-            fs.writeFileSync(entryPath, entryCode);
-
-            // Bundle with esbuild
-            console.log('📦 Bundling with esbuild...');
-            await esbuild.build({
-                entryPoints: [entryPath],
-                bundle: true,
-                format: 'esm',
-                outfile: path.join(this.distDir, 'bundle.js'),
-                platform: 'browser',
-                target: 'es2020',
-                sourcemap: true,
-                external: [],
-                // ✅ Tell esbuild how to resolve .jux files
-                loader: {
-                    '.jux': 'js' // Treat .jux files as JavaScript
+            return { success: true };
+
+        } catch (error) {
+            console.error('\n❌ Build failed:', error.message);
+            console.error(error.stack);
+            return { success: false, error };
+        }
+    }
+
+    /**
+     * Scan for .jux files ONLY in source directory
+     */
+    scanJuxFiles(dir) {
+        const juxFiles = [];
+
+        const scan = (currentDir) => {
+            const entries = fs.readdirSync(currentDir, { withFileTypes: true });
+
+            for (const entry of entries) {
+                const fullPath = path.join(currentDir, entry.name);
+
+                if (entry.isDirectory()) {
+                    scan(fullPath);
+                } else if (entry.name.endsWith('.jux')) {
+                    juxFiles.push(fullPath);
                 }
+            }
+        };
+
+        scan(dir);
+        return juxFiles;
+    }
+
+    /**
+     * Compile a single .jux file to .js
+     */
+    async compileFile(juxFilePath) {
+        const relativePath = path.relative(this.config.srcDir, juxFilePath);
+        const outputPath = path.join(this.config.distDir, relativePath.replace(/\.jux$/, '.js'));
+
+        // Ensure output directory exists
+        fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+
+        // Read .jux source
+        const juxCode = fs.readFileSync(juxFilePath, 'utf8');
+
+        // Compile to JavaScript
+        const jsCode = this.transformJuxToJs(juxCode);
+
+        // Write compiled .js file
+        fs.writeFileSync(outputPath, jsCode, 'utf8');
+
+        console.log(`   ✓ ${relativePath} → ${path.basename(outputPath)}`);
+    }
+
+    /**
+     * ✅ Generate name from folder structure
+     * Example: abc/juxabc.jux -> abc_juxabc
+     */
+    _generateNameFromPath(path) {
+        return path
+            .replace(/\.[^/.]+$/, '') // Remove extension
+            .replace(/\\/g, '/') // Normalize Windows paths
+            .replace(/\//g, '_') // Folder separator -> underscore
+            .replace(/[^a-zA-Z0-9_]/g, '_'); // Sanitize
+    }
+
+    /**
+     * ✅ Generate PascalCase function name from sanitized name
+     * Examples:
+     *   abc_juxabc -> AbcJuxabc
+     *   index -> Index
+     */
+    _generateFunctionName(name) {
+        return name
+            .split('_')
+            .map(part => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+            .join('');
+    }
+
+    /**
+     * ✅ Generate entry point with nested folder support
+     */
+    generateEntryPoint(views, dataModules, sharedModules) {
+        let entry = `// Auto-generated JUX entry point\n\n`;
+        const allIssues = [];
+        const sourceSnapshot = {};
+
+        const juxImports = new Set();
+        const layoutImports = new Set(); // ✅ Track layout imports separately
+
+        // Scan for imports
+        [...views, ...dataModules, ...sharedModules].forEach(m => {
+            // Regular juxscript imports
+            for (const match of m.content.matchAll(/import\s*\{\s*([^}]+)\s*\}\s*from\s*['"]juxscript['"]/g)) {
+                match[1].split(',').map(s => s.trim()).forEach(imp => {
+                    if (imp) {
+                        // ✅ Separate layout imports
+                        if (imp === 'VStack' || imp === 'HStack' || imp === 'ZStack') {
+                            layoutImports.add(imp);
+                        } else {
+                            juxImports.add(imp);
+                        }
+                    }
+                });
+            }
+        });
+
+        // ✅ Import layouts separately
+        if (layoutImports.size > 0) {
+            entry += `import { ${[...layoutImports].sort().join(', ')} } from 'juxscript';\n`;
+        }
+
+        // ✅ Import regular components
+        if (juxImports.size > 0) {
+            entry += `import { ${[...juxImports].sort().join(', ')} } from 'juxscript';\n\n`;
+        }
+
+        // Data and shared modules
+        dataModules.forEach(m => {
+            entry += `import * as ${this.sanitizeName(m.name)}Data from './jux/${m.file}';\n`;
+        });
+        sharedModules.forEach(m => {
+            entry += `import * as ${this.sanitizeName(m.name)}Shared from './jux/${m.file}';\n`;
+        });
+
+        entry += `\n// Expose to window\n`;
+        dataModules.forEach(m => entry += `Object.assign(window, ${this.sanitizeName(m.name)}Data);\n`);
+        sharedModules.forEach(m => entry += `Object.assign(window, ${this.sanitizeName(m.name)}Shared);\n`);
+
+        // ✅ Expose layouts to window
+        if (layoutImports.size > 0) {
+            entry += `\n// Expose layout components\n`;
+            layoutImports.forEach(layout => {
+                entry += `window.${layout} = ${layout};\n`;
             });
+        }
 
-            // Generate index.html
-            console.log('📄 Generating index.html...');
-            const indexHtml = `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>JUX App</title>
-</head>
-<body>
-  <div id="app"></div>
-  <script type="module" src="/bundle.js"></script>
-</body>
-</html>`;
-
-            fs.writeFileSync(path.join(this.distDir, 'index.html'), indexHtml);
-
-            // Copy public folder
-            this.copyPublicFolder();
-
-            // Write source snapshot for error overlay
-            const snapshotPath = path.join(this.distDir, '__jux_sources.json');
-            fs.writeFileSync(snapshotPath, JSON.stringify(this._sourceSnapshot, null, 2));
-
-            const endTime = Date.now();
-            console.log(`\n✅ Build complete in ${endTime - startTime}ms`);
-            console.log(`   Output: ${this.distDir}`);
-
-            this.reportValidationIssues();
-
-            return {
-                success: true,
-                errors: this._validationIssues || [],
-                distDir: this.distDir
-            };
+        // ✅ Expose regular components
+        if (juxImports.size > 0) {
+            entry += `\n// Expose components\n`;
+            entry += `Object.assign(window, { ${[...juxImports].join(', ')} });\n`;
+        }
 
-        } catch (err) {
-            console.error('❌ Build failed:', err.message);
-            console.error(err.stack);
-            return {
-                success: false,
-                errors: [err.message]
+        entry += `\n// --- VIEW FUNCTIONS ---\n`;
+
+        views.forEach(v => {
+            const functionName = this._generateFunctionName(v.name);
+            allIssues.push(...this.validateViewCode(v.name, v.content));
+
+            sourceSnapshot[v.file] = {
+                name: v.name,
+                file: v.file,
+                content: v.content,
+                lines: v.content.split('\n')
             };
-        }
+
+            let viewCode = this.removeImports(v.content).replace(/^\s*export\s+default\s+.*$/gm, '');
+            const asyncPrefix = viewCode.includes('await ') ? 'async ' : '';
+
+            entry += `\n${asyncPrefix}function render${functionName}() {\n${viewCode}\n}\n`;
+        });
+
+        dataModules.forEach(m => {
+            sourceSnapshot[m.file] = { name: m.name, file: m.file, content: m.content, lines: m.content.split('\n') };
+        });
+        sharedModules.forEach(m => {
+            sourceSnapshot[m.file] = { name: m.name, file: m.file, content: m.content, lines: m.content.split('\n') };
+        });
+
+        this._sourceSnapshot = sourceSnapshot;
+        this._validationIssues = allIssues;
+        entry += this._generateRouter(views);
+        return entry;
+    }
+
+    reportValidationIssues() {
+        if (!this._validationIssues || this._validationIssues.length === 0) return;
+
+        console.log('\n⚠️  Validation Issues:\n');
+        this._validationIssues.forEach(issue => {
+            const icon = issue.type === 'error' ? '❌' : '⚠️';
+            console.log(`   ${icon} ${issue.view}:${issue.line} - ${issue.message}`);
+        });
+        console.log('');
     }
 
     /**
-     * Copy public folder contents to dist
+     * ✅ Generate routes based on folder structure (SINGLE DEFINITION)
      */
-    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
+    _generateRouter(views) {
+        let routeMap = '';
+
+        views.forEach(v => {
+            const routePath = this._generateRoutePath(v.file);
+            const functionName = this._generateFunctionName(v.name);
+            routeMap += `  '${routePath}': render${functionName},\n`;
+        });
+
+        return `
+// --- JUX SOURCE LOADER ---
+var __juxSources = null;
+async function __juxLoadSources() {
+    if (__juxSources) return __juxSources;
+    try {
+        var res = await fetch('/__jux_sources.json');
+        __juxSources = await res.json();
+    } catch (e) {
+        __juxSources = {};
+    }
+    return __juxSources;
+}
+
+function __juxFindSource(stack) {
+    var match = stack.match(/render([A-Z][a-zA-Z0-9_]*)/);
+    if (match) {
+        var funcName = match[1];
+        for (var file in __juxSources || {}) {
+            var normalized = __juxSources[file].name
+                .split('_')
+                .map(s => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase())
+                .join('');
+            
+            if (normalized === funcName) {
+                return { file: file, source: __juxSources[file], viewName: funcName };
+            }
+        }
+    }
+    return null;
+}
+
+// --- JUX RUNTIME ERROR OVERLAY ---
+var __juxErrorOverlay = {
+    styles: \`
+        #__jux-error-overlay {
+            position: fixed; inset: 0; z-index: 99999;
+            background: rgba(0, 0, 0, 0.4);
+            display: flex; align-items: center; justify-content: center;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+            opacity: 0; transition: opacity 0.2s ease-out; backdrop-filter: blur(2px);
         }
+        #__jux-error-overlay.visible { opacity: 1; }
+        #__jux-error-overlay * { box-sizing: border-box; }
+        .__jux-modal {
+            background: #f8f9fa; border-radius: 4px;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
+            max-width: 80vw; width: 90%; max-height: 90vh;
+            overflow: hidden; display: flex; flex-direction: column;
+            transform: translateY(10px); transition: transform 0.2s ease-out;
+        }
+        #__jux-error-overlay.visible .__jux-modal { transform: translateY(0); }
+        .__jux-header { background: #fff; padding: 20px 24px; border-bottom: 1px solid #e5e7eb; }
+        .__jux-header h3 { margin: 0 0 6px; font-weight: 600; font-size: 11px; color: #9ca3af; text-transform: uppercase; }
+        .__jux-header h1 { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: #dc2626; line-height: 1.3; }
+        .__jux-header .file-info { color: #6b7280; font-size: 13px; }
+        .__jux-header .file-info strong { color: #dc2626; font-weight: 600; }
+        .__jux-source { padding: 16px 24px; overflow: auto; flex: 1; background: #f8f9fa; }
+        .__jux-code { background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb; }
+        .__jux-code-line { display: flex; font-size: 13px; line-height: 1.7; }
+        .__jux-code-line.error { background: #fef2f2; }
+        .__jux-code-line.error .__jux-line-code { color: #dc2626; font-weight: 500; }
+        .__jux-code-line.context { background: #fefce8; }
+        .__jux-line-num { min-width: 44px; padding: 4px 12px; text-align: right; color: #9ca3af; background: #f9fafb; border-right: 1px solid #e5e7eb; font-size: 12px; }
+        .__jux-code-line.error .__jux-line-num { background: #fef2f2; color: #dc2626; }
+        .__jux-line-code { flex: 1; padding: 4px 16px; color: #374151; white-space: pre; overflow-x: auto; }
+        .__jux-footer { padding: 16px 24px; background: #fff; border-top: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; }
+        .__jux-tip { color: #6b7280; font-size: 12px; }
+        .__jux-dismiss { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; }
+        .__jux-dismiss:hover { background: #e5e7eb; }
+        .__jux-no-source { color: #6b7280; padding: 24px; text-align: center; }
+        .__jux-no-source pre { background: #fff; padding: 16px; border-radius: 8px; margin-top: 16px; font-size: 11px; color: #6b7280; overflow-x: auto; text-align: left; border: 1px solid #e5e7eb; }
+    \`,
 
-        console.log('📦 Copying public assets...');
+    show: async function(error, title) {
+        title = title || 'Runtime Error';
+        var existing = document.getElementById('__jux-error-overlay');
+        if (existing) existing.remove();
+        await __juxLoadSources();
+        
+        var overlay = document.createElement('div');
+        overlay.id = '__jux-error-overlay';
+        var stack = error && error.stack ? error.stack : '';
+        var msg = error && error.message ? error.message : String(error);
+        var found = __juxFindSource(stack);
+        var sourceHtml = '', fileInfo = '';
+        
+        if (found && found.source && found.source.lines) {
+            var lines = found.source.lines;
+            fileInfo = '<span class="file-info">in <strong>' + found.file + '</strong></span>';
+            var errorLineIndex = -1;
+            var errorMethod = msg.match(/\\.([a-zA-Z]+)\\s*is not a function/);
+            if (errorMethod) {
+                for (var i = 0; i < lines.length; i++) {
+                    if (lines[i].indexOf('.' + errorMethod[1]) > -1) { errorLineIndex = i; break; }
+                }
+            }
+            if (errorLineIndex === -1) {
+                for (var i = 0; i < lines.length; i++) {
+                    if (lines[i].indexOf('throw ') > -1) { errorLineIndex = i; break; }
+                }
+            }
+            var contextStart = Math.max(0, errorLineIndex - 3);
+            var contextEnd = Math.min(lines.length - 1, errorLineIndex + 5);
+            if (errorLineIndex === -1) { contextStart = 0; contextEnd = Math.min(14, lines.length - 1); }
+            
+            for (var i = contextStart; i <= contextEnd; i++) {
+                var isError = (i === errorLineIndex);
+                var isContext = !isError && errorLineIndex > -1 && Math.abs(i - errorLineIndex) <= 2;
+                var lineClass = isError ? ' error' : (isContext ? ' context' : '');
+                var lineCode = lines[i].replace(/</g, '&lt;').replace(/>/g, '&gt;') || ' ';
+                sourceHtml += '<div class="__jux-code-line' + lineClass + '"><span class="__jux-line-num">' + (i + 1) + '</span><span class="__jux-line-code">' + lineCode + '</span></div>';
+            }
+        } else {
+            sourceHtml = '<div class="__jux-no-source"><p>Could not locate source file.</p><pre>' + stack + '</pre></div>';
+        }
+        
+        overlay.innerHTML = '<style>' + this.styles + '</style><div class="__jux-modal"><div class="__jux-header"><h3>' + title + '</h3><h1>' + msg + '</h1>' + fileInfo + '</div><div class="__jux-source"><div class="__jux-code">' + sourceHtml + '</div></div><div class="__jux-footer"><span class="__jux-tip">💡 Fix the error and save to reload</span><button class="__jux-dismiss" onclick="document.getElementById(\\'__jux-error-overlay\\').remove()">Dismiss</button></div></div>';
+        document.body.appendChild(overlay);
+        requestAnimationFrame(function() { overlay.classList.add('visible'); });
+        console.error(title + ':', error);
+    }
+};
 
-        try {
-            this._copyDirRecursive(publicSrc, this.distDir, 0);
-            console.log('✅ Public assets copied');
-        } catch (err) {
-            console.warn('⚠️  Error copying public folder:', err.message);
+window.addEventListener('error', function(e) { __juxErrorOverlay.show(e.error || new Error(e.message), 'Uncaught Error'); }, true);
+window.addEventListener('unhandledrejection', function(e) { __juxErrorOverlay.show(e.reason || new Error('Promise rejected'), 'Unhandled Promise Rejection'); }, true);
+
+// --- JUX ROUTER ---
+const routes = {
+${routeMap}};
+
+async function navigate(path) {
+    const view = routes[path];
+    if (!view) {
+        document.getElementById('app').innerHTML = '<h1 style="padding:40px;">404 - Not Found</h1>';
+        return;
+    }
+    document.getElementById('app').innerHTML = '';
+    var overlay = document.getElementById('__jux-error-overlay');
+    if (overlay) overlay.remove();
+    try { await view(); } catch (err) { __juxErrorOverlay.show(err, 'Jux Render Error'); }
+}
+
+document.addEventListener('click', e => {
+    const a = e.target.closest('a');
+    if (!a || a.dataset.router === 'false') return;
+    try { if (new URL(a.href, location.origin).origin !== location.origin) return; } catch { return; }
+    e.preventDefault();
+    history.pushState({}, '', a.href);
+    navigate(new URL(a.href, location.origin).pathname);
+});
+
+window.addEventListener('popstate', () => navigate(location.pathname));
+navigate(location.pathname);
+`;
+    }
+
+    /**
+     * ✅ Copy source files to dist/jux for esbuild to resolve
+     */
+    _copySourceToDist() {
+        const distJuxDir = path.join(this.distDir, 'jux');
+
+        // Ensure dist/jux directory exists
+        if (!fs.existsSync(distJuxDir)) {
+            fs.mkdirSync(distJuxDir, { recursive: true });
         }
+
+        // Copy all .jux and .js files from source to dist
+        this._copySourceFilesRecursive(this.srcDir, this.srcDir, distJuxDir);
     }
 
     /**
-     * Recursively copy directory contents
+     * Recursively copy .jux and .js files preserving folder structure
      */
-    _copyDirRecursive(src, dest, depth = 0) {
+    _copySourceFilesRecursive(src, baseDir, distBase) {
         const entries = fs.readdirSync(src, { withFileTypes: true });
 
         entries.forEach(entry => {
-            // Skip hidden files and directories
-            if (entry.name.startsWith('.')) return;
+            if (entry.name.startsWith('.')) return; // Skip hidden
 
             const srcPath = path.join(src, entry.name);
-            const destPath = path.join(dest, entry.name);
+            const relativePath = path.relative(baseDir, srcPath);
+            const destPath = path.join(distBase, relativePath);
 
             if (entry.isDirectory()) {
-                // Create directory and recurse
+                // Create directory if it doesn't exist
                 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}`);
+                // Recurse into subdirectory
+                this._copySourceFilesRecursive(srcPath, baseDir, distBase);
+            } else if (entry.name.endsWith('.jux') || entry.name.endsWith('.js')) {
+                // Copy .jux and .js files (skip assets)
+                if (!this.isAssetFile(entry.name)) {
+                    // Ensure parent directory exists
+                    const destDir = path.dirname(destPath);
+                    if (!fs.existsSync(destDir)) {
+                        fs.mkdirSync(destDir, { recursive: true });
+                    }
+                    fs.copyFileSync(srcPath, destPath);
+                    console.log(`   📋 Copied: ${relativePath}`);
                 }
             }
         });
     }
 
     /**
-     * Get icon for file type
+     * Copy ONLY public assets (CSS, images, fonts) to dist
+     * ❌ Does NOT copy .jux files (they are compiled separately)
      */
-    _getFileIcon(ext) {
-        const icons = {
-            '.html': '📄',
-            '.css': '🎨',
-            '.js': '📜',
-            '.json': '📋',
-            '.png': '🖼️',
-            '.jpg': '🖼️',
-            '.jpeg': '🖼️',
-            '.gif': '🖼️',
-            '.svg': '🎨',
-            '.ico': '🔖',
-            '.woff': '🔤',
-            '.woff2': '🔤',
-            '.ttf': '🔤',
-            '.eot': '🔤'
+    async copyPublicAssets() {
+        const { publicDir, distDir, paths } = this.config;
+
+        // Resolve public folder path
+        const publicPath = paths?.public || path.resolve(this.config.srcDir, '..', publicDir);
+
+        if (!fs.existsSync(publicPath)) {
+            console.log(`ℹ️  No public folder found at ${publicPath}, skipping asset copy`);
+            return;
+        }
+
+        console.log(`📦 Copying public assets from ${publicPath}...`);
+
+        // ✅ ONLY copy known asset file types
+        const assetTypes = [
+            '.css', '.scss', '.sass', '.less',           // Stylesheets
+            '.jpg', '.jpeg', '.png', '.gif', '.svg',     // Images
+            '.ico', '.webp', '.avif',                     // Icons/modern images
+            '.woff', '.woff2', '.ttf', '.eot', '.otf',   // Fonts
+            '.mp4', '.webm', '.ogg',                      // Video
+            '.mp3', '.wav', '.m4a',                       // Audio
+            '.pdf', '.txt', '.json', '.xml'               // Documents
+        ];
+
+        const copyRecursive = (src, dest) => {
+            if (!fs.existsSync(src)) return;
+
+            const entries = fs.readdirSync(src, { withFileTypes: true });
+
+            for (const entry of entries) {
+                const srcPath = path.join(src, entry.name);
+                const destPath = path.join(dest, entry.name);
+
+                if (entry.isDirectory()) {
+                    fs.mkdirSync(destPath, { recursive: true });
+                    copyRecursive(srcPath, destPath);
+                } else {
+                    const ext = path.extname(entry.name).toLowerCase();
+
+                    // ✅ ONLY copy known asset types
+                    // ❌ SKIP .jux files (they're bundled into entry.js)
+                    if (assetTypes.includes(ext)) {
+                        fs.copyFileSync(srcPath, destPath);
+                        console.log(`   ✓ ${entry.name}`);
+                    } else if (ext === '.jux') {
+                        // Silently skip .jux files
+                        continue;
+                    } else {
+                        // Warn about unknown file types
+                        console.warn(`   ⚠️  Skipped: ${entry.name} (unknown type: ${ext})`);
+                    }
+                }
+            }
+        };
+
+        copyRecursive(publicPath, distDir);
+    }
+
+    /**
+     * Main build pipeline
+     */
+    async build() {
+        console.log('🔨 Building JUX project...\n');
+
+        try {
+            // 1. Clean dist
+            if (fs.existsSync(this.config.distDir)) {
+                fs.rmSync(this.config.distDir, { recursive: true, force: true });
+            }
+            fs.mkdirSync(this.config.distDir, { recursive: true });
+
+            // 2. Scan .jux files
+            const juxFiles = this.scanJuxFiles(this.config.srcDir);
+            console.log(`📂 Found ${juxFiles.length} .jux files\n`);
+
+            // 3. ✅ Bundle all .jux files → entry.js
+            await this.bundleJuxFiles(juxFiles);
+
+            // 4. ✅ Bundle vendor libraries → bundle.js
+            await this.bundleVendorFiles();
+
+            // 5. Copy public assets (CSS, images, etc.)
+            await this.copyPublicAssets();
+
+            // 6. Generate index.html (with entry.js + bundle.js)
+            await this.generateIndexHtml();
+
+            console.log('\n✅ Build completed successfully!\n');
+            console.log(`📁 Output: ${this.config.distDir}`);
+            console.log(`   ✓ entry.js (${juxFiles.length} .jux files bundled)`);
+            console.log(`   ✓ bundle.js (vendor libraries)`);
+            console.log(`   ✓ index.html`);
+            console.log(`   ✓ Public assets copied\n`);
+
+            return { success: true };
+
+        } catch (error) {
+            console.error('\n❌ Build failed:', error.message);
+            console.error(error.stack);
+            return { success: false, error };
+        }
+    }
+
+    /**
+     * Scan for .jux files ONLY in source directory
+     */
+    scanJuxFiles(dir) {
+        const juxFiles = [];
+
+        const scan = (currentDir) => {
+            const entries = fs.readdirSync(currentDir, { withFileTypes: true });
+
+            for (const entry of entries) {
+                const fullPath = path.join(currentDir, entry.name);
+
+                if (entry.isDirectory()) {
+                    scan(fullPath);
+                } else if (entry.name.endsWith('.jux')) {
+                    juxFiles.push(fullPath);
+                }
+            }
         };
-        return icons[ext.toLowerCase()] || '📦';
+
+        scan(dir);
+        return juxFiles;
+    }
+
+    /**
+     * Compile a single .jux file to .js
+     */
+    async compileFile(juxFilePath) {
+        const relativePath = path.relative(this.config.srcDir, juxFilePath);
+        const outputPath = path.join(this.config.distDir, relativePath.replace(/\.jux$/, '.js'));
+
+        // Ensure output directory exists
+        fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+
+        // Read .jux source
+        const juxCode = fs.readFileSync(juxFilePath, 'utf8');
+
+        // Compile to JavaScript
+        const jsCode = this.transformJuxToJs(juxCode);
+
+        // Write compiled .js file
+        fs.writeFileSync(outputPath, jsCode, 'utf8');
+
+        console.log(`   ✓ ${relativePath} → ${path.basename(outputPath)}`);
+    }
+
+    /**
+     * ✅ Generate name from folder structure
+     * Example: abc/juxabc.jux -> abc_juxabc
+     */
+    _generateNameFromPath(filepath) {
+        // Convert file path to module name
+        // e.g., "pages/about.jux" → "pages_about"
+        return filepath
+            .replace(/\.jux$/, '')
+            .replace(/[\/\\]/g, '_')
+            .replace(/[^a-zA-Z0-9_]/g, '');
     }
 }

package/package.json

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