Newkommerce Mega Menu (Builder + Preview)

This app is the mega-menu builder and preview renderer used to author and validate the Mega Menu v2 document/config for Newkommerce. It is also evolving into a package-style build (CSS-first layout + CSS variables for theming) so the renderer can be consumed outside this repo.

Quick start

pnpm install
pnpm dev

Then open the routes:

• Builder: http://localhost:5173/builder-new
• Preview simulator: http://localhost:5173/builder-new/preview
• Global styles: http://localhost:5173/global-style

Project structure (high level)

• src/pages/BuilderNew.tsx: primary editor surface (builder-new)
• src/components/builder-new/*: new builder UI + property panels
• src/components/builder-new/preview/*: preview renderer tree (CSS class layout + CSS vars)
• src/lib/megaMenuDocumentBridge.ts: compatibility/bridge logic between document/config shapes
• src/lib/megaMenuDocumentSchema.ts: schema + validation helpers
• src/lib/mergeMenuTheme.ts: theme merge/inheritance utilities
• src/types/*: TypeScript types for menu document/config/theme
• src/data/initialData.ts: seeded demo data used for local development

JSON / config compatibility notes

We have multiple “generations” of menu JSON in circulation. The current builder seeds a NavConfig shape that includes:

• globalTheme
• navItems[] with menuData: { theme, columns }

Some documentation/spec examples describe alternative shapes (e.g. globalTheme + entities). If you are loading older JSON, ensure it is normalized via the bridge (megaMenuDocumentBridge) before the UI/preview consumes it.

Scripts

• npm run dev: run Vite dev server
• npm run build: lint + build the Web UI app (Editor + Preview Simulator) locally or on Vercel
• npm run build:package: build the package-style output (under dist/ for NPM distribution)
• npm run preview: serve the locally built Web UI application production bundle
• npm run lint: Biome lint + TypeScript typecheck
• npm run typecheck: TypeScript typecheck only

Deployment (Vercel)

The builder and preview web application can be seamlessly deployed to Vercel to host the live editor:

1. Import this repository as a generic web project in Vercel.
2. Under "Build and Output Settings", leave all defaults exactly as they are (Build command: npm run build).

How it works autonomously: The vite.config.ts dynamically detects if it is running in a Vercel environment (using the automatic VERCEL=1 variable). When detected, it skips the library packaging entirely and builds the full interactive React application. The resulting application is highly optimized with React <Suspense> route-level code-splitting and manual vendor chunking.

Debugging hover interactions in DevTools

For fullscreen hover inspections, keep the mega menu open from the browser console:

window.__MM_DEBUG_LOCK_OPEN__ = true

After inspecting, turn it off:

window.__MM_DEBUG_LOCK_OPEN__ = false

Related docs

From the repo root:

• docs/BUILDER_FLOW.md: overview of the builder's internal logic and state management.