Skip to content

Wave 1–5 host quality: closed SSR, docs, demos, CSS - #136

Open
karim-semmoud wants to merge 23 commits into
mainfrom
cursor/zag-wave-1-overlays-be39
Open

Wave 1–5 host quality: closed SSR, docs, demos, CSS#136
karim-semmoud wants to merge 23 commits into
mainfrom
cursor/zag-wave-1-overlays-be39

Conversation

@karim-semmoud

@karim-semmoud karim-semmoud commented Aug 31, 2026 •
edited by cursor Bot
Loading

Copy link
Copy Markdown
Member

Wave hosts quality pass plus a follow-up for anatomy slots, SSR, and overlay bugs.

Follow-up

  • Hide Zag beta hosts (cascade select, date input, drawer) from the docs nav. Library code stays.
  • Navigation menu uses Corex.List items with <:trigger>, <:link>, and <:content> slots and full copyable HEEx.
  • Image cropper does not SSR crop geometry, uses a loading viewport until JS, object-fit: cover with /images/beach.jpg, and a View preview CTA (getCroppedImage).
  • Progress stamps circular SVG geometry on SSR, loading is Zag indeterminate (value={null}), and /progress/patterns updates value from the server with Reset.
  • Rating group outline unselected stars, :focus-visible only, smileys + half-star anatomies, no radius axis.
  • Splitter resize trigger is a button with touch-action: none.
  • Steps hide inactive content on SSR so the list sits against the CTAs.
  • TOC stamps all heading ids, observes the article scroll container, and uses Corex typo + lorem.
  • Tour portals backdrop, spotlight, and positioner into a full-viewport manual popover on document.body (data-corex-tour-overlay) so the overlay sits in the top layer above sticky chrome and demo overflow. A mutation observer re-homes parts if LiveView morphs them back.
  • Presence drives close from requested present (not Zag api.present during unmount) and persists data-present across LiveView updates.
  • Hover card, popover, and tooltip placement anatomies show top/right/bottom/left.

Tour step 1 overlay across the docs chrome
Tour step 2 Docs tooltip
tour_popover_covers_full_viewport_chrome.mp4

Earlier

  • Closed overlay SSR (Select model). No open HEEx attrs.
  • Zag anatomy parts, CSS variables, and JS.ignore_attributes / Connect.mounted_* only.

To show artifacts inline, enable in settings.

Open in Web Open in Cursor 

cursoragent and others added 2 commits August 31, 2026 04:01
@cursoragent @karim-semmoud
feat: add popover, hover card, and drawer (Zag beta)
e4a2e3a 
Wire the three missing overlay machines to Corex HEEx, Zag vanilla
hooks, Design CSS, registry contracts, and e2e doc pages.

Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursoragent @karim-semmoud
feat: add remaining Zag.js hosts (status, layout, forms, compounds)
dca2883 
Implement progress, rating group, steps, QR code, presence, splitter,
scroll area, TOC, date input (beta), image cropper, navigation menu,
cascade select (beta), and tour at the existing Corex host quality bar.

Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursor cursor Bot changed the title Add missing Zag.js overlay components (popover, hover card, drawer) Add missing Zag.js components (overlays through compounds) Aug 31, 2026
cursoragent and others added 7 commits August 31, 2026 04:18
@cursoragent @karim-semmoud
fix: repair e2e generator smash in nav, a11y routes, and pages
78fda23 
Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursoragent @karim-semmoud
fix: make QR code pattern visible in Design CSS
fa3c079 
Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursoragent @karim-semmoud
style: paint new Zag hosts with Design CSS and style axes
0e3ef79 
Translate Zag shared demo anatomy (parts, orientation, states) into Corex
--ctl-* component CSS, expand recipe @Parts, and upgrade e2e /style pages
to the tooltip/slider modifier contracts.

Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursoragent @karim-semmoud
chore: format new Zag host style pages and demos
ace059c 
Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursoragent @karim-semmoud
chore: refresh installer Design snapshot for new Zag hosts
fa24601 
Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursoragent @karim-semmoud
Merge branch 'main' into cursor/zag-wave-1-overlays-be39
3477a5f 
Keep Unreleased changelog entries from both sides. Rebuild priv/static JS
so the redirect allowlist hardening and new Zag host chunks share one bundle.

Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursoragent @karim-semmoud
Improve Wave 1-5 host SSR, docs, demos, and CSS.
2327ecd 
Stamp overlay hosts closed on first paint, complete Anatomy/API/Events/Forms
docs for value and overlay components, and restyle remaining playgrounds
(cascade, tour, drawer, date input, rating, cropper, nav, progress, QR).

Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursor cursor Bot changed the title Add missing Zag.js components (overlays through compounds) Wave hosts quality: closed SSR, docs, and demos Aug 31, 2026
cursoragent and others added 2 commits August 31, 2026 06:45
@cursoragent @karim-semmoud
Fix Wave host compile, docs tabs, and tour CSS.
4a31bd4 
Move event snippet attributes into assigns, restore DemoScales aliases,
use float rating values, and repair tour close-trigger CSS so Tailwind
can build e2e assets.

Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursoragent @karim-semmoud
Fix overlay visibility and rebuild Wave host hooks.
776c183 
Drop SSR inline display:none on overlay content (Select-style hidden only) so Zag can show cascade, hover-card, drawer, and tour. Rebuild stale hook bundles so tour start, presence toggle, and cascade set-open listeners ship. Keep demo section ids from colliding with tour/presence hosts.

Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursor cursor Bot changed the title Wave hosts quality: closed SSR, docs, and demos Wave 1–5 host quality: closed SSR, docs, demos, CSS Aug 31, 2026
@karim-semmoud
karim-semmoud marked this pull request as ready for review August 31, 2026 08:25
cursoragent and others added 12 commits August 31, 2026 10:32
@cursoragent @karim-semmoud
Fix Wave host CI: Dialyzer ignore, doc parity, a11y routes.
f2348e4 
Ignore JS opaque contracts on new overlay APIs, sync anatomy
moduledocs with demo snippets, register form/live-form a11y
routes, and use index-based style-matrix ids so aria-controls
is a valid IDREF.

Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursoragent @karim-semmoud
Fix cascade trigger names and navigation-menu contrast.
aadcc71 
Zag labels the cascade trigger via a missing label id; fall back
to aria-label from the placeholder. Paint nav links and triggers
with control background so ui-solid stays readable.

Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursoragent @karim-semmoud
Fix Credo alias order and steps/TOC doc a11y.
ee00e1d 
Alphabetize Corex aliases and static ~S sigils so mix lint
passes. Drop Zag tablist roles on step wrappers, label each TOC
nav uniquely, and make the article scroller keyboard-focusable.

Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursoragent @karim-semmoud
Strip leftover aria-orientation from steps lists.
1953627 
Zag still stamps tablist orientation after role is removed;
plain divs cannot keep that attribute.

Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursoragent @karim-semmoud
Align Wave hosts with Zag anatomy, CSS variables, and morph ignore.
3fb700d 
Consume Zag-owned geometry on overlays, cropper, progress, tour, drawer, and splitter. Stamp Connect.mounted_* ignore attrs on child parts instead of phx-update="ignore". Complete demo HEEx and loading/set_value surfaces.

Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursoragent @karim-semmoud
Refresh no-design CSS snapshot and format Wave hosts.
fb7f35e 
Rebuild installer Corex CSS after recipe edits and restore Mix format/test delimiters.

Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursoragent @karim-semmoud
Use a float rating_group anatomy value.
79aa2f2 
Zag rating value is a float attr; 3.0 keeps HEEx compile clean.

Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursoragent @karim-semmoud
Fix Wave follow-up: slots, SSR, overlays, and hide Zag beta docs.
5e6a438 
Navigation menu now uses Corex.List items with trigger/link/content slots
and copyable anatomy. Cropper waits for JS, covers carousel photos, and
exports a preview CTA. Progress stamps circular geometry, uses Zag
indeterminate, and adds a server pattern page. Rating group outline stars,
keyboard-only focus, smileys, and no radius axis. Splitter, steps, TOC,
tour, presence, and placement anatomies match Zag more closely. Cascade
select, date input, and drawer stay in the library but leave the docs nav.

Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursoragent @karim-semmoud
Fix presence exit, tour stacking, and slot rendering.
d53fc51 
Presence now drives closed state from the requested present prop so Zag can finish the exit animation. Tour overlays portal above the site nav dialog. Navigation-menu and steps render_slot lists so custom slots copy cleanly.

Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursoragent @karim-semmoud
Keep tour overlay on-screen after start.
e09d96e 
Closed SSR no longer parks the positioner off-viewport with a leftover transform, which blocked the first Start tour click after hydrate.

Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursoragent @karim-semmoud
Portal tour overlay to a full-viewport body host.
65b4d2c 
Zag tour backdrop/positioner stayed in the docs main column stacking
context, so the overlay sat under the sticky header and side nav.

Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
@cursoragent @karim-semmoud
Put the tour overlay in the native top layer.
1fb771b 
Demo previews clip position:fixed, and LiveView can steal portalled
nodes by id. The overlay host is a manual popover on document.body,
with a mutation observer to re-home backdrop, spotlight, and positioner.

Co-authored-by: Karim Semmoud <karim-semmoud@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@karim-semmoud @cursoragent