synthos 0.8.0 → 0.9.0

package/required-pages/{pages.html → pages/page.html}

@@ -5,229 +5,208 @@
     <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 */
-        .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) }
+        /* Layout-specific rules only — all component styling via FluentLM */
+        #pagesBtn { opacity: 0.4; pointer-events: none; }
+        .page-grid { display: flex; flex-wrap: wrap; gap: 12px; }
+        .page-btn { display: flex; align-items: center; justify-content: center; min-width: 120px; height: 20px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--neutralLight); background: var(--defaultStateBackground); color: var(--bodyText); font-size: 14px; cursor: pointer; text-decoration: none; position: relative; transition: background .2s, border-color .2s, box-shadow .2s, transform .15s; overflow: hidden; box-sizing: content-box; }
+        .page-btn:hover { background: var(--defaultHoverBackground); border-color: var(--themePrimary); box-shadow: 0 4px 12px rgba(0,0,0,.1); transform: translateY(-1px); }
+        .page-btn .btn-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
+        .page-btn.scrolling .btn-label { text-overflow: clip; overflow: visible; }
+        .page-btn.scrolling .scroll-text { animation: scrollText var(--scroll-duration, 3s) linear infinite; display: inline-block; }
+        @keyframes scrollText { 0%, 10% { transform: translateX(0) } 90%, 100% { transform: translateX(var(--scroll-distance, -50%)) } }
+        .page-btn.builder-page { background: linear-gradient(135deg, var(--themePrimary), var(--themeDarkAlt)); color: #fff; border: none; font-weight: 600; box-shadow: 0 4px 16px var(--themeLighter); }
+        .page-btn.builder-page:hover { filter: brightness(1.1); box-shadow: 0 6px 20px var(--themeLighter); }
+        .page-btn.pinned { border: 2px solid var(--themePrimary); box-shadow: 0 2px 8px var(--themeLighter); }
+        .page-btn.needs-upgrade { border: 1px dashed var(--themePrimary); animation: 3s ease-in-out infinite upgradeGlow; overflow: visible; }
+        @keyframes upgradeGlow { 0%, 100% { box-shadow: none } 50% { box-shadow: 0 0 12px var(--themeLighter) } }
+        .upgrade-badge { position: absolute; top: -6px; right: -6px; font-size: 9px; color: #fff; font-weight: 600; background: linear-gradient(135deg, var(--themePrimary), var(--themeDarkAlt)); padding: 2px 7px; border-radius: 10px; line-height: 1.3; box-shadow: 0 2px 8px var(--themeLighter); pointer-events: none; z-index: 10; }
+        .toast-fixed { position: fixed; bottom: 20px; right: 20px; z-index: 2000; max-width: 360px; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; pointer-events: none; }
+        .toast-fixed.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
+        .advanced-options { margin-top: 8px; }
+        .advanced-toggle { background: none; border: none; color: var(--bodySubtext); font-size: 13px; cursor: pointer; padding: 8px 0; display: flex; align-items: center; gap: 6px; }
+        .advanced-toggle:hover { color: var(--themePrimary); }
+        .toggle-icon { font-size: 10px; transition: transform .2s; }
+        .toggle-icon.open { transform: rotate(90deg); }
+        .advanced-content { padding-left: 16px; border-left: 2px solid var(--neutralLight); margin-left: 4px; }
+        .filter-toolbar { display: flex; align-items: center; gap: var(--spacingS1); }
+        .filter-toolbar .flm-pivot { flex: 1; min-width: 0; overflow: hidden; }
+        .filter-toolbar .flm-pivot-tabs { flex-wrap: nowrap; overflow: hidden; }
+        .filter-toolbar .flm-searchbox { flex-shrink: 0; width: 200px; }
+        .more-dropdown { position: relative; flex-shrink: 0; }
+        .more-menu { position: absolute; top: 100%; left: 0; margin-top: 4px; min-width: 150px; max-height: 250px; overflow-y: auto; display: none; z-index: 100; }
+        .more-menu.show { display: block; }
     </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 src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
     <script id="page-info" src="/api/page-info.js?page=pages2"></script>
 </head>
 
 <body>
+    <div class="shell-toolbar" data-locked="true">
+        <button class="shell-toolbar-btn" id="builderToggle" aria-label="Page Builder" data-locked="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M7 18.5H6.2c-1.77 0-3.2-1.43-3.2-3.2V7.7C3 5.93 4.43 4.5 6.2 4.5h11.6c1.77 0 3.2 1.43 3.2 3.2v7.6c0 1.77-1.43 3.2-3.2 3.2H12l-4.2 3.2c-.5.38-1.2.02-1.2-.6V18.5Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><circle cx="8.5" cy="11.5" r="1" fill="currentColor"/><circle cx="12" cy="11.5" r="1" fill="currentColor"/><circle cx="15.5" cy="11.5" r="1" fill="currentColor"/></svg></button>
+        <button class="shell-toolbar-btn" id="pagesBtn" aria-label="View All Pages" data-locked="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none"><rect x="3" y="3" width="11" height="12" rx="1.5" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M6 7.5h5M6 10h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><rect x="18" y="3" width="11" height="12" rx="1.5" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M21 7.5h5M21 10h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><rect x="3" y="18" width="11" height="12" rx="1.5" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M6 22.5h5M6 25h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><rect x="18" y="18" width="11" height="12" rx="1.5" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M21 22.5h5M21 25h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button>
+        <button class="shell-toolbar-btn" id="saveBtn" aria-label="Save Page" data-locked="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M17 21v-8H7v8" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M7 3v5h8" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg></button>
+        <div class="shell-toolbar-spacer" data-locked="true"></div>
+        <button class="shell-toolbar-btn" id="settingsBtn" aria-label="Settings" data-locked="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" stroke="currentColor" stroke-width="1.8"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
+    </div>
     <div class="chat-panel" data-locked="true">
-        <div class="chat-header" data-locked="true">SynthOS</div>
+        <div class="chat-header" data-locked="true"><span>Page Builder</span><button class="chat-header-close" id="builderClose" aria-label="Close builder" data-locked="true">&times;</button></div>
         <div class="chat-messages" id="chatMessages" data-locked="true">
             <div class="chat-message">
                 <p><strong>SynthOS:</strong> Here are all of the created pages. Right-click any page to pin it to
                     favorites, edit its definition, or copy it to a new page.</p>
             </div>
-        </div>
-        <div class="link-group" data-locked="true">
-            <a href="#" id="saveLink" data-locked="true">Save</a>
-            <a href="/pages" id="pagesLink" data-locked="true">Pages</a>
-            <a href="#" id="resetLink" data-locked="true">Reset</a>
-        </div>
+        </div>
         <form action="/" method="POST" id="chatForm" data-locked="true">
-            <input type="text" class="chat-input" id="chatInput" name="message" placeholder="Type a message..." data-locked="true">
-            <button type="submit" class="chat-submit" data-locked="true">Send</button>
+            <textarea class="chat-input" id="chatInput" name="message" rows="2" placeholder="Type a message..." data-locked="true"></textarea>
         </form>
     </div>
     <div class="viewer-panel" id="viewerPanel" style="justify-content: flex-start; align-items: stretch;">
-        <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;">
-            <h2 class="category-title">Favorites</h2>
-            <div id="favoritesGrid" class="page-grid"></div>
-        </div>
+        <div class="flm-stack" style="gap: var(--spacingM); height: 100%; padding: var(--spacingM);">
+            <!-- Header row -->
+            <div class="flm-stack flm-stack--horizontal flm-stack--space-between" style="align-items: center;">
+                <span class="flm-text flm-text--xLarge flm-text--bold">Pages</span>
+                <div class="flm-stack flm-stack--horizontal" style="gap: var(--spacingS1);">
+                    <button class="flm-button" data-icon="Upload" id="importBtn">Import</button>
+                </div>
+            </div>
+            <input type="file" id="importFileInput" accept=".zip" style="display:none">
 
-        <!-- All Pages section with filter bar -->
-        <div class="page-category">
-            <h2 class="category-title">Pages</h2>
-            <div id="filterBar" class="filter-bar">
-                <div class="filter-buttons-container">
-                    <button class="filter-btn active" data-category="All">All</button>
+            <!-- Toolbar row: pivot tabs + search -->
+            <div class="filter-toolbar" id="filterBar">
+                <div class="flm-pivot flm-pivot--tabs" id="categoryPivot">
+                    <div class="flm-pivot-tabs" role="tablist" id="categoryTabs">
+                        <button class="flm-pivot-tab flm-pivot-tab--active" data-category="All" role="tab">All</button>
+                    </div>
                 </div>
                 <div class="more-dropdown" id="moreDropdown" style="display: none;">
-                    <button class="filter-btn more-btn" id="moreBtn">More ▾</button>
-                    <div class="more-menu" id="moreMenu"></div>
+                    <button class="flm-button flm-button--subtle" id="moreBtn">More <i class="flm-icon" data-icon="ChevronDown"></i></button>
+                    <div class="flm-contextmenu more-menu" id="moreMenu"></div>
+                </div>
+                <div class="flm-searchbox" id="searchBox">
+                    <input class="flm-searchbox-input" id="searchInput" type="text" placeholder="Search pages...">
                 </div>
-                <input type="text" class="search-input" id="searchInput" placeholder="Search pages...">
             </div>
-            <div id="pagesGrid" class="page-grid"></div>
+
+            <!-- Favorites section (hidden when empty) -->
+            <div id="favoritesSection" class="flm-stack" style="display: none; gap: var(--spacingS1);">
+                <span class="flm-text flm-text--mediumPlus flm-text--semibold flm-text--secondary">Favorites</span>
+                <div id="favoritesGrid" class="page-grid"></div>
+            </div>
+
+            <!-- All Pages grid -->
+            <div class="flm-stack" style="gap: var(--spacingS1);">
+                <span class="flm-text flm-text--mediumPlus flm-text--semibold flm-text--secondary">Pages</span>
+                <div id="pagesGrid" class="page-grid"></div>
+            </div>
         </div>
 
-        <!-- Edit Page Modal -->
-        <div id="editPageModal" class="modal-overlay">
-            <div class="modal-content">
-                <div class="modal-header">Edit Page Definition</div>
-                <div class="modal-body">
-                    <div class="form-group">
-                        <label class="form-label">Display Title</label>
-                        <input type="text" id="editPageTitle" class="form-input" placeholder="Enter display title...">
-                        <div style="font-size: 11px; color: var(--text-secondary); margin-top: 4px; opacity: 0.8;">Page
-                            name: <span id="editPageNameDisplay"></span></div>
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label">Categories (comma-separated)</label>
-                        <input type="text" id="editPageCategories" class="form-input" placeholder="e.g. Tools, Games, Utilities">
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label checkbox-label">
-                            <input type="checkbox" id="editPagePinned">
-                            <span>Pinned to Favorites</span>
-                        </label>
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label checkbox-label">
-                            <input type="checkbox" id="editPageLocked">
-                            <span>Locked</span>
-                        </label>
-                        <div style="font-size: 11px; color: var(--text-secondary); margin-top: 4px; opacity: 0.8;">
-                            Locked pages are read-only and cannot be modified through chat.
+        <!-- Edit Page Dialog -->
+        <div id="editPageModal" class="flm-dialog-overlay" data-light-dismiss>
+            <div class="flm-dialog">
+                <div class="flm-dialog-header">
+                    <h2 class="flm-dialog-title">Edit Page Definition</h2>
+                    <button class="flm-dialog-close" data-icon="Cancel" aria-label="Close" id="editCloseBtn"></button>
+                </div>
+                <div class="flm-dialog-body">
+                    <div class="flm-stack" style="gap: var(--spacingM);">
+                        <div class="flm-textfield">
+                            <label class="flm-label" for="editPageTitle">Display Title</label>
+                            <input class="flm-textfield-input" id="editPageTitle" placeholder="Enter display title...">
+                            <span class="flm-text flm-text--small flm-text--secondary">Page name: <span id="editPageNameDisplay"></span></span>
                         </div>
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label checkbox-label">
-                            <input type="checkbox" id="editPageShowInAll" checked>
-                            <span>Show in All</span>
+                        <div class="flm-textfield">
+                            <label class="flm-label" for="editPageCategories">Categories (comma-separated)</label>
+                            <input class="flm-textfield-input" id="editPageCategories" placeholder="e.g. Tools, Games, Utilities">
+                        </div>
+                        <label class="flm-checkbox">
+                            <input type="checkbox" class="flm-checkbox-input" id="editPagePinned">
+                            <span class="flm-checkbox-mark"></span>
+                            <span class="flm-checkbox-label">Pinned to Favorites</span>
                         </label>
-                        <div style="font-size: 11px; color: var(--text-secondary); margin-top: 4px; opacity: 0.8;">
-                            When unchecked, this page is hidden from the "All" filter and only appears under its category.
+                        <div>
+                            <label class="flm-checkbox">
+                                <input type="checkbox" class="flm-checkbox-input" id="editPageLocked">
+                                <span class="flm-checkbox-mark"></span>
+                                <span class="flm-checkbox-label">Locked</span>
+                            </label>
+                            <span class="flm-text flm-text--small flm-text--secondary flm-text--block" style="margin-top: 4px; padding-left: 26px;">Locked pages are read-only and cannot be modified through chat.</span>
+                        </div>
+                        <div>
+                            <label class="flm-checkbox">
+                                <input type="checkbox" class="flm-checkbox-input" id="editPageShowInAll" checked>
+                                <span class="flm-checkbox-mark"></span>
+                                <span class="flm-checkbox-label">Show in All</span>
+                            </label>
+                            <span class="flm-text flm-text--small flm-text--secondary flm-text--block" style="margin-top: 4px; padding-left: 26px;">When unchecked, this page is hidden from the "All" filter and only appears under its category.</span>
                         </div>
                     </div>
                 </div>
-                <div class="modal-footer">
-                    <button class="modal-btn modal-btn-danger" id="deletePageBtn">Delete Page</button>
-                    <div class="modal-footer-right">
-                        <button class="modal-btn modal-btn-secondary" id="editCancelBtn">Cancel</button>
-                        <button class="modal-btn modal-btn-primary" id="editSaveBtn">Save Changes</button>
-                    </div>
+                <div class="flm-dialog-footer">
+                    <button class="flm-button" id="deletePageBtn" style="color: var(--errorText);">Delete Page</button>
+                    <div style="flex: 1;"></div>
+                    <button class="flm-button" id="editCancelBtn">Cancel</button>
+                    <button class="flm-button flm-button--primary" id="editSaveBtn">Save Changes</button>
                 </div>
             </div>
         </div>
 
-        <!-- Copy Page Modal -->
-        <div id="copyPageModal" class="modal-overlay">
-            <div class="modal-content">
-                <div class="modal-header">Copy to New Page</div>
-                <div class="modal-body">
-                    <div class="form-group">
-                        <label class="form-label">Display Title</label>
-                        <input type="text" id="copyPageTitle" class="form-input" placeholder="Enter display title...">
-                        <div style="font-size: 11px; color: var(--text-secondary); margin-top: 4px; opacity: 0.8;">
-                            Source: <span id="copySourcePageDisplay"></span></div>
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label">Categories (comma-separated)</label>
-                        <input type="text" id="copyPageCategories" class="form-input" placeholder="e.g. Tools, Games, Utilities">
-                    </div>
-                    <div class="advanced-options">
-                        <button type="button" class="advanced-toggle" id="advancedToggle">
-                            <span class="toggle-icon">▶</span> Advanced Options
-                        </button>
-                        <div class="advanced-content" id="advancedContent" style="display: none;">
-                            <div class="form-group" style="margin-top: 12px;">
-                                <label class="form-label">Custom Page ID</label>
-                                <input type="text" id="copyNewPageName" class="form-input" placeholder="Auto-generated from title...">
-                                <div style="font-size: 11px; color: var(--text-secondary); margin-top: 4px; opacity: 0.8;">
-                                    Used in the URL. Leave blank to auto-generate from title.</div>
+        <!-- Copy Page Dialog -->
+        <div id="copyPageModal" class="flm-dialog-overlay" data-light-dismiss>
+            <div class="flm-dialog">
+                <div class="flm-dialog-header">
+                    <h2 class="flm-dialog-title">Copy to New Page</h2>
+                    <button class="flm-dialog-close" data-icon="Cancel" aria-label="Close" id="copyCloseBtn"></button>
+                </div>
+                <div class="flm-dialog-body">
+                    <div class="flm-stack" style="gap: var(--spacingM);">
+                        <div class="flm-textfield">
+                            <label class="flm-label" for="copyPageTitle">Display Title</label>
+                            <input class="flm-textfield-input" id="copyPageTitle" placeholder="Enter display title...">
+                            <span class="flm-text flm-text--small flm-text--secondary">Source: <span id="copySourcePageDisplay"></span></span>
+                        </div>
+                        <div class="flm-textfield">
+                            <label class="flm-label" for="copyPageCategories">Categories (comma-separated)</label>
+                            <input class="flm-textfield-input" id="copyPageCategories" placeholder="e.g. Tools, Games, Utilities">
+                        </div>
+                        <div class="advanced-options">
+                            <button type="button" class="advanced-toggle" id="advancedToggle">
+                                <span class="toggle-icon">&#9654;</span> Advanced Options
+                            </button>
+                            <div class="advanced-content" id="advancedContent" style="display: none;">
+                                <div class="flm-textfield" style="margin-top: 12px;">
+                                    <label class="flm-label" for="copyNewPageName">Custom Page ID</label>
+                                    <input class="flm-textfield-input" id="copyNewPageName" placeholder="Auto-generated from title...">
+                                    <span class="flm-text flm-text--small flm-text--secondary">Used in the URL. Leave blank to auto-generate from title.</span>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="modal-footer">
-                    <div class="modal-footer-right">
-                        <button class="modal-btn modal-btn-secondary" id="copyCancelBtn">Cancel</button>
-                        <button class="modal-btn modal-btn-primary" id="copyConfirmBtn">Create Copy</button>
-                    </div>
+                <div class="flm-dialog-footer">
+                    <div style="flex: 1;"></div>
+                    <button class="flm-button" id="copyCancelBtn">Cancel</button>
+                    <button class="flm-button flm-button--primary" id="copyConfirmBtn">Create Copy</button>
                 </div>
             </div>
         </div>
 
-        <!-- Delete Confirmation Modal -->
-        <div id="deleteConfirmModal" class="modal-overlay">
-            <div class="modal-content">
-                <div class="modal-header">Confirm Delete</div>
-                <div class="modal-body">
-                    <p style="color: var(--text-primary); margin: 0;">Are you sure you want to delete "<span id="deletePageNameDisplay2"></span>"? This cannot be undone.</p>
+        <!-- Delete Confirmation Dialog -->
+        <div id="deleteConfirmModal" class="flm-dialog-overlay" data-light-dismiss>
+            <div class="flm-dialog">
+                <div class="flm-dialog-header">
+                    <h2 class="flm-dialog-title">Confirm Delete</h2>
+                    <button class="flm-dialog-close" data-icon="Cancel" aria-label="Close" id="deleteCloseBtn"></button>
                 </div>
-                <div class="modal-footer">
-                    <div class="modal-footer-right">
-                        <button class="modal-btn modal-btn-secondary" id="deleteCancelBtn">Cancel</button>
-                        <button class="modal-btn modal-btn-danger" id="deleteConfirmBtn">Delete</button>
-                    </div>
+                <div class="flm-dialog-body">
+                    <p class="flm-text">Are you sure you want to delete "<span id="deletePageNameDisplay2"></span>"? This cannot be undone.</p>
+                </div>
+                <div class="flm-dialog-footer">
+                    <div style="flex: 1;"></div>
+                    <button class="flm-button" id="deleteCancelBtn">Cancel</button>
+                    <button class="flm-button" id="deleteConfirmBtn" style="color: var(--errorText);">Delete</button>
                 </div>
             </div>
         </div>
@@ -235,19 +214,19 @@
     </div>
 
     <!-- Context menu -->
-    <div id="contextMenu" class="context-menu">
-        <div id="pinMenuItem" class="context-menu-item"></div>
-        <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 id="contextMenu" class="flm-contextmenu" style="position: fixed;">
+        <button id="pinMenuItem" class="flm-contextmenu-item"><span class="flm-contextmenu-item-text"></span></button>
+        <button id="editMenuItem" class="flm-contextmenu-item"><span class="flm-contextmenu-item-text">Edit page definition</span></button>
+        <button id="copyMenuItem" class="flm-contextmenu-item"><span class="flm-contextmenu-item-text">Copy to new page</span></button>
+        <button id="updateMenuItem" class="flm-contextmenu-item"><span class="flm-contextmenu-item-text">Update page</span></button>
+        <div class="flm-contextmenu-divider"></div>
+        <button id="shareMenuItem" class="flm-contextmenu-item"><span class="flm-contextmenu-item-text">Download page</span></button>
     </div>
     <div id="instructions" style="display: none;" data-locked="true"></div>
     <div id="thoughts" style="display: none;" data-locked="true"></div>
 
-    <!-- Toast container -->
-    <div id="upgradeToast" class="upgrade-toast"></div>
+    <!-- Toast -->
+    <div id="upgradeToast" class="flm-messagebar flm-messagebar--success toast-fixed"></div>
 
     <script>
     (function() {
@@ -282,6 +261,7 @@
         var favoritesSection = document.getElementById('favoritesSection');
         var favoritesGrid = document.getElementById('favoritesGrid');
         var filterBar = document.getElementById('filterBar');
+        var categoryTabs = document.getElementById('categoryTabs');
         var pagesGrid = document.getElementById('pagesGrid');
         var searchInput = document.getElementById('searchInput');
         var moreDropdown = document.getElementById('moreDropdown');
@@ -302,6 +282,7 @@
         var editPageLocked = document.getElementById('editPageLocked');
         var editPageShowInAll = document.getElementById('editPageShowInAll');
         var editCancelBtn = document.getElementById('editCancelBtn');
+        var editCloseBtn = document.getElementById('editCloseBtn');
         var editSaveBtn = document.getElementById('editSaveBtn');
         var deletePageBtn = document.getElementById('deletePageBtn');
         var copySourcePageDisplay = document.getElementById('copySourcePageDisplay');
@@ -309,9 +290,11 @@
         var copyPageCategories = document.getElementById('copyPageCategories');
         var copyNewPageName = document.getElementById('copyNewPageName');
         var copyCancelBtn = document.getElementById('copyCancelBtn');
+        var copyCloseBtn = document.getElementById('copyCloseBtn');
         var copyConfirmBtn = document.getElementById('copyConfirmBtn');
         var deletePageNameDisplay2 = document.getElementById('deletePageNameDisplay2');
         var deleteCancelBtn = document.getElementById('deleteCancelBtn');
+        var deleteCloseBtn = document.getElementById('deleteCloseBtn');
         var deleteConfirmBtn = document.getElementById('deleteConfirmBtn');
         var loadingOverlay = document.getElementById('loadingOverlay');
         var shareMenuItem = document.getElementById('shareMenuItem');
@@ -324,7 +307,7 @@
             return page.title || page.name;
         }
 
-        // ── Page link creation (final version: scroll-text + upgrade badge + context menu) ──
+        // ── Page button creation ──
 
         function createPageLink(page, isBuilder) {
             var latestVersion = window.pageInfo ? window.pageInfo.latestPageVersion : 0;
@@ -334,13 +317,19 @@
             a.href = '/' + page.name;
 
             var title = displayName(page);
-            var span = document.createElement('span');
-            span.className = 'scroll-text';
-            span.textContent = title;
-            a.appendChild(span);
+
+            // Label with scroll-text
+            var label = document.createElement('span');
+            label.className = 'btn-label';
+            var scrollSpan = document.createElement('span');
+            scrollSpan.className = 'scroll-text';
+            scrollSpan.textContent = title;
+            label.appendChild(scrollSpan);
+            a.appendChild(label);
+
             a.title = title;
 
-            var classes = 'page-link';
+            var classes = 'page-btn';
             if (isBuilder) {
                 classes += ' builder-page';
             } else if (needsUpgrade) {
@@ -370,8 +359,8 @@
             });
 
             a.addEventListener('mouseenter', function() {
-                var textWidth = span.scrollWidth;
-                var containerWidth = a.clientWidth - 32;
+                var textWidth = scrollSpan.scrollWidth;
+                var containerWidth = label.clientWidth - 8;
                 if (textWidth > containerWidth) {
                     var scrollDistance = textWidth - containerWidth + 20;
                     var duration = Math.max(2, scrollDistance / 30);
@@ -388,7 +377,7 @@
             return a;
         }
 
-        // ── Context menu (final version: hides builder items, shows update for outdated) ──
+        // ── Context menu ──
 
         function showContextMenu(e, page) {
             contextTarget = page;
@@ -397,7 +386,7 @@
             pinMenuItem.style.display = isBuilder ? 'none' : '';
             editMenuItem.style.display = isBuilder ? 'none' : '';
             if (!isBuilder) {
-                pinMenuItem.textContent = page.pinned ? 'Unpin from Favorites' : 'Pin to Favorites';
+                pinMenuItem.querySelector('.flm-contextmenu-item-text').textContent = page.pinned ? 'Unpin from Favorites' : 'Pin to Favorites';
             }
 
             var latestVersion = window.pageInfo ? window.pageInfo.latestPageVersion : 0;
@@ -407,11 +396,11 @@
 
             contextMenu.style.left = e.clientX + 'px';
             contextMenu.style.top = e.clientY + 'px';
-            contextMenu.style.display = 'block';
+            contextMenu.classList.add('flm-contextmenu--visible');
         }
 
         function hideContextMenu() {
-            contextMenu.style.display = 'none';
+            contextMenu.classList.remove('flm-contextmenu--visible');
             contextTarget = null;
         }
 
@@ -443,33 +432,37 @@
         }
 
         function renderFilterBar() {
-            var container = document.querySelector('.filter-buttons-container');
-            container.innerHTML = '';
+            categoryTabs.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);
+            var allTab = document.createElement('button');
+            allTab.className = 'flm-pivot-tab' + (activeCategory === 'All' ? ' flm-pivot-tab--active' : '');
+            allTab.textContent = 'All';
+            allTab.setAttribute('role', 'tab');
+            allTab.dataset.category = 'All';
+            allTab.addEventListener('click', function() { setCategory('All'); });
+            categoryTabs.appendChild(allTab);
 
             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);
+                var tab = document.createElement('button');
+                tab.className = 'flm-pivot-tab' + (activeCategory === cat ? ' flm-pivot-tab--active' : '');
+                tab.textContent = cat;
+                tab.setAttribute('role', 'tab');
+                tab.dataset.category = cat;
+                tab.addEventListener('click', function() { setCategory(cat); });
+                categoryTabs.appendChild(tab);
             });
 
             if (overflowCategories.length > 0) {
                 moreDropdown.style.display = '';
-                moreBtn.className = 'filter-btn more-btn' + (overflowCategories.includes(activeCategory) ? ' active' : '');
+                moreBtn.className = 'flm-button flm-button--subtle' + (overflowCategories.includes(activeCategory) ? ' flm-button--primary' : '');
                 overflowCategories.forEach(function(cat) {
-                    var item = document.createElement('div');
-                    item.className = 'more-menu-item' + (activeCategory === cat ? ' active' : '');
-                    item.textContent = cat;
+                    var item = document.createElement('button');
+                    item.className = 'flm-contextmenu-item' + (activeCategory === cat ? ' flm-contextmenu-item--checked' : '');
+                    var itemText = document.createElement('span');
+                    itemText.className = 'flm-contextmenu-item-text';
+                    itemText.textContent = cat;
+                    item.appendChild(itemText);
                     item.addEventListener('click', function() { setCategory(cat); hideMoreMenu(); });
                     moreMenu.appendChild(item);
                 });
@@ -482,21 +475,22 @@
             var allCats = getAllCategories();
             if (!filterBar) return;
 
-            var availableWidth = filterBar.offsetWidth - (searchInput.offsetWidth + 8) - 50 - 16;
+            var searchBoxEl = document.getElementById('searchBox');
+            var availableWidth = filterBar.offsetWidth - (searchBoxEl ? searchBoxEl.offsetWidth + 8 : 0) - 50 - 16;
             visibleCategories = [];
             overflowCategories = [];
 
             var temp = document.createElement('button');
-            temp.className = 'filter-btn';
+            temp.className = 'flm-pivot-tab';
             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;
+            temp.textContent = 'More';
+            var moreBtnWidth = temp.offsetWidth + 16;
 
-            // Measure each category button
+            // Measure each category tab
             var catWidths = {};
             allCats.forEach(function(cat) {
                 temp.textContent = cat;
@@ -595,20 +589,28 @@
             }
         }
 
-        // ── Modal helpers ──
+        // ── Dialog helpers ──
+
+        function showDialog(overlay) {
+            overlay.classList.add('flm-dialog-overlay--open');
+        }
+
+        function hideDialog(overlay) {
+            overlay.classList.remove('flm-dialog-overlay--open');
+        }
 
         function closeEditModal() {
-            editPageModal.classList.remove('show');
+            hideDialog(editPageModal);
             currentEditPage = null;
         }
 
         function closeCopyModal() {
-            copyPageModal.classList.remove('show');
+            hideDialog(copyPageModal);
             currentCopySource = null;
         }
 
         function closeDeleteModal() {
-            deleteConfirmModal.classList.remove('show');
+            hideDialog(deleteConfirmModal);
             currentDeletePage = null;
         }
 
@@ -671,10 +673,11 @@
             editPageLocked.checked = contextTarget.mode === 'locked';
             editPageShowInAll.checked = contextTarget.showInAll !== false;
             hideContextMenu();
-            editPageModal.classList.add('show');
+            showDialog(editPageModal);
         });
 
         editCancelBtn.addEventListener('click', closeEditModal);
+        editCloseBtn.addEventListener('click', closeEditModal);
 
         editSaveBtn.addEventListener('click', async function() {
             if (!currentEditPage) return;
@@ -718,10 +721,11 @@
             currentDeletePage = currentEditPage;
             deletePageNameDisplay2.textContent = displayName(currentEditPage);
             closeEditModal();
-            deleteConfirmModal.classList.add('show');
+            showDialog(deleteConfirmModal);
         });
 
         deleteCancelBtn.addEventListener('click', closeDeleteModal);
+        deleteCloseBtn.addEventListener('click', closeDeleteModal);
 
         deleteConfirmBtn.addEventListener('click', async function() {
             if (!currentDeletePage) return;
@@ -757,11 +761,12 @@
             copyPageCategories.value = (contextTarget.categories || []).join(', ');
             copyNewPageName.value = '';
             hideContextMenu();
-            copyPageModal.classList.add('show');
+            showDialog(copyPageModal);
             copyPageTitle.focus();
         });
 
         copyCancelBtn.addEventListener('click', closeCopyModal);
+        copyCloseBtn.addEventListener('click', closeCopyModal);
 
         copyConfirmBtn.addEventListener('click', async function() {
             if (!currentCopySource) return;
@@ -914,6 +919,6 @@
         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>
+<script id="page-helpers" src="/api/page-helpers.js?v=3" data-locked="true"></script>
+<script id="page-script" src="/api/page-script.js?v=3" data-locked="true"></script>
 </body></html>