juxscript 1.0.0

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/layouts/notion.css

@@ -0,0 +1,258 @@
+/* Notion Layout Grid */
+#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 notion 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 notion 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;
+  }
+}