juxscript 1.0.31 → 1.0.32

package/lib/components/container.ts

@@ -5,38 +5,38 @@ const TRIGGER_EVENTS = [] as const;
 const CALLBACK_EVENTS = [] as const;
 
 export interface ContainerOptions {
-  direction?: 'row' | 'column';
-  gap?: number | string;
-  wrap?: boolean;
-  align?: 'start' | 'center' | 'end' | 'stretch';
-  justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
-  padding?: string;
-  style?: string;
-  class?: string;
+  direction?: 'row' | 'column'; // should deprecate.
+  gap?: number | string; // should deprecate.
+  wrap?: boolean; // should deprecate.
+  align?: 'start' | 'center' | 'end' | 'stretch';   // should deprecate.
+  justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'; // should deprecate.
+  padding?: string; // should deprecate.
+  style?: string; // should deprecate. -> inherited from BaseComponent
+  class?: string; // should deprecate. -> inherited from BaseComponent
 }
 
 type ContainerState = {
-  direction: string;
-  gap: number | string;
-  wrap: boolean;
-  align: string;
-  justify: string;
-  padding: string;
-  style: string;
-  class: string;
+  direction: string; // should deprecate.
+  gap: number | string; // should deprecate.
+  wrap: boolean; // should deprecate.
+  align: string; // should deprecate.
+  justify: string; // should deprecate.
+  padding: string; // should deprecate.
+  style: string; // should deprecate. -> inherited from BaseComponent
+  class: string; // should deprecate. -> inherited from BaseComponent
 };
 
 export class Container extends BaseComponent<ContainerState> {
   constructor(id: string, options: ContainerOptions = {}) {
     super(id, {
-      direction: options.direction ?? 'column',
-      gap: options.gap ?? 0,
-      wrap: options.wrap ?? false,
-      align: options.align ?? 'stretch',
-      justify: options.justify ?? 'start',
-      padding: options.padding ?? '0',
-      style: options.style ?? '',
-      class: options.class ?? ''
+      direction: options.direction ?? 'column',// should deprecate.
+      gap: options.gap ?? 0, //should deprecate.
+      wrap: options.wrap ?? false, //should deprecate.
+      align: options.align ?? 'stretch', //should deprecate.
+      justify: options.justify ?? 'start', //should deprecate.
+      padding: options.padding ?? '0', //should deprecate.
+      style: options.style ?? '', //should deprecate. -> inherited from BaseComponent
+      class: options.class ?? '' //should deprecate. -> inherited from BaseComponent
     });
   }
 
@@ -104,21 +104,6 @@ export class Container extends BaseComponent<ContainerState> {
     wrapper.id = this._id;
     if (className) wrapper.className += ` ${className}`;
 
-    // Build inline styles
-    const gapValue = typeof gap === 'number' ? `${gap}px` : gap;
-    const computedStyle = `
-      display: flex;
-      flex-direction: ${direction};
-      gap: ${gapValue};
-      flex-wrap: ${wrap ? 'wrap' : 'nowrap'};
-      align-items: ${align};
-      justify-content: ${justify};
-      padding: ${padding};
-      ${style}
-    `.trim();
-
-    wrapper.setAttribute('style', computedStyle);
-
     this._wireStandardEvents(wrapper);
 
     // Wire sync bindings
@@ -127,7 +112,7 @@ export class Container extends BaseComponent<ContainerState> {
 
       stateObj.subscribe((val: any) => {
         const transformed = transform(val);
-
+        /*
         if (property === 'direction') {
           this.state.direction = String(transformed);
           wrapper.style.flexDirection = this.state.direction;
@@ -148,7 +133,9 @@ export class Container extends BaseComponent<ContainerState> {
           this.state.padding = String(transformed);
           wrapper.style.padding = this.state.padding;
         }
+          */
       });
+
     });
 
     container.appendChild(wrapper);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",

package/presets/default/layout.css

@@ -1,21 +1,82 @@
+/**
+ * Default Preset - Grid Layout System
+ * Minimal, clean layout with proper spacing
+ */
+
+/* ============================================
+   CSS VARIABLES
+   ============================================ */
+:root {
+  /* Typography */
+  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-family-mono: 'SF Mono', Monaco, Menlo, 'Courier New', monospace;
+  
+  /* Spacing */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 0.75rem;
+  --space-lg: 1rem;
+  --space-xl: 1.5rem;
+  --space-2xl: 2rem;
+  --space-3xl: 3rem;
+  
+  /* Colors - Light Theme */
+  --color-text-primary: #111111;
+  --color-text-secondary: #65676b;
+  --color-text-tertiary: #8b8d94;
+  
+  --color-background: #ffffff;
+  --color-surface-base: #f7f7f7;
+  --color-surface-elevated: #ffffff;
+  --color-surface-hover: #f1f1f1;
+  
+  --color-border: #e8e8e8;
+  --color-border-hover: #d1d1d1;
+  
+  /* Borders & Radius */
+  --border-width: 1px;
+  --radius-sm: 3px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  
+  /* Transitions */
+  --transition-base: 150ms ease;
+}
+
+/* ============================================
+   GLOBAL RESET
+   ============================================ */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-family-base);
+  color: var(--color-text-primary);
+  background: var(--color-background);
+  -webkit-font-smoothing: antialiased;
+}
+
 /* ============================================
-   APP CONTAINER - Main Layout Grid
+   GRID LAYOUT
    ============================================ */
 #app {
   display: grid;
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: auto 1fr;
   grid-template-rows: auto 1fr auto;
   grid-template-areas:
-    "header header header"
-    "sidebar main aside"
-    "footer footer footer";
+    "header header"
+    "sidebar main"
+    "footer footer";
   width: 100vw;
   height: 100vh;
   overflow: hidden;
 }
 
 /* ============================================
-   HEADER - Top Navigation Bar
+   HEADER
    ============================================ */
 #appheader {
   grid-area: header;
@@ -23,10 +84,9 @@
   border-bottom: var(--border-width) solid var(--color-border);
   display: flex;
   align-items: center;
-  padding: 0 var(--space-lg);
+  padding: 0 var(--space-2xl);
   height: 48px;
   z-index: 100;
-  transition: background-color var(--transition-base), border-color var(--transition-base);
 }
 
 #appheader-content {
@@ -41,17 +101,8 @@
   display: flex;
   align-items: center;
   gap: var(--space-md);
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-primary);
-  text-decoration: none;
-  padding: var(--space-sm) var(--space-md);
-  border-radius: var(--radius-md);
-  transition: background-color var(--transition-fast);
-}
-
-#appheader-logo:hover {
-  background: var(--color-surface-hover);
+  font-weight: 600;
+  cursor: pointer;
 }
 
 #appheader-nav {
@@ -64,66 +115,59 @@
 #appheader-actions {
   display: flex;
   align-items: center;
-  gap: var(--space-md);
+  gap: var(--space-sm);
 }
 
 /* ============================================
-   LEFT SIDEBAR - Navigation
+   SIDEBAR
    ============================================ */
-.jux-sidebar,
 #appaside {
   grid-area: sidebar;
-  width: 260px;
+  width: 240px;
   background: var(--color-surface-base);
   border-right: var(--border-width) solid var(--color-border);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  transition: width var(--transition-base);
-  position: relative;
+  overflow-y: auto;
 }
 
 /* ============================================
-   MAIN CONTENT - Center Area
+   MAIN CONTENT
    ============================================ */
 #appmain {
   grid-area: main;
   background: var(--color-background);
   overflow-y: auto;
   overflow-x: hidden;
-  display: flex;
-  flex-direction: column;
-  position: relative;
 }
 
 #appmain-content {
-  flex: 1;
-  padding: var(--space-3xl) var(--space-2xl);
-  max-width: 1600px;
-  width: 100%;
+  max-width: 800px;
   margin: 0 auto;
+  padding: var(--space-3xl) var(--space-2xl);
 }
 
-/* Custom scrollbar for main content */
-#appmain::-webkit-scrollbar {
-  width: 8px;
-}
-
-#appmain::-webkit-scrollbar-track {
-  background: var(--color-surface-base);
-}
-
-#appmain::-webkit-scrollbar-thumb {
-  background: var(--color-border);
-  border-radius: var(--radius-full);
+/* ============================================
+   FOOTER
+   ============================================ */
+#appfooter {
+  grid-area: footer;
+  background: var(--color-surface-elevated);
+  border-top: var(--border-width) solid var(--color-border);
+  padding: var(--space-md) var(--space-2xl);
+  font-size: 0.875rem;
+  color: var(--color-text-tertiary);
+  min-height: 40px;
+  display: flex;
+  align-items: center;
 }
 
-#appmain::-webkit-scrollbar-thumb:hover {
-  background: var(--color-border-hover);
+#appfooter-content {
+  display: flex;
+  align-items: center;
+  gap: var(--space-lg);
 }
 
 /* ============================================
-   RIGHT SIDEBAR - Optional Panel
+   RIGHT SIDEBAR (Optional)
    ============================================ */
 #appsidebar {
   grid-area: aside;
@@ -131,116 +175,64 @@
   background: var(--color-surface-base);
   border-left: var(--border-width) solid var(--color-border);
   display: none;
-  flex-direction: column;
-  overflow: hidden;
-  transition: width var(--transition-base), background-color var(--transition-base);
 }
 
 #appsidebar.show {
-  display: flex;
-}
-
-#appsidebar.collapsed {
-  width: 0;
-  border: none;
+  display: block;
 }
 
 #appsidebar-header {
   padding: var(--space-lg);
   border-bottom: var(--border-width) solid var(--color-border);
-  font-weight: var(--font-weight-semibold);
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-tertiary);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
 }
 
 #appsidebar-content {
-  flex: 1;
+  padding: var(--space-lg);
   overflow-y: auto;
-  overflow-x: hidden;
+}
+
+#appsidebar-footer {
   padding: var(--space-lg);
+  border-top: var(--border-width) solid var(--color-border);
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
 }
 
+/* ============================================
+   SCROLLBARS
+   ============================================ */
+#appmain::-webkit-scrollbar,
+#appaside::-webkit-scrollbar,
 #appsidebar-content::-webkit-scrollbar {
   width: 6px;
 }
 
+#appmain::-webkit-scrollbar-track,
+#appaside::-webkit-scrollbar-track,
 #appsidebar-content::-webkit-scrollbar-track {
   background: transparent;
 }
 
+#appmain::-webkit-scrollbar-thumb,
+#appaside::-webkit-scrollbar-thumb,
 #appsidebar-content::-webkit-scrollbar-thumb {
   background: var(--color-border);
-  border-radius: var(--radius-full);
+  border-radius: 3px;
 }
 
+#appmain::-webkit-scrollbar-thumb:hover,
+#appaside::-webkit-scrollbar-thumb:hover,
 #appsidebar-content::-webkit-scrollbar-thumb:hover {
   background: var(--color-border-hover);
 }
 
-#appsidebar-footer {
-  padding: var(--space-lg);
-  border-top: var(--border-width) solid var(--color-border);
-  font-size: var(--font-size-xs);
-  color: var(--color-text-tertiary);
-}
-
 /* ============================================
-   FOOTER - Bottom Bar
+   RESPONSIVE
    ============================================ */
-#appfooter {
-  grid-area: footer;
-  background: var(--color-surface-elevated);
-  border-top: var(--border-width) solid var(--color-border);
-  padding: var(--space-lg) var(--space-2xl);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: var(--font-size-sm);
-  color: var(--color-text-tertiary);
-  transition: background-color var(--transition-base), border-color var(--transition-base);
-}
-
-#appfooter-content {
-  display: flex;
-  align-items: center;
-  gap: var(--space-xl);
-}
-
-#appfooter-legal {
-  display: flex;
-  align-items: center;
-  gap: var(--space-lg);
-}
-
-#appfooter a {
-  color: var(--color-text-secondary);
-  text-decoration: none;
-  transition: color var(--transition-fast);
-}
-
-#appfooter a:hover {
-  color: var(--color-text-primary);
-}
-
-/* ============================================
-   RESPONSIVE GRID LAYOUTS
-   ============================================ */
-@media (max-width: 1024px) {
-  #appsidebar {
-    display: none;
-  }
-  
-  #app {
-    grid-template-columns: auto 1fr;
-    grid-template-areas:
-      "header header"
-      "sidebar main"
-      "footer footer";
-  }
-}
-
 @media (max-width: 768px) {
   #app {
     grid-template-columns: 1fr;
@@ -250,31 +242,19 @@
       "footer";
   }
   
-  .jux-sidebar,
   #appaside {
     display: none;
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    z-index: 1000;
-    width: 260px;
-    box-shadow: var(--shadow-xl);
-    transform: translateX(-100%);
-    transition: transform var(--transition-base);
   }
   
-  .jux-sidebar.open,
-  #appaside.open {
-    display: flex;
-    transform: translateX(0);
+  #appheader {
+    padding: 0 var(--space-lg);
   }
   
   #appmain-content {
     padding: var(--space-2xl) var(--space-lg);
   }
   
-  #appheader {
-    padding: 0 var(--space-md) 0 calc(var(--space-md) + 48px);
+  #appfooter {
+    padding: var(--space-md) var(--space-lg);
   }
 }