synthos 0.7.2 → 0.8.0

package/required-pages/pages.html

@@ -4,18 +4,83 @@
     <title>SynthOS - Pages</title>
     <script id="theme-info" src="/api/theme-info.js" data-locked="true"></script>
     <link id="theme-css" rel="stylesheet" href="/api/theme.css" data-locked="true">
-    <style>.advanced-options{margin-top:8px}.advanced-toggle{background:0 0;border:none;color:var(--text-secondary);font-size:13px;cursor:pointer;padding:8px 0;display:flex;align-items:center;gap:6px;transition:color .2s}.advanced-toggle:hover{color:var(--accent-primary)}.toggle-icon{font-size:10px;transition:transform .2s}.toggle-icon.open{transform:rotate(90deg)}.advanced-content{padding-left:16px;border-left:2px solid var(--border-color);margin-left:4px}</style>
-    <style>.saved-pages{font-size:22px;font-weight:700;min-height:var(--header-min-height);padding:var(--header-padding-vertical) var(--header-padding-horizontal);line-height:var(--header-line-height);display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border-radius:12px;width:100%;box-shadow:0 6px 25px var(--accent-glow);position:relative;z-index:1;margin-bottom:20px}.page-category{width:100%;margin-bottom:20px;position:relative;z-index:1}.category-title{font-size:16px;color:var(--text-secondary);margin-bottom:12px;padding-left:5px;border-left:3px solid var(--accent-tertiary)}.page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.page-link{padding:12px 16px;background:linear-gradient(135deg,rgba(102,126,234,.15) 0,rgba(118,75,162,.15) 100%);border:1px solid var(--border-color);border-radius:10px;color:var(--text-primary);text-decoration:none;text-align:center;font-size:14px;transition:.3s;cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;position:relative}.page-link:hover{background:linear-gradient(135deg,rgba(102,126,234,.3) 0,rgba(118,75,162,.3) 100%);border-color:var(--text-secondary);box-shadow:0 4px 15px var(--accent-glow);color:var(--accent-tertiary);transform:translateY(-2px)}.page-link .scroll-text{display:inline-block;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.page-link.scrolling .scroll-text{text-overflow:clip;overflow:visible;animation:scrollText var(--scroll-duration,3s) linear infinite}@keyframes scrollText{0%,25%{transform:translateX(0)}100%,75%{transform:translateX(var(--scroll-distance,-50%))}}.page-link.pinned{background:linear-gradient(135deg,rgba(102,126,234,.35) 0,rgba(118,75,162,.35) 100%);border:2px solid var(--accent-tertiary);box-shadow:0 2px 12px var(--accent-glow)}.page-link.pinned:hover{background:linear-gradient(135deg,rgba(102,126,234,.5) 0,rgba(118,75,162,.5) 100%);box-shadow:0 4px 20px var(--accent-glow)}.page-link.builder-page{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border:none;box-shadow:0 4px 20px var(--accent-glow);font-weight:600}.page-link.builder-page:hover{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));filter:brightness(1.1);box-shadow:0 6px 25px var(--accent-glow);color:#fff;transform:translateY(-2px)}.light-mode .page-link.pinned{background:linear-gradient(135deg,rgba(102,126,234,.3) 0,rgba(192,84,212,.25) 100%);border-color:var(--accent-secondary)}.light-mode .page-link.pinned:hover{background:linear-gradient(135deg,rgba(102,126,234,.45) 0,rgba(192,84,212,.4) 100%)}.filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:nowrap}.filter-buttons-container{display:flex;gap:8px;flex-shrink:1;min-width:0;overflow:hidden}.filter-btn{padding:6px 14px;border-radius:20px;border:1px solid var(--border-color);background:0 0;color:var(--text-secondary);font-size:13px;cursor:pointer;transition:.2s;white-space:nowrap;flex-shrink:0}.filter-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.filter-btn.active{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border-color:transparent}.more-dropdown{position:relative;flex-shrink:0}.more-btn{position:relative}.more-menu{position:absolute;top:100%;left:0;margin-top:4px;min-width:150px;max-height:250px;overflow-y:auto;border-radius:8px;padding:4px 0;box-shadow:0 8px 30px rgba(0,0,0,.4);display:none;border:1px solid var(--border-color);background:rgba(30,30,50,.95);z-index:100}.more-menu.show{display:block}.more-menu-item{padding:8px 16px;font-size:13px;cursor:pointer;color:var(--text-primary);transition:background .15s;white-space:nowrap}.more-menu-item:hover{background:linear-gradient(135deg,rgba(102,126,234,.3) 0,rgba(118,75,162,.3) 100%)}.more-menu-item.active{background:linear-gradient(135deg,rgba(102,126,234,.2) 0,rgba(118,75,162,.2) 100%);color:var(--accent-tertiary)}.search-input{margin-left:auto;padding:6px 12px;border-radius:20px;border:1px solid var(--border-color);background:0 0;color:var(--text-primary);font-size:13px;outline:0;width:180px;min-width:120px;flex-shrink:0;transition:border-color .2s}.search-input:focus{border-color:var(--accent-primary)}.search-input::placeholder{color:var(--text-secondary)}.context-menu{position:fixed;z-index:1000;min-width:180px;border-radius:8px;padding:4px 0;box-shadow:0 8px 30px rgba(0,0,0,.4);display:none;border:1px solid var(--border-color);background:rgba(30,30,50,.95)}.context-menu-item{padding:8px 16px;font-size:13px;cursor:pointer;color:var(--text-primary);transition:background .15s}.context-menu-item:hover{background:linear-gradient(135deg,rgba(102,126,234,.3) 0,rgba(118,75,162,.3) 100%)}.light-mode .context-menu,.light-mode .more-menu{background:rgba(255,255,255,.97);box-shadow:0 8px 30px rgba(0,0,0,.15)}</style>
-    <style>.advanced-options{margin-top:8px}.advanced-toggle{background:0 0;border:none;color:var(--text-secondary);font-size:13px;cursor:pointer;padding:8px 0;display:flex;align-items:center;gap:6px;transition:color .2s}.advanced-toggle:hover{color:var(--accent-primary)}.toggle-icon{font-size:10px;transition:transform .2s}.toggle-icon.open{transform:rotate(90deg)}.advanced-content{padding-left:16px;border-left:2px solid var(--border-color);margin-left:4px}</style>
-    <style>.saved-pages{font-size:22px;font-weight:700;min-height:var(--header-min-height);padding:var(--header-padding-vertical) var(--header-padding-horizontal);line-height:var(--header-line-height);display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border-radius:12px;width:100%;box-shadow:0 6px 25px var(--accent-glow);position:relative;z-index:1;margin-bottom:20px}.page-category{width:100%;margin-bottom:20px;position:relative;z-index:1}.category-title{font-size:16px;color:var(--text-secondary);margin-bottom:12px;padding-left:5px;border-left:3px solid var(--accent-tertiary)}.page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.page-link{padding:12px 16px;background:linear-gradient(135deg,rgba(102,126,234,.15) 0,rgba(118,75,162,.15) 100%);border:1px solid var(--border-color);border-radius:10px;color:var(--text-primary);text-decoration:none;text-align:center;font-size:14px;transition:.3s;cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;position:relative}.page-link:hover{background:linear-gradient(135deg,rgba(102,126,234,.3) 0,rgba(118,75,162,.3) 100%);border-color:var(--text-secondary);box-shadow:0 4px 15px var(--accent-glow);color:var(--accent-tertiary);transform:translateY(-2px)}.page-link .scroll-text{display:inline-block;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.page-link.scrolling .scroll-text{text-overflow:clip;overflow:visible;animation:scrollText var(--scroll-duration,3s) linear infinite}@keyframes scrollText{0%,30%{transform:translateX(0)}100%,70%{transform:translateX(var(--scroll-distance,-50%))}}.page-link.pinned{background:linear-gradient(135deg,rgba(102,126,234,.35) 0,rgba(118,75,162,.35) 100%);border:2px solid var(--accent-tertiary);box-shadow:0 2px 12px var(--accent-glow)}.page-link.pinned:hover{background:linear-gradient(135deg,rgba(102,126,234,.5) 0,rgba(118,75,162,.5) 100%);box-shadow:0 4px 20px var(--accent-glow)}.page-link.builder-page{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border:none;box-shadow:0 4px 20px var(--accent-glow);font-weight:600}.page-link.builder-page:hover{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));filter:brightness(1.1);box-shadow:0 6px 25px var(--accent-glow);color:#fff;transform:translateY(-2px)}.light-mode .page-link.pinned{background:linear-gradient(135deg,rgba(102,126,234,.3) 0,rgba(192,84,212,.25) 100%);border-color:var(--accent-secondary)}.light-mode .page-link.pinned:hover{background:linear-gradient(135deg,rgba(102,126,234,.45) 0,rgba(192,84,212,.4) 100%)}.filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:nowrap}.filter-buttons-container{display:flex;gap:8px;flex-shrink:1;min-width:0;overflow:hidden}.filter-btn{padding:6px 14px;border-radius:20px;border:1px solid var(--border-color);background:0 0;color:var(--text-secondary);font-size:13px;cursor:pointer;transition:.2s;white-space:nowrap;flex-shrink:0}.filter-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.filter-btn.active{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border-color:transparent}.more-dropdown{position:relative;flex-shrink:0}.more-btn{position:relative}.more-menu{position:absolute;top:100%;left:0;margin-top:4px;min-width:150px;max-height:250px;overflow-y:auto;border-radius:8px;padding:4px 0;box-shadow:0 8px 30px rgba(0,0,0,.4);display:none;border:1px solid var(--border-color);background:rgba(30,30,50,.95);z-index:100}.more-menu.show{display:block}.more-menu-item{padding:8px 16px;font-size:13px;cursor:pointer;color:var(--text-primary);transition:background .15s;white-space:nowrap}.more-menu-item:hover{background:linear-gradient(135deg,rgba(102,126,234,.3) 0,rgba(118,75,162,.3) 100%)}.more-menu-item.active{background:linear-gradient(135deg,rgba(102,126,234,.2) 0,rgba(118,75,162,.2) 100%);color:var(--accent-tertiary)}.search-input{margin-left:auto;padding:6px 12px;border-radius:20px;border:1px solid var(--border-color);background:0 0;color:var(--text-primary);font-size:13px;outline:0;width:180px;min-width:120px;flex-shrink:0;transition:border-color .2s}.search-input:focus{border-color:var(--accent-primary)}.search-input::placeholder{color:var(--text-secondary)}.context-menu{position:fixed;z-index:1000;min-width:180px;border-radius:8px;padding:4px 0;box-shadow:0 8px 30px rgba(0,0,0,.4);display:none;border:1px solid var(--border-color);background:rgba(30,30,50,.95)}.context-menu-item{padding:8px 16px;font-size:13px;cursor:pointer;color:var(--text-primary);transition:background .15s}.context-menu-item:hover{background:linear-gradient(135deg,rgba(102,126,234,.3) 0,rgba(118,75,162,.3) 100%)}.light-mode .context-menu,.light-mode .more-menu{background:rgba(255,255,255,.97);box-shadow:0 8px 30px rgba(0,0,0,.15)}</style>
-    <style>.advanced-options{margin-top:8px}.advanced-toggle{background:0 0;border:none;color:var(--text-secondary);font-size:13px;cursor:pointer;padding:8px 0;display:flex;align-items:center;gap:6px;transition:color .2s}.advanced-toggle:hover{color:var(--accent-primary)}.toggle-icon{font-size:10px;transition:transform .2s}.toggle-icon.open{transform:rotate(90deg)}.advanced-content{padding-left:16px;border-left:2px solid var(--border-color);margin-left:4px}</style>
-    <style>.saved-pages{font-size:22px;font-weight:700;min-height:var(--header-min-height);padding:var(--header-padding-vertical) var(--header-padding-horizontal);line-height:var(--header-line-height);display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border-radius:12px;width:100%;box-shadow:0 6px 25px var(--accent-glow);position:relative;z-index:1;margin-bottom:20px}.page-category{width:100%;margin-bottom:20px;position:relative;z-index:1}.category-title{font-size:16px;color:var(--text-secondary);margin-bottom:12px;padding-left:5px;border-left:3px solid var(--accent-tertiary)}.page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.page-link{padding:12px 16px;background:linear-gradient(135deg,rgba(102,126,234,.15) 0,rgba(118,75,162,.15) 100%);border:1px solid var(--border-color);border-radius:10px;color:var(--text-primary);text-decoration:none;text-align:center;font-size:14px;transition:.3s;cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;position:relative}.page-link:hover{background:linear-gradient(135deg,rgba(102,126,234,.3) 0,rgba(118,75,162,.3) 100%);border-color:var(--text-secondary);box-shadow:0 4px 15px var(--accent-glow);color:var(--accent-tertiary);transform:translateY(-2px)}.page-link .scroll-text{display:inline-block;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.page-link.scrolling .scroll-text{text-overflow:clip;overflow:visible;animation:scrollText var(--scroll-duration,3s) linear infinite}@keyframes scrollText{0%,15%{transform:translateX(0)}100%,85%{transform:translateX(var(--scroll-distance,-50%))}}.page-link.pinned{background:linear-gradient(135deg,rgba(102,126,234,.35) 0,rgba(118,75,162,.35) 100%);border:2px solid var(--accent-tertiary);box-shadow:0 2px 12px var(--accent-glow)}.page-link.pinned:hover{background:linear-gradient(135deg,rgba(102,126,234,.5) 0,rgba(118,75,162,.5) 100%);box-shadow:0 4px 20px var(--accent-glow)}.page-link.builder-page{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border:none;box-shadow:0 4px 20px var(--accent-glow);font-weight:600}.page-link.builder-page:hover{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));filter:brightness(1.1);box-shadow:0 6px 25px var(--accent-glow);color:#fff;transform:translateY(-2px)}.light-mode .page-link.pinned{background:linear-gradient(135deg,rgba(102,126,234,.3) 0,rgba(192,84,212,.25) 100%);border-color:var(--accent-secondary)}.light-mode .page-link.pinned:hover{background:linear-gradient(135deg,rgba(102,126,234,.45) 0,rgba(192,84,212,.4) 100%)}.filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:nowrap}.filter-buttons-container{display:flex;gap:8px;flex-shrink:1;min-width:0;overflow:hidden}.filter-btn{padding:6px 14px;border-radius:20px;border:1px solid var(--border-color);background:0 0;color:var(--text-secondary);font-size:13px;cursor:pointer;transition:.2s;white-space:nowrap;flex-shrink:0}.filter-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.filter-btn.active{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border-color:transparent}.more-dropdown{position:relative;flex-shrink:0}.more-btn{position:relative}.more-menu{position:absolute;top:100%;left:0;margin-top:4px;min-width:150px;max-height:250px;overflow-y:auto;border-radius:8px;padding:4px 0;box-shadow:0 8px 30px rgba(0,0,0,.4);display:none;border:1px solid var(--border-color);background:rgba(30,30,50,.95);z-index:100}.more-menu.show{display:block}.more-menu-item{padding:8px 16px;font-size:13px;cursor:pointer;color:var(--text-primary);transition:background .15s;white-space:nowrap}.more-menu-item:hover{background:linear-gradient(135deg,rgba(102,126,234,.3) 0,rgba(118,75,162,.3) 100%)}.more-menu-item.active{background:linear-gradient(135deg,rgba(102,126,234,.2) 0,rgba(118,75,162,.2) 100%);color:var(--accent-tertiary)}.search-input{margin-left:auto;padding:6px 12px;border-radius:20px;border:1px solid var(--border-color);background:0 0;color:var(--text-primary);font-size:13px;outline:0;width:180px;min-width:120px;flex-shrink:0;transition:border-color .2s}.search-input:focus{border-color:var(--accent-primary)}.search-input::placeholder{color:var(--text-secondary)}.context-menu{position:fixed;z-index:1000;min-width:180px;border-radius:8px;padding:4px 0;box-shadow:0 8px 30px rgba(0,0,0,.4);display:none;border:1px solid var(--border-color);background:rgba(30,30,50,.95)}.context-menu-item{padding:8px 16px;font-size:13px;cursor:pointer;color:var(--text-primary);transition:background .15s}.context-menu-item:hover{background:linear-gradient(135deg,rgba(102,126,234,.3) 0,rgba(118,75,162,.3) 100%)}.light-mode .context-menu,.light-mode .more-menu{background:rgba(255,255,255,.97);box-shadow:0 8px 30px rgba(0,0,0,.15)}</style>
-    <style>.advanced-options{margin-top:8px}.advanced-toggle{background:0 0;border:none;color:var(--text-secondary);font-size:13px;cursor:pointer;padding:8px 0;display:flex;align-items:center;gap:6px;transition:color .2s}.advanced-toggle:hover{color:var(--accent-primary)}.toggle-icon{font-size:10px;transition:transform .2s}.toggle-icon.open{transform:rotate(90deg)}.advanced-content{padding-left:16px;border-left:2px solid var(--border-color);margin-left:4px}</style>
-    <style>.saved-pages{font-size:22px;font-weight:700;min-height:var(--header-min-height);padding:var(--header-padding-vertical) var(--header-padding-horizontal);line-height:var(--header-line-height);display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border-radius:12px;width:100%;box-shadow:0 6px 25px var(--accent-glow);position:relative;z-index:1;margin-bottom:20px}.page-category{width:100%;margin-bottom:20px;position:relative;z-index:1}.category-title{font-size:16px;color:var(--text-secondary);margin-bottom:12px;padding-left:5px;border-left:3px solid var(--accent-tertiary)}.page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.page-link{padding:12px 16px;background:linear-gradient(135deg,rgba(102,126,234,.15) 0,rgba(118,75,162,.15) 100%);border:1px solid var(--border-color);border-radius:10px;color:var(--text-primary);text-decoration:none;text-align:center;font-size:14px;transition:.3s;cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;position:relative}.page-link:hover{background:linear-gradient(135deg,rgba(102,126,234,.3) 0,rgba(118,75,162,.3) 100%);border-color:var(--text-secondary);box-shadow:0 4px 15px var(--accent-glow);color:var(--accent-tertiary);transform:translateY(-2px)}.page-link .scroll-text{display:inline-block;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.page-link.scrolling .scroll-text{text-overflow:clip;overflow:visible;animation:scrollText var(--scroll-duration,3s) linear infinite}@keyframes scrollText{0%,10%{transform:translateX(0)}100%,90%{transform:translateX(var(--scroll-distance,-50%))}}.page-link.pinned{background:linear-gradient(135deg,rgba(102,126,234,.35) 0,rgba(118,75,162,.35) 100%);border:2px solid var(--accent-tertiary);box-shadow:0 2px 12px var(--accent-glow)}.page-link.pinned:hover{background:linear-gradient(135deg,rgba(102,126,234,.5) 0,rgba(118,75,162,.5) 100%);box-shadow:0 4px 20px var(--accent-glow)}.page-link.builder-page{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border:none;box-shadow:0 4px 20px var(--accent-glow);font-weight:600}.page-link.builder-page:hover{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));filter:brightness(1.1);box-shadow:0 6px 25px var(--accent-glow);color:#fff;transform:translateY(-2px)}.light-mode .page-link.pinned{background:linear-gradient(135deg,rgba(102,126,234,.3) 0,rgba(192,84,212,.25) 100%);border-color:var(--accent-secondary)}.light-mode .page-link.pinned:hover{background:linear-gradient(135deg,rgba(102,126,234,.45) 0,rgba(192,84,212,.4) 100%)}.filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:nowrap}.filter-buttons-container{display:flex;gap:8px;flex-shrink:1;min-width:0;overflow:hidden}.filter-btn{padding:6px 14px;border-radius:20px;border:1px solid var(--border-color);background:0 0;color:var(--text-secondary);font-size:13px;cursor:pointer;transition:.2s;white-space:nowrap;flex-shrink:0}.filter-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.filter-btn.active{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border-color:transparent}.more-dropdown{position:relative;flex-shrink:0}.more-btn{position:relative}.more-menu{position:absolute;top:100%;left:0;margin-top:4px;min-width:150px;max-height:250px;overflow-y:auto;border-radius:8px;padding:4px 0;box-shadow:0 8px 30px rgba(0,0,0,.4);display:none;border:1px solid var(--border-color);background:rgba(30,30,50,.95);z-index:100}.more-menu.show{display:block}.more-menu-item{padding:8px 16px;font-size:13px;cursor:pointer;color:var(--text-primary);transition:background .15s;white-space:nowrap}.more-menu-item:hover{background:linear-gradient(135deg,rgba(102,126,234,.3) 0,rgba(118,75,162,.3) 100%)}.more-menu-item.active{background:linear-gradient(135deg,rgba(102,126,234,.2) 0,rgba(118,75,162,.2) 100%);color:var(--accent-tertiary)}.search-input{margin-left:auto;padding:6px 12px;border-radius:20px;border:1px solid var(--border-color);background:0 0;color:var(--text-primary);font-size:13px;outline:0;width:180px;min-width:120px;flex-shrink:0;transition:border-color .2s}.search-input:focus{border-color:var(--accent-primary)}.search-input::placeholder{color:var(--text-secondary)}.context-menu{position:fixed;z-index:1000;min-width:180px;border-radius:8px;padding:4px 0;box-shadow:0 8px 30px rgba(0,0,0,.4);display:none;border:1px solid var(--border-color);background:rgba(30,30,50,.95)}.context-menu-item{padding:8px 16px;font-size:13px;cursor:pointer;color:var(--text-primary);transition:background .15s}.context-menu-item:hover{background:linear-gradient(135deg,rgba(102,126,234,.3) 0,rgba(118,75,162,.3) 100%)}.light-mode .context-menu,.light-mode .more-menu{background:rgba(255,255,255,.97);box-shadow:0 8px 30px rgba(0,0,0,.15)}.version-badge{display:block;font-size:10px;color:var(--accent-tertiary);margin-top:4px;opacity:.8}.page-link.needs-upgrade{border:1px dashed var(--accent-tertiary);background:linear-gradient(135deg,rgba(102,126,234,.08) 0,rgba(118,75,162,.08) 100%);animation:3s ease-in-out infinite upgradeGlow;overflow:visible;z-index:2}.page-link.needs-upgrade:hover{background:linear-gradient(135deg,rgba(102,126,234,.2) 0,rgba(118,75,162,.2) 100%);border-color:var(--accent-primary)}@keyframes upgradeGlow{0%,100%{box-shadow:0 0 0 transparent}50%{box-shadow:0 0 12px var(--accent-glow)}}.upgrade-badge{position:absolute;top:-6px;right:-6px;font-size:9px;color:#fff;font-weight:600;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));padding:2px 7px;border-radius:10px;line-height:1.3;box-shadow:0 2px 8px var(--accent-glow);pointer-events:none;z-index:10}.light-mode .page-link.needs-upgrade{background:linear-gradient(135deg,rgba(102,126,234,.06) 0,rgba(192,84,212,.06) 100%)}.upgrade-toast{position:fixed;bottom:20px;right:20px;padding:12px 20px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border-radius:8px;font-size:13px;box-shadow:0 4px 15px var(--accent-glow);z-index:2000;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}.upgrade-toast.show{opacity:1;transform:translateY(0)}</style>
+    <style>
+        /* Advanced options */
+        .advanced-options { margin-top: 8px }
+        .advanced-toggle { background: 0 0; border: none; color: var(--text-secondary); font-size: 13px; cursor: pointer; padding: 8px 0; display: flex; align-items: center; gap: 6px; transition: color .2s }
+        .advanced-toggle:hover { color: var(--accent-primary) }
+        .toggle-icon { font-size: 10px; transition: transform .2s }
+        .toggle-icon.open { transform: rotate(90deg) }
+        .advanced-content { padding-left: 16px; border-left: 2px solid var(--border-color); margin-left: 4px }
+
+        /* Header */
+        .saved-pages { font-size: 22px; font-weight: 700; min-height: var(--header-min-height); padding: var(--header-padding-vertical) var(--header-padding-horizontal); line-height: var(--header-line-height); display: flex; align-items: center; justify-content: center; box-sizing: border-box; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; border-radius: 12px; width: 100%; box-shadow: 0 6px 25px var(--accent-glow); position: relative; z-index: 1; margin-bottom: 20px }
+
+        /* Category sections */
+        .page-category { width: 100%; margin-bottom: 20px; position: relative; z-index: 1 }
+        .category-title { font-size: 16px; color: var(--text-secondary); margin-bottom: 12px; padding-left: 5px; border-left: 3px solid var(--accent-tertiary) }
+        .page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px }
+
+        /* Page links */
+        .page-link { padding: 12px 16px; background: linear-gradient(135deg, rgba(102,126,234,.15) 0, rgba(118,75,162,.15) 100%); border: 1px solid var(--border-color); border-radius: 10px; color: var(--text-primary); text-decoration: none; text-align: center; font-size: 14px; transition: .3s; cursor: pointer; user-select: none; white-space: nowrap; overflow: hidden; position: relative }
+        .page-link:hover { background: linear-gradient(135deg, rgba(102,126,234,.3) 0, rgba(118,75,162,.3) 100%); border-color: var(--text-secondary); box-shadow: 0 4px 15px var(--accent-glow); color: var(--accent-tertiary); transform: translateY(-2px) }
+        .page-link .scroll-text { display: inline-block; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis }
+        .page-link.scrolling .scroll-text { text-overflow: clip; overflow: visible; animation: scrollText var(--scroll-duration, 3s) linear infinite }
+        @keyframes scrollText { 0%, 10% { transform: translateX(0) } 100%, 90% { transform: translateX(var(--scroll-distance, -50%)) } }
+
+        /* Pinned pages */
+        .page-link.pinned { background: linear-gradient(135deg, rgba(102,126,234,.35) 0, rgba(118,75,162,.35) 100%); border: 2px solid var(--accent-tertiary); box-shadow: 0 2px 12px var(--accent-glow) }
+        .page-link.pinned:hover { background: linear-gradient(135deg, rgba(102,126,234,.5) 0, rgba(118,75,162,.5) 100%); box-shadow: 0 4px 20px var(--accent-glow) }
+
+        /* Builder page */
+        .page-link.builder-page { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; border: none; box-shadow: 0 4px 20px var(--accent-glow); font-weight: 600 }
+        .page-link.builder-page:hover { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); filter: brightness(1.1); box-shadow: 0 6px 25px var(--accent-glow); color: #fff; transform: translateY(-2px) }
+
+        /* Light mode pinned overrides */
+        .light-mode .page-link.pinned { background: linear-gradient(135deg, rgba(102,126,234,.3) 0, rgba(192,84,212,.25) 100%); border-color: var(--accent-secondary) }
+        .light-mode .page-link.pinned:hover { background: linear-gradient(135deg, rgba(102,126,234,.45) 0, rgba(192,84,212,.4) 100%) }
+
+        /* Filter bar */
+        .filter-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: nowrap }
+        .filter-buttons-container { display: flex; gap: 8px; flex-shrink: 1; min-width: 0; overflow: hidden }
+        .filter-btn { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border-color); background: 0 0; color: var(--text-secondary); font-size: 13px; cursor: pointer; transition: .2s; white-space: nowrap; flex-shrink: 0 }
+        .filter-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary) }
+        .filter-btn.active { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; border-color: transparent }
+
+        /* More dropdown */
+        .more-dropdown { position: relative; flex-shrink: 0 }
+        .more-btn { position: relative }
+        .more-menu { position: absolute; top: 100%; left: 0; margin-top: 4px; min-width: 150px; max-height: 250px; overflow-y: auto; border-radius: 8px; padding: 4px 0; box-shadow: 0 8px 30px rgba(0,0,0,.4); display: none; border: 1px solid var(--border-color); background: rgba(30,30,50,.95); z-index: 100 }
+        .more-menu.show { display: block }
+        .more-menu-item { padding: 8px 16px; font-size: 13px; cursor: pointer; color: var(--text-primary); transition: background .15s; white-space: nowrap }
+        .more-menu-item:hover { background: linear-gradient(135deg, rgba(102,126,234,.3) 0, rgba(118,75,162,.3) 100%) }
+        .more-menu-item.active { background: linear-gradient(135deg, rgba(102,126,234,.2) 0, rgba(118,75,162,.2) 100%); color: var(--accent-tertiary) }
+
+        /* Search */
+        .search-input { margin-left: auto; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border-color); background: 0 0; color: var(--text-primary); font-size: 13px; outline: 0; width: 180px; min-width: 120px; flex-shrink: 0; transition: border-color .2s }
+        .search-input:focus { border-color: var(--accent-primary) }
+        .search-input::placeholder { color: var(--text-secondary) }
+
+        /* Context menu */
+        .context-menu { position: fixed; z-index: 1000; min-width: 180px; border-radius: 8px; padding: 4px 0; box-shadow: 0 8px 30px rgba(0,0,0,.4); display: none; border: 1px solid var(--border-color); background: rgba(30,30,50,.95) }
+        .context-menu-item { padding: 8px 16px; font-size: 13px; cursor: pointer; color: var(--text-primary); transition: background .15s }
+        .context-menu-item:hover { background: linear-gradient(135deg, rgba(102,126,234,.3) 0, rgba(118,75,162,.3) 100%) }
+        .light-mode .context-menu, .light-mode .more-menu { background: rgba(255,255,255,.97); box-shadow: 0 8px 30px rgba(0,0,0,.15) }
+
+        /* Upgrade badge & toast */
+        .version-badge { display: block; font-size: 10px; color: var(--accent-tertiary); margin-top: 4px; opacity: .8 }
+        .page-link.needs-upgrade { border: 1px dashed var(--accent-tertiary); background: linear-gradient(135deg, rgba(102,126,234,.08) 0, rgba(118,75,162,.08) 100%); animation: 3s ease-in-out infinite upgradeGlow; overflow: visible; z-index: 2 }
+        .page-link.needs-upgrade:hover { background: linear-gradient(135deg, rgba(102,126,234,.2) 0, rgba(118,75,162,.2) 100%); border-color: var(--accent-primary) }
+        @keyframes upgradeGlow { 0%, 100% { box-shadow: 0 0 0 transparent } 50% { box-shadow: 0 0 12px var(--accent-glow) } }
+        .upgrade-badge { position: absolute; top: -6px; right: -6px; font-size: 9px; color: #fff; font-weight: 600; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); padding: 2px 7px; border-radius: 10px; line-height: 1.3; box-shadow: 0 2px 8px var(--accent-glow); pointer-events: none; z-index: 10 }
+        .light-mode .page-link.needs-upgrade { background: linear-gradient(135deg, rgba(102,126,234,.06) 0, rgba(192,84,212,.06) 100%) }
+        .upgrade-toast { position: fixed; bottom: 20px; right: 20px; padding: 12px 20px; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; border-radius: 8px; font-size: 13px; box-shadow: 0 4px 15px var(--accent-glow); z-index: 2000; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s }
+        .upgrade-toast.show { opacity: 1; transform: translateY(0) }
+    </style>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.1.1/marked.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.1.0/mermaid.min.js"></script>
-    <script id="page-info" src="/api/page-info.js?page=pages"></script>
+    <script id="page-info" src="/api/page-info.js?page=pages2"></script>
 </head>
 
 <body>
@@ -38,7 +103,8 @@
         </form>
     </div>
     <div class="viewer-panel" id="viewerPanel" style="justify-content: flex-start; align-items: stretch;">
-        <div class="saved-pages">Pages</div>
+        <div class="saved-pages">Pages<button id="importBtn" style="position: absolute; right: 16px; padding: 4px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.15); color: #fff; font-size: 13px; cursor: pointer; transition: background .2s; line-height: 1.4;" onmouseover="this.style.background='rgba(255,255,255,.3)'" onmouseout="this.style.background='rgba(255,255,255,.15)'">Import</button></div>
+        <input type="file" id="importFileInput" accept=".zip" style="display:none">
 
         <!-- Favorites section (hidden when empty) -->
         <div id="favoritesSection" class="page-category" style="display: none;">
@@ -174,23 +240,680 @@
         <div id="editMenuItem" class="context-menu-item">Edit page definition</div>
         <div id="copyMenuItem" class="context-menu-item">Copy to new page</div>
         <div id="updateMenuItem" class="context-menu-item">Update page</div>
+        <div style="height: 1px; background: var(--border-color); margin: 4px 0;"></div>
+        <div id="shareMenuItem" class="context-menu-item">Download page</div>
     </div>
     <div id="instructions" style="display: none;" data-locked="true"></div>
     <div id="thoughts" style="display: none;" data-locked="true"></div>
-    <script id="pages-core">let allPages=[],activeCategory="All",searchTerm="",contextTarget=null;const BUILDER_PAGE="builder";let visibleCategories=[],overflowCategories=[];function displayName(page){return page.title||page.name}function createPageLink(page,isBuilder=!1){const a=document.createElement("a");a.href="/"+page.name,a.textContent=displayName(page);let classes="page-link";return isBuilder?classes+=" builder-page":page.pinned&&(classes+=" pinned"),a.className=classes,isBuilder||a.addEventListener("contextmenu",e=>{e.preventDefault(),showContextMenu(e,page)}),a}function renderFavorites(){const section=document.getElementById("favoritesSection"),grid=document.getElementById("favoritesGrid");grid.innerHTML="";const builderPage=allPages.find(p=>"builder"===p.name);builderPage&&grid.appendChild(createPageLink(builderPage,!0));const pinned=allPages.filter(p=>p.pinned&&"builder"!==p.name).sort((a,b)=>displayName(a).localeCompare(displayName(b)));pinned.forEach(p=>grid.appendChild(createPageLink(p))),builderPage||pinned.length>0?section.style.display="":section.style.display="none"}function getAllCategories(){const cats=new Set;return allPages.filter(p=>"builder"!==p.name).forEach(p=>p.categories.forEach(c=>cats.add(c))),Array.from(cats).sort()}function renderFilterBar(){const container=document.querySelector(".filter-buttons-container"),moreDropdown=document.getElementById("moreDropdown"),moreMenu=document.getElementById("moreMenu");container.innerHTML="",moreMenu.innerHTML="";const allBtn=document.createElement("button");allBtn.className="filter-btn"+("All"===activeCategory?" active":""),allBtn.textContent="All",allBtn.dataset.category="All",allBtn.addEventListener("click",()=>setCategory("All")),container.appendChild(allBtn),visibleCategories.forEach(cat=>{const btn=document.createElement("button");btn.className="filter-btn"+(activeCategory===cat?" active":""),btn.textContent=cat,btn.dataset.category=cat,btn.addEventListener("click",()=>setCategory(cat)),container.appendChild(btn)}),overflowCategories.length>0?(moreDropdown.style.display="",document.getElementById("moreBtn").className="filter-btn more-btn"+(overflowCategories.includes(activeCategory)?" active":""),overflowCategories.forEach(cat=>{const item=document.createElement("div");item.className="more-menu-item"+(activeCategory===cat?" active":""),item.textContent=cat,item.addEventListener("click",()=>{setCategory(cat),hideMoreMenu()}),moreMenu.appendChild(item)})):moreDropdown.style.display="none"}function calculateVisibleCategories(){const allCats=getAllCategories(),filterBar=document.getElementById("filterBar"),searchInput=document.getElementById("searchInput");if(!filterBar)return;let availableWidth=filterBar.offsetWidth-(searchInput.offsetWidth+8)-50-16;visibleCategories=[],overflowCategories=[];const temp=document.createElement("button");temp.className="filter-btn",temp.style.visibility="hidden",temp.style.position="absolute",document.body.appendChild(temp);let usedWidth=0,needsOverflow=!1;for(let i=0;i<allCats.length;i++){temp.textContent=allCats[i];const btnWidth=temp.offsetWidth+8,remainingCats=allCats.length-i;usedWidth+btnWidth+(needsOverflow?0:remainingCats>1?88:0)<=availableWidth&&!needsOverflow?(visibleCategories.push(allCats[i]),usedWidth+=btnWidth):(needsOverflow=!0,overflowCategories.push(allCats[i]))}1===overflowCategories.length&&visibleCategories.length>0&&(temp.textContent=overflowCategories[0],usedWidth+(temp.offsetWidth+8)<=availableWidth&&visibleCategories.push(overflowCategories.pop())),document.body.removeChild(temp)}function renderPages(){const grid=document.getElementById("pagesGrid");grid.innerHTML="";const term=searchTerm.toLowerCase();allPages.forEach(p=>{"builder"!==p.name&&("All"===activeCategory?(p.showInAll!==false):p.categories.includes(activeCategory))&&(!term||p.name.toLowerCase().includes(term)||displayName(p).toLowerCase().includes(term))&&grid.appendChild(createPageLink(p))})}function setCategory(cat){activeCategory=cat,renderFilterBar(),renderPages()}function renderAll(){renderFavorites(),calculateVisibleCategories(),renderFilterBar(),renderPages()}document.getElementById("searchInput").addEventListener("input",e=>{searchTerm=e.target.value,renderPages()});const moreBtn=document.getElementById("moreBtn"),moreMenu=document.getElementById("moreMenu");function hideMoreMenu(){moreMenu.classList.remove("show")}moreBtn.addEventListener("click",e=>{e.stopPropagation(),moreMenu.classList.toggle("show")});const contextMenu=document.getElementById("contextMenu"),pinMenuItem=document.getElementById("pinMenuItem");function showContextMenu(e,page){"builder"!==page.name&&(contextTarget=page,pinMenuItem.textContent=page.pinned?"Unpin from Favorites":"Pin to Favorites",contextMenu.style.left=e.clientX+"px",contextMenu.style.top=e.clientY+"px",contextMenu.style.display="block")}function hideContextMenu(){contextMenu.style.display="none",contextTarget=null}document.addEventListener("click",()=>{hideContextMenu(),hideMoreMenu()}),contextMenu.addEventListener("click",e=>e.stopPropagation()),pinMenuItem.addEventListener("click",async()=>{if(!contextTarget)return;const pageName=contextTarget.name,newPinned=!contextTarget.pinned,categories=contextTarget.categories||[];hideContextMenu();try{const res=await fetch("/api/pages/"+encodeURIComponent(pageName),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({categories:categories,pinned:newPinned})});if(!res.ok){const errorText=await res.text();throw new Error("Failed to update page metadata: "+errorText)}const pageIndex=allPages.findIndex(p=>p.name===pageName);-1!==pageIndex&&(allPages[pageIndex].pinned=newPinned,renderAll()),await loadPages()}catch(err){console.error("Error toggling pin:",err),alert("Failed to update pin status: "+err.message)}});const resizeObserver=new ResizeObserver(()=>{calculateVisibleCategories(),renderFilterBar()});async function loadPages(){try{const res=await fetch("/api/pages");if(!res.ok)throw new Error("Failed to fetch pages");allPages=await res.json(),renderAll()}catch(err){console.error("Error fetching pages:",err)}}resizeObserver.observe(document.getElementById("filterBar")),loadPages();</script><script id="context-menu-override">const originalShowContextMenu=showContextMenu;function createPageLinkUpdated(page,isBuilder=!1){const a=document.createElement("a");a.href="/"+page.name,a.textContent=displayName(page);let classes="page-link";return isBuilder?classes+=" builder-page":page.pinned&&(classes+=" pinned"),a.className=classes,a.addEventListener("contextmenu",e=>{e.preventDefault(),showContextMenu(e,page)}),a}showContextMenu=function(e,page){contextTarget=page;const isBuilder=page.name===BUILDER_PAGE;pinMenuItem.style.display=isBuilder?"none":"",editMenuItem.style.display=isBuilder?"none":"",isBuilder||(pinMenuItem.textContent=page.pinned?"Unpin from Favorites":"Pin to Favorites");var updateItem=document.getElementById("updateMenuItem"),latestVersion=window.pageInfo?window.pageInfo.latestPageVersion:0;updateItem.style.display=page.pageVersion<latestVersion?"":"none",contextMenu.style.left=e.clientX+"px",contextMenu.style.top=e.clientY+"px",contextMenu.style.display="block"},createPageLink=createPageLinkUpdated,allPages.length>0&&renderAll();</script><script id="page-link-scroll">createPageLink=function(page,isBuilder=!1){const a=document.createElement("a");a.href="/"+page.name;const title=displayName(page),span=document.createElement("span");span.className="scroll-text",span.textContent=title,a.appendChild(span),a.title=title;let classes="page-link";return isBuilder?classes+=" builder-page":page.pinned&&(classes+=" pinned"),a.className=classes,a.addEventListener("contextmenu",e=>{e.preventDefault(),showContextMenu(e,page)}),a.addEventListener("mouseenter",function(){const textWidth=span.scrollWidth,containerWidth=a.clientWidth-32;if(textWidth>containerWidth){const scrollDistance=textWidth-containerWidth+20,duration=Math.max(2,scrollDistance/30);a.style.setProperty("--scroll-distance",`-${scrollDistance}px`),a.style.setProperty("--scroll-duration",`${duration}s`),a.classList.add("scrolling")}}),a.addEventListener("mouseleave",function(){a.classList.remove("scrolling")}),a},"undefined"!=typeof allPages&&allPages&&allPages.length>0&&renderAll();</script>
-    
-    <script id="modal-logic">const editPageModal=document.getElementById("editPageModal"),copyPageModal=document.getElementById("copyPageModal"),editMenuItem=document.getElementById("editMenuItem"),copyMenuItem=document.getElementById("copyMenuItem"),editPageName=document.getElementById("editPageName"),editPageTitle=document.getElementById("editPageTitle"),editPageCategories=document.getElementById("editPageCategories"),editPagePinned=document.getElementById("editPagePinned"),editCancelBtn=document.getElementById("editCancelBtn"),editSaveBtn=document.getElementById("editSaveBtn"),deletePageBtn=document.getElementById("deletePageBtn"),copySourcePage=document.getElementById("copySourcePage"),copyNewPageName=document.getElementById("copyNewPageName"),copyCancelBtn=document.getElementById("copyCancelBtn"),copyConfirmBtn=document.getElementById("copyConfirmBtn");let currentEditPage=null;function closeEditModal(){editPageModal.classList.remove("show"),currentEditPage=null}function closeCopyModal(){copyPageModal.classList.remove("show")}editMenuItem.addEventListener("click",()=>{contextTarget&&(currentEditPage=contextTarget,editPageName.value=contextTarget.name,editPageTitle.value=contextTarget.title||"",editPageCategories.value=(contextTarget.categories||[]).join(", "),editPagePinned.checked=contextTarget.pinned||!1,hideContextMenu(),editPageModal.classList.add("show"))}),copyMenuItem.addEventListener("click",()=>{contextTarget&&(copySourcePage.value=displayName(contextTarget),document.getElementById("copyPageTitle").value="",copyNewPageName.value="",hideContextMenu(),copyPageModal.classList.add("show"),document.getElementById("copyPageTitle").focus())}),editCancelBtn.addEventListener("click",closeEditModal),copyCancelBtn.addEventListener("click",closeCopyModal),editPageModal.addEventListener("click",e=>{e.target===editPageModal&&closeEditModal()}),copyPageModal.addEventListener("click",e=>{e.target===copyPageModal&&closeCopyModal()}),document.addEventListener("keydown",e=>{"Escape"===e.key&&(closeEditModal(),closeCopyModal())}),editSaveBtn.addEventListener("click",async()=>{if(!currentEditPage)return;const newTitle=editPageTitle.value.trim(),newCategories=editPageCategories.value.split(",").map(c=>c.trim()).filter(c=>c.length>0),newPinned=editPagePinned.checked,newMode=document.getElementById("editPageLocked").checked?"locked":"unlocked",newShowInAll=document.getElementById("editPageShowInAll").checked;try{if(!(await fetch("/api/pages/"+encodeURIComponent(currentEditPage.name),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({title:newTitle||void 0,categories:newCategories,pinned:newPinned,showInAll:newShowInAll,mode:newMode})})).ok)throw new Error("Failed to update page");closeEditModal(),await loadPages()}catch(err){console.error("Error saving page:",err),alert("Failed to save changes: "+err.message)}});const deleteConfirmModal=document.getElementById("deleteConfirmModal"),deletePageNameDisplay2=document.getElementById("deletePageNameDisplay2"),deleteCancelBtn=document.getElementById("deleteCancelBtn"),deleteConfirmBtn=document.getElementById("deleteConfirmBtn");let currentDeletePage=null;function closeDeleteModal(){deleteConfirmModal.classList.remove("show"),currentDeletePage=null}deleteCancelBtn.addEventListener("click",closeDeleteModal),deleteConfirmModal.addEventListener("click",e=>{e.target===deleteConfirmModal&&closeDeleteModal()}),deletePageBtn.addEventListener("click",()=>{currentEditPage&&(currentDeletePage=currentEditPage,deletePageNameDisplay2.textContent=displayName(currentEditPage),closeEditModal(),deleteConfirmModal.classList.add("show"))}),deleteConfirmBtn.addEventListener("click",async()=>{if(!currentDeletePage)return;const pageName=currentDeletePage.name;closeDeleteModal();try{const res=await fetch("/api/pages/"+encodeURIComponent(pageName),{method:"DELETE"});if(!res.ok){const data=await res.json().catch(()=>({}));throw new Error(data.error||"Failed to delete page")}await loadPages()}catch(err){console.error("Error deleting page:",err),alert("Failed to delete page: "+err.message)}}),document.addEventListener("keydown",e=>{"Escape"===e.key&&closeDeleteModal()});</script>
-    <script id="edit-modal-override">const editPageNameDisplay=document.getElementById("editPageNameDisplay");editMenuItem.removeEventListener("click",editMenuItem._handler),editMenuItem._handler=()=>{contextTarget&&(currentEditPage=contextTarget,editPageNameDisplay.textContent=contextTarget.name,editPageTitle.value=contextTarget.title||"",editPageCategories.value=(contextTarget.categories||[]).join(", "),editPagePinned.checked=contextTarget.pinned||!1,document.getElementById("editPageLocked").checked="locked"===contextTarget.mode,document.getElementById("editPageShowInAll").checked=contextTarget.showInAll!==!1,hideContextMenu(),editPageModal.classList.add("show"))},editMenuItem.addEventListener("click",editMenuItem._handler);</script>
-    <script id="error" type="application/json">{"message":"Something went wrong try again","details":"delete: node 53 not found"}</script>
-    <script id="copy-modal-rebind">const copySourcePageDisplay=document.getElementById("copySourcePageDisplay"),copyPageCategories=document.getElementById("copyPageCategories"),newCopyNewPageName=document.getElementById("copyNewPageName"),newCopyCancelBtn=document.getElementById("copyCancelBtn"),newCopyConfirmBtn=document.getElementById("copyConfirmBtn"),newCopyPageModal=document.getElementById("copyPageModal");let currentCopySource=null;function closeCopyModalNew(){newCopyPageModal.classList.remove("show"),currentCopySource=null}newCopyCancelBtn.addEventListener("click",closeCopyModalNew),newCopyPageModal.addEventListener("click",e=>{e.target===newCopyPageModal&&closeCopyModalNew()}),copyMenuItem.removeEventListener("click",copyMenuItem._handler),copyMenuItem._handler=()=>{contextTarget&&(currentCopySource=contextTarget,copySourcePageDisplay.textContent=displayName(contextTarget),document.getElementById("copyPageTitle").value="",copyPageCategories.value=(contextTarget.categories||[]).join(", "),newCopyNewPageName.value="",hideContextMenu(),newCopyPageModal.classList.add("show"),document.getElementById("copyPageTitle").focus())},copyMenuItem.addEventListener("click",copyMenuItem._handler);</script>
-
 
-    <script id="copy-confirm-handler">newCopyConfirmBtn.removeEventListener("click",newCopyConfirmBtn._handler),newCopyConfirmBtn._handler=async()=>{if(!currentCopySource)return;const newTitle=document.getElementById("copyPageTitle").value.trim();let newName=newCopyNewPageName.value.trim();if(!newName&&newTitle&&(newName=newTitle),!newName)return alert("Please enter a title or page name."),void document.getElementById("copyPageTitle").focus();if(newName=newName.toLowerCase().replace(/\s+/g,"_"),newName=newName.replace(/[^a-z0-9_-]/g,""),!newName)return alert("Page name must contain at least one valid character (letters, numbers, hyphens, or underscores)."),void document.getElementById("copyPageTitle").focus();const newCategories=copyPageCategories.value.split(",").map(c=>c.trim()).filter(c=>c.length>0);try{const body={name:newName,title:newTitle,categories:newCategories},res=await fetch("/api/pages/"+encodeURIComponent(currentCopySource.name)+"/copy",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(body)});if(!res.ok){const data=await res.json().catch(()=>({}));throw new Error(data.error||"Failed to copy page")}closeCopyModalNew(),window.location.href="/"+newName}catch(err){console.error("Error copying page:",err),alert("Failed to copy page: "+err.message)}},newCopyConfirmBtn.addEventListener("click",newCopyConfirmBtn._handler);</script>
-    <script id="advanced-toggle">document.getElementById("advancedToggle").addEventListener("click",function(){const content=document.getElementById("advancedContent"),icon=this.querySelector(".toggle-icon");"none"===content.style.display?(content.style.display="block",icon.classList.add("open")):(content.style.display="none",icon.classList.remove("open"))});</script>
-    <script id="update-handler">document.getElementById("updateMenuItem").addEventListener("click",async function(){if(contextTarget){var pageName=contextTarget.name;hideContextMenu(),await upgradePage(pageName)}});</script>
     <!-- Toast container -->
     <div id="upgradeToast" class="upgrade-toast"></div>
-    <script id="upgrade-logic">function showUpgradeToast(message){var toast=document.getElementById("upgradeToast");toast.textContent=message,toast.classList.add("show"),setTimeout(function(){toast.classList.remove("show")},3e3)}async function upgradePage(pageName){var overlay=document.getElementById("loadingOverlay");overlay.style.display="flex";try{var res=await fetch("/api/pages/"+encodeURIComponent(pageName)+"/upgrade",{method:"POST",headers:{"Content-Type":"application/json"}}),data=await res.json();if(!res.ok)throw new Error(data.error||"Upgrade failed");return!!data.upgraded&&(await loadPages(),showUpgradeToast("Page upgraded successfully"),!0)}catch(err){return console.error("Error upgrading page:",err),alert("Failed to upgrade page: "+err.message),!1}finally{overlay.style.display="none"}}createPageLink=function(page,isBuilder=!1){var latestVersion=window.pageInfo?window.pageInfo.latestPageVersion:0,needsUpgrade=!isBuilder&&page.pageVersion<latestVersion;const a=document.createElement("a");a.href="/"+page.name;const title=displayName(page),span=document.createElement("span");span.className="scroll-text",span.textContent=title,a.appendChild(span),a.title=title;let classes="page-link";if(isBuilder?classes+=" builder-page":needsUpgrade?classes+=" needs-upgrade":page.pinned&&(classes+=" pinned"),a.className=classes,needsUpgrade){var badge=document.createElement("span");badge.className="upgrade-badge",badge.textContent="Update",a.appendChild(badge)}return needsUpgrade&&a.addEventListener("click",function(e){e.preventDefault(),upgradePage(page.name)}),a.addEventListener("contextmenu",e=>{e.preventDefault(),showContextMenu(e,page)}),a.addEventListener("mouseenter",function(){const textWidth=span.scrollWidth,containerWidth=a.clientWidth-32;if(textWidth>containerWidth){const scrollDistance=textWidth-containerWidth+20,duration=Math.max(2,scrollDistance/30);a.style.setProperty("--scroll-distance",`-${scrollDistance}px`),a.style.setProperty("--scroll-duration",`${duration}s`),a.classList.add("scrolling")}}),a.addEventListener("mouseleave",function(){a.classList.remove("scrolling")}),a},allPages&&allPages.length>0&&renderAll();</script>
+
+    <script>
+    (function() {
+        'use strict';
+
+        // ── State ──
+        var allPages = [];
+        var activeCategory = 'All';
+        var searchTerm = '';
+        var contextTarget = null;
+        var currentEditPage = null;
+        var currentCopySource = null;
+        var currentDeletePage = null;
+        var visibleCategories = [];
+        var overflowCategories = [];
+        var BUILDER_PAGE = 'builder';
+
+        // MRU: most-recently-used categories get priority for visible slots
+        var pagesMru = (function() {
+            try { return JSON.parse(localStorage.getItem('synthos_pagesMru')) || []; }
+            catch(e) { return []; }
+        })();
+        function pagesMruTouch(cat) {
+            if (cat === 'All') return;
+            pagesMru = pagesMru.filter(function(c) { return c !== cat; });
+            pagesMru.unshift(cat);
+            if (pagesMru.length > 20) pagesMru.length = 20;
+            try { localStorage.setItem('synthos_pagesMru', JSON.stringify(pagesMru)); } catch(e) {}
+        }
+
+        // ── DOM refs ──
+        var favoritesSection = document.getElementById('favoritesSection');
+        var favoritesGrid = document.getElementById('favoritesGrid');
+        var filterBar = document.getElementById('filterBar');
+        var pagesGrid = document.getElementById('pagesGrid');
+        var searchInput = document.getElementById('searchInput');
+        var moreDropdown = document.getElementById('moreDropdown');
+        var moreBtn = document.getElementById('moreBtn');
+        var moreMenu = document.getElementById('moreMenu');
+        var contextMenu = document.getElementById('contextMenu');
+        var pinMenuItem = document.getElementById('pinMenuItem');
+        var editMenuItem = document.getElementById('editMenuItem');
+        var copyMenuItem = document.getElementById('copyMenuItem');
+        var updateMenuItem = document.getElementById('updateMenuItem');
+        var editPageModal = document.getElementById('editPageModal');
+        var copyPageModal = document.getElementById('copyPageModal');
+        var deleteConfirmModal = document.getElementById('deleteConfirmModal');
+        var editPageNameDisplay = document.getElementById('editPageNameDisplay');
+        var editPageTitle = document.getElementById('editPageTitle');
+        var editPageCategories = document.getElementById('editPageCategories');
+        var editPagePinned = document.getElementById('editPagePinned');
+        var editPageLocked = document.getElementById('editPageLocked');
+        var editPageShowInAll = document.getElementById('editPageShowInAll');
+        var editCancelBtn = document.getElementById('editCancelBtn');
+        var editSaveBtn = document.getElementById('editSaveBtn');
+        var deletePageBtn = document.getElementById('deletePageBtn');
+        var copySourcePageDisplay = document.getElementById('copySourcePageDisplay');
+        var copyPageTitle = document.getElementById('copyPageTitle');
+        var copyPageCategories = document.getElementById('copyPageCategories');
+        var copyNewPageName = document.getElementById('copyNewPageName');
+        var copyCancelBtn = document.getElementById('copyCancelBtn');
+        var copyConfirmBtn = document.getElementById('copyConfirmBtn');
+        var deletePageNameDisplay2 = document.getElementById('deletePageNameDisplay2');
+        var deleteCancelBtn = document.getElementById('deleteCancelBtn');
+        var deleteConfirmBtn = document.getElementById('deleteConfirmBtn');
+        var loadingOverlay = document.getElementById('loadingOverlay');
+        var shareMenuItem = document.getElementById('shareMenuItem');
+        var importBtn = document.getElementById('importBtn');
+        var importFileInput = document.getElementById('importFileInput');
+
+        // ── Helpers ──
+
+        function displayName(page) {
+            return page.title || page.name;
+        }
+
+        // ── Page link creation (final version: scroll-text + upgrade badge + context menu) ──
+
+        function createPageLink(page, isBuilder) {
+            var latestVersion = window.pageInfo ? window.pageInfo.latestPageVersion : 0;
+            var needsUpgrade = !isBuilder && page.pageVersion < latestVersion;
+
+            var a = document.createElement('a');
+            a.href = '/' + page.name;
+
+            var title = displayName(page);
+            var span = document.createElement('span');
+            span.className = 'scroll-text';
+            span.textContent = title;
+            a.appendChild(span);
+            a.title = title;
+
+            var classes = 'page-link';
+            if (isBuilder) {
+                classes += ' builder-page';
+            } else if (needsUpgrade) {
+                classes += ' needs-upgrade';
+            } else if (page.pinned) {
+                classes += ' pinned';
+            }
+            a.className = classes;
+
+            if (needsUpgrade) {
+                var badge = document.createElement('span');
+                badge.className = 'upgrade-badge';
+                badge.textContent = 'Update';
+                a.appendChild(badge);
+            }
+
+            if (needsUpgrade) {
+                a.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    upgradePage(page.name);
+                });
+            }
+
+            a.addEventListener('contextmenu', function(e) {
+                e.preventDefault();
+                showContextMenu(e, page);
+            });
+
+            a.addEventListener('mouseenter', function() {
+                var textWidth = span.scrollWidth;
+                var containerWidth = a.clientWidth - 32;
+                if (textWidth > containerWidth) {
+                    var scrollDistance = textWidth - containerWidth + 20;
+                    var duration = Math.max(2, scrollDistance / 30);
+                    a.style.setProperty('--scroll-distance', '-' + scrollDistance + 'px');
+                    a.style.setProperty('--scroll-duration', duration + 's');
+                    a.classList.add('scrolling');
+                }
+            });
+
+            a.addEventListener('mouseleave', function() {
+                a.classList.remove('scrolling');
+            });
+
+            return a;
+        }
+
+        // ── Context menu (final version: hides builder items, shows update for outdated) ──
+
+        function showContextMenu(e, page) {
+            contextTarget = page;
+            var isBuilder = page.name === BUILDER_PAGE;
+
+            pinMenuItem.style.display = isBuilder ? 'none' : '';
+            editMenuItem.style.display = isBuilder ? 'none' : '';
+            if (!isBuilder) {
+                pinMenuItem.textContent = page.pinned ? 'Unpin from Favorites' : 'Pin to Favorites';
+            }
+
+            var latestVersion = window.pageInfo ? window.pageInfo.latestPageVersion : 0;
+            updateMenuItem.style.display = page.pageVersion < latestVersion ? '' : 'none';
+
+            shareMenuItem.style.display = isBuilder ? 'none' : '';
+
+            contextMenu.style.left = e.clientX + 'px';
+            contextMenu.style.top = e.clientY + 'px';
+            contextMenu.style.display = 'block';
+        }
+
+        function hideContextMenu() {
+            contextMenu.style.display = 'none';
+            contextTarget = null;
+        }
+
+        function hideMoreMenu() {
+            moreMenu.classList.remove('show');
+        }
+
+        // ── Rendering ──
+
+        function renderFavorites() {
+            favoritesGrid.innerHTML = '';
+            var builderPage = allPages.find(function(p) { return p.name === 'builder'; });
+            if (builderPage) favoritesGrid.appendChild(createPageLink(builderPage, true));
+
+            var pinned = allPages
+                .filter(function(p) { return p.pinned && p.name !== 'builder'; })
+                .sort(function(a, b) { return displayName(a).localeCompare(displayName(b)); });
+            pinned.forEach(function(p) { favoritesGrid.appendChild(createPageLink(p)); });
+
+            favoritesSection.style.display = (builderPage || pinned.length > 0) ? '' : 'none';
+        }
+
+        function getAllCategories() {
+            var cats = new Set();
+            allPages
+                .filter(function(p) { return p.name !== 'builder'; })
+                .forEach(function(p) { p.categories.forEach(function(c) { cats.add(c); }); });
+            return Array.from(cats).sort();
+        }
+
+        function renderFilterBar() {
+            var container = document.querySelector('.filter-buttons-container');
+            container.innerHTML = '';
+            moreMenu.innerHTML = '';
+
+            var allBtn = document.createElement('button');
+            allBtn.className = 'filter-btn' + (activeCategory === 'All' ? ' active' : '');
+            allBtn.textContent = 'All';
+            allBtn.dataset.category = 'All';
+            allBtn.addEventListener('click', function() { setCategory('All'); });
+            container.appendChild(allBtn);
+
+            visibleCategories.forEach(function(cat) {
+                var btn = document.createElement('button');
+                btn.className = 'filter-btn' + (activeCategory === cat ? ' active' : '');
+                btn.textContent = cat;
+                btn.dataset.category = cat;
+                btn.addEventListener('click', function() { setCategory(cat); });
+                container.appendChild(btn);
+            });
+
+            if (overflowCategories.length > 0) {
+                moreDropdown.style.display = '';
+                moreBtn.className = 'filter-btn more-btn' + (overflowCategories.includes(activeCategory) ? ' active' : '');
+                overflowCategories.forEach(function(cat) {
+                    var item = document.createElement('div');
+                    item.className = 'more-menu-item' + (activeCategory === cat ? ' active' : '');
+                    item.textContent = cat;
+                    item.addEventListener('click', function() { setCategory(cat); hideMoreMenu(); });
+                    moreMenu.appendChild(item);
+                });
+            } else {
+                moreDropdown.style.display = 'none';
+            }
+        }
+
+        function calculateVisibleCategories() {
+            var allCats = getAllCategories();
+            if (!filterBar) return;
+
+            var availableWidth = filterBar.offsetWidth - (searchInput.offsetWidth + 8) - 50 - 16;
+            visibleCategories = [];
+            overflowCategories = [];
+
+            var temp = document.createElement('button');
+            temp.className = 'filter-btn';
+            temp.style.visibility = 'hidden';
+            temp.style.position = 'absolute';
+            document.body.appendChild(temp);
+
+            // Measure "More" button width
+            temp.textContent = 'More \u25BE';
+            var moreBtnWidth = temp.offsetWidth + 8;
+
+            // Measure each category button
+            var catWidths = {};
+            allCats.forEach(function(cat) {
+                temp.textContent = cat;
+                catWidths[cat] = temp.offsetWidth + 8;
+            });
+            document.body.removeChild(temp);
+
+            // Sort categories: MRU first, then alphabetical
+            var sorted = allCats.slice().sort(function(a, b) {
+                var ai = pagesMru.indexOf(a);
+                var bi = pagesMru.indexOf(b);
+                var aInMru = ai !== -1;
+                var bInMru = bi !== -1;
+                if (aInMru && !bInMru) return -1;
+                if (!aInMru && bInMru) return 1;
+                if (aInMru && bInMru) return ai - bi;
+                return a.localeCompare(b);
+            });
+
+            var usedWidth = 0;
+            var overflowing = false;
+            for (var i = 0; i < sorted.length; i++) {
+                var cat = sorted[i];
+                var remaining = sorted.length - i;
+                if (!overflowing && usedWidth + catWidths[cat] <= availableWidth - (remaining > 1 ? moreBtnWidth : 0)) {
+                    visibleCategories.push(cat);
+                    usedWidth += catWidths[cat];
+                } else {
+                    overflowing = true;
+                    overflowCategories.push(cat);
+                }
+            }
+            if (overflowCategories.length === 1) {
+                if (usedWidth + catWidths[overflowCategories[0]] <= availableWidth) {
+                    visibleCategories.push(overflowCategories.pop());
+                }
+            }
+        }
+
+        function renderPages() {
+            pagesGrid.innerHTML = '';
+            var term = searchTerm.toLowerCase();
+            allPages.forEach(function(p) {
+                if (p.name === 'builder') return;
+                var inCategory = activeCategory === 'All'
+                    ? (term || p.showInAll !== false)
+                    : p.categories.includes(activeCategory);
+                if (!inCategory) return;
+                if (term && !p.name.toLowerCase().includes(term) && !displayName(p).toLowerCase().includes(term)) return;
+                pagesGrid.appendChild(createPageLink(p));
+            });
+        }
+
+        function setCategory(cat) {
+            activeCategory = cat;
+            pagesMruTouch(cat);
+            renderFilterBar();
+            renderPages();
+        }
+
+        function renderAll() {
+            renderFavorites();
+            calculateVisibleCategories();
+            renderFilterBar();
+            renderPages();
+        }
+
+        // ── Upgrade logic ──
+
+        function showUpgradeToast(message) {
+            var toast = document.getElementById('upgradeToast');
+            toast.textContent = message;
+            toast.classList.add('show');
+            setTimeout(function() { toast.classList.remove('show'); }, 3000);
+        }
+
+        async function upgradePage(pageName) {
+            loadingOverlay.style.display = 'flex';
+            try {
+                var res = await fetch('/api/pages/' + encodeURIComponent(pageName) + '/upgrade', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' }
+                });
+                var data = await res.json();
+                if (!res.ok) throw new Error(data.error || 'Upgrade failed');
+                if (!data.upgraded) return false;
+                await loadPages();
+                showUpgradeToast('Page upgraded successfully');
+                return true;
+            } catch (err) {
+                console.error('Error upgrading page:', err);
+                alert('Failed to upgrade page: ' + err.message);
+                return false;
+            } finally {
+                loadingOverlay.style.display = 'none';
+            }
+        }
+
+        // ── Modal helpers ──
+
+        function closeEditModal() {
+            editPageModal.classList.remove('show');
+            currentEditPage = null;
+        }
+
+        function closeCopyModal() {
+            copyPageModal.classList.remove('show');
+            currentCopySource = null;
+        }
+
+        function closeDeleteModal() {
+            deleteConfirmModal.classList.remove('show');
+            currentDeletePage = null;
+        }
+
+        // ── Event listeners ──
+
+        // Search
+        searchInput.addEventListener('input', function(e) {
+            searchTerm = e.target.value;
+            renderPages();
+        });
+
+        // More dropdown
+        moreBtn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            moreMenu.classList.toggle('show');
+        });
+
+        // Close menus on click
+        document.addEventListener('click', function() {
+            hideContextMenu();
+            hideMoreMenu();
+        });
+        contextMenu.addEventListener('click', function(e) { e.stopPropagation(); });
+
+        // ── Pin handler ──
+        pinMenuItem.addEventListener('click', async function() {
+            if (!contextTarget) return;
+            var pageName = contextTarget.name;
+            var newPinned = !contextTarget.pinned;
+            var categories = contextTarget.categories || [];
+            hideContextMenu();
+            try {
+                var res = await fetch('/api/pages/' + encodeURIComponent(pageName), {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ categories: categories, pinned: newPinned })
+                });
+                if (!res.ok) {
+                    var errorText = await res.text();
+                    throw new Error('Failed to update page metadata: ' + errorText);
+                }
+                var pageIndex = allPages.findIndex(function(p) { return p.name === pageName; });
+                if (pageIndex !== -1) allPages[pageIndex].pinned = newPinned;
+                renderAll();
+                await loadPages();
+            } catch (err) {
+                console.error('Error toggling pin:', err);
+                alert('Failed to update pin status: ' + err.message);
+            }
+        });
+
+        // ── Edit modal ──
+        editMenuItem.addEventListener('click', function() {
+            if (!contextTarget) return;
+            currentEditPage = contextTarget;
+            editPageNameDisplay.textContent = contextTarget.name;
+            editPageTitle.value = contextTarget.title || '';
+            editPageCategories.value = (contextTarget.categories || []).join(', ');
+            editPagePinned.checked = contextTarget.pinned || false;
+            editPageLocked.checked = contextTarget.mode === 'locked';
+            editPageShowInAll.checked = contextTarget.showInAll !== false;
+            hideContextMenu();
+            editPageModal.classList.add('show');
+        });
+
+        editCancelBtn.addEventListener('click', closeEditModal);
+
+        editSaveBtn.addEventListener('click', async function() {
+            if (!currentEditPage) return;
+            var newTitle = editPageTitle.value.trim();
+            var newCategories = editPageCategories.value.split(',').map(function(c) { return c.trim(); }).filter(function(c) { return c.length > 0; });
+            var newPinned = editPagePinned.checked;
+            var newMode = editPageLocked.checked ? 'locked' : 'unlocked';
+            var newShowInAll = editPageShowInAll.checked;
+            try {
+                var res = await fetch('/api/pages/' + encodeURIComponent(currentEditPage.name), {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        title: newTitle || undefined,
+                        categories: newCategories,
+                        pinned: newPinned,
+                        showInAll: newShowInAll,
+                        mode: newMode
+                    })
+                });
+                if (!res.ok) throw new Error('Failed to update page');
+                closeEditModal();
+                await loadPages();
+            } catch (err) {
+                console.error('Error saving page:', err);
+                alert('Failed to save changes: ' + err.message);
+            }
+        });
+
+        // Edit modal mousedown-guarded close
+        var editModalMouseDown = null;
+        editPageModal.addEventListener('mousedown', function(e) { editModalMouseDown = e.target; });
+        editPageModal.addEventListener('click', function(e) {
+            if (e.target === editPageModal && editModalMouseDown === editPageModal) closeEditModal();
+            editModalMouseDown = null;
+        });
+
+        // ── Delete modal ──
+        deletePageBtn.addEventListener('click', function() {
+            if (!currentEditPage) return;
+            currentDeletePage = currentEditPage;
+            deletePageNameDisplay2.textContent = displayName(currentEditPage);
+            closeEditModal();
+            deleteConfirmModal.classList.add('show');
+        });
+
+        deleteCancelBtn.addEventListener('click', closeDeleteModal);
+
+        deleteConfirmBtn.addEventListener('click', async function() {
+            if (!currentDeletePage) return;
+            var pageName = currentDeletePage.name;
+            closeDeleteModal();
+            try {
+                var res = await fetch('/api/pages/' + encodeURIComponent(pageName), { method: 'DELETE' });
+                if (!res.ok) {
+                    var data = await res.json().catch(function() { return {}; });
+                    throw new Error(data.error || 'Failed to delete page');
+                }
+                await loadPages();
+            } catch (err) {
+                console.error('Error deleting page:', err);
+                alert('Failed to delete page: ' + err.message);
+            }
+        });
+
+        // Delete modal mousedown-guarded close
+        var deleteModalMouseDown = null;
+        deleteConfirmModal.addEventListener('mousedown', function(e) { deleteModalMouseDown = e.target; });
+        deleteConfirmModal.addEventListener('click', function(e) {
+            if (e.target === deleteConfirmModal && deleteModalMouseDown === deleteConfirmModal) closeDeleteModal();
+            deleteModalMouseDown = null;
+        });
+
+        // ── Copy modal ──
+        copyMenuItem.addEventListener('click', function() {
+            if (!contextTarget) return;
+            currentCopySource = contextTarget;
+            copySourcePageDisplay.textContent = displayName(contextTarget);
+            copyPageTitle.value = '';
+            copyPageCategories.value = (contextTarget.categories || []).join(', ');
+            copyNewPageName.value = '';
+            hideContextMenu();
+            copyPageModal.classList.add('show');
+            copyPageTitle.focus();
+        });
+
+        copyCancelBtn.addEventListener('click', closeCopyModal);
+
+        copyConfirmBtn.addEventListener('click', async function() {
+            if (!currentCopySource) return;
+            var newTitle = copyPageTitle.value.trim();
+            var newName = copyNewPageName.value.trim();
+            if (!newName && newTitle) newName = newTitle;
+            if (!newName) {
+                alert('Please enter a title or page name.');
+                copyPageTitle.focus();
+                return;
+            }
+            newName = newName.toLowerCase().replace(/\s+/g, '_');
+            newName = newName.replace(/[^a-z0-9_-]/g, '');
+            if (!newName) {
+                alert('Page name must contain at least one valid character (letters, numbers, hyphens, or underscores).');
+                copyPageTitle.focus();
+                return;
+            }
+            var newCategories = copyPageCategories.value.split(',').map(function(c) { return c.trim(); }).filter(function(c) { return c.length > 0; });
+            try {
+                var body = { name: newName, title: newTitle, categories: newCategories };
+                var res = await fetch('/api/pages/' + encodeURIComponent(currentCopySource.name) + '/copy', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(body)
+                });
+                if (!res.ok) {
+                    var data = await res.json().catch(function() { return {}; });
+                    throw new Error(data.error || 'Failed to copy page');
+                }
+                closeCopyModal();
+                window.location.href = '/' + newName;
+            } catch (err) {
+                console.error('Error copying page:', err);
+                alert('Failed to copy page: ' + err.message);
+            }
+        });
+
+        // Copy modal mousedown-guarded close
+        var copyModalMouseDown = null;
+        copyPageModal.addEventListener('mousedown', function(e) { copyModalMouseDown = e.target; });
+        copyPageModal.addEventListener('click', function(e) {
+            if (e.target === copyPageModal && copyModalMouseDown === copyPageModal) closeCopyModal();
+            copyModalMouseDown = null;
+        });
+
+        // ── Advanced toggle ──
+        document.getElementById('advancedToggle').addEventListener('click', function() {
+            var content = document.getElementById('advancedContent');
+            var icon = this.querySelector('.toggle-icon');
+            if (content.style.display === 'none') {
+                content.style.display = 'block';
+                icon.classList.add('open');
+            } else {
+                content.style.display = 'none';
+                icon.classList.remove('open');
+            }
+        });
+
+        // ── Update menu item ──
+        updateMenuItem.addEventListener('click', async function() {
+            if (!contextTarget) return;
+            var pageName = contextTarget.name;
+            hideContextMenu();
+            await upgradePage(pageName);
+        });
+
+        // ── Share handler ──
+        shareMenuItem.addEventListener('click', async function() {
+            if (!contextTarget) return;
+            var page = contextTarget;
+            var pageName = page.name;
+            hideContextMenu();
+            try {
+                var res = await fetch('/api/pages/' + encodeURIComponent(pageName) + '/export');
+                if (!res.ok) throw new Error('Failed to export page');
+                var blob = await res.blob();
+                var fileName = pageName + '.zip';
+                var url = URL.createObjectURL(blob);
+                var a = document.createElement('a');
+                a.href = url;
+                a.download = fileName;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+            } catch (err) {
+                console.error('Error sharing page:', err);
+                alert('Failed to share page: ' + err.message);
+            }
+        });
+
+        // ── Import handler ──
+        importBtn.addEventListener('click', function() {
+            importFileInput.click();
+        });
+
+        importFileInput.addEventListener('change', async function() {
+            var file = importFileInput.files[0];
+            if (!file) return;
+            importFileInput.value = '';
+            loadingOverlay.style.display = 'flex';
+            try {
+                var buffer = await file.arrayBuffer();
+                var res = await fetch('/api/pages/import', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/zip' },
+                    body: buffer
+                });
+                var data = await res.json();
+                if (!res.ok) throw new Error(data.error || 'Import failed');
+                await loadPages();
+                showUpgradeToast('Imported page: ' + (data.title || data.name));
+            } catch (err) {
+                console.error('Error importing page:', err);
+                alert('Failed to import page: ' + err.message);
+            } finally {
+                loadingOverlay.style.display = 'none';
+            }
+        });
+
+        // ── Escape key closes all modals ──
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
+                closeEditModal();
+                closeCopyModal();
+                closeDeleteModal();
+            }
+        });
+
+        // ── Resize observer for filter bar ──
+        var resizeObserver = new ResizeObserver(function() {
+            calculateVisibleCategories();
+            renderFilterBar();
+        });
+        resizeObserver.observe(filterBar);
+
+        // ── Load pages and render ──
+        async function loadPages() {
+            try {
+                var res = await fetch('/api/pages');
+                if (!res.ok) throw new Error('Failed to fetch pages');
+                allPages = await res.json();
+                renderAll();
+            } catch (err) {
+                console.error('Error fetching pages:', err);
+            }
+        }
+
+        loadPages();
+    })();
+    </script>
 <script id="page-helpers" src="/api/page-helpers.js?v=2" data-locked="true"></script>
 <script id="page-script" src="/api/page-script.js?v=2" data-locked="true"></script>
-</body></html>
+</body></html>