From 2066059c354a14e24007b1d3c8001788d248e668 Mon Sep 17 00:00:00 2001
From: Josh Knapp <jknapp85@gmail.com>
Date: Sun, 12 Jul 2026 21:12:09 -0700
Subject: [PATCH] fix(builder): phase-2 design tweaks (landing home icon,
 decouple layer-hover from guides, neutral zone separator)

- PagesPanel: add fa-home glyph (8px, inherits badge text color) before
  "Landing" text in the landing-page badge, restoring the icon dropped
  in an earlier polish pass.
- editor.css: split [data-craft-hovered] and [data-layer-hovered] into
  distinct rules. Layer-hover now uses a solid 2px accent outline (vs
  the dashed structural guides) and is excluded from the .guides-off
  suppression list, so the Layers-panel hover->canvas locator still
  works when "Show guides" is off. Structural guides/hover
  ([data-craft-node], [data-craft-hovered]) remain correctly gated.
- Canvas.tsx: move the header/footer ZonePreview separator border to a
  .zone-preview-sep class, recolor it from amber
  (rgba(245,158,11,0.3)) to neutral (rgba(148,163,184,0.25)) to match
  the empty-state variant, and gate it on .guides-off via CSS
  descendant selector so it disappears with the rest of the guides.
---
 craft/src/editor/Canvas.tsx          |  5 ++--
 craft/src/panels/left/PagesPanel.tsx |  4 +++
 craft/src/styles/editor.css          | 41 ++++++++++++++++++++--------
 3 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/craft/src/editor/Canvas.tsx b/craft/src/editor/Canvas.tsx
index 36bdf42..ba3eab2 100644
--- a/craft/src/editor/Canvas.tsx
+++ b/craft/src/editor/Canvas.tsx
@@ -83,13 +83,14 @@ const ZonePreview: React.FC<{ craftState: string | null; zone: 'header' | 'foote
     <div
       ref={containerRef}
       data-zone-preview={zone}
+      className="zone-preview-sep"
       style={{
         width: '100%',
         position: 'relative',
         pointerEvents: 'none',
         userSelect: 'none',
-        borderBottom: zone === 'header' ? '1px dashed rgba(245,158,11,0.3)' : 'none',
-        borderTop: zone === 'footer' ? '1px dashed rgba(245,158,11,0.3)' : 'none',
+        borderBottom: zone === 'header' ? '1px dashed rgba(148,163,184,0.25)' : 'none',
+        borderTop: zone === 'footer' ? '1px dashed rgba(148,163,184,0.25)' : 'none',
       }}
     />
   );
diff --git a/craft/src/panels/left/PagesPanel.tsx b/craft/src/panels/left/PagesPanel.tsx
index 106c930..30946f9 100644
--- a/craft/src/panels/left/PagesPanel.tsx
+++ b/craft/src/panels/left/PagesPanel.tsx
@@ -319,8 +319,12 @@ export const PagesPanel: React.FC = () => {
                         padding: '1px 5px',
                         borderRadius: 'var(--radius-sm)',
                         flexShrink: 0,
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: 4,
                       }}
                     >
+                      <i className="fa fa-home" aria-hidden="true" style={{ fontSize: 8, color: 'inherit' }} />
                       Landing
                     </span>
                   )}
diff --git a/craft/src/styles/editor.css b/craft/src/styles/editor.css
index 3f29beb..60e7614 100644
--- a/craft/src/styles/editor.css
+++ b/craft/src/styles/editor.css
@@ -1053,27 +1053,44 @@ body {
    (called by every component) wires that event to a native
    mouseover/mouseleave listener on each node's dom internally, so this
    rule is a real mouse-hover highlight for any node (container or leaf).
-   `data-layer-hovered` is set directly by the Layers panel (LayersPanel.tsx)
-   on its own row hover/focus -- a separate producer (writing straight to the
-   target's dom rather than through Craft's `hovered` event, since the
-   action that drives it is stripped from the public `useEditor()` API at
-   runtime) that drives the identical highlight when hovering a layer row.
-   Both are scoped under `.canvas-device-frame` and suppressed by
-   `.guides-off` so "Show guides: off" stays airtight either way. */
-.canvas-device-frame [data-craft-hovered],
-.canvas-device-frame [data-layer-hovered] {
+   Scoped under `.canvas-device-frame` and suppressed by `.guides-off` so
+   "Show guides: off" stays airtight. */
+.canvas-device-frame [data-craft-hovered] {
   outline: 2px dashed var(--color-accent) !important;
   outline-offset: -1px;
 }
 
+/* `data-layer-hovered` is set directly by the Layers panel (LayersPanel.tsx)
+   on its own row hover/focus -- a separate producer (writing straight to the
+   target's dom rather than through Craft's `hovered` event, since the
+   action that drives it is stripped from the public `useEditor()` API at
+   runtime) that drives a highlight when hovering a layer row. This is a
+   deliberate locator action (not a structural drop-target guide), so it
+   uses a SOLID outline -- visually distinct from the dashed structural
+   guides -- and is intentionally NOT suppressed by `.guides-off`: hiding
+   guides shouldn't blind the Layers-panel hover→canvas locator. */
+.canvas-device-frame [data-layer-hovered] {
+  outline: 2px solid var(--color-accent) !important;
+  outline-offset: -1px;
+}
+
 /* "Show guides" topbar toggle (TopBar.tsx) -- flips this class on
-   .canvas-device-frame to hide every guide/hover outline at once. Default ON. */
+   .canvas-device-frame to hide structural drop-target guides and the
+   mouse-hover highlight at once. Default ON. `[data-layer-hovered]` is
+   deliberately excluded -- see rule above. */
 .canvas-device-frame.guides-off [data-craft-node],
-.canvas-device-frame.guides-off [data-craft-hovered],
-.canvas-device-frame.guides-off [data-layer-hovered] {
+.canvas-device-frame.guides-off [data-craft-hovered] {
   outline: none !important;
 }
 
+/* Header/footer zone-preview separator (Canvas.tsx ZonePreview) -- a neutral
+   dashed rule marking where the editable page meets the read-only
+   header/footer preview. It's a structural guide, so it hides with the
+   rest when "Show guides" is off. */
+.canvas-device-frame.guides-off .zone-preview-sep {
+  border-color: transparent !important;
+}
+
 /* --------------------------------------------------------------------------
    Craft.js Selection Indicator
    -------------------------------------------------------------------------- */