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/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,14 +178,25 @@ export const PagesPanel: React.FC = () => {
                   if (e.key === 'Escape') setEditingId(null);
                 }}
               />
-              <input
-                type="text"
-                value={editSlug}
-                onChange={(e) => setEditSlug(e.target.value)}
-                placeholder="page-slug"
-                className="control-input"
-                style={{ fontSize: 11 }}
-              />
+              {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}
+                  onChange={(e) => setEditSlug(e.target.value)}
+                  placeholder="page-slug"
+                  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}
+                  }}>{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,
+                      }}
+                    >
+                      <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 ? (