ultimate-jekyll-manager 1.4.3 → 1.6.0

package/dist/defaults/dist/_layouts/themes/neobrutalism/frontend/pages/pricing.html

@@ -0,0 +1,483 @@
+---
+### ALL PAGES ###
+layout: themes/[ site.theme.id ]/frontend/core/base
+
+### PAGE CONFIG ###
+# Hero Section
+hero:
+  headline: "The right plans,"
+  headline_accent: "for the right price"
+  subheadline: "Simple and affordable pricing. No hidden fees, no surprises."
+
+# Pricing Section
+pricing:
+  price_per_unit:
+    enabled: true
+    feature_id: "credits"
+    label: "credit"
+  definitions:
+    - id: "credits"
+      definition: "Credits are used to generate content. Each generation consumes 1 credit."
+    - id: "exports"
+      definition: "Export your creations in various formats. Watermarked exports include a small logo."
+    - id: "api_access"
+      definition: "Access our REST API to integrate with your own applications and workflows."
+    - id: "priority_support"
+      definition: "Get faster response times and dedicated support from our team."
+    - id: "team_collaboration"
+      definition: "Invite team members to collaborate on projects and share resources."
+    - id: "custom_branding"
+      definition: "Remove our branding and add your own logo to exports."
+  plans:
+    - id: "basic"
+      name: "Basic"
+      tagline: "best for getting started"
+      url: "/dashboard"
+      features:
+        - id: "credits"
+          name: "Credits"
+          icon: "sparkles"
+        - id: "exports"
+          name: "Exports"
+          icon: "download"
+        - id: "storage"
+          name: "Logo storage"
+          icon: "clock"
+    - id: "plus"
+      name: "Plus"
+      tagline: "best for individuals"
+      url: null
+      features:
+        - id: "credits"
+          name: "Credits"
+          icon: "sparkles"
+        - id: "exports"
+          name: "Exports"
+          icon: "download"
+        - id: "api_access"
+          name: "API access"
+          icon: "code"
+        - id: "priority_support"
+          name: "Priority support"
+          icon: "headset"
+    - id: "pro"
+      name: "Pro"
+      tagline: "best for small businesses"
+      url: null
+      popular: true
+      features:
+        - id: "credits"
+          name: "Credits"
+          icon: "sparkles"
+        - id: "exports"
+          name: "Exports"
+          icon: "download"
+    - id: "max"
+      name: "Max"
+      tagline: "best for growing businesses"
+      url: null
+      features:
+        - id: "credits"
+          name: "Credits"
+          icon: "sparkles"
+        - id: "exports"
+          name: "Exports"
+          icon: "download"
+        - id: "team_collaboration"
+          name: "Team collaboration"
+          icon: "users"
+        - id: "custom_branding"
+          name: "Custom branding"
+          icon: "palette"
+
+# Feature Comparison Section
+feature_comparison:
+  superheadline:
+    icon: "sparkles"
+    text: "Features"
+  headline: "Compare all"
+  headline_accent: "plans"
+  subheadline: "See exactly what's included in each plan"
+
+# Social Proof Section
+social_proof:
+  items:
+    - number: "5M"
+      label: "Customers"
+      color: "blue"
+    - number: "#1"
+      label: "Product of the month"
+      color: "pink"
+    - number: "4.8"
+      label: "Capterra"
+      color: "yellow"
+    - number: "4.8"
+      label: "G2"
+      color: "green"
+
+# CTA Section
+cta:
+  superheadline:
+    icon: "comments"
+    text: "Support"
+  headline: "Need help finding the right plan for your"
+  headline_accent: "needs?"
+  subheadline: "Talk to our support team 24/7"
+  button:
+    text: "Talk to us"
+    icon: "headset"
+    href: "/contact"
+
+# FAQs Section
+faqs:
+  superheadline:
+    icon: "messages-question"
+    text: "FAQs"
+  headline: "Frequently asked"
+  headline_accent: "questions"
+  subheadline: "Everything you need to know about {{ site.brand.name }} billing & subscriptions."
+  items:
+    - question: "Can I cancel at any time?"
+      answer: "Yes, you can cancel anytime, no questions asked. However, we would highly appreciate it if you could give us some feedback so we can improve."
+    - question: "Is there a free trial?"
+      answer: "Yes, there is a 14-day free trial of the paid plans. You can cancel your subscription at any time during the trial period for a full refund."
+    - question: "What is your refund policy?"
+      answer: "We offer a 14-day free trial of the premium plans. You can cancel any time during your trial for a full refund. After the trial period, you can cancel and you may receive a prorated refund for the remaining time on your subscription."
+---
+
+{% comment %}
+  NEOBRUTALISM PRICING
+  Same data contract + price-resolution Liquid as the classy pricing page, but a
+  neobrutalist STRUCTURE: ink-framed plan blocks where the popular plan is an
+  oversized accent block, a hard square billing toggle, oversized color-block
+  social-proof, and a full-bleed CTA. See docs/themes.md.
+{% endcomment %}
+
+<!-- ============================================ -->
+<!-- HERO -->
+<!-- ============================================ -->
+<section class="pricing-hero">
+  <div class="container">
+    <span class="kicker mb-4">{% uj_icon "tag", "me-1" %}Pricing</span>
+    <h1 class="pricing-title">
+      {{ page.resolved.hero.headline }}
+      <span class="text-accent">{{ page.resolved.hero.headline_accent }}</span>
+    </h1>
+    {% iftruthy page.resolved.hero.subheadline %}
+      <p class="fs-4 fw-medium mb-0">{{ page.resolved.hero.subheadline }}</p>
+    {% endiftruthy %}
+  </div>
+</section>
+
+<!-- ============================================ -->
+<!-- PLANS -->
+<!-- ============================================ -->
+<section class="pricing-plans pt-0">
+  <div class="container">
+    <!-- Billing toggle: hard square segmented control -->
+    <div class="billing-toggle" role="group" aria-label="Billing toggle">
+      <input type="radio" class="btn-check" name="billing" id="monthly" autocomplete="off" data-billing="monthly">
+      <label class="billing-option" for="monthly">Monthly</label>
+      <input type="radio" class="btn-check" name="billing" id="annually" autocomplete="off" checked data-billing="annually">
+      <label class="billing-option" for="annually">Annually <span class="billing-save">up to 20% off</span></label>
+    </div>
+
+    <p class="text-center fw-medium mb-5">
+      {% uj_icon "shield-check", "me-1 text-success" %}
+      Every paid plan backed by a 7-day money-back guarantee
+    </p>
+
+    {% assign plan_count = page.resolved.pricing.plans | size %}
+
+    {% comment %} Detect common features across ALL plans (same logic as classy) {% endcomment %}
+    {% assign common_feature_ids = "" | split: "," %}
+    {% if plan_count > 0 %}
+      {% assign first_plan = page.resolved.pricing.plans[0] %}
+      {% for first_feature in first_plan.features %}
+        {% assign is_common = true %}
+        {% for check_plan in page.resolved.pricing.plans %}
+          {% assign found_in_plan = false %}
+          {% for check_feature in check_plan.features %}
+            {% if check_feature.id == first_feature.id %}{% assign found_in_plan = true %}{% break %}{% endif %}
+          {% endfor %}
+          {% unless found_in_plan %}{% assign is_common = false %}{% break %}{% endunless %}
+        {% endfor %}
+        {% if is_common %}{% assign common_feature_ids = common_feature_ids | push: first_feature.id %}{% endif %}
+      {% endfor %}
+    {% endif %}
+
+    <div class="pricing-plan-grid">
+      {% for plan in page.resolved.pricing.plans %}
+        {% comment %} Look up matching config product (same as classy) {% endcomment %}
+        {% assign _config_product = nil %}
+        {% for p in site.web_manager.payment.products %}
+          {% if p.id == plan.id %}{% assign _config_product = p %}{% break %}{% endif %}
+        {% endfor %}
+
+        {% if plan.pricing.monthly or plan.pricing.monthly == 0 %}
+          {% assign _plan_monthly = plan.pricing.monthly %}
+        {% elsif _config_product.prices.monthly or _config_product.prices.monthly == 0 %}
+          {% assign _plan_monthly = _config_product.prices.monthly %}
+        {% else %}{% assign _plan_monthly = 0 %}{% endif %}
+
+        {% if plan.pricing.annually or plan.pricing.annually == 0 %}
+          {% assign _plan_annually = plan.pricing.annually %}
+        {% elsif _config_product.prices.annually or _config_product.prices.annually == 0 %}
+          {% assign _plan_annually = _config_product.prices.annually %}
+        {% else %}{% assign _plan_annually = 0 %}{% endif %}
+
+        <article class="card pricing-plan {% if plan.popular %}pricing-plan--popular{% endif %}">
+          {% if plan.popular %}
+            <span class="pricing-plan-flag">Most Popular</span>
+          {% endif %}
+
+          <h3 class="pricing-plan-name">{{ plan.name }}</h3>
+          <p class="pricing-plan-tagline">{{ plan.tagline }}</p>
+
+          <!-- Price -->
+          <div class="pricing-plan-price">
+            {% if _plan_monthly == 0 %}
+              <span class="pricing-plan-amount">Free</span>
+            {% else %}
+              <span class="pricing-plan-currency">$</span><span class="pricing-plan-amount amount" data-monthly="{{ _plan_monthly }}" data-annually="{{ _plan_annually | divided_by: 12 | round }}">{{ _plan_annually | divided_by: 12 | round }}</span><span class="pricing-plan-per">/mo</span>
+            {% endif %}
+          </div>
+
+          {% if page.resolved.pricing.price_per_unit.enabled %}
+            {% comment %} Resolve the per-unit value; only render if it's a usable positive number {% endcomment %}
+            {% assign _ppu_value = nil %}
+            {% if _plan_monthly > 0 %}
+              {% for feature in plan.features %}
+                {% if feature.id == page.resolved.pricing.price_per_unit.feature_id %}
+                  {% assign _ppu_value = feature.value %}
+                  {% if _config_product and _ppu_value == nil %}
+                    {% for _lim in _config_product.limits %}{% if _lim[0] == feature.id %}{% assign _ppu_value = _lim[1] %}{% break %}{% endif %}{% endfor %}
+                  {% endif %}
+                {% endif %}
+              {% endfor %}
+            {% endif %}
+            <p class="pricing-plan-ppu">
+              {% if _plan_monthly > 0 and _ppu_value and _ppu_value > 0 %}
+                {% assign monthly_price_per_unit = _plan_monthly | times: 1.0 | divided_by: _ppu_value | round: 2 %}
+                {% assign annual_monthly_price = _plan_annually | divided_by: 12.0 %}
+                {% assign annual_price_per_unit = annual_monthly_price | divided_by: _ppu_value | round: 2 %}
+                <span class="price-per-unit" data-monthly="${{ monthly_price_per_unit }}" data-annually="${{ annual_price_per_unit }}">${{ annual_price_per_unit }}</span> per {{ page.resolved.pricing.price_per_unit.label }}
+              {% elsif _plan_monthly == 0 %}
+                Perfect for trying out
+              {% endif %}
+            </p>
+          {% endif %}
+
+          <!-- CTA: all paid plans use the solid blue button; only the FREE plan
+               uses the outline variant so it reads as the entry-level option. -->
+          <div class="d-grid mb-3">
+            {% if _plan_monthly == 0 %}{% assign _cta_class = "btn-outline-primary" %}{% else %}{% assign _cta_class = "btn-primary" %}{% endif %}
+            {% iftruthy plan.url %}
+              <a href="{{ plan.url }}" class="btn {{ _cta_class }} btn-lg fw-bold">
+                {% if _plan_monthly == 0 %}Get started{% elsif plan.trial.days > 0 %}Get free trial{% else %}Get started{% endif %}
+              </a>
+            {% endiftruthy %}
+            {% iffalsy plan.url %}
+              <button class="btn {{ _cta_class }} btn-lg fw-bold" data-plan-id="{{ plan.id }}">
+                {% if plan.trial.days > 0 %}Get free trial{% else %}Get started{% endif %}
+              </button>
+            {% endiffalsy %}
+          </div>
+
+          <!-- Billing info -->
+          <p class="pricing-plan-billing">
+            {% if _plan_monthly == 0 %}
+              No credit card required
+            {% else %}
+              <span class="billing-info" data-monthly="Billed ${{ _plan_monthly | uj_commaify }} monthly" data-annually="Billed ${{ _plan_annually | uj_commaify }} annually">
+                Billed ${{ _plan_annually | uj_commaify }} annually
+              </span>
+            {% endif %}
+          </p>
+
+          <!-- Guarantee (every plan) -->
+          <p class="pricing-plan-guarantee">
+            {% if _plan_monthly > 0 %}
+              {% uj_icon "shield-check", "me-1 text-success" %}7-day money-back guarantee
+            {% else %}
+              {% uj_icon "rocket", "me-1 text-success" %}Upgrade any time
+            {% endif %}
+          </p>
+
+          <hr class="pricing-plan-rule">
+
+          {% comment %}
+            Feature list — same tier-inheritance logic as classy:
+              1. Common features (vary by plan, shown on every card)
+              2. Basic (first plan): "What you get:" + its unique features
+              3. Other plans: "Everything in <prev>, and more:" + only the ADDED features
+            Helpers below render a value + the name (wrapped in a tooltip span when the
+            feature has a definition).
+          {% endcomment %}
+
+          <!-- 1. Common features -->
+          <ul class="pricing-plan-features">
+            {% for feature in plan.features %}
+              {% if common_feature_ids contains feature.id %}
+                {% assign _feature_value = feature.value %}
+                {% if _config_product and _feature_value == nil %}
+                  {% assign _config_limit = nil %}{% for _lim in _config_product.limits %}{% if _lim[0] == feature.id %}{% assign _config_limit = _lim[1] %}{% break %}{% endif %}{% endfor %}
+                  {% if _config_limit == -1 %}{% assign _feature_value = "Unlimited" %}{% elsif _config_limit %}{% assign _feature_value = _config_limit %}{% endif %}
+                {% endif %}
+                {% assign feature_definition = nil %}
+                {% for def in page.resolved.pricing.definitions %}{% if def.id == feature.id %}{% assign feature_definition = def.definition %}{% break %}{% endif %}{% endfor %}
+                <li>
+                  <span class="pricing-plan-feature-icon">{% uj_icon feature.icon, "fa-sm" %}</span>
+                  <span>
+                    {% if _feature_value == "Unlimited" %}Unlimited{% elsif _feature_value == "24/7" %}{{ _feature_value }}{% elsif _feature_value == true or _feature_value == "Included" or _feature_value == "Available" or _feature_value == "Full" %}{% else %}{{ _feature_value | uj_commaify }}{% endif %}
+                    {% iftruthy feature_definition %}<span class="text-decoration-underline text-decoration-dotted cursor-help" data-bs-toggle="tooltip" data-bs-title="{{ feature_definition }}">{{ feature.name }}</span>{% endiftruthy %}
+                    {% iffalsy feature_definition %}{{ feature.name }}{% endiffalsy %}
+                  </span>
+                </li>
+              {% endif %}
+            {% endfor %}
+          </ul>
+
+          {% comment %} Does this plan add any non-common (unique) features? {% endcomment %}
+          {% assign has_additional = false %}
+          {% for feature in plan.features %}{% unless common_feature_ids contains feature.id %}{% assign has_additional = true %}{% break %}{% endunless %}{% endfor %}
+
+          <!-- 2/3. Inheritance label + the plan's additional features -->
+          {% if forloop.index == 1 %}
+            {% if has_additional %}
+              <p class="pricing-plan-inherit">What you get:</p>
+            {% endif %}
+          {% else %}
+            {% assign _prev_index = forloop.index0 | minus: 1 %}
+            {% assign _prev_plan = page.resolved.pricing.plans[_prev_index] %}
+            <p class="pricing-plan-inherit">Everything in <strong>{{ _prev_plan.name }}</strong>{% if has_additional %}, and more:{% endif %}</p>
+          {% endif %}
+
+          {% if has_additional %}
+            <ul class="pricing-plan-features">
+              {% for feature in plan.features %}
+                {% unless common_feature_ids contains feature.id %}
+                  {% assign _feature_value = feature.value %}
+                  {% if _config_product and _feature_value == nil %}
+                    {% assign _config_limit = nil %}{% for _lim in _config_product.limits %}{% if _lim[0] == feature.id %}{% assign _config_limit = _lim[1] %}{% break %}{% endif %}{% endfor %}
+                    {% if _config_limit == -1 %}{% assign _feature_value = "Unlimited" %}{% elsif _config_limit %}{% assign _feature_value = _config_limit %}{% endif %}
+                  {% endif %}
+                  {% assign feature_definition = nil %}
+                  {% for def in page.resolved.pricing.definitions %}{% if def.id == feature.id %}{% assign feature_definition = def.definition %}{% break %}{% endif %}{% endfor %}
+                  <li>
+                    <span class="pricing-plan-feature-icon">{% uj_icon feature.icon, "fa-sm" %}</span>
+                    <span>
+                      {% if _feature_value == "Unlimited" %}Unlimited{% elsif _feature_value == "24/7" %}{{ _feature_value }}{% elsif _feature_value == true or _feature_value == "Included" or _feature_value == "Available" or _feature_value == "Full" %}{% else %}{{ _feature_value | uj_commaify }}{% endif %}
+                      {% iftruthy feature_definition %}<span class="text-decoration-underline text-decoration-dotted cursor-help" data-bs-toggle="tooltip" data-bs-title="{{ feature_definition }}">{{ feature.name }}</span>{% endiftruthy %}
+                      {% iffalsy feature_definition %}{{ feature.name }}{% endiffalsy %}
+                    </span>
+                  </li>
+                {% endunless %}
+              {% endfor %}
+            </ul>
+          {% endif %}
+        </article>
+      {% endfor %}
+    </div>
+
+    <!-- Enterprise block -->
+    <div class="card enterprise-panel">
+      <div>
+        <h3 class="enterprise-panel-title">Enterprise</h3>
+        <p class="mb-0 fw-medium">Custom solutions for large organizations. Advanced security and flexible pricing based on your needs.</p>
+      </div>
+      <button class="btn btn-primary btn-lg fw-bold flex-shrink-0" data-plan-id="enterprise">
+        {% uj_icon "envelope", "me-2" %}Contact us
+      </button>
+    </div>
+  </div>
+</section>
+
+<!-- ============================================ -->
+<!-- SOCIAL PROOF — oversized color blocks -->
+<!-- ============================================ -->
+<section class="stats">
+  <div class="container">
+    <div class="stats-grid">
+      {% for item in page.resolved.social_proof.items %}
+        {% assign stat_bg = "text-bg-primary" %}
+        {% case item.color %}
+          {% when "pink" %}{% assign stat_bg = "text-bg-secondary" %}
+          {% when "green" %}{% assign stat_bg = "text-bg-success" %}
+          {% when "yellow" %}{% assign stat_bg = "text-bg-warning" %}
+          {% when "info" %}{% assign stat_bg = "text-bg-info" %}
+          {% else %}{% assign stat_bg = "text-bg-primary" %}
+        {% endcase %}
+        <div class="stat-block {{ stat_bg }}">
+          <span class="stat-block-num">{{ item.number }}</span>
+          <span class="stat-block-label">{{ item.label }}</span>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>
+
+<!-- ============================================ -->
+<!-- FAQ -->
+<!-- ============================================ -->
+<section class="faq">
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-lg-9">
+        <header class="section-head mb-5">
+          {% iftruthy page.resolved.faqs.superheadline.text %}
+            <span class="kicker mb-3">{% uj_icon page.resolved.faqs.superheadline.icon, "me-1" %}{{ page.resolved.faqs.superheadline.text }}</span>
+          {% endiftruthy %}
+          <h2 class="section-title">
+            {{ page.resolved.faqs.headline }}
+            <span class="text-accent">{{ page.resolved.faqs.headline_accent }}</span>
+          </h2>
+        </header>
+
+        {% if page.resolved.faqs.items %}
+          <div class="accordion" id="faqAccordion">
+            {% for faq in page.resolved.faqs.items %}
+              <div class="accordion-item mb-3">
+                <h2 class="accordion-header">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq{{ forloop.index }}" aria-expanded="false" aria-controls="faq{{ forloop.index }}">
+                    <span class="fw-bold">{{ faq.question }}</span>
+                  </button>
+                </h2>
+                <div id="faq{{ forloop.index }}" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
+                  <div class="accordion-body">{{ faq.answer }}</div>
+                </div>
+              </div>
+            {% endfor %}
+          </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============================================ -->
+<!-- CTA -->
+<!-- ============================================ -->
+<section class="cta">
+  <div class="container">
+    <div class="cta-panel">
+      {% iftruthy page.resolved.cta.superheadline.text %}
+        <span class="kicker kicker--invert mb-4">{% uj_icon page.resolved.cta.superheadline.icon, "me-1" %}{{ page.resolved.cta.superheadline.text }}</span>
+      {% endiftruthy %}
+      <h2 class="cta-title">
+        {{ page.resolved.cta.headline }}
+        <span class="text-accent">{{ page.resolved.cta.headline_accent }}</span>
+      </h2>
+      {% iftruthy page.resolved.cta.subheadline %}
+        <p class="cta-desc">{{ page.resolved.cta.subheadline }}</p>
+      {% endiftruthy %}
+      <div class="d-flex flex-wrap gap-3 justify-content-center">
+        <a href="{{ page.resolved.cta.button.href }}" class="btn btn-warning btn-lg">
+          {% uj_icon page.resolved.cta.button.icon, "me-2" %}{{ page.resolved.cta.button.text }}
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+
+{{ content | uj_content_format }}

package/dist/defaults/dist/pages/test/libraries/layers.html

@@ -0,0 +1,57 @@
+---
+### ALL PAGES ###
+layout: themes/[ site.theme.id ]/frontend/core/minimal
+permalink: /test/libraries/layers
+
+### REGULAR PAGES ###
+sitemap:
+  include: false
+meta:
+  title: "Asset layers"
+  description: "Live status of the Global → Theme → Consumer page-asset cascade (CSS + JS)."
+  breadcrumb: "Asset layers"
+  index: false
+---
+
+<!--
+  ASSET-LAYER TEST PANEL
+  Shows the three-layer page-asset cascade (CSS and JS), loaded in this order:
+    1. Global   — the framework's own page-specific file
+    2. Theme    — the active theme's page-specific file
+    3. Consumer — the consuming project's page-specific file
+  Each dot starts RED. A layer turns ITS OWN dot green when it loads (CSS via a
+  selector, JS by setting the dot's color). A RED dot = that layer has no file
+  for this page (the normal state for layers nobody customized).
+
+  The Consumer layer only loads if the consuming project has its own files at
+  src/assets/{css,js}/pages/test/libraries/layers/index.*. To prove it live
+  without committing anything, run with the UJ_TEST_LAYERS flag (see docs/themes.md
+  → "Asset-layer test panel"), which generates those files at build start and
+  auto-removes them on the next run.
+-->
+<section class="py-5">
+  <div class="container" style="max-width: 720px;">
+    <h1 class="mb-2">Asset layers</h1>
+    <p class="text-muted mb-4">
+      Each <strong>page-specific</strong> asset loads in three layers, in order:
+      <strong>Global → Theme → Consumer</strong> — all three are the same
+      <code>pages/&lt;path&gt;</code> file, just from different sources. Each layer turns its
+      own dot <strong>green</strong> when it loads; a <strong>red</strong> dot means that
+      layer has no file for this page (the normal state for layers nobody customized).
+    </p>
+
+    <h2 class="h5 mb-3">Page-specific CSS</h2>
+    <ul class="layer-list list-unstyled mb-4">
+      <li class="layer-row"><span class="layer-dot" data-layer="css-global"></span> Global <span class="text-muted">(framework default)</span></li>
+      <li class="layer-row"><span class="layer-dot" data-layer="css-theme"></span> Theme <span class="text-muted">(active theme)</span></li>
+      <li class="layer-row"><span class="layer-dot" data-layer="css-consumer"></span> Consumer <span class="text-muted">(your project)</span></li>
+    </ul>
+
+    <h2 class="h5 mb-3">Page-specific JS</h2>
+    <ul class="layer-list list-unstyled mb-0">
+      <li class="layer-row"><span class="layer-dot" data-layer="js-global"></span> Global <span class="text-muted">(framework default)</span></li>
+      <li class="layer-row"><span class="layer-dot" data-layer="js-theme"></span> Theme <span class="text-muted">(active theme)</span></li>
+      <li class="layer-row"><span class="layer-dot" data-layer="js-consumer"></span> Consumer <span class="text-muted">(your project)</span></li>
+    </ul>
+  </div>
+</section>

package/dist/defaults/src/_config.yml

@@ -277,6 +277,8 @@ manifest:
 translation:
   enabled: false
   default: "en"
+  exclude:
+    - "blog"
   languages:
     - "zh"
     - "es"

package/dist/defaults/test/_init.js

@@ -0,0 +1,10 @@
+/**
+ * Test lifecycle hook for this project. Runs once before any suite (not a test itself).
+ * See ultimate-jekyll-manager/docs/test-framework.md → "test/_init.js".
+ */
+
+module.exports = ({ projectRoot }) => ({
+  // Seed any fixture a suite needs before it runs.
+  async setup() {
+  },
+});

package/dist/gulp/tasks/defaults.js

@@ -8,6 +8,7 @@ const path = require('path');
 const { minimatch } = require('minimatch');
 const { template } = require('node-powertools');
 const createTemplateTransform = require('./utils/template-transform');
+const manageTestLayers = require('./utils/manage-test-layers');
 const argv = require('yargs')(process.argv.slice(2)).parseSync();
 const JSON5 = require('json5');
 
@@ -391,6 +392,13 @@ function defaults(complete, changedFile) {
   logger.log('Starting...');
   Manager.logMemory(logger, 'Start');
 
+  // Test-layer fixtures (dev only): clean any prior generated files, and generate
+  // fresh ones into the consumer src when UJ_TEST_LAYERS=true — at build START so
+  // sass + jekyll pick them up. Only on a full run, not per-changed-file in watch.
+  if (!changedFile) {
+    manageTestLayers(Manager, logger);
+  }
+
   // Use changedFile if provided, otherwise use all inputs
   const filesToProcess = changedFile ? [changedFile] : input;
   logger.log('input', filesToProcess)

package/dist/gulp/tasks/sass.js

@@ -44,6 +44,24 @@ const bundleFiles = [
   'src/assets/css/bundles/*.scss',
 ];
 
+// Build the active theme's page-CSS globs, but ONLY for `pages` dirs that exist —
+// gulp's src() throws ENOENT when it scandirs a missing directory. Project theme
+// takes priority over the package theme (matches the __theme__ resolution rule).
+function themePageGlobs() {
+  if (!config.theme.id) {
+    return [];
+  }
+
+  const candidates = [
+    path.resolve(rootPathProject, 'src/assets/themes', config.theme.id, 'pages'),
+    path.resolve(rootPathPackage, 'dist/assets/themes', config.theme.id, 'pages'),
+  ];
+
+  return candidates
+    .filter((dir) => jetpack.exists(dir))
+    .map((dir) => `${dir}/**/*.scss`);
+}
+
 // Glob
 const input = [
   // Bundle files (admin, and any future bundles)
@@ -56,10 +74,23 @@ const input = [
   `${rootPathPackage}/dist/assets/css/pages/**/*.scss`,
   'src/assets/css/pages/**/*.scss',
 
+  // Theme page-specific CSS (theme-aware page styles).
+  // Compiles to a SEPARATE bundle (pages/<path>/index.<themeId>.bundle.css)
+  // that head.html links IN ADDITION to the base + consumer page bundles.
+  // Missing = nothing loads (component styles handle it) — no fallback needed.
+  //
+  // Only include a glob whose base `pages` dir exists — gulp's src() throws ENOENT
+  // if it scandirs a non-existent directory. Most consumers don't shadow the theme,
+  // so the project-side path usually won't exist.
+  ...themePageGlobs(),
+
   // Files to exclude
   // '!dist/**',
 ];
 
+// Marker appended to theme page bundles so head.html can find them by theme id.
+const THEME_PAGE_SUFFIX = config.theme.id ? `.${config.theme.id}` : '';
+
 // Additional files to watch (but not compile as entry points)
 const watchInput = [
   // Watch the paths we're compiling
@@ -345,7 +376,17 @@ function sass(complete) {
     .pipe(cleanCSS({
       format: Manager.actLikeProduction() ? 'compressed' : 'beautify',
     }))
-    .pipe(rename((file) => {
+    .pipe(rename((file, vinyl) => {
+      // Theme page CSS originates from .../themes/<id>/pages/... — tag the bundle
+      // with the theme id (e.g. index.neobrutalism.bundle.css) so it compiles to
+      // its own file that head.html links alongside the base + consumer bundles.
+      const sourcePath = (vinyl && vinyl.history[0]) || '';
+      const isThemePage = THEME_PAGE_SUFFIX
+        && sourcePath.replace(/\\/g, '/').includes(`/themes/${config.theme.id}/pages/`);
+      if (isThemePage) {
+        file.basename += THEME_PAGE_SUFFIX;
+      }
+
       // Add bundle to the name
       file.basename += '.bundle';
 
@@ -355,7 +396,7 @@ function sass(complete) {
       bundleNames.push('main'); // main.scss is always a root bundle
 
       // Check if this is a root-level bundle
-      const baseName = file.basename.replace('.bundle', '');
+      const baseName = file.basename.replace('.bundle', '').replace(THEME_PAGE_SUFFIX, '');
       const isBundle = bundleNames.includes(baseName);
 
       // Check