juxscript 1.0.2 → 1.0.4

package/lib/presets/notion.css

@@ -0,0 +1,521 @@
+/**
+ * Notion Preset - Combined Layout + Theming
+ * Light/Dark mode via [data-theme] attribute
+ */
+
+/* ============================================
+   BASE TOKENS (Theme-independent)
+   ============================================ */
+:root {
+  /* Typography */
+  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-family-mono: 'Courier New', monospace;
+  
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 2rem;
+  
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+  
+  /* Spacing */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+  --space-3xl: 4rem;
+  
+  /* Borders */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+  
+  --border-width: 1px;
+  
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  
+  /* Semantic colors (theme-independent) */
+  --color-success: #10b981;
+  --color-warning: #f59e0b;
+  --color-danger: #ef4444;
+  --color-info: #3b82f6;
+}
+
+/* ============================================
+   LIGHT THEME (Default)
+   ============================================ */
+:root,
+[data-theme="light"] {
+  --color-brand: #0a9ca5;
+  --color-brand-hover: #088892;
+  
+  --color-text-primary: #111827;
+  --color-text-secondary: #6b7280;
+  --color-text-tertiary: #9ca3af;
+  --color-text-inverse: #ffffff;
+  
+  --color-surface-base: #f9fafb;
+  --color-surface-elevated: #ffffff;
+  --color-surface-hover: #f3f4f6;
+  --color-background: #ffffff;
+  
+  --color-border: rgba(0, 0, 0, 0.06);
+  --color-border-hover: rgba(0, 0, 0, 0.12);
+  
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
+  --shadow-xl: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
+}
+
+/* ============================================
+   DARK THEME
+   ============================================ */
+[data-theme="dark"] {
+  --color-brand: #14b8a6;
+  --color-brand-hover: #0d9488;
+  
+  --color-text-primary: #f9fafb;
+  --color-text-secondary: #d1d5db;
+  --color-text-tertiary: #9ca3af;
+  --color-text-inverse: #111827;
+  
+  --color-surface-base: #1f2937;
+  --color-surface-elevated: #374151;
+  --color-surface-hover: #4b5563;
+  --color-background: #111827;
+  
+  --color-border: rgba(255, 255, 255, 0.08);
+  --color-border-hover: rgba(255, 255, 255, 0.16);
+  
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
+  --shadow-xl: 0 8px 16px 0 rgba(0, 0, 0, 0.6);
+}
+
+/* ============================================
+   GLOBAL STYLES
+   ============================================ */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
+  color: var(--color-text-primary);
+  background: var(--color-background);
+  transition: background-color var(--transition-base), color var(--transition-base);
+}
+
+/* ============================================
+   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);
+  transition: background-color var(--transition-base), border-color var(--transition-base);
+}
+
+#appheader-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  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);
+  align-items: center;
+}
+
+/* Subheader - Hidden in notion layout */
+#appsubheader,
+#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), 
+              background-color var(--transition-base), 
+              border-color 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);
+  transition: background-color var(--transition-base);
+}
+
+#appmain-content {
+  max-width: 100%;
+}
+
+/* ============================================
+   ASIDE (Hidden in Notion layout)
+   ============================================ */
+#appaside,
+#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;
+  transition: background-color var(--transition-base), border-color var(--transition-base);
+}
+
+#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-xl);
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: background-color var(--transition-base);
+}
+
+#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;
+}
+
+/* ============================================
+   THEME TOGGLE - CLEAN & MINIMAL
+   ============================================ */
+
+.jux-theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.jux-theme-toggle-button {
+  /* Remove all borders and backgrounds */
+  padding: var(--space-sm);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: 1.5rem; /* Bigger icons */
+  line-height: 1;
+  transition: all var(--transition-fast);
+  color: var(--color-text-secondary);
+  
+  /* Smooth icon transition */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.jux-theme-toggle-button:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+  transform: scale(1.05);
+}
+
+.jux-theme-toggle-button:active {
+  transform: scale(0.95);
+}
+
+/* Light mode icon styling */
+[data-theme="light"] .jux-theme-toggle-button {
+  color: #f59e0b; /* Warm sun color */
+}
+
+[data-theme="light"] .jux-theme-toggle-button:hover {
+  color: #d97706;
+}
+
+/* Dark mode icon styling */
+[data-theme="dark"] .jux-theme-toggle-button {
+  color: #fbbf24; /* Bright moon color */
+}
+
+[data-theme="dark"] .jux-theme-toggle-button:hover {
+  color: #fcd34d;
+}
+
+/* Dropdown variant (if needed) */
+.jux-theme-toggle-select {
+  padding: var(--space-sm) var(--space-md);
+  background: transparent;
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: var(--font-size-base);
+  color: var(--color-text-primary);
+  transition: all var(--transition-fast);
+}
+
+.jux-theme-toggle-select:hover {
+  border-color: var(--color-border-hover);
+  background: var(--color-surface-hover);
+}
+
+.jux-theme-toggle-select:focus {
+  outline: none;
+  border-color: var(--color-brand);
+}
+
+/* ============================================
+   RESPONSIVE BREAKPOINTS
+   ============================================ */
+
+/* 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;
+  }
+  
+  .jux-theme-toggle-button {
+    width: 2.25rem;
+    height: 2.25rem;
+    font-size: 1.25rem;
+  }
+}
+
+/* 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;
+  }
+}
+
+/* ============================================
+   SMOOTH TRANSITIONS
+   ============================================ */
+body,
+#app,
+#appheader,
+#appsidebar,
+#appmain,
+#appfooter,
+#appmodal-container,
+.jux-theme-toggle-button {
+  transition: background-color var(--transition-base), 
+              border-color var(--transition-base),
+              color var(--transition-base);
+}

package/lib/presets/notion.jux

@@ -0,0 +1,27 @@
+// muse: notion layout preset
+export function layout() {
+    /* styles */
+    jux.include('/examples/presets/notion.css');
+
+    /* regions */
+    jux.header('appheader').render("#app");
+    jux.header('appsubheader').render("#app");
+    jux.sidebar('appsidebar').render("#app");
+    jux.main('appmain').render("#app");
+    jux.sidebar('appaside').render("#app");
+    jux.footer('appfooter').render("#app");
+    jux.modal('appmodal').render("#app");
+
+    /* theme toggle in header */
+    jux.themeToggle('theme-toggle', {
+        themes: [
+            { id: 'light', label: 'Light', icon: '☀️' },
+            { id: 'dark', label: 'Dark', icon: '🌙' }
+        ],
+        variant: 'button',
+        showLabel: false
+    }).render('#appheader');
+}
+
+// Auto-run on import
+layout();