vibespot 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibespot",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "AI-powered HubSpot CMS landing page builder — vibe coding & React converter",
   "type": "module",
   "bin": {
@@ -22,8 +22,8 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@anthropic-ai/sdk": "^0.91.1",
-    "@clack/prompts": "^0.9.1",
+    "@anthropic-ai/sdk": "^0.92.0",
+    "@clack/prompts": "^1.3.0",
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.11",
     "@codemirror/lang-javascript": "^6.2.5",
@@ -41,11 +41,11 @@
   },
   "devDependencies": {
     "@types/busboy": "^1.5.4",
-    "@types/node": "^22.0.0",
+    "@types/node": "^25.6.0",
     "@types/ws": "^8.18.1",
     "tsup": "^8.4.0",
     "tsx": "^4.19.0",
-    "typescript": "^5.7.0",
+    "typescript": "^6.0.3",
     "vitest": "^4.1.5"
   },
   "keywords": [

package/starters/06-blog-content-hub.json

@@ -0,0 +1,75 @@
+{
+  "id": "blog-content-hub",
+  "name": "Blog / Content Hub",
+  "description": "Clean editorial blog with post listing, reading-optimized post layout, author bio, and newsletter signup",
+  "category": "Blog",
+  "modules": [
+    {
+      "moduleName": "blog-header",
+      "fieldsJson": "[{\"name\":\"blog_title\",\"label\":\"Blog Title\",\"type\":\"text\",\"default\":\"The Dispatch\"},{\"name\":\"blog_tagline\",\"label\":\"Tagline\",\"type\":\"text\",\"default\":\"Practical insights for people who build things\"},{\"name\":\"background_color\",\"label\":\"Background Color\",\"type\":\"color\",\"default\":{\"color\":\"#ffffff\",\"opacity\":100}}]",
+      "metaJson": "{\"label\":\"Blog Header\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"BLOG_LISTING\"],\"host_template_types\":[\"BLOG_LISTING\"],\"is_available_for_new_content\":true}",
+      "moduleHtml": "<header class=\"blog-header\" style=\"background-color: {{ module.background_color.color || '#ffffff' }}\">\n  <div class=\"blog-header__inner\">\n    <h1 class=\"blog-header__title\">{{ module.blog_title }}</h1>\n    {% if module.blog_tagline %}\n      <p class=\"blog-header__tagline\">{{ module.blog_tagline }}</p>\n    {% endif %}\n  </div>\n</header>",
+      "moduleCss": ".blog-header {\n  padding: 80px 24px 48px;\n  text-align: center;\n}\n\n.blog-header__inner {\n  max-width: 720px;\n  margin: 0 auto;\n}\n\n.blog-header__title {\n  font-family: var(--font-heading);\n  font-size: 3rem;\n  font-weight: 800;\n  color: var(--color-text);\n  margin: 0 0 12px;\n  letter-spacing: -0.02em;\n  line-height: 1.1;\n}\n\n.blog-header__tagline {\n  font-family: var(--font-body);\n  font-size: 1.15rem;\n  color: var(--color-text-muted);\n  margin: 0;\n  line-height: 1.6;\n}\n\n@media (max-width: 768px) {\n  .blog-header {\n    padding: 48px 20px 32px;\n  }\n  .blog-header__title {\n    font-size: 2.2rem;\n  }\n}",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "topic-filter",
+      "fieldsJson": "[{\"name\":\"show_all_label\",\"label\":\"Show All Label\",\"type\":\"text\",\"default\":\"All Posts\"}]",
+      "metaJson": "{\"label\":\"Topic Filter\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"BLOG_LISTING\"],\"host_template_types\":[\"BLOG_LISTING\"],\"is_available_for_new_content\":true}",
+      "moduleHtml": "<nav class=\"topic-filter\">\n  <div class=\"topic-filter__inner\">\n    <a href=\"{{ group.absolute_url }}\" class=\"topic-filter__pill{% if not tag %} topic-filter__pill--active{% endif %}\">\n      {{ module.show_all_label }}\n    </a>\n    {% set topics = blog_topics(group.id, 250) %}\n    {% for topic in topics %}\n      <a href=\"{{ blog_tag_url(group.id, topic.slug) }}\"\n         class=\"topic-filter__pill{% if topic.slug == tag %} topic-filter__pill--active{% endif %}\">\n        {{ topic.name }}\n      </a>\n    {% endfor %}\n  </div>\n</nav>",
+      "moduleCss": ".topic-filter {\n  padding: 0 24px 48px;\n  text-align: center;\n}\n\n.topic-filter__inner {\n  max-width: 720px;\n  margin: 0 auto;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  justify-content: center;\n}\n\n.topic-filter__pill {\n  display: inline-block;\n  padding: 8px 20px;\n  font-family: var(--font-body);\n  font-size: 0.9rem;\n  font-weight: 500;\n  color: var(--color-text-muted);\n  text-decoration: none;\n  border: 1px solid var(--color-border, rgba(0,0,0,0.1));\n  border-radius: 100px;\n  transition: all 0.2s ease;\n}\n\n.topic-filter__pill:hover {\n  color: var(--color-text);\n  border-color: var(--color-text);\n}\n\n.topic-filter__pill--active {\n  background: var(--color-text);\n  color: var(--color-bg);\n  border-color: var(--color-text);\n}\n\n@media (max-width: 768px) {\n  .topic-filter {\n    padding: 0 16px 32px;\n  }\n  .topic-filter__pill {\n    font-size: 0.85rem;\n    padding: 6px 16px;\n  }\n}",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "post-grid",
+      "fieldsJson": "[{\"name\":\"columns\",\"label\":\"Grid Columns\",\"type\":\"number\",\"default\":3,\"min\":1,\"max\":4}]",
+      "metaJson": "{\"label\":\"Post Grid\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"BLOG_LISTING\"],\"host_template_types\":[\"BLOG_LISTING\"],\"is_available_for_new_content\":true}",
+      "moduleHtml": "<section class=\"post-grid\">\n  <div class=\"post-grid__inner\">\n    {% for content in contents %}\n      <article class=\"post-card\">\n        {% if content.featured_image %}\n          <a href=\"{{ content.absolute_url }}\" class=\"post-card__image-link\">\n            <img src=\"{{ content.featured_image }}\" alt=\"{{ content.featured_image_alt_text }}\"\n                 class=\"post-card__image\" loading=\"lazy\" />\n          </a>\n        {% endif %}\n        <div class=\"post-card__body\">\n          <div class=\"post-card__meta\">\n            <time class=\"post-card__date\">{{ content.publish_date|datetimeformat('%b %d, %Y') }}</time>\n            {% if content.blog_post_author %}\n              <span class=\"post-card__author\">{{ content.blog_post_author }}</span>\n            {% endif %}\n          </div>\n          <h2 class=\"post-card__title\">\n            <a href=\"{{ content.absolute_url }}\">{{ content.name }}</a>\n          </h2>\n          {% if content.meta_description %}\n            <p class=\"post-card__excerpt\">{{ content.meta_description|truncate(140) }}</p>\n          {% endif %}\n          {% if content.tag_list %}\n            <div class=\"post-card__tags\">\n              {% for tag_item in content.tag_list %}\n                <a href=\"{{ blog_tag_url(group.id, tag_item.slug) }}\" class=\"post-card__tag\">{{ tag_item.name }}</a>\n              {% endfor %}\n            </div>\n          {% endif %}\n        </div>\n      </article>\n    {% endfor %}\n  </div>\n\n  {% if last_page_num > 1 %}\n    <nav class=\"post-grid__pagination\">\n      {% if current_page_num > 1 %}\n        <a href=\"{{ blog_page_link(current_page_num - 1) }}\" class=\"post-grid__page-link\">&larr; Previous</a>\n      {% endif %}\n      <span class=\"post-grid__page-info\">Page {{ current_page_num }} of {{ last_page_num }}</span>\n      {% if current_page_num < last_page_num %}\n        <a href=\"{{ blog_page_link(current_page_num + 1) }}\" class=\"post-grid__page-link\">Next &rarr;</a>\n      {% endif %}\n    </nav>\n  {% endif %}\n</section>",
+      "moduleCss": ".post-grid {\n  padding: 0 24px 80px;\n}\n\n.post-grid__inner {\n  max-width: 1200px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 32px;\n}\n\n.post-card {\n  background: var(--color-surface, #ffffff);\n  border: 1px solid var(--color-border, rgba(0,0,0,0.08));\n  border-radius: 12px;\n  overflow: hidden;\n  transition: box-shadow 0.2s ease, transform 0.2s ease;\n}\n\n.post-card:hover {\n  box-shadow: 0 8px 30px rgba(0,0,0,0.08);\n  transform: translateY(-2px);\n}\n\n.post-card__image-link {\n  display: block;\n  aspect-ratio: 16 / 10;\n  overflow: hidden;\n}\n\n.post-card__image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform 0.3s ease;\n}\n\n.post-card:hover .post-card__image {\n  transform: scale(1.03);\n}\n\n.post-card__body {\n  padding: 20px 24px 24px;\n}\n\n.post-card__meta {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 10px;\n  font-family: var(--font-body);\n  font-size: 0.85rem;\n  color: var(--color-text-muted);\n}\n\n.post-card__date {\n  white-space: nowrap;\n}\n\n.post-card__author::before {\n  content: '\\00B7';\n  margin-right: 12px;\n}\n\n.post-card__title {\n  font-family: var(--font-heading);\n  font-size: 1.2rem;\n  font-weight: 700;\n  line-height: 1.3;\n  margin: 0 0 8px;\n}\n\n.post-card__title a {\n  color: var(--color-text);\n  text-decoration: none;\n}\n\n.post-card__title a:hover {\n  color: var(--color-accent);\n}\n\n.post-card__excerpt {\n  font-family: var(--font-body);\n  font-size: 0.95rem;\n  color: var(--color-text-muted);\n  line-height: 1.6;\n  margin: 0 0 12px;\n}\n\n.post-card__tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.post-card__tag {\n  font-family: var(--font-body);\n  font-size: 0.78rem;\n  color: var(--color-accent);\n  text-decoration: none;\n  padding: 3px 10px;\n  border: 1px solid currentColor;\n  border-radius: 100px;\n  transition: background 0.15s ease;\n}\n\n.post-card__tag:hover {\n  background: var(--color-accent);\n  color: #ffffff;\n}\n\n.post-grid__pagination {\n  max-width: 1200px;\n  margin: 48px auto 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 24px;\n  font-family: var(--font-body);\n  font-size: 0.95rem;\n}\n\n.post-grid__page-link {\n  color: var(--color-accent);\n  text-decoration: none;\n  font-weight: 600;\n}\n\n.post-grid__page-link:hover {\n  text-decoration: underline;\n}\n\n.post-grid__page-info {\n  color: var(--color-text-muted);\n}\n\n@media (max-width: 1024px) {\n  .post-grid__inner {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 640px) {\n  .post-grid {\n    padding: 0 16px 48px;\n  }\n  .post-grid__inner {\n    grid-template-columns: 1fr;\n    gap: 24px;\n  }\n}",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "blog-post-header",
+      "fieldsJson": "[{\"name\":\"show_reading_time\",\"label\":\"Show Reading Time\",\"type\":\"boolean\",\"default\":true}]",
+      "metaJson": "{\"label\":\"Blog Post Header\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"BLOG_POST\"],\"host_template_types\":[\"BLOG_POST\"],\"is_available_for_new_content\":true}",
+      "moduleHtml": "<header class=\"post-header\">\n  <div class=\"post-header__inner\">\n    <div class=\"post-header__meta\">\n      {% if content.tag_list %}\n        {% for tag_item in content.tag_list %}\n          <a href=\"{{ blog_tag_url(group.id, tag_item.slug) }}\" class=\"post-header__tag\">{{ tag_item.name }}</a>\n        {% endfor %}\n      {% endif %}\n    </div>\n    <h1 class=\"post-header__title\">{{ content.name }}</h1>\n    {% if content.meta_description %}\n      <p class=\"post-header__excerpt\">{{ content.meta_description }}</p>\n    {% endif %}\n    <div class=\"post-header__byline\">\n      {% if content.author.avatar %}\n        <img src=\"{{ content.author.avatar }}\" alt=\"{{ content.blog_post_author }}\" class=\"post-header__avatar\" />\n      {% endif %}\n      <div class=\"post-header__byline-text\">\n        <span class=\"post-header__author\">{{ content.blog_post_author }}</span>\n        <time class=\"post-header__date\">{{ content.publish_date|datetimeformat('%B %d, %Y') }}</time>\n      </div>\n    </div>\n  </div>\n  {% if content.featured_image %}\n    <div class=\"post-header__image-wrap\">\n      <img src=\"{{ content.featured_image }}\" alt=\"{{ content.featured_image_alt_text }}\"\n           class=\"post-header__image\" />\n    </div>\n  {% endif %}\n</header>",
+      "moduleCss": ".post-header {\n  padding: 80px 24px 0;\n}\n\n.post-header__inner {\n  max-width: 720px;\n  margin: 0 auto;\n  text-align: center;\n}\n\n.post-header__meta {\n  display: flex;\n  gap: 8px;\n  justify-content: center;\n  margin-bottom: 20px;\n}\n\n.post-header__tag {\n  font-family: var(--font-body);\n  font-size: 0.82rem;\n  font-weight: 600;\n  color: var(--color-accent);\n  text-decoration: none;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n\n.post-header__tag:hover {\n  text-decoration: underline;\n}\n\n.post-header__title {\n  font-family: var(--font-heading);\n  font-size: 3rem;\n  font-weight: 800;\n  color: var(--color-text);\n  line-height: 1.15;\n  margin: 0 0 20px;\n  letter-spacing: -0.02em;\n}\n\n.post-header__excerpt {\n  font-family: var(--font-body);\n  font-size: 1.2rem;\n  color: var(--color-text-muted);\n  line-height: 1.6;\n  margin: 0 0 28px;\n}\n\n.post-header__byline {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  margin-bottom: 40px;\n}\n\n.post-header__avatar {\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  object-fit: cover;\n}\n\n.post-header__byline-text {\n  text-align: left;\n}\n\n.post-header__author {\n  display: block;\n  font-family: var(--font-body);\n  font-size: 0.95rem;\n  font-weight: 600;\n  color: var(--color-text);\n}\n\n.post-header__date {\n  font-family: var(--font-body);\n  font-size: 0.85rem;\n  color: var(--color-text-muted);\n}\n\n.post-header__image-wrap {\n  max-width: 960px;\n  margin: 0 auto;\n}\n\n.post-header__image {\n  width: 100%;\n  height: auto;\n  border-radius: 12px;\n  display: block;\n}\n\n@media (max-width: 768px) {\n  .post-header {\n    padding: 48px 20px 0;\n  }\n  .post-header__title {\n    font-size: 2rem;\n  }\n  .post-header__excerpt {\n    font-size: 1.05rem;\n  }\n}",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "blog-post-body",
+      "fieldsJson": "[{\"name\":\"content_width\",\"label\":\"Content Width\",\"type\":\"number\",\"default\":720,\"min\":600,\"max\":900}]",
+      "metaJson": "{\"label\":\"Blog Post Body\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"BLOG_POST\"],\"host_template_types\":[\"BLOG_POST\"],\"is_available_for_new_content\":true}",
+      "moduleHtml": "<article class=\"post-body\">\n  <div class=\"post-body__content\" style=\"max-width: {{ module.content_width }}px\">\n    {{ content.post_body }}\n  </div>\n</article>",
+      "moduleCss": ".post-body {\n  padding: 48px 24px;\n}\n\n.post-body__content {\n  max-width: 720px;\n  margin: 0 auto;\n  font-family: var(--font-body);\n  font-size: 1.125rem;\n  line-height: 1.8;\n  color: var(--color-text);\n}\n\n.post-body__content h2 {\n  font-family: var(--font-heading);\n  font-size: 1.75rem;\n  font-weight: 700;\n  margin: 2.5rem 0 1rem;\n  color: var(--color-text);\n  letter-spacing: -0.01em;\n}\n\n.post-body__content h3 {\n  font-family: var(--font-heading);\n  font-size: 1.35rem;\n  font-weight: 600;\n  margin: 2rem 0 0.75rem;\n  color: var(--color-text);\n}\n\n.post-body__content p {\n  margin: 0 0 1.5em;\n}\n\n.post-body__content a {\n  color: var(--color-accent);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n.post-body__content a:hover {\n  text-decoration: none;\n}\n\n.post-body__content img {\n  max-width: 100%;\n  height: auto;\n  border-radius: 8px;\n  margin: 2rem 0;\n}\n\n.post-body__content blockquote {\n  border-left: 3px solid var(--color-accent);\n  margin: 2rem 0;\n  padding: 0.5rem 0 0.5rem 1.5rem;\n  font-style: italic;\n  color: var(--color-text-muted);\n}\n\n.post-body__content ul,\n.post-body__content ol {\n  margin: 0 0 1.5em;\n  padding-left: 1.5em;\n}\n\n.post-body__content li {\n  margin-bottom: 0.5em;\n}\n\n.post-body__content pre {\n  background: var(--color-surface, #f5f5f5);\n  border-radius: 8px;\n  padding: 1.25rem;\n  overflow-x: auto;\n  margin: 2rem 0;\n  font-size: 0.9rem;\n  line-height: 1.5;\n}\n\n.post-body__content code {\n  font-size: 0.9em;\n  background: var(--color-surface, #f5f5f5);\n  padding: 2px 6px;\n  border-radius: 4px;\n}\n\n.post-body__content pre code {\n  background: none;\n  padding: 0;\n}\n\n@media (max-width: 768px) {\n  .post-body {\n    padding: 32px 20px;\n  }\n  .post-body__content {\n    font-size: 1.05rem;\n  }\n}",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "author-bio",
+      "fieldsJson": "[{\"name\":\"heading_text\",\"label\":\"Section Heading\",\"type\":\"text\",\"default\":\"About the author\"}]",
+      "metaJson": "{\"label\":\"Author Bio\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"BLOG_POST\"],\"host_template_types\":[\"BLOG_POST\"],\"is_available_for_new_content\":true}",
+      "moduleHtml": "<section class=\"author-bio\">\n  <div class=\"author-bio__inner\">\n    <h3 class=\"author-bio__heading\">{{ module.heading_text }}</h3>\n    <div class=\"author-bio__card\">\n      {% if content.author.avatar %}\n        <img src=\"{{ content.author.avatar }}\" alt=\"{{ content.blog_post_author }}\" class=\"author-bio__avatar\" />\n      {% endif %}\n      <div class=\"author-bio__info\">\n        <span class=\"author-bio__name\">{{ content.blog_post_author }}</span>\n        {% if content.author.bio %}\n          <p class=\"author-bio__text\">{{ content.author.bio }}</p>\n        {% endif %}\n      </div>\n    </div>\n  </div>\n</section>",
+      "moduleCss": ".author-bio {\n  padding: 0 24px 48px;\n}\n\n.author-bio__inner {\n  max-width: 720px;\n  margin: 0 auto;\n  border-top: 1px solid var(--color-border, rgba(0,0,0,0.08));\n  padding-top: 40px;\n}\n\n.author-bio__heading {\n  font-family: var(--font-body);\n  font-size: 0.85rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--color-text-muted);\n  margin: 0 0 20px;\n}\n\n.author-bio__card {\n  display: flex;\n  gap: 20px;\n  align-items: flex-start;\n}\n\n.author-bio__avatar {\n  width: 64px;\n  height: 64px;\n  border-radius: 50%;\n  object-fit: cover;\n  flex-shrink: 0;\n}\n\n.author-bio__name {\n  display: block;\n  font-family: var(--font-heading);\n  font-size: 1.1rem;\n  font-weight: 700;\n  color: var(--color-text);\n  margin-bottom: 6px;\n}\n\n.author-bio__text {\n  font-family: var(--font-body);\n  font-size: 0.95rem;\n  color: var(--color-text-muted);\n  line-height: 1.6;\n  margin: 0;\n}\n\n@media (max-width: 640px) {\n  .author-bio__card {\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n  }\n}",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "related-posts",
+      "fieldsJson": "[{\"name\":\"section_heading\",\"label\":\"Heading\",\"type\":\"text\",\"default\":\"More to read\"},{\"name\":\"post_count\",\"label\":\"Number of Posts\",\"type\":\"number\",\"default\":3,\"min\":1,\"max\":6}]",
+      "metaJson": "{\"label\":\"Related Posts\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"BLOG_POST\"],\"host_template_types\":[\"BLOG_POST\"],\"is_available_for_new_content\":true}",
+      "moduleHtml": "<section class=\"related-posts\">\n  <div class=\"related-posts__inner\">\n    <h2 class=\"related-posts__heading\">{{ module.section_heading }}</h2>\n    <div class=\"related-posts__grid\">\n      {% set recent = blog_recent_posts(group.id, module.post_count + 1) %}\n      {% for post in recent %}\n        {% if post.absolute_url != content.absolute_url %}\n          <article class=\"related-posts__card\">\n            {% if post.featured_image %}\n              <a href=\"{{ post.absolute_url }}\" class=\"related-posts__image-link\">\n                <img src=\"{{ post.featured_image }}\" alt=\"{{ post.featured_image_alt_text }}\"\n                     class=\"related-posts__image\" loading=\"lazy\" />\n              </a>\n            {% endif %}\n            <div class=\"related-posts__card-body\">\n              <time class=\"related-posts__date\">{{ post.publish_date|datetimeformat('%b %d, %Y') }}</time>\n              <h3 class=\"related-posts__title\">\n                <a href=\"{{ post.absolute_url }}\">{{ post.name }}</a>\n              </h3>\n            </div>\n          </article>\n        {% endif %}\n      {% endfor %}\n    </div>\n  </div>\n</section>",
+      "moduleCss": ".related-posts {\n  padding: 48px 24px 80px;\n  background: var(--color-surface, #fafafa);\n}\n\n.related-posts__inner {\n  max-width: 1080px;\n  margin: 0 auto;\n}\n\n.related-posts__heading {\n  font-family: var(--font-heading);\n  font-size: 1.75rem;\n  font-weight: 700;\n  color: var(--color-text);\n  margin: 0 0 32px;\n  text-align: center;\n}\n\n.related-posts__grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 28px;\n}\n\n.related-posts__card {\n  background: var(--color-bg, #ffffff);\n  border: 1px solid var(--color-border, rgba(0,0,0,0.08));\n  border-radius: 10px;\n  overflow: hidden;\n  transition: box-shadow 0.2s ease;\n}\n\n.related-posts__card:hover {\n  box-shadow: 0 6px 20px rgba(0,0,0,0.06);\n}\n\n.related-posts__image-link {\n  display: block;\n  aspect-ratio: 16 / 10;\n  overflow: hidden;\n}\n\n.related-posts__image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.related-posts__card-body {\n  padding: 16px 20px 20px;\n}\n\n.related-posts__date {\n  font-family: var(--font-body);\n  font-size: 0.8rem;\n  color: var(--color-text-muted);\n}\n\n.related-posts__title {\n  font-family: var(--font-heading);\n  font-size: 1.05rem;\n  font-weight: 600;\n  line-height: 1.3;\n  margin: 8px 0 0;\n}\n\n.related-posts__title a {\n  color: var(--color-text);\n  text-decoration: none;\n}\n\n.related-posts__title a:hover {\n  color: var(--color-accent);\n}\n\n@media (max-width: 768px) {\n  .related-posts__grid {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n  .related-posts {\n    padding: 40px 20px 60px;\n  }\n}",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "newsletter-signup",
+      "fieldsJson": "[{\"name\":\"section_heading\",\"label\":\"Heading\",\"type\":\"text\",\"default\":\"Get the best posts delivered\"},{\"name\":\"description_text\",\"label\":\"Description\",\"type\":\"text\",\"default\":\"One email per week. The latest posts, zero filler. Unsubscribe anytime.\"},{\"name\":\"button_text\",\"label\":\"Button Text\",\"type\":\"text\",\"default\":\"Subscribe\"},{\"name\":\"placeholder_text\",\"label\":\"Input Placeholder\",\"type\":\"text\",\"default\":\"you@company.com\"},{\"name\":\"background_color\",\"label\":\"Background Color\",\"type\":\"color\",\"default\":{\"color\":\"#1a1a2e\",\"opacity\":100}}]",
+      "metaJson": "{\"label\":\"Newsletter Signup\",\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\",\"categories\":[\"BLOG_LISTING\",\"BLOG_POST\"],\"host_template_types\":[\"BLOG_POST\",\"BLOG_LISTING\"],\"is_available_for_new_content\":true}",
+      "moduleHtml": "<section class=\"newsletter-signup\" style=\"background-color: {{ module.background_color.color || '#1a1a2e' }}\">\n  <div class=\"newsletter-signup__inner\">\n    <h2 class=\"newsletter-signup__heading\">{{ module.section_heading }}</h2>\n    {% if module.description_text %}\n      <p class=\"newsletter-signup__description\">{{ module.description_text }}</p>\n    {% endif %}\n    <form class=\"newsletter-signup__form\" method=\"post\">\n      <input type=\"email\" name=\"email\" placeholder=\"{{ module.placeholder_text }}\"\n             class=\"newsletter-signup__input\" required />\n      <button type=\"submit\" class=\"newsletter-signup__button\">{{ module.button_text }}</button>\n    </form>\n  </div>\n</section>",
+      "moduleCss": ".newsletter-signup {\n  padding: 80px 24px;\n  text-align: center;\n}\n\n.newsletter-signup__inner {\n  max-width: 560px;\n  margin: 0 auto;\n}\n\n.newsletter-signup__heading {\n  font-family: var(--font-heading);\n  font-size: 2rem;\n  font-weight: 700;\n  color: #ffffff;\n  margin: 0 0 12px;\n  letter-spacing: -0.01em;\n}\n\n.newsletter-signup__description {\n  font-family: var(--font-body);\n  font-size: 1.05rem;\n  color: rgba(255,255,255,0.7);\n  line-height: 1.6;\n  margin: 0 0 28px;\n}\n\n.newsletter-signup__form {\n  display: flex;\n  gap: 8px;\n  max-width: 420px;\n  margin: 0 auto;\n}\n\n.newsletter-signup__input {\n  flex: 1;\n  padding: 14px 18px;\n  font-family: var(--font-body);\n  font-size: 1rem;\n  border: 1px solid rgba(255,255,255,0.2);\n  border-radius: 8px;\n  background: rgba(255,255,255,0.08);\n  color: #ffffff;\n  outline: none;\n  transition: border-color 0.2s;\n}\n\n.newsletter-signup__input::placeholder {\n  color: rgba(255,255,255,0.4);\n}\n\n.newsletter-signup__input:focus {\n  border-color: var(--color-accent);\n}\n\n.newsletter-signup__button {\n  padding: 14px 28px;\n  font-family: var(--font-body);\n  font-size: 1rem;\n  font-weight: 600;\n  background: var(--color-accent);\n  color: #ffffff;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: transform 0.15s ease;\n  white-space: nowrap;\n}\n\n.newsletter-signup__button:hover {\n  transform: translateY(-1px);\n}\n\n@media (max-width: 640px) {\n  .newsletter-signup {\n    padding: 48px 20px;\n  }\n  .newsletter-signup__form {\n    flex-direction: column;\n  }\n  .newsletter-signup__heading {\n    font-size: 1.6rem;\n  }\n}",
+      "moduleJs": ""
+    }
+  ],
+  "moduleOrder": ["blog-header", "topic-filter", "post-grid", "blog-post-header", "blog-post-body", "author-bio", "related-posts", "newsletter-signup"],
+  "sharedCss": ":root {\n  --color-bg: #ffffff;\n  --color-surface: #f8f8fa;\n  --color-accent: #e8613a;\n  --color-text: #1a1a2e;\n  --color-text-muted: #6b7280;\n  --color-border: rgba(0,0,0,0.08);\n  --font-heading: system-ui, -apple-system, sans-serif;\n  --font-body: system-ui, -apple-system, sans-serif;\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background: var(--color-bg);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  line-height: 1.6;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\na {\n  color: var(--color-accent);\n  text-decoration: none;\n}\n\na:hover {\n  text-decoration: underline;\n}",
+  "sharedJs": ""
+}

package/starters/06-email-welcome.json

@@ -0,0 +1,60 @@
+{
+  "id": "email-welcome",
+  "name": "Welcome Email",
+  "description": "Onboarding email with getting-started steps and primary CTA",
+  "category": "Email",
+  "contentType": "email",
+  "modules": [
+    {
+      "moduleName": "preheader",
+      "fieldsJson": "[{\"name\":\"preview_text\",\"label\":\"Preview Text\",\"type\":\"text\",\"default\":\"Welcome aboard. Here's how to get started in under 5 minutes.\"}]",
+      "metaJson": "{\"label\":\"Preheader\",\"host_template_types\":[\"EMAIL\"],\"is_available_for_new_content\":true,\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\"}",
+      "moduleHtml": "<!--[if !mso]><!-->\n<div style=\"display:none;font-size:1px;color:#f4f4f4;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;\">\n  {{ module.preview_text }}\n  &zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;\n</div>\n<!--<![endif]-->",
+      "moduleCss": "",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "header",
+      "fieldsJson": "[{\"name\":\"logo_image\",\"label\":\"Logo Image\",\"type\":\"image\",\"default\":{\"src\":\"https://placehold.co/180x40/333333/ffffff?text=YourLogo\",\"alt\":\"Company Logo\",\"width\":180,\"height\":40}},{\"name\":\"logo_link\",\"label\":\"Logo Link\",\"type\":\"link\",\"default\":{\"url\":{\"href\":\"https://example.com\",\"type\":\"EXTERNAL\"},\"open_in_new_tab\":false}}]",
+      "metaJson": "{\"label\":\"Header\",\"host_template_types\":[\"EMAIL\"],\"is_available_for_new_content\":true,\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\"}",
+      "moduleHtml": "<!--[if mso]><table role=\"presentation\" width=\"600\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" align=\"center\"><tr><td><![endif]-->\n<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"max-width:600px;margin:0 auto;\">\n  <tr>\n    <td style=\"padding:24px 30px;text-align:center;background-color:#ffffff;\">\n      <a href=\"{{ module.logo_link.url.href }}\" style=\"text-decoration:none;\">\n        <img src=\"{{ module.logo_image.src }}\" alt=\"{{ module.logo_image.alt }}\" width=\"{{ module.logo_image.width }}\" height=\"{{ module.logo_image.height }}\" style=\"display:block;margin:0 auto;border:0;outline:none;text-decoration:none;max-width:100%;height:auto;\" />\n      </a>\n    </td>\n  </tr>\n</table>\n<!--[if mso]></td></tr></table><![endif]-->",
+      "moduleCss": "",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "hero",
+      "fieldsJson": "[{\"name\":\"greeting\",\"label\":\"Greeting\",\"type\":\"text\",\"default\":\"Welcome to Acme\"},{\"name\":\"message\",\"label\":\"Message\",\"type\":\"text\",\"default\":\"You just made a great decision. Your account is ready, and getting started takes less than 5 minutes.\"}]",
+      "metaJson": "{\"label\":\"Hero\",\"host_template_types\":[\"EMAIL\"],\"is_available_for_new_content\":true,\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\"}",
+      "moduleHtml": "<!--[if mso]><table role=\"presentation\" width=\"600\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" align=\"center\"><tr><td><![endif]-->\n<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"max-width:600px;margin:0 auto;\">\n  <tr>\n    <td style=\"padding:40px 30px 20px;background-color:#ffffff;\">\n      <h1 style=\"margin:0 0 16px;font-family:Georgia,'Times New Roman',Times,serif;font-size:28px;line-height:1.2;color:#1a1a1a;font-weight:700;\">{{ module.greeting }}</h1>\n      <p style=\"margin:0;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#555555;\">{{ module.message }}</p>\n    </td>\n  </tr>\n</table>\n<!--[if mso]></td></tr></table><![endif]-->",
+      "moduleCss": "",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "getting-started",
+      "fieldsJson": "[{\"name\":\"section_title\",\"label\":\"Section Title\",\"type\":\"text\",\"default\":\"Get started in 3 steps\"},{\"name\":\"steps\",\"label\":\"Steps\",\"type\":\"group\",\"occurrence\":{\"min\":1,\"max\":5,\"default\":3},\"default\":[{\"step_number\":\"1\",\"step_title\":\"Complete your profile\",\"step_description\":\"Add your company details and preferences so we can personalize your experience.\"},{\"step_number\":\"2\",\"step_title\":\"Connect your tools\",\"step_description\":\"Link your existing accounts. It takes about 60 seconds per integration.\"},{\"step_number\":\"3\",\"step_title\":\"Send your first campaign\",\"step_description\":\"Pick a template, customize it, and hit send. Your audience is waiting.\"}],\"children\":[{\"name\":\"step_number\",\"label\":\"Step Number\",\"type\":\"text\",\"default\":\"1\"},{\"name\":\"step_title\",\"label\":\"Step Title\",\"type\":\"text\",\"default\":\"Step Title\"},{\"name\":\"step_description\",\"label\":\"Step Description\",\"type\":\"text\",\"default\":\"Step description here.\"}]}]",
+      "metaJson": "{\"label\":\"Getting Started Steps\",\"host_template_types\":[\"EMAIL\"],\"is_available_for_new_content\":true,\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\"}",
+      "moduleHtml": "<!--[if mso]><table role=\"presentation\" width=\"600\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" align=\"center\"><tr><td><![endif]-->\n<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"max-width:600px;margin:0 auto;\">\n  <tr>\n    <td style=\"padding:20px 30px 10px;background-color:#ffffff;\">\n      <h2 style=\"margin:0 0 24px;font-family:Georgia,'Times New Roman',Times,serif;font-size:22px;line-height:1.3;color:#1a1a1a;font-weight:700;\">{{ module.section_title }}</h2>\n    </td>\n  </tr>\n  {% for step in module.steps %}\n  <tr>\n    <td style=\"padding:0 30px 24px;background-color:#ffffff;\">\n      <table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n        <tr>\n          <td width=\"48\" valign=\"top\" style=\"padding-right:16px;\">\n            <table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n              <tr>\n                <td style=\"width:40px;height:40px;border-radius:20px;background-color:#e8613a;text-align:center;vertical-align:middle;font-family:Arial,Helvetica,sans-serif;font-size:18px;font-weight:700;color:#ffffff;line-height:40px;\">\n                  {{ step.step_number }}\n                </td>\n              </tr>\n            </table>\n          </td>\n          <td valign=\"top\">\n            <h3 style=\"margin:0 0 4px;font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.3;color:#1a1a1a;font-weight:600;\">{{ step.step_title }}</h3>\n            <p style=\"margin:0;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.5;color:#666666;\">{{ step.step_description }}</p>\n          </td>\n        </tr>\n      </table>\n    </td>\n  </tr>\n  {% endfor %}\n</table>\n<!--[if mso]></td></tr></table><![endif]-->",
+      "moduleCss": "",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "cta-block",
+      "fieldsJson": "[{\"name\":\"button_text\",\"label\":\"Button Text\",\"type\":\"text\",\"default\":\"Go to Your Dashboard\"},{\"name\":\"button_link\",\"label\":\"Button Link\",\"type\":\"link\",\"default\":{\"url\":{\"href\":\"https://example.com/dashboard\",\"type\":\"EXTERNAL\"},\"open_in_new_tab\":false}},{\"name\":\"button_color\",\"label\":\"Button Color\",\"type\":\"color\",\"default\":{\"color\":\"#e8613a\",\"opacity\":100}}]",
+      "metaJson": "{\"label\":\"CTA Block\",\"host_template_types\":[\"EMAIL\"],\"is_available_for_new_content\":true,\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\"}",
+      "moduleHtml": "<!--[if mso]><table role=\"presentation\" width=\"600\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" align=\"center\"><tr><td><![endif]-->\n<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"max-width:600px;margin:0 auto;\">\n  <tr>\n    <td style=\"padding:10px 30px 40px;background-color:#ffffff;text-align:center;\">\n      <!--[if mso]>\n      <v:roundrect xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:w=\"urn:schemas-microsoft-com:office:word\" href=\"{{ module.button_link.url.href }}\" style=\"height:48px;v-text-anchor:middle;width:220px;\" arcsize=\"10%\" strokecolor=\"{{ module.button_color.color }}\" fillcolor=\"{{ module.button_color.color }}\">\n        <w:anchorlock/>\n        <center style=\"color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:bold;\">{{ module.button_text }}</center>\n      </v:roundrect>\n      <![endif]-->\n      <!--[if !mso]><!-->\n      <a href=\"{{ module.button_link.url.href }}\" style=\"display:inline-block;padding:14px 36px;background-color:{{ module.button_color.color }};color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:700;text-decoration:none;border-radius:6px;line-height:1.2;\">{{ module.button_text }}</a>\n      <!--<![endif]-->\n    </td>\n  </tr>\n</table>\n<!--[if mso]></td></tr></table><![endif]-->",
+      "moduleCss": "",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "footer",
+      "fieldsJson": "[{\"name\":\"company_name\",\"label\":\"Company Name\",\"type\":\"text\",\"default\":\"Acme Inc.\"},{\"name\":\"address_line\",\"label\":\"Address\",\"type\":\"text\",\"default\":\"123 Main Street, Suite 100, San Francisco, CA 94105\"}]",
+      "metaJson": "{\"label\":\"Footer\",\"host_template_types\":[\"EMAIL\"],\"is_available_for_new_content\":true,\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\"}",
+      "moduleHtml": "<!--[if mso]><table role=\"presentation\" width=\"600\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" align=\"center\"><tr><td><![endif]-->\n<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"max-width:600px;margin:0 auto;\">\n  <tr>\n    <td style=\"padding:30px;background-color:#f8f8f8;text-align:center;border-top:1px solid #e0e0e0;\">\n      <p style=\"margin:0 0 8px;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.5;color:#999999;\">{{ module.company_name }}</p>\n      <p style=\"margin:0 0 8px;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.5;color:#999999;\">{{ module.address_line }}</p>\n      <p style=\"margin:0;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.5;color:#999999;\">\n        <a href=\"{{ unsubscribe_link }}\" style=\"color:#999999;text-decoration:underline;\">Unsubscribe</a>\n        &nbsp;&middot;&nbsp;\n        <a href=\"{{ unsubscribe_link_all }}\" style=\"color:#999999;text-decoration:underline;\">Manage Preferences</a>\n      </p>\n    </td>\n  </tr>\n</table>\n<!--[if mso]></td></tr></table><![endif]-->",
+      "moduleCss": "",
+      "moduleJs": ""
+    }
+  ],
+  "moduleOrder": ["preheader", "header", "hero", "getting-started", "cta-block", "footer"],
+  "sharedCss": "",
+  "sharedJs": ""
+}

package/starters/07-email-announcement.json

@@ -0,0 +1,60 @@
+{
+  "id": "email-announcement",
+  "name": "Product Announcement",
+  "description": "Announce a new feature or product update with hero image and benefit highlights",
+  "category": "Email",
+  "contentType": "email",
+  "modules": [
+    {
+      "moduleName": "preheader",
+      "fieldsJson": "[{\"name\":\"preview_text\",\"label\":\"Preview Text\",\"type\":\"text\",\"default\":\"Big update: we just shipped the feature you asked for.\"}]",
+      "metaJson": "{\"label\":\"Preheader\",\"host_template_types\":[\"EMAIL\"],\"is_available_for_new_content\":true,\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\"}",
+      "moduleHtml": "<!--[if !mso]><!-->\n<div style=\"display:none;font-size:1px;color:#f4f4f4;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;\">\n  {{ module.preview_text }}\n  &zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;\n</div>\n<!--<![endif]-->",
+      "moduleCss": "",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "header",
+      "fieldsJson": "[{\"name\":\"logo_image\",\"label\":\"Logo\",\"type\":\"image\",\"default\":{\"src\":\"https://placehold.co/180x40/333333/ffffff?text=YourLogo\",\"alt\":\"Company Logo\",\"width\":180,\"height\":40}},{\"name\":\"badge_text\",\"label\":\"Badge Text\",\"type\":\"text\",\"default\":\"What's New\"}]",
+      "metaJson": "{\"label\":\"Header\",\"host_template_types\":[\"EMAIL\"],\"is_available_for_new_content\":true,\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\"}",
+      "moduleHtml": "<!--[if mso]><table role=\"presentation\" width=\"600\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" align=\"center\"><tr><td><![endif]-->\n<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"max-width:600px;margin:0 auto;\">\n  <tr>\n    <td style=\"padding:24px 30px;background-color:#ffffff;\">\n      <table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n        <tr>\n          <td style=\"text-align:left;\">\n            <img src=\"{{ module.logo_image.src }}\" alt=\"{{ module.logo_image.alt }}\" width=\"{{ module.logo_image.width }}\" height=\"{{ module.logo_image.height }}\" style=\"display:block;border:0;outline:none;text-decoration:none;max-width:100%;height:auto;\" />\n          </td>\n          <td style=\"text-align:right;vertical-align:middle;\">\n            <span style=\"display:inline-block;padding:4px 12px;background-color:#e8613a;color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:700;border-radius:12px;letter-spacing:0.5px;\">{{ module.badge_text }}</span>\n          </td>\n        </tr>\n      </table>\n    </td>\n  </tr>\n</table>\n<!--[if mso]></td></tr></table><![endif]-->",
+      "moduleCss": "",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "hero",
+      "fieldsJson": "[{\"name\":\"headline\",\"label\":\"Headline\",\"type\":\"text\",\"default\":\"Smart Scheduling is here\"},{\"name\":\"subheadline\",\"label\":\"Subheadline\",\"type\":\"text\",\"default\":\"No more back-and-forth. Let your calendar do the work.\"},{\"name\":\"hero_image\",\"label\":\"Hero Image\",\"type\":\"image\",\"default\":{\"src\":\"https://placehold.co/600x300/f0f0f0/333333?text=Product+Screenshot\",\"alt\":\"Product screenshot showing the new feature\",\"width\":600,\"height\":300}}]",
+      "metaJson": "{\"label\":\"Hero\",\"host_template_types\":[\"EMAIL\"],\"is_available_for_new_content\":true,\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\"}",
+      "moduleHtml": "<!--[if mso]><table role=\"presentation\" width=\"600\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" align=\"center\"><tr><td><![endif]-->\n<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"max-width:600px;margin:0 auto;\">\n  <tr>\n    <td style=\"padding:30px 30px 20px;background-color:#ffffff;text-align:center;\">\n      <h1 style=\"margin:0 0 12px;font-family:Georgia,'Times New Roman',Times,serif;font-size:30px;line-height:1.2;color:#1a1a1a;font-weight:700;\">{{ module.headline }}</h1>\n      <p style=\"margin:0 0 24px;font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.5;color:#555555;\">{{ module.subheadline }}</p>\n    </td>\n  </tr>\n  <tr>\n    <td style=\"padding:0;background-color:#ffffff;\">\n      <img src=\"{{ module.hero_image.src }}\" alt=\"{{ module.hero_image.alt }}\" width=\"600\" style=\"display:block;width:100%;max-width:600px;height:auto;border:0;outline:none;text-decoration:none;\" />\n    </td>\n  </tr>\n</table>\n<!--[if mso]></td></tr></table><![endif]-->",
+      "moduleCss": "",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "benefits",
+      "fieldsJson": "[{\"name\":\"section_title\",\"label\":\"Section Title\",\"type\":\"text\",\"default\":\"What this means for you\"},{\"name\":\"benefit_items\",\"label\":\"Benefits\",\"type\":\"group\",\"occurrence\":{\"min\":1,\"max\":4,\"default\":3},\"default\":[{\"benefit_title\":\"Save 3 hours every week\",\"benefit_description\":\"Automated scheduling eliminates the email tennis. Clients pick a time that works for both of you.\"},{\"benefit_title\":\"Fewer no-shows\",\"benefit_description\":\"Automatic reminders go out 24 hours and 1 hour before. No-show rate drops by 40% on average.\"},{\"benefit_title\":\"Works with your calendar\",\"benefit_description\":\"Google Calendar, Outlook, and iCal sync both ways. Your availability is always current.\"}],\"children\":[{\"name\":\"benefit_title\",\"label\":\"Benefit Title\",\"type\":\"text\",\"default\":\"Benefit Title\"},{\"name\":\"benefit_description\",\"label\":\"Benefit Description\",\"type\":\"text\",\"default\":\"Benefit description here.\"}]}]",
+      "metaJson": "{\"label\":\"Benefits\",\"host_template_types\":[\"EMAIL\"],\"is_available_for_new_content\":true,\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\"}",
+      "moduleHtml": "<!--[if mso]><table role=\"presentation\" width=\"600\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" align=\"center\"><tr><td><![endif]-->\n<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"max-width:600px;margin:0 auto;\">\n  <tr>\n    <td style=\"padding:30px 30px 10px;background-color:#ffffff;\">\n      <h2 style=\"margin:0 0 20px;font-family:Georgia,'Times New Roman',Times,serif;font-size:22px;line-height:1.3;color:#1a1a1a;font-weight:700;\">{{ module.section_title }}</h2>\n    </td>\n  </tr>\n  {% for item in module.benefit_items %}\n  <tr>\n    <td style=\"padding:0 30px 20px;background-color:#ffffff;\">\n      <table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"background-color:#f9f9f9;border-radius:8px;\">\n        <tr>\n          <td style=\"padding:20px;\">\n            <h3 style=\"margin:0 0 6px;font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.3;color:#1a1a1a;font-weight:600;\">{{ item.benefit_title }}</h3>\n            <p style=\"margin:0;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.5;color:#666666;\">{{ item.benefit_description }}</p>\n          </td>\n        </tr>\n      </table>\n    </td>\n  </tr>\n  {% endfor %}\n</table>\n<!--[if mso]></td></tr></table><![endif]-->",
+      "moduleCss": "",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "cta-block",
+      "fieldsJson": "[{\"name\":\"button_text\",\"label\":\"Button Text\",\"type\":\"text\",\"default\":\"Try Smart Scheduling\"},{\"name\":\"button_link\",\"label\":\"Button Link\",\"type\":\"link\",\"default\":{\"url\":{\"href\":\"https://example.com/features/scheduling\",\"type\":\"EXTERNAL\"},\"open_in_new_tab\":false}},{\"name\":\"button_color\",\"label\":\"Button Color\",\"type\":\"color\",\"default\":{\"color\":\"#e8613a\",\"opacity\":100}}]",
+      "metaJson": "{\"label\":\"CTA Block\",\"host_template_types\":[\"EMAIL\"],\"is_available_for_new_content\":true,\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\"}",
+      "moduleHtml": "<!--[if mso]><table role=\"presentation\" width=\"600\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" align=\"center\"><tr><td><![endif]-->\n<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"max-width:600px;margin:0 auto;\">\n  <tr>\n    <td style=\"padding:10px 30px 40px;background-color:#ffffff;text-align:center;\">\n      <!--[if mso]>\n      <v:roundrect xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:w=\"urn:schemas-microsoft-com:office:word\" href=\"{{ module.button_link.url.href }}\" style=\"height:48px;v-text-anchor:middle;width:240px;\" arcsize=\"10%\" strokecolor=\"{{ module.button_color.color }}\" fillcolor=\"{{ module.button_color.color }}\">\n        <w:anchorlock/>\n        <center style=\"color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:bold;\">{{ module.button_text }}</center>\n      </v:roundrect>\n      <![endif]-->\n      <!--[if !mso]><!-->\n      <a href=\"{{ module.button_link.url.href }}\" style=\"display:inline-block;padding:14px 40px;background-color:{{ module.button_color.color }};color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:700;text-decoration:none;border-radius:6px;line-height:1.2;\">{{ module.button_text }}</a>\n      <!--<![endif]-->\n    </td>\n  </tr>\n</table>\n<!--[if mso]></td></tr></table><![endif]-->",
+      "moduleCss": "",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "footer",
+      "fieldsJson": "[{\"name\":\"company_name\",\"label\":\"Company Name\",\"type\":\"text\",\"default\":\"Acme Inc.\"},{\"name\":\"address_line\",\"label\":\"Address\",\"type\":\"text\",\"default\":\"123 Main Street, Suite 100, San Francisco, CA 94105\"}]",
+      "metaJson": "{\"label\":\"Footer\",\"host_template_types\":[\"EMAIL\"],\"is_available_for_new_content\":true,\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\"}",
+      "moduleHtml": "<!--[if mso]><table role=\"presentation\" width=\"600\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" align=\"center\"><tr><td><![endif]-->\n<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"max-width:600px;margin:0 auto;\">\n  <tr>\n    <td style=\"padding:30px;background-color:#f8f8f8;text-align:center;border-top:1px solid #e0e0e0;\">\n      <p style=\"margin:0 0 8px;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.5;color:#999999;\">{{ module.company_name }}</p>\n      <p style=\"margin:0 0 8px;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.5;color:#999999;\">{{ module.address_line }}</p>\n      <p style=\"margin:0;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.5;color:#999999;\">\n        <a href=\"{{ unsubscribe_link }}\" style=\"color:#999999;text-decoration:underline;\">Unsubscribe</a>\n        &nbsp;&middot;&nbsp;\n        <a href=\"{{ unsubscribe_link_all }}\" style=\"color:#999999;text-decoration:underline;\">Manage Preferences</a>\n      </p>\n    </td>\n  </tr>\n</table>\n<!--[if mso]></td></tr></table><![endif]-->",
+      "moduleCss": "",
+      "moduleJs": ""
+    }
+  ],
+  "moduleOrder": ["preheader", "header", "hero", "benefits", "cta-block", "footer"],
+  "sharedCss": "",
+  "sharedJs": ""
+}

package/starters/08-email-newsletter.json

@@ -0,0 +1,52 @@
+{
+  "id": "email-newsletter",
+  "name": "Newsletter",
+  "description": "Content digest with featured article and curated story grid",
+  "category": "Email",
+  "contentType": "email",
+  "modules": [
+    {
+      "moduleName": "preheader",
+      "fieldsJson": "[{\"name\":\"preview_text\",\"label\":\"Preview Text\",\"type\":\"text\",\"default\":\"This week: 3 stories worth 5 minutes of your time.\"}]",
+      "metaJson": "{\"label\":\"Preheader\",\"host_template_types\":[\"EMAIL\"],\"is_available_for_new_content\":true,\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\"}",
+      "moduleHtml": "<!--[if !mso]><!-->\n<div style=\"display:none;font-size:1px;color:#f4f4f4;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;\">\n  {{ module.preview_text }}\n  &zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;\n</div>\n<!--<![endif]-->",
+      "moduleCss": "",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "header",
+      "fieldsJson": "[{\"name\":\"newsletter_title\",\"label\":\"Newsletter Name\",\"type\":\"text\",\"default\":\"The Weekly Brief\"},{\"name\":\"edition\",\"label\":\"Edition\",\"type\":\"text\",\"default\":\"Issue #42 \\u2014 April 2026\"}]",
+      "metaJson": "{\"label\":\"Header\",\"host_template_types\":[\"EMAIL\"],\"is_available_for_new_content\":true,\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\"}",
+      "moduleHtml": "<!--[if mso]><table role=\"presentation\" width=\"600\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" align=\"center\"><tr><td><![endif]-->\n<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"max-width:600px;margin:0 auto;\">\n  <tr>\n    <td style=\"padding:28px 30px;background-color:#1a1a1a;text-align:center;\">\n      <h1 style=\"margin:0 0 4px;font-family:Georgia,'Times New Roman',Times,serif;font-size:24px;line-height:1.2;color:#ffffff;font-weight:700;letter-spacing:0.5px;\">{{ module.newsletter_title }}</h1>\n      <p style=\"margin:0;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.4;color:#999999;\">{{ module.edition }}</p>\n    </td>\n  </tr>\n</table>\n<!--[if mso]></td></tr></table><![endif]-->",
+      "moduleCss": "",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "featured-article",
+      "fieldsJson": "[{\"name\":\"article_image\",\"label\":\"Featured Image\",\"type\":\"image\",\"default\":{\"src\":\"https://placehold.co/600x280/e8e8e8/333333?text=Featured+Article\",\"alt\":\"Featured article image\",\"width\":600,\"height\":280}},{\"name\":\"article_title\",\"label\":\"Article Title\",\"type\":\"text\",\"default\":\"Why your onboarding flow is losing 40% of signups\"},{\"name\":\"article_summary\",\"label\":\"Summary\",\"type\":\"text\",\"default\":\"We analyzed 200 SaaS onboarding sequences and found three patterns that predict churn within the first week. The fix is simpler than you think.\"},{\"name\":\"article_link\",\"label\":\"Read More Link\",\"type\":\"link\",\"default\":{\"url\":{\"href\":\"https://example.com/blog/onboarding-churn\",\"type\":\"EXTERNAL\"},\"open_in_new_tab\":true}}]",
+      "metaJson": "{\"label\":\"Featured Article\",\"host_template_types\":[\"EMAIL\"],\"is_available_for_new_content\":true,\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\"}",
+      "moduleHtml": "<!--[if mso]><table role=\"presentation\" width=\"600\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" align=\"center\"><tr><td><![endif]-->\n<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"max-width:600px;margin:0 auto;\">\n  <tr>\n    <td style=\"padding:0;background-color:#ffffff;\">\n      <a href=\"{{ module.article_link.url.href }}\" style=\"text-decoration:none;\">\n        <img src=\"{{ module.article_image.src }}\" alt=\"{{ module.article_image.alt }}\" width=\"600\" style=\"display:block;width:100%;max-width:600px;height:auto;border:0;outline:none;text-decoration:none;\" />\n      </a>\n    </td>\n  </tr>\n  <tr>\n    <td style=\"padding:24px 30px 30px;background-color:#ffffff;\">\n      <h2 style=\"margin:0 0 10px;font-family:Georgia,'Times New Roman',Times,serif;font-size:24px;line-height:1.3;color:#1a1a1a;font-weight:700;\">\n        <a href=\"{{ module.article_link.url.href }}\" style=\"color:#1a1a1a;text-decoration:none;\">{{ module.article_title }}</a>\n      </h2>\n      <p style=\"margin:0 0 16px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:#555555;\">{{ module.article_summary }}</p>\n      <a href=\"{{ module.article_link.url.href }}\" style=\"font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:600;color:#e8613a;text-decoration:none;\">Read the full article &rarr;</a>\n    </td>\n  </tr>\n</table>\n<!--[if mso]></td></tr></table><![endif]-->",
+      "moduleCss": "",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "story-grid",
+      "fieldsJson": "[{\"name\":\"section_title\",\"label\":\"Section Title\",\"type\":\"text\",\"default\":\"Also worth reading\"},{\"name\":\"stories\",\"label\":\"Stories\",\"type\":\"group\",\"occurrence\":{\"min\":1,\"max\":4,\"default\":3},\"default\":[{\"story_title\":\"The 5-minute retention check\",\"story_summary\":\"A quick framework to diagnose where users drop off. No analytics degree required.\",\"story_link_url\":\"https://example.com/blog/retention-check\"},{\"story_title\":\"Case study: How Relay tripled activations\",\"story_summary\":\"Their secret was removing 3 steps from signup. Here's exactly what they cut.\",\"story_link_url\":\"https://example.com/blog/relay-case-study\"},{\"story_title\":\"Template: User feedback survey\",\"story_summary\":\"Steal our 6-question survey that gets 35% response rates. Copy, paste, send.\",\"story_link_url\":\"https://example.com/resources/survey-template\"}],\"children\":[{\"name\":\"story_title\",\"label\":\"Title\",\"type\":\"text\",\"default\":\"Story title\"},{\"name\":\"story_summary\",\"label\":\"Summary\",\"type\":\"text\",\"default\":\"Brief summary of the story.\"},{\"name\":\"story_link_url\",\"label\":\"Link URL\",\"type\":\"text\",\"default\":\"https://example.com\"}]}]",
+      "metaJson": "{\"label\":\"Story Grid\",\"host_template_types\":[\"EMAIL\"],\"is_available_for_new_content\":true,\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\"}",
+      "moduleHtml": "<!--[if mso]><table role=\"presentation\" width=\"600\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" align=\"center\"><tr><td><![endif]-->\n<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"max-width:600px;margin:0 auto;\">\n  <tr>\n    <td style=\"padding:30px 30px 10px;background-color:#ffffff;border-top:1px solid #e0e0e0;\">\n      <h2 style=\"margin:0;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.4;color:#999999;text-transform:uppercase;letter-spacing:1px;font-weight:600;\">{{ module.section_title }}</h2>\n    </td>\n  </tr>\n  {% for story in module.stories %}\n  <tr>\n    <td style=\"padding:16px 30px;background-color:#ffffff;{% if not loop.last %}border-bottom:1px solid #f0f0f0;{% endif %}\">\n      <h3 style=\"margin:0 0 4px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:1.3;font-weight:700;\">\n        <a href=\"{{ story.story_link_url }}\" style=\"color:#1a1a1a;text-decoration:none;\">{{ story.story_title }}</a>\n      </h3>\n      <p style=\"margin:0;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.5;color:#666666;\">{{ story.story_summary }}</p>\n    </td>\n  </tr>\n  {% endfor %}\n</table>\n<!--[if mso]></td></tr></table><![endif]-->",
+      "moduleCss": "",
+      "moduleJs": ""
+    },
+    {
+      "moduleName": "footer",
+      "fieldsJson": "[{\"name\":\"company_name\",\"label\":\"Company Name\",\"type\":\"text\",\"default\":\"Acme Inc.\"},{\"name\":\"address_line\",\"label\":\"Address\",\"type\":\"text\",\"default\":\"123 Main Street, Suite 100, San Francisco, CA 94105\"}]",
+      "metaJson": "{\"label\":\"Footer\",\"host_template_types\":[\"EMAIL\"],\"is_available_for_new_content\":true,\"css_assets\":[],\"js_assets\":[],\"icon\":\"module\"}",
+      "moduleHtml": "<!--[if mso]><table role=\"presentation\" width=\"600\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" align=\"center\"><tr><td><![endif]-->\n<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"max-width:600px;margin:0 auto;\">\n  <tr>\n    <td style=\"padding:30px;background-color:#1a1a1a;text-align:center;\">\n      <p style=\"margin:0 0 8px;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.5;color:#999999;\">{{ module.company_name }} | {{ module.address_line }}</p>\n      <p style=\"margin:0;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.5;color:#999999;\">\n        <a href=\"{{ unsubscribe_link }}\" style=\"color:#999999;text-decoration:underline;\">Unsubscribe</a>\n        &nbsp;&middot;&nbsp;\n        <a href=\"{{ view_as_page_url }}\" style=\"color:#999999;text-decoration:underline;\">View in browser</a>\n      </p>\n    </td>\n  </tr>\n</table>\n<!--[if mso]></td></tr></table><![endif]-->",
+      "moduleCss": "",
+      "moduleJs": ""
+    }
+  ],
+  "moduleOrder": ["preheader", "header", "featured-article", "story-grid", "footer"],
+  "sharedCss": "",
+  "sharedJs": ""
+}