juxscript 1.0.62 → 1.0.63

package/lib/layouts/default.css

@@ -1,260 +0,0 @@
-/* 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

@@ -1,334 +0,0 @@
-/* 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

@@ -1,78 +0,0 @@
-/**
- * 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);
-}