site-builder: lock landing page to index.html regardless of name

The first page is now treated as the landing page: it always publishes to
index.html no matter what the user names it, and its slug is forced to
'index' in state so .htaccess clean-URL rewrites stay consistent.

- useWhpApi.ts: force pages[0].filename='index.html' at save time
- PageContext.tsx: heal pages[0].slug to 'index' on load and on rename
- PagesPanel.tsx: "LANDING" badge on first page, slug shown as '/',
  rename hides slug input (locked), delete button hidden

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

craft/src/hooks/useWhpApi.ts

@@ -51,8 +51,11 @@ export function useWhpApi() {
     // Build the pages array with HTML for each page
     // For the active page, use the freshly exported HTML from the canvas;
     // for others, export from their stored craft state
-    const pagesPayload = pages.map((page) => {
+    const pagesPayload = pages.map((page, i) => {
-      const filename = (page.slug === 'index' ? 'index' : page.slug) + '.html';
+      // The first page is ALWAYS the landing page → publishes to index.html
+      // regardless of the page name/slug. Apache serves '/' from index.html,
+      // and renaming the first page should not break the root URL.
+      const filename = i === 0 ? 'index.html' : page.slug + '.html';
       let pageHtml = '';
 
       if (page.id === activePageId) {
@@ -77,10 +80,13 @@ export function useWhpApi() {
     // Build pages_craft_state array: for each page, store its craft state
     // For the currently active page, always use the fresh canvas state (currentCraftState)
     // since page.craftState may be stale (not updated until page switch)
-    const pagesGrapesjs = pages.map((page) => ({
+    const pagesGrapesjs = pages.map((page, i) => ({
       id: page.id,
       name: page.name,
-      slug: page.slug,
+      // Pin the landing page's slug to 'index' on the wire too, so that on
+      // reload the editor's clean-URL routing (.htaccess rewrite of /name →
+      // name.html) lines up with the file we just wrote (index.html).
+      slug: i === 0 ? 'index' : page.slug,
       craftState: page.id === activePageId ? currentCraftState : (page.craftState || null),
     }));
 

craft/src/panels/left/PagesPanel.tsx

@@ -145,7 +145,9 @@ export const PagesPanel: React.FC = () => {
       </div>
 
       {/* Page list */}
-      {pages.map((page) => (
+      {pages.map((page, pageIndex) => {
+        const isLanding = pageIndex === 0;
+        return (
         <div key={page.id}>
           {editingId === page.id ? (
             /* Editing mode */
@@ -176,6 +178,16 @@ export const PagesPanel: React.FC = () => {
                   if (e.key === 'Escape') setEditingId(null);
                 }}
               />
+              {isLanding ? (
+                <div style={{
+                  fontSize: 10,
+                  color: 'var(--color-text-dim)',
+                  padding: '4px 2px',
+                  fontStyle: 'italic',
+                }}>
+                  Landing page — URL locked to <code>/</code>
+                </div>
+              ) : (
                 <input
                   type="text"
                   value={editSlug}
@@ -184,6 +196,7 @@ export const PagesPanel: React.FC = () => {
                   className="control-input"
                   style={{ fontSize: 11 }}
                 />
+              )}
               <div style={{ display: 'flex', gap: 6 }}>
                 <button
                   onClick={() => handleRename(page.id)}
@@ -298,12 +311,36 @@ export const PagesPanel: React.FC = () => {
                       page.id === activePageId
                         ? 'var(--color-accent)'
                         : 'var(--color-text)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 6,
+                    overflow: 'hidden',
+                  }}
+                >
+                  <span style={{
                     overflow: 'hidden',
                     textOverflow: 'ellipsis',
                     whiteSpace: 'nowrap',
+                  }}>{page.name}</span>
+                  {isLanding && (
+                    <span
+                      title="This is the landing page — published as the root URL (index.html)"
+                      style={{
+                        fontSize: 9,
+                        fontWeight: 700,
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.5px',
+                        color: '#fbbf24',
+                        background: 'rgba(245, 158, 11, 0.15)',
+                        border: '1px solid rgba(245, 158, 11, 0.35)',
+                        padding: '1px 5px',
+                        borderRadius: 'var(--radius-sm)',
+                        flexShrink: 0,
                       }}
                     >
-                  {page.name}
+                      <i className="fa fa-home" style={{ marginRight: 3 }} />Landing
+                    </span>
+                  )}
                 </div>
                 <div
                   style={{
@@ -312,7 +349,7 @@ export const PagesPanel: React.FC = () => {
                     marginTop: 2,
                   }}
                 >
-                  /{page.slug}
+                  {isLanding ? '/' : '/' + page.slug}
                 </div>
               </div>
               <div
@@ -338,7 +375,7 @@ export const PagesPanel: React.FC = () => {
                 >
                   &#9998;
                 </button>
-                {pages.length > 1 && (
+                {pages.length > 1 && !isLanding && (
                   <button
                     onClick={() => setDeleteConfirmId(page.id)}
                     title="Delete"
@@ -363,7 +400,8 @@ export const PagesPanel: React.FC = () => {
             </div>
           )}
         </div>
-      ))}
+        );
+      })}
 
       {/* Add page section */}
       {isAdding ? (

craft/src/state/PageContext.tsx

@@ -276,9 +276,14 @@ export const PageProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
 
   const renamePage = useCallback((pageId: string, name: string, slug: string) => {
     setPages((prev) =>
-      prev.map((p) =>
+      prev.map((p, i) => {
-        p.id === pageId ? { ...p, name, slug: slug || slugify(name) } : p,
+        if (p.id !== pageId) return p;
-      ),
+        // First page is the landing page — its slug is locked to 'index' so
+        // the file always publishes to index.html regardless of the user-set
+        // name. The display name can change freely.
+        const nextSlug = i === 0 ? 'index' : (slug || slugify(name));
+        return { ...p, name, slug: nextSlug };
+      }),
     );
   }, []);
 
@@ -294,10 +299,13 @@ export const PageProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
 
   /** Allow external code (e.g., load from API) to restore pages with craft states */
   const setPagesCraftState = useCallback((pagesData: { id: string; name: string; slug: string; craftState: string | null }[]) => {
-    setPages(pagesData.map((p) => ({
+    setPages(pagesData.map((p, i) => ({
       id: p.id,
       name: p.name,
-      slug: p.slug,
+      // Heal legacy projects whose first page was saved with slug='home' (or
+      // any other) before the landing-page rule existed. The first page is
+      // ALWAYS the landing page → slug 'index' → file index.html.
+      slug: i === 0 ? 'index' : p.slug,
       craftState: p.craftState,
       headCode: '',
     })));