mcp-magento-cms 1.0.0

package/samples/page-7.json

@@ -0,0 +1,17 @@
+{
+  "id": 7,
+  "identifier": "ai-sample-page",
+  "title": "AI Sample Page",
+  "page_layout": "cms-full-width",
+  "meta_title": "",
+  "meta_keywords": "",
+  "meta_description": "",
+  "content_heading": "AI Sample Page Heading",
+  "content": "<style>#html-body [data-pb-style=KW2FBFE]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}</style><div data-content-type=\"row\" data-appearance=\"contained\" data-element=\"main\"><div data-enable-parallax=\"0\" data-parallax-speed=\"0.5\" data-background-images=\"{}\" data-background-type=\"image\" data-video-loop=\"true\" data-video-play-only-visible=\"true\" data-video-lazy-load=\"true\" data-video-fallback-src=\"\" data-background-lazy-load=\"\" data-element=\"inner\" data-pb-style=\"KW2FBFE\"><div data-content-type=\"text\" data-appearance=\"default\" data-element=\"main\"><div>\r\n<h2>What is Lorem Ipsum?</h2>\r\n<p><strong>Lorem Ipsum</strong>&nbsp;is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum.</p>\r\n</div>\r\n<div>\r\n<h2>Why do we use it?</h2>\r\n<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>\r\n</div>\r\n<p>&nbsp;</p>\r\n<div>\r\n<h2>Where does it come from?</h2>\r\n<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.</p>\r\n<p>The standard chunk of Lorem Ipsum used since 1966 is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>\r\n</div></div></div></div>",
+  "creation_time": "2026-08-06 11:35:54",
+  "update_time": "2026-08-06 11:35:54",
+  "sort_order": "0",
+  "custom_theme": "",
+  "custom_root_template": "",
+  "active": true
+}

package/samples/page-8.json

@@ -0,0 +1,15 @@
+{
+  "id": 8,
+  "identifier": "test-ai-page",
+  "title": "test-ai-page",
+  "page_layout": "1column",
+  "meta_title": "test-ai-page",
+  "meta_keywords": "",
+  "meta_description": "",
+  "content_heading": "",
+  "content": "<div data-content-type=\"row\" data-appearance=\"contained\" data-element=\"main\"><div data-enable-parallax=\"0\" data-parallax-speed=\"0.5\" data-background-images=\"{}\" data-background-type=\"image\" data-video-loop=\"true\" data-video-play-only-visible=\"true\" data-video-lazy-load=\"true\" data-video-fallback-src=\"\" data-element=\"inner\" data-pb-style=\"RFE976409C7A5\" style=\"justify-content: flex-start; display: flex; flex-direction: column; background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; border-style: none; border-width: 1px; border-radius: 0px; margin: 0px 0px 10px; padding: 10px;\"><div data-content-type=\"text\" data-appearance=\"default\" data-element=\"main\" data-pb-style=\"T2CED8B12276F\" class=\"bypass-html-filter\" style=\"border-style: none; border-width: 1px; border-radius: 0px; margin: 0px; padding: 0px;\"><p>lorem ipsum</p></div></div></div><style>#html-body [data-pb-style=RFE976409C7A5]{justify-content:flex-start;display:flex;flex-direction:column;background-position:left top;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}#html-body [data-pb-style=T2CED8B12276F]{border-style:none}</style>",
+  "creation_time": "2026-08-06 11:54:59",
+  "update_time": "2026-08-06 11:54:59",
+  "sort_order": "0",
+  "active": true
+}

package/scripts/create-demo-page.js

@@ -0,0 +1,237 @@
+#!/usr/bin/env node
+/**
+ * Creates a demo CMS page with multiple native Page Builder sections:
+ *   1. Banner (poster) with background image, heading, text and a button
+ *   2. Row with Heading + Text (Lorem Ipsum)
+ *   3. Row with Column Group (3 columns: image + heading + text)
+ *   4. Row with Divider + inline Buttons
+ *
+ * Markup follows the Page Builder master format (data-pb-style + <style> block)
+ * so the page opens cleanly in the Admin Page Builder editor.
+ *
+ *   NODE_EXTRA_CA_CERTS=~/.local/share/mkcert/rootCA.pem node scripts/create-demo-page.js
+ */
+import { MagentoClient } from '../src/magentoClient.js';
+
+const client = MagentoClient.fromEnv();
+
+// --- style id helper (Page Builder uses short uppercase ids) -----------------
+const usedIds = new Set();
+function pbStyleId() {
+  let id;
+  do {
+    id = Array.from({ length: 7 }, () =>
+      'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'[Math.floor(Math.random() * 36)]
+    ).join('');
+  } while (usedIds.has(id) || /^\d/.test(id));
+  usedIds.add(id);
+  return id;
+}
+
+const styles = [];
+function addStyle(id, css) {
+  styles.push(`#html-body [data-pb-style=${id}]{${css}}`);
+}
+
+// --- shared snippets ---------------------------------------------------------
+const ROW_INNER_ATTRS =
+  'data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}"' +
+  ' data-background-type="image" data-video-loop="true" data-video-play-only-visible="true"' +
+  ' data-video-lazy-load="true" data-video-fallback-src="" data-background-lazy-load=""' +
+  ' data-element="inner"';
+
+const ROW_INNER_CSS =
+  'justify-content:flex-start;display:flex;flex-direction:column;' +
+  'background-position:left top;background-size:cover;background-repeat:no-repeat;' +
+  'background-attachment:scroll';
+
+function row(appearance, innerHtml, extraCss = '') {
+  const id = pbStyleId();
+  addStyle(id, ROW_INNER_CSS + (extraCss ? ';' + extraCss : ''));
+  return (
+    `<div data-content-type="row" data-appearance="${appearance}" data-element="main">` +
+    `<div ${ROW_INNER_ATTRS} data-pb-style="${id}">${innerHtml}</div></div>`
+  );
+}
+
+function heading(tag, text, css = '') {
+  const id = pbStyleId();
+  if (css) addStyle(id, css);
+  return `<${tag} data-content-type="heading" data-appearance="default" data-element="main"${css ? ` data-pb-style="${id}"` : ''}>${text}</${tag}>`;
+}
+
+function textBlock(innerHtml) {
+  return `<div data-content-type="text" data-appearance="default" data-element="main">${innerHtml}</div>`;
+}
+
+function image(mediaPath, alt) {
+  const figId = pbStyleId();
+  const imgId = pbStyleId();
+  addStyle(figId, 'margin:0;padding:0;border-style:none');
+  addStyle(imgId, 'max-width:100%;height:auto');
+  const src = `{{media url=${mediaPath}}}`;
+  return (
+    `<figure data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="${figId}">` +
+    `<img class="pagebuilder-mobile-hidden" src="${src}" alt="${alt}" title="" data-element="desktop_image" data-pb-style="${imgId}">` +
+    `<img class="pagebuilder-mobile-only" src="${src}" alt="${alt}" title="" data-element="mobile_image" data-pb-style="${imgId}">` +
+    `</figure>`
+  );
+}
+
+// --- section 1: banner (poster) ----------------------------------------------
+const bannerMedia = 'wysiwyg/melissa/banner-1.png';
+const bWrapId = pbStyleId();
+const bOverlayId = pbStyleId();
+const bContentId = pbStyleId();
+addStyle(
+  bWrapId,
+  `background-image:url({{media url=${bannerMedia}}});background-position:center center;` +
+    'background-size:cover;background-repeat:no-repeat;background-attachment:scroll'
+);
+addStyle(bOverlayId, 'background-color:transparent;border-style:none;border-width:1px;border-radius:0px;min-height:420px');
+addStyle(bContentId, 'min-height:50px');
+
+const bannerSection =
+  `<div data-content-type="banner" data-appearance="poster" data-show-button="always"` +
+  ` data-show-overlay="never" data-element="main">` +
+  `<div data-element="empty_link">` +
+  `<div class="pagebuilder-banner-wrapper" data-background-images="{\\&quot;desktop_image\\&quot;:\\&quot;{{media url=${bannerMedia}}}\\&quot;}"` +
+  ` data-background-type="image" data-video-loop="true" data-video-play-only-visible="true"` +
+  ` data-video-lazy-load="true" data-video-fallback-src="" data-element="wrapper" data-pb-style="${bWrapId}">` +
+  `<div class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="" data-element="overlay" data-pb-style="${bOverlayId}">` +
+  `<div class="pagebuilder-poster-content">` +
+  `<div data-element="content" data-pb-style="${bContentId}">` +
+  `<h1>Lorem Ipsum Dolor Sit Amet</h1>` +
+  `<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>` +
+  `</div>` +
+  `<button class="pagebuilder-banner-button pagebuilder-button-primary" data-element="button" type="button">Shop Now</button>` +
+  `</div></div></div></div></div>`;
+
+const section1 = row('full-width', bannerSection, 'padding:0');
+
+// --- section 2: heading + text -----------------------------------------------
+const loremText =
+  '<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. ' +
+  'Lorem Ipsum has been the industry\u2019s standard dummy text ever since 1966, when designers at ' +
+  'Letraset scrambled a 1914 Cicero translation to make dummy text for Body Type sheets. It has ' +
+  'survived not only many decades, but also the leap into electronic typesetting, remaining ' +
+  'essentially unchanged.</p>' +
+  '<p>It is a long established fact that a reader will be distracted by the readable content of a ' +
+  'page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less ' +
+  'normal distribution of letters, as opposed to using \u2018Content here, content here\u2019, making it look ' +
+  'like readable English.</p>';
+
+const section2 = row(
+  'contained',
+  heading('h2', 'What is Lorem Ipsum?', 'text-align:center;margin:10px 0') + textBlock(loremText),
+  'padding:30px 10px'
+);
+
+// --- section 3: three columns (image + heading + text) ------------------------
+const colDefs = [
+  {
+    img: 'wysiwyg/melissa/melissa-1.png',
+    title: 'Sed Ut Perspiciatis',
+    body: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.',
+  },
+  {
+    img: 'wysiwyg/melissa/melissa-2.png',
+    title: 'Nemo Enim Ipsam',
+    body: 'Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.',
+  },
+  {
+    img: 'wysiwyg/melissa/melissa-3.png',
+    title: 'Ut Enim Ad Minima',
+    body: 'Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea.',
+  },
+];
+
+const COLUMN_CSS =
+  'justify-content:flex-start;display:flex;flex-direction:column;' +
+  'background-position:left top;background-size:cover;background-repeat:no-repeat;' +
+  'background-attachment:scroll;width:33.3333%;margin:0;padding:10px;align-self:stretch';
+
+const columns = colDefs
+  .map((c) => {
+    const id = pbStyleId();
+    addStyle(id, COLUMN_CSS);
+    return (
+      `<div data-content-type="column" data-appearance="full-height" data-background-images="{}"` +
+      ` data-background-type="image" data-video-loop="true" data-video-play-only-visible="true"` +
+      ` data-video-lazy-load="true" data-video-fallback-src="" data-element="main" data-pb-style="${id}">` +
+      image(c.img, c.title) +
+      heading('h3', c.title, 'text-align:center') +
+      textBlock(`<p style="text-align: center;">${c.body}</p>`) +
+      `</div>`
+    );
+  })
+  .join('');
+
+const lineId = pbStyleId();
+addStyle(lineId, 'display:flex');
+const columnGroup =
+  `<div data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main">` +
+  `<div data-content-type="column-line" data-appearance="default" data-element="main" data-pb-style="${lineId}">` +
+  columns +
+  `</div></div>`;
+
+const section3 = row(
+  'contained',
+  heading('h2', 'Why Do We Use It?', 'text-align:center;margin:10px 0') + columnGroup,
+  'padding:30px 10px'
+);
+
+// --- section 4: divider + buttons ---------------------------------------------
+const divId = pbStyleId();
+const hrId = pbStyleId();
+addStyle(divId, 'text-align:center;padding:10px 0');
+addStyle(hrId, 'display:inline-block;width:100%;border-width:1px;border-color:#e0e0e0;margin:0');
+const divider =
+  `<div data-content-type="divider" data-appearance="default" data-element="main" data-pb-style="${divId}">` +
+  `<hr data-element="line" data-pb-style="${hrId}"></div>`;
+
+const btnsId = pbStyleId();
+addStyle(btnsId, 'text-align:center');
+function buttonItem(label, cssClass) {
+  const id = pbStyleId();
+  addStyle(id, 'display:inline-block');
+  return (
+    `<div data-content-type="button-item" data-appearance="default" data-element="main" data-pb-style="${id}">` +
+    `<a class="${cssClass}" href="#" target="" data-link-type="default" data-element="link">` +
+    `<span data-element="link_text">${label}</span></a></div>`
+  );
+}
+const buttons =
+  `<div data-content-type="buttons" data-appearance="inline" data-same-width="false" data-element="main" data-pb-style="${btnsId}">` +
+  buttonItem('Where Can I Get Some?', 'pagebuilder-button-primary') +
+  buttonItem('Read The 1914 Translation', 'pagebuilder-button-secondary') +
+  `</div>`;
+
+const section4 = row(
+  'contained',
+  divider + heading('h2', 'Where Does It Come From?', 'text-align:center;margin:10px 0') +
+    textBlock(
+      '<p style="text-align: center;">Contrary to popular belief, Lorem Ipsum is not simply random text. ' +
+        'It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. ' +
+        'It comes from sections 1.10.32 and 1.10.33 of \u201cde Finibus Bonorum et Malorum\u201d by Cicero.</p>'
+    ) +
+    buttons,
+  'padding:30px 10px'
+);
+
+// --- assemble + publish --------------------------------------------------------
+const content = `<style>${styles.join('')}</style>` + section1 + section2 + section3 + section4;
+
+const page = {
+  identifier: 'pb-demo-lorem-ipsum',
+  title: 'PB Demo — Lorem Ipsum',
+  page_layout: 'cms-full-width',
+  content_heading: '',
+  content,
+  active: true,
+};
+
+const created = await client.createPage(page);
+console.log(`Created page id=${created.id} identifier=${created.identifier}`);
+console.log(`Admin edit URL: ${client.pageEditUrl(created.id)}`);
+console.log(`Frontend URL: ${client.baseUrl}/${created.identifier}`);

package/scripts/create-integration.php

@@ -0,0 +1,80 @@
+<?php
+/**
+ * Creates (or reuses) a Magento Integration named "MCP CMS Studio" with
+ * full CMS permissions and prints its permanent access token.
+ *
+ * Run inside the Magento root:
+ *   ddev exec php tools/mcp-magento-cms/scripts/create-integration.php
+ */
+
+use Magento\Framework\App\Bootstrap;
+
+require __DIR__ . '/../../../app/bootstrap.php';
+
+$bootstrap = Bootstrap::create(BP, $_SERVER);
+$objectManager = $bootstrap->getObjectManager();
+
+/** @var \Magento\Framework\App\State $state */
+$state = $objectManager->get(\Magento\Framework\App\State::class);
+try {
+    $state->setAreaCode('adminhtml');
+} catch (\Exception $e) {
+    // area already set
+}
+
+$integrationName = 'MCP CMS Studio';
+
+/** @var \Magento\Integration\Api\IntegrationServiceInterface $integrationService */
+$integrationService = $objectManager->get(\Magento\Integration\Api\IntegrationServiceInterface::class);
+/** @var \Magento\Integration\Api\OauthServiceInterface $oauthService */
+$oauthService = $objectManager->get(\Magento\Integration\Api\OauthServiceInterface::class);
+/** @var \Magento\Integration\Api\AuthorizationServiceInterface $authorizationService */
+$authorizationService = $objectManager->get(\Magento\Integration\Api\AuthorizationServiceInterface::class);
+
+$integration = $integrationService->findByName($integrationName);
+
+if (!$integration || !$integration->getId()) {
+    $integration = $integrationService->create([
+        'name' => $integrationName,
+        'status' => \Magento\Integration\Model\Integration::STATUS_ACTIVE,
+        'setup_type' => 0,
+    ]);
+    echo "Created integration '{$integrationName}' (id {$integration->getId()})\n";
+} else {
+    echo "Found existing integration '{$integrationName}' (id {$integration->getId()})\n";
+}
+
+// Grant CMS + store read permissions
+$resources = [
+    'Magento_Cms::cms',
+    'Magento_Cms::page',
+    'Magento_Cms::save',
+    'Magento_Cms::page_delete',
+    'Magento_Cms::block',
+    'Magento_Cms::save_design',
+    'Magento_Backend::stores',
+    'Magento_Backend::stores_settings',
+    'Magento_Backend::store',
+];
+$authorizationService->grantPermissions($integration->getId(), $resources);
+echo "Granted CMS permissions\n";
+
+// Create consumer credentials + permanent access token if missing
+$consumerId = $integration->getConsumerId();
+$userTypeIntegration = \Magento\Authorization\Model\UserContextInterface::USER_TYPE_INTEGRATION;
+
+$tokenFactory = $objectManager->get(\Magento\Integration\Model\Oauth\TokenFactory::class);
+$existing = $tokenFactory->create()->loadByConsumerIdAndUserType($consumerId, $userTypeIntegration);
+
+if (!$existing->getId() || !$existing->getToken() || $existing->getType() !== 'access') {
+    $oauthService->createAccessToken($consumerId, true);
+    $existing = $tokenFactory->create()->loadByConsumerIdAndUserType($consumerId, $userTypeIntegration);
+}
+
+$integration = $integrationService->get($integration->getId());
+if ((int)$integration->getStatus() !== \Magento\Integration\Model\Integration::STATUS_ACTIVE) {
+    $integration->setStatus(\Magento\Integration\Model\Integration::STATUS_ACTIVE);
+    $integrationService->update($integration->getData());
+}
+
+echo 'ACCESS_TOKEN=' . $existing->getToken() . "\n";

package/scripts/create-melissa-home.js

@@ -0,0 +1,287 @@
+#!/usr/bin/env node
+/**
+ * Creates the "melissa home test" CMS page from the Figma "Home-Approved" design:
+ *   Section 1: Hero Slider (3 slides, native Page Builder slider/slide elements)
+ *   Section 2: Category section — heading, filter buttons, 9 colored category cards
+ *
+ * Content, colors and copy taken from Figma nodes 1:577 (SLIDER) and 1:621 (category).
+ *
+ *   NODE_EXTRA_CA_CERTS=~/.local/share/mkcert/rootCA.pem node scripts/create-melissa-home.js
+ */
+import { MagentoClient } from '../src/magentoClient.js';
+
+const client = MagentoClient.fromEnv();
+
+const usedIds = new Set();
+function pbStyleId() {
+  let id;
+  do {
+    id = Array.from({ length: 7 }, () =>
+      'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'[Math.floor(Math.random() * 36)]
+    ).join('');
+  } while (usedIds.has(id) || /^\d/.test(id));
+  usedIds.add(id);
+  return id;
+}
+
+const styles = [];
+function addStyle(id, css) {
+  styles.push(`#html-body [data-pb-style=${id}]{${css}}`);
+}
+
+const ROW_INNER_ATTRS =
+  'data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}"' +
+  ' data-background-type="image" data-video-loop="true" data-video-play-only-visible="true"' +
+  ' data-video-lazy-load="true" data-video-fallback-src="" data-background-lazy-load=""' +
+  ' data-element="inner"';
+
+const ROW_INNER_CSS =
+  'justify-content:flex-start;display:flex;flex-direction:column;' +
+  'background-position:left top;background-size:cover;background-repeat:no-repeat;' +
+  'background-attachment:scroll';
+
+function row(appearance, innerHtml, extraCss = '') {
+  const id = pbStyleId();
+  addStyle(id, ROW_INNER_CSS + (extraCss ? ';' + extraCss : ''));
+  return (
+    `<div data-content-type="row" data-appearance="${appearance}" data-element="main">` +
+    `<div ${ROW_INNER_ATTRS} data-pb-style="${id}">${innerHtml}</div></div>`
+  );
+}
+
+function heading(tag, text, css = '') {
+  const id = pbStyleId();
+  if (css) addStyle(id, css);
+  return `<${tag} data-content-type="heading" data-appearance="default" data-element="main"${css ? ` data-pb-style="${id}"` : ''}>${text}</${tag}>`;
+}
+
+function textBlock(innerHtml, css = '') {
+  const id = pbStyleId();
+  if (css) addStyle(id, css);
+  return `<div data-content-type="text" data-appearance="default" data-element="main"${css ? ` data-pb-style="${id}"` : ''}>${innerHtml}</div>`;
+}
+
+// ---------------------------------------------------------------------------
+// Section 1: HERO SLIDER (Figma node 1:577)
+// ---------------------------------------------------------------------------
+const slides = [
+  {
+    name: 'Slide 1',
+    image: 'wysiwyg/melissa/banner-1.png',
+    eyebrow: 'New Trend 2023',
+    title: 'Summer<br>Collection',
+    button: 'Explore now',
+  },
+  {
+    name: 'Slide 2',
+    image: 'wysiwyg/melissa/banner-2.png',
+    eyebrow: 'New Trend 2020',
+    title: 'Floral print<br>shorts',
+    button: 'Explore now',
+  },
+  {
+    name: 'Slide 3',
+    image: 'wysiwyg/melissa/banner-2.png',
+    eyebrow: 'New Trend 2020',
+    title: 'Floral print<br>shorts',
+    button: 'Explore now',
+  },
+];
+
+function slide({ name, image, eyebrow, title, button }) {
+  const wrapId = pbStyleId();
+  const overlayId = pbStyleId();
+  const contentId = pbStyleId();
+  addStyle(
+    wrapId,
+    `background-image:url({{media url=${image}}});background-position:center center;` +
+      'background-size:cover;background-repeat:no-repeat;background-attachment:scroll;' +
+      'border-style:none;border-radius:0px;min-height:600px'
+  );
+  addStyle(overlayId, 'border-radius:0px;background-color:transparent;min-height:600px;padding:60px');
+  addStyle(contentId, 'min-height:50px');
+
+  return (
+    `<div data-content-type="slide" data-slide-name="${name}" data-appearance="collage-left"` +
+    ` data-show-button="always" data-show-overlay="never" data-element="main">` +
+    `<div data-element="empty_link">` +
+    `<div class="pagebuilder-slide-wrapper" data-background-images="{\\&quot;desktop_image\\&quot;:\\&quot;{{media url=${image}}}\\&quot;}"` +
+    ` data-background-type="image" data-video-loop="true" data-video-play-only-visible="true"` +
+    ` data-video-lazy-load="true" data-video-fallback-src="" data-element="wrapper" data-pb-style="${wrapId}">` +
+    `<div class="pagebuilder-overlay" data-overlay-color="" data-element="overlay" data-pb-style="${overlayId}">` +
+    `<div class="pagebuilder-collage-content">` +
+    `<div data-element="content" data-pb-style="${contentId}">` +
+    `<p><strong>${eyebrow}</strong></p>` +
+    `<h1>${title}</h1>` +
+    `</div>` +
+    `<button class="pagebuilder-slide-button pagebuilder-button-secondary" data-element="button" type="button">${button}</button>` +
+    `</div></div></div></div></div>`
+  );
+}
+
+const sliderId = pbStyleId();
+addStyle(sliderId, 'min-height:600px');
+const slider =
+  `<div data-content-type="slider" data-appearance="default" data-autoplay="false"` +
+  ` data-autoplay-speed="500" data-fade="false" data-infinite-loop="true" data-show-arrows="true"` +
+  ` data-show-dots="true" data-element="main" data-pb-style="${sliderId}" class="pagebuilder-slider">` +
+  slides.map(slide).join('') +
+  `</div>`;
+
+const section1 = row('full-width', slider, 'padding:0');
+
+// ---------------------------------------------------------------------------
+// Section 2: CATEGORY (Figma node 1:621)
+// ---------------------------------------------------------------------------
+const categories = [
+  { label: 'Sandals', color: '#fd5e94', image: 'wysiwyg/melissa/img1.png' },
+  { label: 'Slide', color: '#3d8f57', image: 'wysiwyg/melissa/img2.png' },
+  { label: 'Platforms', color: '#725ca0', image: 'wysiwyg/melissa/img3.png' },
+  { label: 'Flip Flops', color: '#02a3cd', image: 'wysiwyg/melissa/img4.png' },
+  { label: 'Flats', color: '#6d483c', image: 'wysiwyg/melissa/img5.png' },
+  { label: 'Heels', color: '#822411', image: 'wysiwyg/melissa/img6.png' },
+  { label: 'Mules', color: '#08704f', image: 'wysiwyg/melissa/img7.png' },
+  { label: 'Boots', color: '#4c2f2b', image: 'wysiwyg/melissa/img8.png' },
+  { label: 'Sneakers', color: '#c24952', image: 'wysiwyg/melissa/img9.png' },
+];
+
+const COLUMN_CSS =
+  'justify-content:flex-start;display:flex;flex-direction:column;' +
+  'background-position:left top;background-size:cover;background-repeat:no-repeat;' +
+  'background-attachment:scroll;width:11.1111%;margin:0;padding:5px;align-self:stretch';
+
+function categoryCard({ label, color, image }) {
+  const colId = pbStyleId();
+  const figId = pbStyleId();
+  const imgId = pbStyleId();
+  addStyle(colId, COLUMN_CSS);
+  addStyle(figId, `background-color:${color};border-radius:10px;margin:0;padding:10px;border-style:none`);
+  addStyle(imgId, 'max-width:100%;height:auto;border-radius:6px');
+  const src = `{{media url=${image}}}`;
+  return (
+    `<div data-content-type="column" data-appearance="full-height" data-background-images="{}"` +
+    ` data-background-type="image" data-video-loop="true" data-video-play-only-visible="true"` +
+    ` data-video-lazy-load="true" data-video-fallback-src="" data-element="main" data-pb-style="${colId}">` +
+    `<figure data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="${figId}">` +
+    `<img class="pagebuilder-mobile-hidden" src="${src}" alt="${label}" title="${label}" data-element="desktop_image" data-pb-style="${imgId}">` +
+    `<img class="pagebuilder-mobile-only" src="${src}" alt="${label}" title="${label}" data-element="mobile_image" data-pb-style="${imgId}">` +
+    `</figure>` +
+    textBlock(`<p style="text-align: center;"><strong>${label}</strong></p>`, 'margin-top:10px') +
+    `</div>`
+  );
+}
+
+// Builds a fresh 9-card grid (unique style ids per instance so each tab
+// gets its own editable copy).
+function categoryGrid() {
+  const lineId = pbStyleId();
+  addStyle(lineId, 'display:flex');
+  return (
+    `<div data-content-type="column-group" data-appearance="default" data-grid-size="12" data-element="main">` +
+    `<div data-content-type="column-line" data-appearance="default" data-element="main" data-pb-style="${lineId}">` +
+    categories.map(categoryCard).join('') +
+    `</div></div>`
+  );
+}
+
+// Page Builder Tabs element: adults / kids / baby
+function tabId() {
+  return 'melissa-tab-' + Math.random().toString(36).slice(2, 10);
+}
+
+function tabsElement(items) {
+  const navId = pbStyleId();
+  const headersId = pbStyleId();
+  const contentId = pbStyleId();
+  addStyle(navId, 'text-align:center');
+  addStyle(headersId, 'border-radius:16px');
+  addStyle(contentId, 'border-width:1px;border-radius:0px;min-height:200px');
+
+  const ids = items.map(() => tabId());
+
+  const nav =
+    `<ul role="tablist" class="tabs-navigation" data-element="navigation" data-pb-style="${navId}">` +
+    items
+      .map(
+        (item, i) =>
+          `<li role="tab" class="tab-header" data-element="headers" data-pb-style="${headersId}">` +
+          `<a href="#${ids[i]}" class="tab-title"><span class="tab-title">${item.name}</span></a></li>`
+      )
+      .join('') +
+    `</ul>`;
+
+  const panels = items
+    .map((item, i) => {
+      const itemStyleId = pbStyleId();
+      addStyle(
+        itemStyleId,
+        'justify-content:flex-start;display:flex;flex-direction:column;' +
+          'background-position:left top;background-size:cover;background-repeat:no-repeat;' +
+          'background-attachment:scroll;border-width:1px;border-radius:0px;min-height:200px;padding:30px 0'
+      );
+      return (
+        `<div data-content-type="tab-item" data-appearance="default" data-tab-name="${item.name}"` +
+        ` data-background-images="{}" data-background-type="image" data-video-loop="true"` +
+        ` data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src=""` +
+        ` data-element="main" id="${ids[i]}" data-pb-style="${itemStyleId}">${item.content}</div>`
+      );
+    })
+    .join('');
+
+  return (
+    `<div data-content-type="tabs" data-appearance="default" data-active-tab="0" data-element="main">` +
+    nav +
+    `<div class="tabs-content" data-element="content" data-pb-style="${contentId}">${panels}</div></div>`
+  );
+}
+
+const categoryTabs = tabsElement([
+  { name: 'adults', content: categoryGrid() },
+  { name: 'kids', content: categoryGrid() },
+  { name: 'baby', content: categoryGrid() },
+]);
+
+const section2 = row(
+  'contained',
+  heading('h2', 'A look for every style + age', 'text-align:center;margin:10px 0;font-weight:500') +
+    textBlock('<p style="text-align: center;">Top sale on this week</p>') +
+    categoryTabs,
+  'padding:40px 10px'
+);
+
+// ---------------------------------------------------------------------------
+// Assemble + publish
+// ---------------------------------------------------------------------------
+const content = `<style>${styles.join('')}</style>` + section1 + section2;
+
+const page = {
+  identifier: 'melissa-home-test',
+  title: 'melissa home test',
+  page_layout: 'cms-full-width',
+  content_heading: '',
+  content,
+  active: true,
+};
+
+// Upsert: update the existing page if it already exists, otherwise create it.
+let result;
+try {
+  const found = await client.get(
+    `/cmsPage/search?searchCriteria[filter_groups][0][filters][0][field]=identifier` +
+      `&searchCriteria[filter_groups][0][filters][0][value]=${page.identifier}` +
+      `&searchCriteria[filter_groups][0][filters][0][condition_type]=eq`
+  );
+  const existing = found?.items?.[0];
+  if (existing) {
+    result = await client.updatePage(existing.id, { ...existing, ...page });
+    console.log(`Updated page id=${result.id} identifier=${result.identifier}`);
+  } else {
+    result = await client.createPage(page);
+    console.log(`Created page id=${result.id} identifier=${result.identifier}`);
+  }
+} catch (e) {
+  console.error(e.message || e);
+  process.exit(1);
+}
+console.log(`Admin edit URL: ${client.pageEditUrl(result.id)}`);
+console.log(`Frontend URL: ${client.baseUrl}/${result.identifier}`);

package/scripts/health-check.js

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+/**
+ * CLI: node scripts/health-check.js
+ * Loads .env and pings Magento CMS API.
+ */
+import { MagentoClient, loadDotEnv } from '../src/magentoClient.js';
+
+loadDotEnv();
+
+try {
+  const client = MagentoClient.fromEnv();
+  const result = await client.health();
+  console.log(JSON.stringify(result, null, 2));
+  process.exit(0);
+} catch (e) {
+  console.error(e.message || e);
+  process.exit(1);
+}