cloud-hosting-platform/site-builder
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI polish Phase 2: deeper restyle (guides toggle, pages/layers panels, topbar, modal, context menu) #7

Merged
jknapp merged 6 commits from ui-polish-phase2 into main 2026-07-13 04:13:17 +00:00
Conversation 0 Commits 6 Files Changed 12
+495 -143
jknapp commented 2026-07-13 04:13:16 +00:00
Owner
Copy Link
Copy Source

Fable UI review items 10-16 + design-consult tweaks. Editor-chrome only (no toHtml change). Scopes dashed guides to real droppables + Show Guides toggle; layers panel type-icons/indent/hover-sync (solid accent, decoupled from guides); topbar radius unification + icon-only Code/Preview w/ tooltips; pages panel neutral zones + outline Landing badge w/ home icon; templates modal hover; default header no dead links; context-menu icons. Two runtime bugs caught via Playwright (setNodeEvent stripped, tooltip offscreen) fixed. 572 tests.

🤖 Generated with Claude Code

Fable UI review items 10-16 + design-consult tweaks. Editor-chrome only (no toHtml change). Scopes dashed guides to real droppables + Show Guides toggle; layers panel type-icons/indent/hover-sync (solid accent, decoupled from guides); topbar radius unification + icon-only Code/Preview w/ tooltips; pages panel neutral zones + outline Landing badge w/ home icon; templates modal hover; default header no dead links; context-menu icons. Two runtime bugs caught via Playwright (setNodeEvent stripped, tooltip offscreen) fixed. 572 tests. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
jknapp added 6 commits 2026-07-13 04:13:16 +00:00
feat(builder): items 10+12+13 — scope canvas guides, Show Guides toggle, Layers panel hover/icons, topbar unification 613a44c4d4 
Item 10: dashed canvas "guide" outlines were applied via blanket tag
selectors (div/section/header/...), so a finished section showed 3-4
nested dashed boxes. RenderNode.tsx (the <Editor onRender> override) now
tags each Craft.js droppable container's real DOM node with a
`data-craft-node` attribute (node.data.isCanvas, excluding ROOT), and
editor.css's guide rules target that attribute instead — a component's own
internal wrapper markup is no longer mistaken for a drop target. Added a
"Show guides" topbar toggle (default ON, persisted to localStorage),
state lifted in EditorShell.tsx (mirrors how `device` is already lifted),
flips `.guides-off` on Canvas.tsx's `.canvas-device-frame`.

Item 12: Layers panel rows get per-type FA icons (keyed off the same
craft.displayName used for the row label, seeded from BlocksPanel's
choices), indent-guide lines connecting nested rows, and row hover
highlights the matching canvas element (`data-layer-hovered`, written
directly to the node's DOM via `query.node(id).get().dom` — NOT via
`actions.setNodeEvent`, which is stripped from useEditor()'s public
`actions` at runtime, not just in its TS type, and threw when called).

Along the way, Craft.js's own connect() was found to already wire mouse
hover to the same `hovered` node event internally (previously invisible
because the matching CSS was dead) — RenderNode now also mirrors that
onto `data-craft-hovered` for a real-mouse-hover canvas highlight, and
both hover attributes plus the guide attribute are suppressed under
`.guides-off` so the toggle stays airtight.

Item 13: unified the topbar to one button radius (`.topbar-btn` 20px pill
-> var(--radius-md)), demoted Code/Preview to icon-only with
`data-tooltip`. Fixed a latent bug the new tooltips exposed: `[data-tooltip]`
tooltips render above their trigger, but the topbar has no room above it
(`body { overflow: hidden }`) — added a `.topbar` override to render
those below instead.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat(builder): item 11 — Pages panel hierarchy: neutral header/footer rows, outline Landing badge, icon+tooltip actions 67228f24b4 
Header/Footer zone rows switched from a loud amber zoneButtonStyle to a
compact neutral zoneRowStyle in the same surface language as the page
list (accent border/bg only when active, matching the page list's own
"currently open" treatment). The "Appears on all pages" subtitle moved to
a tooltip; a fa-pencil hint fades in on row hover (`.zone-row-pencil` CSS
already shipped in the previous commit) and swaps to a check icon while
editing that zone.

The "LANDING" badge (loud amber uppercase + house icon) is now a small
outline badge — muted text, 1px border, no fill, no icon.

The page-row rename button's raw `&#9998;` HTML entity is now an FA
`fa-pencil` icon with `data-tooltip`/`aria-label`; the delete button
(already FA fa-trash) got the same tooltip/aria treatment for
consistency. Both dropped their native `title` in favor of `data-tooltip`
to avoid a double tooltip.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat(builder): item 14 — Templates modal close button + category pill hover states 1c85ab93eb 
Close button (already an FA fa-times icon-button) gains a hover
background/color; category pills gain the same hover-background
treatment when not active (they were already at the brief's target 12px
font-size). Template card hover-lift (translateY(-2px) + shadow) was
already implemented — no change needed there.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(builder): item 15 — default header nav no longer links nonexistent pages 5d6ae7946b 
DEFAULT_HEADER_STATE's Navbar linked Home/About/Services/Contact, but a
brand new site only has a Home page — About/Services/Contact were dead
links on first click. Simplified the default to Home + an inert "Get
Started" CTA (href: '#') rather than seeding placeholder pages nobody
asked for. Updated default-header.test.ts's HTML-export assertions to
match the new default (and assert the removed links are gone).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat(builder): item 16 — context menu FA icon per action 473fe8d421 
Every menu item now has an FA icon (previously only "Ask Sitesmith" did,
leaving the rest visually misaligned): Duplicate fa-clone, Copy
fa-files-o, Paste fa-clipboard, Move Up/Down fa-arrow-up/down, Select
Parent fa-level-up, Delete fa-trash (kept its danger-red color). The
clipboard-group / structure-group separator already existed via
dividerAfter — no structural change needed.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(builder): phase-2 design tweaks (landing home icon, decouple layer-hover from guides, neutral zone separator) 2066059c35 
- 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.
jknapp merged commit 8aeadefa88 into main 2026-07-13 04:13:17 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
jknapp whmcs-sam whp-cicd-user whp-deploy
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: cloud-hosting-platform/site-builder#7