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
); 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, }} > + Landing )} 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 -------------------------------------------------------------------------- */