juxscript 1.0.132 → 1.1.2

package/lib/layouts/default.css

@@ -0,0 +1,260 @@
+/* Default Layout Grid (Notion-style) */
+
+#app {
+  
+  display: grid;
+  grid-template-areas:
+    "header header"
+    "sidebar main"
+    "footer footer";
+  grid-template-columns: 250px 1fr;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+}
+
+/* Header */
+#appheader {
+  grid-area: header;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: var(--color-surface-elevated);
+  border-bottom: var(--border-width) solid var(--color-border);
+  display: flex;
+  align-items: center;
+  padding: var(--space-md) var(--space-lg);
+  gap: var(--space-lg);
+}
+
+#appheader-logo {
+  flex-shrink: 0;
+}
+
+#appheader-nav {
+  flex: 1;
+  display: flex;
+  gap: var(--space-md);
+}
+
+#appheader-actions {
+  flex-shrink: 0;
+  display: flex;
+  gap: var(--space-sm);
+}
+
+/* Subheader - Hidden in default layout */
+#appsubheader {
+  display: none;
+}
+
+#appsubheader-breadcrumbs,
+#appsubheader-tabs,
+#appsubheader-actions {
+  display: none;
+}
+
+/* Sidebar */
+#appsidebar {
+  grid-area: sidebar;
+  overflow-y: auto;
+  background: var(--color-surface-base);
+  border-right: var(--border-width) solid var(--color-border);
+  transition: transform var(--transition-base);
+  display: flex;
+  flex-direction: column;
+}
+
+#appsidebar-header {
+  padding: var(--space-md);
+  border-bottom: var(--border-width) solid var(--color-border);
+  flex-shrink: 0;
+}
+
+#appsidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-sm);
+}
+
+#appsidebar-footer {
+  padding: var(--space-md);
+  border-top: var(--border-width) solid var(--color-border);
+  flex-shrink: 0;
+}
+
+/* Main */
+#appmain {
+  grid-area: main;
+  overflow-y: auto;
+  padding: var(--space-xl);
+  background: var(--color-background);
+}
+
+/* Aside - Hidden in default layout */
+#appaside {
+  display: none;
+}
+
+#appaside-header,
+#appaside-content,
+#appaside-footer {
+  display: none;
+}
+
+/* Footer */
+#appfooter {
+  grid-area: footer;
+  background: var(--color-surface-elevated);
+  border-top: var(--border-width) solid var(--color-border);
+  padding: var(--space-lg) var(--space-xl);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#appfooter-content {
+  flex: 1;
+}
+
+#appfooter-legal {
+  flex-shrink: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+/* Modal */
+#appmodal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2000;
+  display: none;
+}
+
+#appmodal[aria-hidden="false"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#appmodal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+}
+
+#appmodal-container {
+  position: relative;
+  background: var(--color-surface-elevated);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-2xl);
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+#appmodal-header {
+  padding: var(--space-lg);
+  border-bottom: var(--border-width) solid var(--color-border);
+  flex-shrink: 0;
+}
+
+#appmodal-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-lg);
+}
+
+#appmodal-footer {
+  padding: var(--space-lg);
+  border-top: var(--border-width) solid var(--color-border);
+  flex-shrink: 0;
+  display: flex;
+  gap: var(--space-sm);
+  justify-content: flex-end;
+}
+
+/* Tablet (portrait) */
+@media (max-width: 1024px) {
+  #app {
+    grid-template-columns: 200px 1fr;
+  }
+  
+  #appmain {
+    padding: var(--space-lg);
+  }
+  
+  #appheader {
+    padding: var(--space-sm) var(--space-md);
+    gap: var(--space-md);
+  }
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+  #app {
+    grid-template-areas:
+      "header"
+      "main"
+      "footer";
+    grid-template-columns: 1fr;
+  }
+  
+  #appsidebar {
+    position: fixed;
+    top: 60px;
+    left: 0;
+    bottom: 0;
+    width: 280px;
+    max-width: 80vw;
+    z-index: 99;
+    transform: translateX(-100%);
+    box-shadow: var(--shadow-xl);
+  }
+  
+  #appsidebar.visible {
+    transform: translateX(0);
+  }
+  
+  #appmain {
+    padding: var(--space-md);
+  }
+  
+  #appheader {
+    padding: var(--space-xs) var(--space-md);
+  }
+  
+  #appfooter {
+    padding: var(--space-md) var(--space-lg);
+    flex-direction: column;
+    gap: var(--space-sm);
+    text-align: center;
+  }
+}
+
+/* Small mobile */
+@media (max-width: 480px) {
+  #appsidebar {
+    width: 100%;
+    max-width: 100vw;
+  }
+  
+  #appmain {
+    padding: var(--space-sm);
+  }
+  
+  #appfooter {
+    padding: var(--space-sm) var(--space-md);
+    font-size: var(--font-size-sm);
+  }
+  
+  #appmodal-container {
+    max-width: 95vw;
+    max-height: 95vh;
+  }
+}

package/lib/layouts/figma.css

@@ -0,0 +1,334 @@
+/* Figma Layout: All 7 containers */
+#app {
+  display: grid;
+  grid-template-areas:
+    "header header header"
+    "subheader subheader subheader"
+    "sidebar main aside"
+    "footer footer footer";
+  grid-template-columns: 250px 1fr 300px;
+  grid-template-rows: 60px auto 1fr 60px;
+  min-height: 100vh;
+}
+
+/* Header */
+#appheader {
+  grid-area: header;
+  background: var(--color-surface-elevated);
+  border-bottom: var(--border-width) solid var(--color-border);
+  display: flex;
+  align-items: center;
+  padding: var(--space-sm) var(--space-lg);
+  gap: var(--space-lg);
+}
+
+#appheader-logo {
+  flex-shrink: 0;
+}
+
+#appheader-nav {
+  flex: 1;
+  display: flex;
+  gap: var(--space-md);
+}
+
+#appheader-actions {
+  flex-shrink: 0;
+  display: flex;
+  gap: var(--space-sm);
+}
+
+/* Subheader */
+#appsubheader {
+  grid-area: subheader;
+  background: var(--color-surface-base);
+  border-bottom: var(--border-width) solid var(--color-border);
+  padding: var(--space-sm) var(--space-md);
+  display: flex;
+  align-items: center;
+  gap: var(--space-lg);
+}
+
+#appsubheader-breadcrumbs {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+#appsubheader-tabs {
+  flex: 1;
+  display: flex;
+  gap: var(--space-sm);
+}
+
+#appsubheader-actions {
+  flex-shrink: 0;
+  display: flex;
+  gap: var(--space-sm);
+}
+
+/* Sidebar */
+#appsidebar {
+  grid-area: sidebar;
+  overflow-y: auto;
+  background: var(--color-surface-base);
+  border-right: var(--border-width) solid var(--color-border);
+  transition: transform var(--transition-base);
+  display: flex;
+  flex-direction: column;
+}
+
+#appsidebar-header {
+  padding: var(--space-md);
+  border-bottom: var(--border-width) solid var(--color-border);
+  flex-shrink: 0;
+}
+
+#appsidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-sm);
+}
+
+#appsidebar-footer {
+  padding: var(--space-md);
+  border-top: var(--border-width) solid var(--color-border);
+  flex-shrink: 0;
+}
+
+/* Main */
+#appmain {
+  grid-area: main;
+  overflow: auto;
+  background: var(--color-background);
+  padding: var(--space-xl);
+}
+
+/* Aside (Right Sidebar) */
+#appaside {
+  grid-area: aside;
+  overflow-y: auto;
+  background: var(--color-surface-base);
+  border-left: var(--border-width) solid var(--color-border);
+  transition: transform var(--transition-base);
+  display: flex;
+  flex-direction: column;
+}
+
+#appaside-header {
+  padding: var(--space-md);
+  border-bottom: var(--border-width) solid var(--color-border);
+  flex-shrink: 0;
+}
+
+#appaside-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-md);
+}
+
+#appaside-footer {
+  padding: var(--space-md);
+  border-top: var(--border-width) solid var(--color-border);
+  flex-shrink: 0;
+}
+
+/* Footer */
+#appfooter {
+  grid-area: footer;
+  background: var(--color-surface-elevated);
+  border-top: var(--border-width) solid var(--color-border);
+  padding: var(--space-sm) var(--space-md);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#appfooter-content {
+  flex: 1;
+}
+
+#appfooter-legal {
+  flex-shrink: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+/* Modal */
+#appmodal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2000;
+  display: none;
+}
+
+#appmodal[aria-hidden="false"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#appmodal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+}
+
+#appmodal-container {
+  position: relative;
+  background: var(--color-surface-elevated);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-2xl);
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+#appmodal-header {
+  padding: var(--space-lg);
+  border-bottom: var(--border-width) solid var(--color-border);
+  flex-shrink: 0;
+}
+
+#appmodal-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-lg);
+}
+
+#appmodal-footer {
+  padding: var(--space-lg);
+  border-top: var(--border-width) solid var(--color-border);
+  flex-shrink: 0;
+  display: flex;
+  gap: var(--space-sm);
+  justify-content: flex-end;
+}
+
+/* Tablet (landscape) */
+@media (max-width: 1280px) {
+  #app {
+    grid-template-columns: 200px 1fr 250px;
+  }
+}
+
+/* Tablet (portrait) - hide aside */
+@media (max-width: 1024px) {
+  #app {
+    grid-template-areas:
+      "header header"
+      "subheader subheader"
+      "sidebar main"
+      "footer footer";
+    grid-template-columns: 200px 1fr;
+  }
+  
+  #appaside {
+    position: fixed;
+    top: 120px;
+    right: 0;
+    bottom: 60px;
+    width: 280px;
+    z-index: 98;
+    transform: translateX(100%);
+    box-shadow: var(--shadow-xl);
+  }
+  
+  #appaside.visible {
+    transform: translateX(0);
+  }
+  
+  #appsubheader {
+    padding: var(--space-xs) var(--space-sm);
+    gap: var(--space-md);
+  }
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+  #app {
+    grid-template-areas:
+      "header"
+      "subheader"
+      "main"
+      "footer";
+    grid-template-columns: 1fr;
+    grid-template-rows: 60px auto 1fr 60px;
+  }
+  
+  #appsidebar {
+    position: fixed;
+    top: 60px;
+    left: 0;
+    bottom: 60px;
+    width: 280px;
+    max-width: 80vw;
+    z-index: 99;
+    transform: translateX(-100%);
+    box-shadow: var(--shadow-xl);
+  }
+  
+  #appsidebar.visible {
+    transform: translateX(0);
+  }
+  
+  #appaside {
+    top: 60px;
+    width: 280px;
+    max-width: 80vw;
+  }
+  
+  #appmain {
+    padding: var(--space-md);
+  }
+  
+  #appheader {
+    padding: var(--space-xs) var(--space-md);
+    gap: var(--space-md);
+  }
+  
+  #appsubheader {
+    padding: var(--space-xs) var(--space-sm);
+    font-size: var(--font-size-sm);
+    flex-wrap: wrap;
+  }
+  
+  #appfooter {
+    padding: var(--space-xs) var(--space-sm);
+    font-size: var(--font-size-sm);
+    flex-direction: column;
+    gap: var(--space-xs);
+    text-align: center;
+  }
+}
+
+/* Small mobile */
+@media (max-width: 480px) {
+  #appsidebar,
+  #appaside {
+    width: 100%;
+    max-width: 100vw;
+  }
+  
+  #appmain {
+    padding: var(--space-sm);
+  }
+  
+  #appheader,
+  #appsubheader,
+  #appfooter {
+    padding: var(--space-xs) var(--space-sm);
+  }
+  
+  #appmodal-container {
+    max-width: 95vw;
+    max-height: 95vh;
+  }
+}

package/lib/reactivity/state.ts

@@ -0,0 +1,78 @@
+/**
+ * Simple reactive state container
+ */
+export class State<T> {
+    private _value: T;
+    private _subscribers: Set<(value: T) => void> = new Set();
+
+    constructor(initialValue: T) {
+        this._value = initialValue;
+    }
+
+    /**
+     * Get current value
+     */
+    get value(): T {
+        return this._value;
+    }
+
+    /**
+     * Set new value and notify subscribers
+     */
+    set(newValue: T): void {
+        this._value = newValue;
+        this._notify();
+    }
+
+    /**
+     * Subscribe to value changes
+     */
+    subscribe(callback: (value: T) => void): () => void {
+        this._subscribers.add(callback);
+        // Call immediately with current value
+        callback(this._value);
+        // Return unsubscribe function
+        return () => this._subscribers.delete(callback);
+    }
+
+    /**
+     * Notify all subscribers
+     */
+    private _notify(): void {
+        this._subscribers.forEach(callback => callback(this._value));
+    }
+
+    /**
+     * Helper methods for numeric state
+     */
+    increment(): void {
+        if (typeof this._value === 'number') {
+            this.set((this._value + 1) as T);
+        }
+    }
+
+    decrement(): void {
+        if (typeof this._value === 'number') {
+            this.set((this._value - 1) as T);
+        }
+    }
+
+    add(amount: number): void {
+        if (typeof this._value === 'number') {
+            this.set((this._value + amount) as T);
+        }
+    }
+
+    subtract(amount: number): void {
+        if (typeof this._value === 'number') {
+            this.set((this._value - amount) as T);
+        }
+    }
+}
+
+/**
+ * Factory function to create reactive state
+ */
+export function state<T>(initialValue: T): State<T> {
+    return new State(initialValue);
+}