@omega.js/extension 0.1.0

package/dist/assets/themes/base/_sections/marketing/hero/section.json5

@@ -0,0 +1,335 @@
+{
+  description: 'Serif display hero — rotating italic second line, ink CTA + mono command, optional stat cards, floating product frame, optional demo capture (input/form/video/custom). The classy homepage opener.',
+
+  // Top-level arg contract (validation is warn-only; names are API — renames
+  // follow deprecation discipline, spec §6)
+  args: {
+    breadcrumb: 'array', // ordered [{ label, href }] rendered as the nav above the headline — the LAST crumb is the current page and never links; absent renders nothing (#513). Pair it with the BreadcrumbList JSON-LD foot.html emits: the arg is the on-page trail, not the structured data
+    badge: 'object',
+    headline: 'string',
+    headline_accent: 'string',
+    heading_level: 'number', // the headline's heading tag (default 1) — a hero-shaped band BELOW the page's opener authors 2, so one page never ships two h1s (#500)
+    rotating: 'array',
+    description: 'string',
+    primary_button: 'object', // { text, href, enabled, icon?, class? } — an authored class replaces btn-adaptive; an authored icon leads the label INSTEAD of the arrow nudge
+    command: 'string',
+    command_href: 'string',
+    secondary_button: 'object', // { text, href, enabled, icon?, class? } — same contract over btn-outline-adaptive
+    meta: 'array',
+    cards: 'array', // stat cards under the hero ({ number, label, icon? }) — the marketing/stats vocabulary, no default: brand content is never a theme's voice
+    frame: 'object', // { enabled, title } — the centred product mock; a demo that IS the hero visual suppresses it: a side demo of any type (#496), and a video demo in any placement (#486)
+    // demo.type 'video' (legacy parity, #486) carries its knobs in the same
+    // options object: { src, poster, autoplay, loop, muted, controls, class,
+    // subtext }. The player rides omega_video, so the file lazy-loads like
+    // every other media; controls default ON (an unauthored video plays only
+    // on click) and an authored autoplay is ALWAYS muted.
+    // A `custom` demo has TWO fills: `name` points at a consumer animation
+    // folder — src/_hero/<name>/{index.html, style.scss, script.js}, resolved
+    // through the layer chain, its css and js bundled like a section's (#441) —
+    // and `options.content` is finished markup authored at the call site. A
+    // name wins over content. The framework ships `orbit` as the reference one.
+    demo: 'object', // { enabled, type, placement, name, options } — type: input | form | video | custom; placement: 'side' sets the demo BESIDE the copy; anything else (the default) centres it under the CTAs
+    demo_html: 'html', // finished markup for the demo position ({% slot demo_html %}) — replaces the typed demo lanes when set
+  },
+
+  // Every key consumer-overridable; string values liquify at the call site
+  // (so {{ resolved.config.brand.name }} resolves against the calling page's scope).
+  defaults: {
+    badge: {
+      text: 'Introducing {{ resolved.config.brand.name }}',
+      href: null,
+    },
+    headline: 'The platform for',
+    rotating: [
+      'modern business',
+      'shipping faster',
+      'scaling your team',
+    ],
+    description: 'Everything you need to launch, measure, and grow: auth, payments, analytics, and every surface of your product in one place.',
+    primary_button: {
+      text: 'Get started free',
+      href: '/signup',
+    },
+    // No command default (pass B): the mono $ button renders only when the
+    // BRAND sets one — a framework command is never a theme's voice.
+    secondary_button: {
+      enabled: false,
+      text: 'See pricing',
+      href: '/pricing',
+    },
+    meta: [
+      'Free plan',
+      'No credit card required',
+      'Set up in minutes',
+    ],
+    frame: {
+      enabled: true,
+      title: '{{ resolved.config.brand.name }} · Overview',
+    },
+    demo: {
+      enabled: false,
+      type: 'input',
+      placement: 'bottom',
+      // Input-lane knobs only — they render inside the input/form branches and
+      // leak nothing. Copy (subtext) and the card width live with the CALLER:
+      // a default here rides the deep merge onto every other demo type.
+      options: {
+        placeholder: 'Enter your email',
+        name: 'email',
+        input_type: 'email',
+        required: true,
+        redirect: '/dashboard/account',
+        button: {
+          text: 'Start free trial',
+          class: 'btn-adaptive',
+        },
+      },
+    },
+  },
+
+  // Showcase variants (spec §9) — args ride the data bridge over the
+  // defaults above, exactly like a consumer composition.
+  demo: [
+    { label: 'Default' },
+    {
+      label: 'Email capture',
+      args: {
+        demo: {
+          enabled: true,
+          options: { subtext: 'No credit card required' },
+        },
+      },
+    },
+    {
+      label: 'No frame, second button',
+      args: {
+        frame: { enabled: false },
+        secondary_button: { enabled: true },
+      },
+    },
+    {
+      label: 'Input capture',
+      args: {
+        headline: 'Create your logo in',
+        headline_accent: 'seconds',
+        description: 'Enter your business name and watch the magic happen',
+        demo: {
+          enabled: true,
+          type: 'input',
+          options: {
+            class: 'mw-md',
+            placeholder: 'Enter your business name...',
+            name: 'business_name',
+            input_type: 'text',
+            required: true,
+            redirect: '/dashboard',
+            subtext: 'No credit card required - 5 free logos',
+            button: {
+              text: 'Generate logo',
+              icon: 'wand-magic-sparkles',
+              class: 'btn-adaptive-inverse',
+            },
+          },
+        },
+        // The legacy button contract (#476): an authored class replaces
+        // btn-adaptive and an authored icon takes the arrow nudge's place.
+        primary_button: {
+          text: 'Get started free',
+          icon: 'rocket',
+          href: '/dashboard',
+          class: 'btn-light',
+        },
+        secondary_button: {
+          text: 'Explore solutions',
+          icon: 'book-open',
+          href: '/pricing',
+          class: 'btn-outline-light',
+        },
+      },
+    },
+    {
+      label: 'Form',
+      args: {
+        headline: 'Get your custom',
+        headline_accent: 'quote',
+        description: "Tell us about your project and we'll get back to you within 24 hours",
+        demo: {
+          enabled: true,
+          type: 'form',
+          options: {
+            class: 'mw-lg',
+            redirect: '/contact',
+            subtext: 'We respond within 24 hours',
+            fields: [
+              {
+                name: 'industry',
+                label: 'Industry',
+                icon: 'building',
+                type: 'select',
+                size: 'half',
+                placeholder: 'Select industry',
+                options: [
+                  { value: 'technology', label: 'Technology' },
+                  { value: 'healthcare', label: 'Healthcare' },
+                  { value: 'finance', label: 'Finance' },
+                  { value: 'retail', label: 'Retail' },
+                ],
+              },
+              {
+                name: 'company_size',
+                label: 'Company size',
+                icon: 'users',
+                type: 'select',
+                size: 'half',
+                placeholder: 'Select size',
+                options: [
+                  { value: '1-10', label: '1-10 employees' },
+                  { value: '11-50', label: '11-50 employees' },
+                  { value: '51-200', label: '51-200 employees' },
+                  { value: '200+', label: '200+ employees' },
+                ],
+              },
+              {
+                name: 'message',
+                label: 'Tell us about your project',
+                icon: 'comment',
+                type: 'textarea',
+                size: 'full',
+                placeholder: 'Describe your goals, challenges, or questions...',
+                rows: 4,
+                required: true,
+              },
+            ],
+            button: {
+              text: 'Get quote',
+              icon: 'paper-plane',
+              full_width: true,
+              class: 'btn-adaptive-inverse',
+            },
+          },
+        },
+      },
+    },
+    {
+      // No frame authored off: a video demo IS the hero visual, so the
+      // centred product frame suppresses itself (#486).
+      label: 'Video',
+      args: {
+        headline: 'See the platform in',
+        headline_accent: 'action',
+        description: 'Watch how easy it is to ship every surface of your product',
+        demo: {
+          enabled: true,
+          type: 'video',
+          options: {
+            class: 'mw-lg',
+            src: 'https://cdn.itwcreativeworks.com/assets/sample/videos/demos/16x9/sample-demo-1.webm',
+            autoplay: true,
+            loop: true,
+            muted: true,
+            controls: false,
+            subtext: 'No sound - autoplay enabled',
+          },
+        },
+      },
+    },
+    {
+      label: 'Side placement',
+      args: {
+        headline: 'Everything you need,',
+        headline_accent: 'side by side',
+        description: 'The demo sits beside the copy instead of under the CTAs',
+        demo: {
+          enabled: true,
+          type: 'video',
+          placement: 'side',
+          options: {
+            class: 'mw-lg',
+            src: 'https://cdn.itwcreativeworks.com/assets/sample/videos/demos/16x9/sample-demo-1.webm',
+            autoplay: true,
+            loop: true,
+            muted: true,
+            controls: false,
+            subtext: 'No sound, autoplay enabled',
+          },
+        },
+      },
+    },
+    {
+      // The named-folder lane (#441): the framework's own reference animation,
+      // resolved out of themes/base/_hero/orbit/ the way a consumer's
+      // src/_hero/<name>/ resolves. No frame — the animation IS the visual.
+      label: 'Custom animation',
+      args: {
+        headline: 'One stack for',
+        headline_accent: 'every surface',
+        description: 'A hero animation the brand owns: one folder, its own markup, styles and behavior.',
+        frame: { enabled: false },
+        demo: {
+          enabled: true,
+          type: 'custom',
+          name: 'orbit',
+          options: { subtext: 'src/_hero/orbit/' },
+        },
+      },
+    },
+    {
+      label: 'Custom slot',
+      args: {
+        headline: 'Design your',
+        headline_accent: 'brand',
+        description: 'Try our interactive brand builder right here',
+        demo: {
+          enabled: true,
+          type: 'custom',
+          options: {
+            class: 'bg-glassy rounded-4 p-4 mw-md',
+            subtext: 'Customize and preview in real-time',
+            // Finished markup, authored at the CALL site: it liquifies in the
+            // caller's scope (omega_* tags work) and lands in the demo slot as
+            // is. Anchors are welcome — the route guard skips escaped code
+            // display, so the gallery's copyable args block no longer reads a
+            // demo's href= as a link the page emits (#521).
+            content: '<div class="row g-3 text-start">\
+              <div class="col-12">\
+                <label for="demo-brand-color" class="form-label fw-bold"><i class="fa-solid fa-palette me-1"></i>Choose your brand color:</label>\
+                <input type="color" class="form-control form-control-color form-control-lg border-0 w-100" id="demo-brand-color" value="#6366f1" aria-label="Choose your brand color">\
+              </div>\
+              <div class="col-12">\
+                <a href="/signup" class="btn btn-adaptive-inverse btn-lg px-4 w-100"><i class="fa-solid fa-palette me-2"></i>Apply theme</a>\
+              </div>\
+            </div>',
+          },
+        },
+      },
+    },
+    {
+      // The deep-page shape: a page inside a hub says where it sits before it
+      // says anything else. No frame — the trail carries the page, not a mock.
+      // The crumb hrefs are REAL default routes: a variant's rendered frame
+      // rides the #427 route guard like every other default page.
+      label: 'Breadcrumb',
+      args: {
+        breadcrumb: [
+          { label: 'Home', href: '/' },
+          { label: 'Blog', href: '/blog' },
+          { label: 'Shipping faster' },
+        ],
+        headline: 'Everything we learned',
+        headline_accent: 'shipping faster',
+        description: 'A deep page that says where it sits before it says anything else.',
+        frame: { enabled: false },
+      },
+    },
+    {
+      label: 'Stat cards',
+      args: {
+        cards: [
+          { number: '99%', label: 'Uptime', icon: 'shield-halved' },
+          { number: '500K+', label: 'Builds shipped', icon: 'rocket' },
+          { number: '30+', label: 'Integrations' },
+        ],
+      },
+    },
+  ],
+}

package/dist/assets/themes/base/_sections/marketing/newsletter-cta/section.html

@@ -0,0 +1,38 @@
+<section{% if args.section_class != blank %} class="{{ args.section_class }}"{% endif %} data-omega-section="marketing/newsletter-cta">
+  <div class="container">
+    <div class="omega-cta omega-ink-panel" data-omega-reveal="scale">
+      {% iftruthy args.superheadline.text %}
+        <span class="omega-micro d-block mb-3">{{ args.superheadline.text }}</span>
+      {% endiftruthy %}
+      <h2 class="omega-cta__headline">{{ args.headline }}</h2>
+      {% iftruthy args.subheadline %}
+        <p class="omega-cta__sub">{{ args.subheadline }}</p>
+      {% endiftruthy %}
+
+      <!-- Newsletter Form -->
+      <form id="newsletter-form" class="newsletter-form mt-4" novalidate data-form-state="initializing" onsubmit="return false">
+        <div class="row g-3 justify-content-center">
+          <div class="col-md-5">
+            <input
+              type="email"
+              class="form-control form-control-lg"
+              placeholder="{{ args.form.placeholder }}"
+              name="email"
+              required
+              autocomplete="email"
+            >
+            <div class="invalid-feedback text-start">
+              Please enter a valid email address.
+            </div>
+          </div>
+          <div class="col-md-auto">
+            <button type="submit" class="btn btn-adaptive btn-lg px-4">
+              <i class="fa-solid fa-paper-plane fa-sm me-2"></i>
+              <span class="button-text">{{ args.button.text }}</span>
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</section>

package/dist/assets/themes/base/_sections/marketing/newsletter-cta/section.js

@@ -0,0 +1,86 @@
+/**
+ * Newsletter capture behavior — binds this section's form to the client
+ * FormManager (managed states, validation, success/error alerts) and posts
+ * the address to the backend's public subscribe endpoint
+ * (`POST /omega/marketing/contact` — email validation, reCAPTCHA, rate
+ * limiting, provider add server-side). The §7 presence init calls this once
+ * per rendered instance with the section's root element, so the binding
+ * works on ANY page that composes the band.
+ *
+ * reCAPTCHA loads lazily on first interaction with the form (not at page
+ * load — the band rides most pages and passive visitors shouldn't pay for
+ * the Google script). No site key configured → the request still sends;
+ * the backend decides.
+ */
+import omega from '@omega.js/client';
+import { WAKEUP_ROUTE } from '@omega.js/client/modules/request.js';
+import { FormManager } from '@omega.js/client/modules/form-manager.js';
+import { initializeRecaptcha, getRecaptchaToken } from '__main_assets__/js/libs/recaptcha.js';
+import { event } from '__main_assets__/js/libs/analytics.js';
+
+export default (el) => {
+  const $form = el.querySelector('form.newsletter-form');
+  if (!$form) {
+    return;
+  }
+
+  // Warm reCAPTCHA on first interaction so the token is ready by submit
+  let recaptchaWarmup = null;
+  const warmup = () => {
+    recaptchaWarmup = recaptchaWarmup || initializeRecaptcha(omega.config?.captcha?.providers?.recaptcha?.siteKey);
+    return recaptchaWarmup;
+  };
+
+  // The backend warms on that same first interaction, and not on load: this
+  // band rides most pages, so a passive visitor would ping a function they are
+  // never going to POST to. A focus IS the intent, and the submit behind it is
+  // `/omega/marketing/contact`
+  // ([#644](https://github.com/Omega-JS-Stack/omega/issues/644)).
+  $form.addEventListener('focusin', () => {
+    omega.request(WAKEUP_ROUTE, { wakeup: true });
+    warmup();
+  }, { once: true });
+
+  const formManager = new FormManager($form, {
+    allowResubmit: false,
+    resetOnSuccess: true,
+    submittingText: 'Subscribing...',
+    submittedText: 'Subscribed!',
+  });
+
+  formManager.on('submit', async ({ data }) => {
+    await warmup();
+    const recaptchaToken = await getRecaptchaToken('newsletter_signup');
+
+    // A thrown error runs FormManager's own catch: it shows the error alert
+    // AND restores the ready state so the visitor can retry. Swallowing the
+    // error here would let FormManager run its success path (reset +
+    // disabled + "Subscribed!") on a failed submit. Single attempt on
+    // purpose — reCAPTCHA tokens are single-use, so a retry would resend a
+    // consumed token; the restored form IS the retry path.
+    try {
+      await omega.request('/omega/marketing/contact', {
+        method: 'POST',
+        auth: false,
+        timeout: 15000,
+        body: {
+          email: data.email,
+          source: 'newsletter-cta',
+          'g-recaptcha-response': recaptchaToken || '',
+        },
+      });
+    } catch (e) {
+      throw new Error('Something went wrong. Please try again.');
+    }
+
+    trackNewsletterSignup();
+    formManager.showSuccess('Thanks for subscribing!');
+  });
+};
+
+// Tracking (the guarded helper no-ops per provider when its global is absent)
+function trackNewsletterSignup() {
+  event('marketing_newsletter_subscribe', {
+    method: 'newsletter-cta',
+  });
+}

package/dist/assets/themes/base/_sections/marketing/newsletter-cta/section.json5

@@ -0,0 +1,29 @@
+{
+  description: 'The ink newsletter band — email capture over the classy CTA panel, speaking the client form-manager dialect (data-form-state; its section.js binds the form through the §7 presence init — the reference consumer of the section-JS lane). SHARED band: defaults stay neutral, every page passes its own copy.',
+
+  args: {
+    superheadline: 'object',
+    headline: 'string',
+    subheadline: 'string',
+    button: 'object',
+    form: 'object',
+    section_class: 'string',
+  },
+
+  defaults: {},
+
+  // Showcase variants (spec §9) — a SHARED band keeps neutral defaults, so
+  // the demo carries its own generic copy.
+  demo: [
+    {
+      label: 'Capture band',
+      args: {
+        superheadline: { text: 'Newsletter' },
+        headline: 'Stay in the loop',
+        subheadline: 'One email a month: product updates, guides, and nothing else.',
+        button: { text: 'Subscribe' },
+        form: { placeholder: 'you@example.com' },
+      },
+    },
+  ],
+}

package/dist/assets/themes/base/_sections/marketing/pricing-cards/section.html

@@ -0,0 +1,115 @@
+{% comment %} The minimal plan band (#493). Every figure comes from the plan
+view-models the layout bridges in — the same `resolved.pricing` /pricing
+renders — so the homepage can never drift from the catalog. The annual view
+shows the resolver's own floored monthly equivalent (#477); nothing here does
+arithmetic. The card vocabulary is /pricing's `omega-price-card`, minus the
+billing-toggle JS hooks (`amount`, `billing-info`): the toggle is a page
+module, and a hook nothing binds is a dead contract. Each CTA is a real link
+for the same reason — the checkout button only works on /pricing. {% endcomment %}
+{% if args.enabled != false and args.plans and args.plans.size > 0 %}
+  <section>
+    <div class="container" data-omega-reveal-stagger="80">
+      <div class="omega-section-head omega-section-head--center mb-5" data-omega-reveal>
+        {% component "heading/section-head", superheadline: args.superheadline, headline: args.headline, headline_accent: args.headline_accent, sub: args.subheadline %}
+      </div>
+
+      {% comment %} The row fits the catalog it was given — a brand with two
+      tiers gets two wide cards, not two thirds of a row. {% endcomment %}
+      {% assign plan_count = args.plans | size %}
+      {% if plan_count == 1 %}
+        {% assign col_classes = "col-12 col-md-8 col-lg-5" %}
+      {% elsif plan_count == 2 %}
+        {% assign col_classes = "col-12 col-md-6 col-lg-5" %}
+      {% elsif plan_count == 3 %}
+        {% assign col_classes = "col-12 col-md-6 col-lg-4" %}
+      {% else %}
+        {% assign col_classes = "col-12 col-sm-6 col-lg-4 col-xl-3" %}
+      {% endif %}
+
+      <div class="row g-4 justify-content-center">
+        {% for plan in args.plans %}
+          <div class="{{ col_classes }}" data-omega-reveal>
+            <div class="card omega-price-card {% if plan.popular %}omega-price-card--popular{% endif %} h-100">
+              {% if plan.popular %}
+                <span class="omega-chip omega-chip--ink omega-price-card__popular">Most popular</span>
+              {% endif %}
+
+              <h3 class="card-title omega-price-card__name mb-0">{{ plan.name }}</h3>
+              {% iftruthy plan.tagline %}
+                <p class="omega-price-card__tagline">{{ plan.tagline }}</p>
+              {% endiftruthy %}
+
+              {% if plan.free %}
+                <div class="omega-price-card__price">
+                  <span class="omega-price-card__amount">Free</span>
+                </div>
+              {% else %}
+                {% if args.annual and plan.prices.annually > 0 %}
+                  {% assign plan_amount = plan.prices.annuallyPerMonth %}
+                {% else %}
+                  {% assign plan_amount = plan.prices.monthly %}
+                {% endif %}
+                <div class="omega-price-card__price">
+                  <span class="omega-price-card__currency">$</span>
+                  <span class="omega-price-card__amount">{{ plan_amount }}</span>
+                  <span class="omega-price-card__per">/month</span>
+                </div>
+              {% endif %}
+
+              {% comment %} The features, through the SAME component /pricing's
+              cards render (#539): the catalog's definitions carry their hover
+              explanations here too. The tier note between the two lists reads
+              `and:` — the ONE wording, here and on /pricing, because a thing
+              never renders differently in two places (Ian 2026-08-24).
+              {% endcomment %}
+              {% comment %} The composer splits a plan's features into the set
+              every plan shares and that plan's extras; a plan hand-authored in
+              a page body carries neither, so its whole list is the shared one.
+              {% endcomment %}
+              {% assign plan_common = plan.commonFeatures %}
+              {% if plan.commonFeatures == nil and plan.extraFeatures == nil %}
+                {% assign plan_common = plan.features %}
+              {% endif %}
+              {% if plan_common.size > 0 or plan.extraFeatures.size > 0 %}
+                {% component "pricing/features", features: plan_common %}
+
+                {% if plan.extraFeatures.size > 0 %}
+                  {% unless forloop.first %}
+                    {% assign prev_index = forloop.index0 | minus: 1 %}
+                    {% assign prev_plan = args.plans[prev_index] %}
+                    <div class="omega-price-card__tier-note">
+                      Everything in <strong>{{ prev_plan.name }}</strong>, and:
+                    </div>
+                  {% endunless %}
+                  {% component "pricing/features", features: plan.extraFeatures %}
+                {% elsif forloop.first == false %}
+                  {% assign prev_index = forloop.index0 | minus: 1 %}
+                  {% assign prev_plan = args.plans[prev_index] %}
+                  <div class="omega-price-card__tier-note">
+                    Everything in <strong>{{ prev_plan.name }}</strong>
+                  </div>
+                {% endif %}
+              {% endif %}
+
+              <div class="d-grid omega-price-card__cta">
+                {% if plan.popular %}
+                  {% assign plan_btn = "btn-adaptive omega-btn-ring" %}
+                {% else %}
+                  {% assign plan_btn = "btn-outline-adaptive" %}
+                {% endif %}
+                <a href="{{ plan.url | default: args.href }}" class="btn {{ plan_btn }} fw-semibold omega-hover-nudge">
+                  {% if plan.trialDays > 0 %}
+                    Get free trial
+                  {% else %}
+                    Get started
+                  {% endif %}
+                  <span class="omega-nudge ms-2"><i class="fa-solid fa-arrow-right fa-sm"></i></span>
+                </a>
+              </div>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+  </section>
+{% endif %}

package/dist/assets/themes/base/_sections/marketing/pricing-cards/section.json5

@@ -0,0 +1,72 @@
+{
+  description: 'The minimal plan band — one compact card per subscription plan (name, price, the feature list, one CTA), for a homepage that should say what it costs without sending you to /pricing first. The bullets are /pricing\'s own `pricing/features` component, hover explanations included, and the line introducing a tier\'s extras reads "Everything in <previous>, and:" (#539). Reads the SAME resolved catalog /pricing renders (`resolved.pricing`), so no number here is ever a copy: the layout bridges `plans` and `annual` in. No plans, no band. `enabled: false` removes it (#473 family gate).',
+
+  args: {
+    enabled: 'boolean',
+    superheadline: 'string',
+    headline: 'string',
+    headline_accent: 'string',
+    subheadline: 'string',
+    plans: 'array', // the composed plan view-models — `resolved.pricing.plans`, never hand-authored numbers
+    annual: 'boolean', // show each plan's floored monthly equivalent (#477) instead of its monthly price — `resolved.pricing.billing.annually`
+    href: 'string', // where a plan with no url of its own sends you
+  },
+
+  defaults: {
+    enabled: true,
+    superheadline: 'Pricing',
+    headline: 'Simple pricing that',
+    headline_accent: 'scales with you',
+    // No sub line by default: an ABSENT subheadline renders NOTHING. A band
+    // the brand authors inherits no words it never wrote (the demo line lives
+    // in the gallery variant below, where sample content belongs).
+    subheadline: '',
+    // No plan defaults, ever: a plan a brand does not sell is fiction, and the
+    // catalog is the one source (C2). An empty list renders no band.
+    plans: [],
+    annual: false,
+    href: '/pricing',
+  },
+
+  // Showcase variants (spec §9): the band is catalog-driven, so the demo
+  // bridges plan view-models the way the layout does.
+  demo: [
+    {
+      label: 'Two plans',
+      args: {
+        subheadline: 'Start free, upgrade when it pays for itself.',
+        // commonFeatures/extraFeatures are the composer's own split (the tier
+        // note renders from it), and a `definition` is what makes a bullet
+        // hoverable — the demo carries both because the layout bridges both.
+        plans: [
+          {
+            id: 'starter',
+            name: 'Starter',
+            tagline: 'best for getting started',
+            free: true,
+            url: '/signup',
+            commonFeatures: [
+              { id: 'projects', name: 'Projects', value: 3, definition: 'Live projects you can keep at once.' },
+              { id: 'seats', name: 'Seat', value: 1 },
+            ],
+          },
+          {
+            id: 'team',
+            name: 'Team',
+            tagline: 'best for growing teams',
+            popular: true,
+            trialDays: 14,
+            prices: { monthly: 19, annually: 190, annuallyPerMonth: 15 },
+            commonFeatures: [
+              { id: 'projects', name: 'Projects', value: 'Unlimited', definition: 'Live projects you can keep at once.' },
+              { id: 'seats', name: 'Seats', value: 10 },
+            ],
+            extraFeatures: [
+              { id: 'support', name: 'Priority support', value: true },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+}