@omega.js/web 0.1.0

package/themes/base/_sections/marketing/product-demo/section.html

@@ -0,0 +1,62 @@
+{% if args.enabled %}
+  <section data-omega-section="marketing/product-demo">
+    <div class="container">
+      <div class="omega-section-head omega-section-head--center mb-5" data-omega-reveal>
+        {% component "heading/section-head", superheadline: args.superheadline.text, headline: args.headline, headline_accent: args.headline_accent, sub: args.subheadline %}
+      </div>
+
+      <!-- Tab Buttons -->
+      <div class="d-flex flex-wrap justify-content-center mb-4" data-omega-reveal>
+        <div class="omega-billing-toggle" role="tablist" data-omega-segmented>
+          {% for tab in args.tabs %}
+            <button
+              class="btn {% if forloop.first %}active{% endif %}"
+              id="{{ tab.id }}-tab"
+              data-bs-toggle="tab"
+              data-bs-target="#{{ tab.id }}-pane"
+              type="button"
+              role="tab"
+              aria-controls="{{ tab.id }}-pane"
+              aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
+            >
+              {% iftruthy tab.icon %}
+                <i class="fa-solid fa-{{ tab.icon }} fa-sm me-2"></i>
+              {% endiftruthy %}
+              {{ tab.label }}
+            </button>
+          {% endfor %}
+        </div>
+      </div>
+
+      <!-- Tab Content -->
+      <div class="tab-content" data-omega-reveal>
+        {% for tab in args.tabs %}
+          <div
+            class="tab-pane fade {% if forloop.first %}show active{% endif %}"
+            id="{{ tab.id }}-pane"
+            role="tabpanel"
+            aria-labelledby="{{ tab.id }}-tab"
+            tabindex="0"
+          >
+            <!-- Feature Checkmarks -->
+            <div class="d-flex flex-wrap justify-content-center gap-3 gap-md-4 mb-4">
+              {% for feature in tab.features %}
+                <div class="d-flex align-items-center">
+                  <i class="fa-solid fa-check text-success me-2"></i>
+                  <span>{{ feature }}</span>
+                </div>
+              {% endfor %}
+            </div>
+
+            <!-- Video Player -->
+            <div class="card overflow-hidden">
+              <div class="ratio ratio-16x9">
+                {% omega_video tab.video, class="w-100 d-block object-fit-cover border-0", style="", controls="false", loop="true", autoplay="true", playsinline="true", muted="true", preload="metadata" %}
+              </div>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+  </section>
+{% endif %}

package/themes/base/_sections/marketing/product-demo/section.js

@@ -0,0 +1,44 @@
+/**
+ * Product-demo tab behavior — Bootstrap handles the tab switching itself
+ * (data-bs-toggle="tab"); this pauses the videos of inactive tabs and
+ * restarts the active tab's video for better UX. The §7 presence init calls
+ * this once per rendered instance with the section's root element, so the
+ * behavior works on ANY page that composes the band (moved here from
+ * core/js/pages/index.js, which owned it when only the homepage — and the
+ * hero-demo test pages via the dead asset_path override — rendered it).
+ */
+export default (el) => {
+  const $tabButtons = el.querySelectorAll('button[data-bs-toggle="tab"]');
+
+  if (!$tabButtons.length) {
+    return;
+  }
+
+  // Listen to Bootstrap's tab show event
+  $tabButtons.forEach(function($button) {
+    $button.addEventListener('shown.bs.tab', function() {
+      // Get the target tab pane
+      const targetId = this.getAttribute('data-bs-target');
+      const $targetPane = document.querySelector(targetId);
+
+      // Pause all videos first
+      const $allVideos = el.querySelectorAll('.tab-pane video');
+      $allVideos.forEach(function($video) {
+        $video.pause();
+      });
+
+      // Play the video in the active tab
+      if ($targetPane) {
+        const $activeVideo = $targetPane.querySelector('video');
+        if ($activeVideo) {
+          // Reset to beginning and play
+          $activeVideo.currentTime = 0;
+          $activeVideo.play().catch(function(error) {
+            // Autoplay might be blocked by browser, that's okay
+            console.log('[Product demo] Autoplay blocked:', error.message);
+          });
+        }
+      }
+    });
+  });
+};

package/themes/base/_sections/marketing/product-demo/section.json5

@@ -0,0 +1,52 @@
+{
+  description: 'Optional video demo tabs — segmented tab buttons, per-tab feature checkmarks + autoplaying video. Off by default (enabled: false); superheadline is an object ({ text }).',
+
+  args: {
+    enabled: 'boolean',
+    superheadline: 'object',
+    headline: 'string',
+    headline_accent: 'string',
+    subheadline: 'string',
+    tabs: 'array',
+  },
+
+  defaults: {
+    enabled: false,
+    superheadline: {
+      text: 'Demo',
+    },
+    headline: 'See {{ resolved.config.brand.name }} in action',
+    // 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: '',
+    tabs: [
+      {
+        id: 'dashboard',
+        label: 'Dashboard',
+        icon: 'gauge-high',
+        video: 'https://cdn.itwcreativeworks.com/assets/sample/videos/demos/16x9/sample-demo-1.webm',
+        features: ['Easy setup', 'Powerful tools', 'Real-time updates'],
+      },
+      {
+        id: 'analytics',
+        label: 'Analytics',
+        icon: 'chart-line',
+        video: 'https://cdn.itwcreativeworks.com/assets/sample/videos/demos/16x9/sample-demo-2.webm',
+        features: ['Advanced analytics', 'Custom reports', 'Data insights'],
+      },
+    ],
+  },
+
+  // Showcase variants (spec §9) — the band is off by default, so the demo
+  // flips it on and the default tabs render.
+  demo: [
+    {
+      label: 'Two tabs',
+      args: {
+        enabled: true,
+        subheadline: 'Explore powerful features that help you succeed',
+      },
+    },
+  ],
+}

package/themes/base/_sections/marketing/prose/section.html

@@ -0,0 +1,22 @@
+{% comment %} The head-plus-lede band (#515): the shared section-head cluster
+over a narrow column of paragraphs. Nothing here is new vocabulary — the head
+is heading/section-head (nested composition), the column is the shared
+omega-prose reading measure, and the rhythm is the spacing utilities every
+other band uses. {% endcomment %}
+<section>
+  <div class="container" data-omega-reveal-stagger="90">
+    <div class="omega-section-head omega-section-head--center mb-4" data-omega-reveal>
+      {% component "heading/section-head", superheadline: args.superheadline, headline: args.headline, headline_accent: args.headline_accent, sub: args.subheadline %}
+    </div>
+
+    {% if args.body and args.body.size > 0 %}
+      <div class="row justify-content-center">
+        <div class="col-lg-8 omega-prose" data-omega-reveal>
+          {% for paragraph in args.body %}
+            <p{% if forloop.last %} class="mb-0"{% endif %}>{{ paragraph }}</p>
+          {% endfor %}
+        </div>
+      </div>
+    {% endif %}
+  </div>
+</section>

package/themes/base/_sections/marketing/prose/section.json5

@@ -0,0 +1,41 @@
+{
+  description: 'The head-plus-lede band — the standard section head cluster over one or more paragraphs of copy. No items, no media: when a page just needs a heading and a couple of sentences, this is the section (before it, that shape had to fake itself with an item-less showcase). A SHARED band, so the defaults stay NEUTRAL and every caller passes its own words (spec §6).',
+
+  args: {
+    superheadline: 'string',
+    headline: 'string',
+    headline_accent: 'string',
+    subheadline: 'string',
+    body: 'array', // the paragraphs, in order — one <p> each; absent renders the head alone
+  },
+
+  // Neutral by design: a band that serves every page can never carry one
+  // page's copy (spec §6 shared-band ruling).
+  defaults: {},
+
+  // Showcase variants (spec §9) — the band is neutral, so the demos supply
+  // the copy exactly the way a caller does.
+  demo: [
+    {
+      label: 'Head and lede',
+      args: {
+        superheadline: 'About',
+        headline: 'Built by people who',
+        headline_accent: 'ship',
+        subheadline: 'The short version.',
+        body: [
+          'We started {{ resolved.config.brand.name }} because the tooling kept getting in the way of the work. Every project began the same way: a week of plumbing before a single feature.',
+          'So we built the plumbing once, and kept building on it. That is still the whole idea.',
+        ],
+      },
+    },
+    {
+      label: 'Head only',
+      args: {
+        superheadline: 'How it works',
+        headline: 'Three steps, and',
+        headline_accent: "you're live",
+      },
+    },
+  ],
+}

package/themes/base/_sections/marketing/showcase/section.html

@@ -0,0 +1,35 @@
+{% if args.enabled %}
+  <section>
+    <div class="container">
+      <div class="omega-section-head omega-section-head--center mb-5" data-omega-reveal>
+        {% component "heading/section-head", superheadline: args.superheadline.text, headline: args.headline, headline_accent: args.headline_accent, sub: args.subheadline %}
+      </div>
+
+      {% for item in args.items %}
+        {% assign is_even = forloop.index | modulo: 2 %}
+        {% if is_even == 0 %}
+          {% assign image_col_class = "col-lg-6 order-lg-2" %}
+          {% assign text_col_class = "col-lg-6 order-lg-1 pe-lg-5" %}
+        {% else %}
+          {% assign image_col_class = "col-lg-6" %}
+          {% assign text_col_class = "col-lg-6 ps-lg-5" %}
+        {% endif %}
+
+        <div class="row align-items-center g-3 g-lg-5 {% unless forloop.last %} mb-5 pb-5 {% endunless %}">
+          <div class="{{ image_col_class }}" data-omega-reveal>
+            {% assign ratio = args.image_ratio | default: "4x3" %}
+            {% assign object_position = args.image_object_position | default: "center" %}
+            <div class="card overflow-hidden ratio ratio-{{ ratio }}">
+              {% capture image_style %}object-position: {{ object_position }};{% endcapture %}
+              {% omega_image item.image, class="w-100 h-100 object-fit-cover", style=image_style, alt=item.title %}
+            </div>
+          </div>
+          <div class="{{ text_col_class }}" data-omega-reveal>
+            <h3 class="omega-display omega-display--section mb-3">{{ item.title }}</h3>
+            <p class="text-muted fs-6 mb-0">{{ item.description }}</p>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  </section>
+{% endif %}

package/themes/base/_sections/marketing/showcase/section.json5

@@ -0,0 +1,52 @@
+{
+  description: 'Optional alternating image/text feature rows. Off by default (enabled: false); superheadline is an object ({ text }); image_ratio/image_object_position tune every row.',
+
+  args: {
+    enabled: 'boolean',
+    superheadline: 'object',
+    headline: 'string',
+    headline_accent: 'string',
+    subheadline: 'string',
+    image_ratio: 'string',
+    image_object_position: 'string',
+    items: 'array',
+  },
+
+  defaults: {
+    enabled: false,
+    superheadline: {
+      text: 'Showcase',
+    },
+    headline: 'What makes {{ resolved.config.brand.name }} different',
+    // 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: '',
+    image_ratio: '4x3',
+    image_object_position: 'center',
+    items: [
+      {
+        title: 'Seamless integration',
+        description: 'Connect with your existing tools and platforms effortlessly.',
+        image: 'https://cdn.itwcreativeworks.com/assets/sample/images/demos/1x1/sample-demo-1.svg',
+      },
+      {
+        title: 'Data-driven insights',
+        description: 'Make informed decisions with real-time analytics and actionable insights.',
+        image: 'https://cdn.itwcreativeworks.com/assets/sample/images/demos/1x1/sample-demo-2.svg',
+      },
+    ],
+  },
+
+  // Showcase variants (spec §9) — the band is off by default, so the demo
+  // flips it on and the default rows render.
+  demo: [
+    {
+      label: 'Alternating rows',
+      args: {
+        enabled: true,
+        subheadline: 'Powerful features designed to accelerate your success',
+      },
+    },
+  ],
+}

package/themes/base/_sections/marketing/stats/section.html

@@ -0,0 +1,32 @@
+{% if args.items and args.items.size > 0 %}
+  <section>
+    <div class="container">
+      {%- comment %} A stat's color names a slot in the ONE categorical palette
+      (core/css/core/_tones.scss). The whitelist is the point: anything else —
+      a hex, a Bootstrap name — paints nothing, so a band can never colour
+      outside the theme. {% endcomment -%}
+      {% assign tone_slots = "tone-1,tone-2,tone-3,tone-4,tone-5,tone-6" | split: "," %}
+      <div class="omega-stats" data-omega-reveal-stagger="80">
+        {% for stat in args.items %}
+          {% capture stat_class %}omega-stat{% if tone_slots contains stat.color %} omega-{{ stat.color }}{% endif %}{% endcapture %}
+          <div class="{{ stat_class }}" data-omega-reveal>
+            {% iftruthy stat.icon %}
+              <span class="omega-icon-chip omega-stat__icon"><i class="fa-solid fa-{{ stat.icon }} fa-sm"></i></span>
+            {% endiftruthy %}
+            {%- comment %} A value is TEXT, never markup (#580): a stat like
+            `<200ms` opened a tag the minifier then ate, printing a visible
+            `< div>`. escape_once so a brand's `&lt;` workaround still renders.
+            {% endcomment -%}
+            <div class="omega-stat__num" data-omega-countup>{{ stat.number | escape_once }}</div>
+            <div class="omega-stat__label">{{ stat.label }}</div>
+            {% iftruthy stat.sublabel %}
+              <div class="omega-stat__sub">{{ stat.sublabel }}</div>
+            {% endiftruthy %}
+          </div>
+        {% endfor %}
+      </div>{% if args.after != blank %}
+
+      {{ args.after }}{% endif %}
+    </div>
+  </section>
+{% endif %}

package/themes/base/_sections/marketing/stats/section.json5

@@ -0,0 +1,44 @@
+{
+  description: 'Stats band — serif numbers with count-up on reveal. Callers with a bare frontmatter array pass it as the items named arg ({% section "marketing/stats", items: resolved.stats %}); empty items suppresses the band.',
+
+  args: {
+    items: 'array', // [{ number, label, sublabel, icon, color }] — icon names a Font Awesome glyph; color names a tone slot (tone-1…tone-6), never a hex
+
+    after: 'html', // finished markup rendered inside the band container after the grid ({% slot after %}) — e.g. a trailing CTA button
+  },
+
+  defaults: {
+    items: [
+      { number: '50,000+', label: 'Active users', sublabel: 'From 120+ countries' },
+      { number: '99.98%', label: 'Uptime', sublabel: 'Last 12 months' },
+      { number: '200+', label: 'Releases shipped', sublabel: 'And counting' },
+      { number: '4.9', label: 'Average rating', sublabel: 'Across review platforms' },
+    ],
+  },
+
+  // Showcase variants (spec §9)
+  demo: [
+    { label: 'Default four' },
+    {
+      label: 'Icons and tones',
+      args: {
+        items: [
+          { number: '2017', label: 'Founded', sublabel: 'Still shipping', icon: 'calendar', color: 'tone-1' },
+          { number: '50+', label: 'Team members', sublabel: 'Across 9 time zones', icon: 'users', color: 'tone-2' },
+          { number: '1M+', label: 'Happy customers', sublabel: 'And counting', icon: 'smile', color: 'tone-3' },
+          { number: '120+', label: 'Countries', sublabel: 'Served from the edge', icon: 'globe', color: 'tone-4' },
+        ],
+      },
+    },
+    {
+      label: 'Three stats',
+      args: {
+        items: [
+          { number: '12ms', label: 'Median response', sublabel: 'Global edge' },
+          { number: '3x', label: 'Faster launches', sublabel: 'Versus hand-rolled' },
+          { number: '100%', label: 'Static output', sublabel: 'Nothing to patch' },
+        ],
+      },
+    },
+  ],
+}

package/themes/base/_sections/marketing/testimonials/section.html

@@ -0,0 +1,54 @@
+{% comment %}
+  Shared base testimonial quote: one large serif quote with italic emphasis
+  (draft-2 marketing DNA). Multiple items cycle via the shared word-rotator
+  mechanic; a single item renders static. A SHARED band: index, pricing, and
+  alternatives all pass their own copy (items: quote / author / role /
+  company / initial / avatar) — so json5 defaults stay NEUTRAL and page copy
+  rides the data bridge, never the section.
+
+  The optional head cluster (headline / headline_accent / subheadline) rides
+  the shared heading/section-head component like every sibling band; when it
+  is present the superheadline eyebrow leads THAT cluster instead of the
+  quote, so the band never renders a label below its own headline.
+{% endcomment %}
+{% assign _t = args %}{% if _t.headline or _t.subheadline %}{% assign _head = true %}{% endif %}
+{% if _t.items and _t.items.size > 0 %}
+<section>
+  <div class="container">
+    {%- if _head %}
+    <div class="omega-section-head omega-section-head--center mb-5" data-omega-reveal>
+      {% component "heading/section-head", superheadline: _t.superheadline.text | default: _t.superheadline, headline: _t.headline, headline_accent: _t.headline_accent, sub: _t.subheadline %}
+    </div>
+    {%- endif %}
+    <div class="omega-quote" data-omega-reveal>
+      {% unless _head %}{% iftruthy _t.superheadline %}
+        {% if _t.superheadline.text %}
+          <span class="omega-micro d-block mb-4">{{ _t.superheadline.text }}</span>
+        {% else %}
+          <span class="omega-micro d-block mb-4">{{ _t.superheadline }}</span>
+        {% endif %}
+      {% endiftruthy %}{% endunless %}
+
+      <div data-omega-rotate="5200" class="w-100">
+        {% for item in _t.items %}
+          <div class="w-100" style="white-space: normal;">
+            <p class="omega-quote__text">&ldquo;{{ item.quote }}&rdquo;</p>
+            <div class="omega-quote__attr">
+              {% iftruthy item.avatar %}
+                <span class="omega-quote__avatar"><img src="{{ args.placeholder }}" data-lazy="@src {{ item.avatar }}" alt="{{ item.author }}"/></span>
+              {% endiftruthy %}
+              {% iffalsy item.avatar %}
+                <span class="omega-quote__avatar">{{ item.initial | default: item.author | slice: 0 }}</span>
+              {% endiffalsy %}
+              <span class="omega-quote__name">{{ item.author }}</span>
+              <span class="omega-quote__role">
+                {{ item.role }}{% if item.company %}{% if item.role %}, {% endif %}{{ item.company }}{% endif %}
+              </span>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</section>
+{% endif %}

package/themes/base/_sections/marketing/testimonials/section.json5

@@ -0,0 +1,70 @@
+{
+  description: 'Serif quote rotator — optional head cluster (headline with <em> accent + sub, via heading/section-head) over one large quote cycling through the shared word-rotator (single item renders static). SHARED across pages (index, pricing, alternatives each pass their own copy), so defaults carry no copy: page quotes ride the data bridge. superheadline accepts a string or { text } (no schema type on purpose) and leads the head cluster whenever there is one.',
+
+  args: {
+    superheadline: { description: 'string or { text } — both render as the micro label' },
+    headline: 'string',
+    headline_accent: 'string',
+    subheadline: 'string',
+    items: 'array',
+    placeholder: 'string',
+  },
+
+  defaults: {
+    // Lazy-avatar placeholder frame (previously a hardcoded
+    // {{ site.omega.placeholder.src }} read in markup — now an arg, per
+    // context-freeness).
+    placeholder: '{{ site.omega.placeholder.src }}',
+  },
+
+  // Showcase variants (spec §9) — a SHARED band keeps neutral defaults, so
+  // the demo carries its own generic copy. The two variants also exercise
+  // both superheadline shapes (bare string vs { text }) and both head states
+  // (bare quote vs the full headline cluster).
+  demo: [
+    {
+      label: 'Single quote (static)',
+      args: {
+        superheadline: 'What customers say',
+        items: [
+          {
+            quote: 'We replaced three tools the first week. It just ships.',
+            author: 'Avery Quinn',
+            role: 'CTO',
+            company: 'Fieldnote',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Rotating trio, full head',
+      args: {
+        superheadline: { text: 'Loved by teams' },
+        headline: 'Words from the',
+        headline_accent: 'people shipping',
+        subheadline: 'Every quote below came from a team running this in production.',
+        items: [
+          {
+            quote: 'Setup took an afternoon. The polish took zero.',
+            author: 'Sam Rivera',
+            role: 'Founder',
+            company: 'Northwind Labs',
+            initial: 'S',
+          },
+          {
+            quote: 'The first platform our designers and engineers both like.',
+            author: 'Priya Patel',
+            role: 'Head of Product',
+            company: 'Contoso',
+          },
+          {
+            quote: 'We shipped the rebrand in a weekend.',
+            author: 'Jordan Lee',
+            role: 'Engineering Lead',
+            company: 'Initech',
+          },
+        ],
+      },
+    },
+  ],
+}

package/themes/base/_sections/marketing/trusted-by/section.html

@@ -0,0 +1,30 @@
+{% if args.logos and args.logos.size > 0 %}
+  <section class="omega-logos overflow-hidden pt-0">
+    <div class="container-fluid px-0" data-omega-reveal="fade">
+      <span class="omega-micro">{{ args.headline }}</span>
+      <!-- 60 px/s — unhurried logo wall (Ian 2026-07-16: 75% of the 80px/s default) -->
+      <div class="omega-marquee" data-omega-marquee="60">
+        <div class="omega-marquee__track">
+          {% for logo in args.logos %}
+            <div class="omega-marquee__item">
+              {% if logo.src %}
+                <img src="{{ logo.src | omega_cachebreak }}" alt="{{ logo.name }}" loading="lazy"/>
+              {% elsif logo.logo %}
+                <span class="omega-logos__mark" role="img" aria-label="{{ logo.name }}">
+                  {% omega_logo logo.logo, "combomarks" %}
+                </span>
+              {% elsif logo.icon %}
+                <span class="omega-logos__lockup">
+                  <i class="fa-solid fa-{{ logo.icon }}"></i>
+                  <span>{{ logo.name }}</span>
+                </span>
+              {% else %}
+                <span class="omega-logos__word">{{ logo.name }}</span>
+              {% endif %}
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </section>
+{% endif %}

package/themes/base/_sections/marketing/trusted-by/section.json5

@@ -0,0 +1,38 @@
+{
+  description: 'Logo marquee — the "trusted by" wall. Per logo: `logo` = combomark slug (core/logos, the REAL wordmark lockups); `icon` = FA brands slug (mark + name lockup); `src` = custom image; name-only falls back to the typographic word. Empty logos suppresses the band.',
+
+  args: {
+    headline: 'string',
+    logos: 'array',
+  },
+
+  defaults: {
+    headline: 'Trusted by teams at',
+    logos: [
+      { name: 'Amazon', logo: 'amazon' },
+      { name: 'Google', logo: 'google' },
+      { name: 'HubSpot', logo: 'hubspot' },
+      { name: 'PayPal', logo: 'paypal' },
+      { name: 'Slack', logo: 'slack' },
+      { name: 'Shopify', logo: 'shopify' },
+      { name: 'Stripe', logo: 'stripe' },
+      { name: 'GitHub', logo: 'github' },
+    ],
+  },
+
+  // Showcase variants (spec §9)
+  demo: [
+    { label: 'Default wall' },
+    {
+      label: 'Three logos, one per mode',
+      args: {
+        headline: 'Backed by',
+        logos: [
+          { name: 'Google', logo: 'google' },
+          { name: 'GitHub', icon: 'github' },
+          { name: 'Initech' },
+        ],
+      },
+    },
+  ],
+}

package/themes/base/_sections/verts/unit/section.html

@@ -0,0 +1,7 @@
+<section{% if args.section_class != blank %} class="{{ args.section_class }}"{% endif %} data-omega-section="verts/unit">
+  <div class="omega-vert-unit" data-omega-vert="{{ args.type }}"
+    {%- if args.size != blank %} data-omega-vert-size="{{ args.size }}"{% endif %}
+    {%- if args.vert_id != blank %} data-omega-vert-id="{{ args.vert_id }}"{% endif %}
+    {%- if args.tags != blank %} data-omega-vert-tags="{{ args.tags | join: ',' }}"{% endif %}
+    data-omega-bind="@hide auth.resolved.active"></div>
+</section>

package/themes/base/_sections/verts/unit/section.js

@@ -0,0 +1,22 @@
+/**
+ * Vert unit behavior — hands the inner host to the shared client verts module,
+ * which owns the WHOLE lifecycle: lazy arming near the viewport, then the
+ * ladder — AdSense when configured
+ * (script-load failure IS the adblock detector) → the in-house/company
+ * fallback lane (sandboxed iframe, origin-validated postMessage, host-owned
+ * rotation + staleness recovery) → the built-in OMEGA promo (a unit never
+ * renders empty). One implementation
+ * across web/desktop/extension (the data-omega-vert vocabulary). Paying users
+ * never see the unit: the host carries the standard
+ * `@hide auth.resolved.active` binding.
+ */
+import omega from '@omega.js/client';
+
+export default (el) => {
+  const $host = el.querySelector('.omega-vert-unit');
+  if (!$host) {
+    return;
+  }
+
+  omega.verts().mount($host);
+};

package/themes/base/_sections/verts/unit/section.json5

@@ -0,0 +1,24 @@
+{
+  description: 'Vert unit — the fallback-ladder vert band (docs/web/ads-system.md). Its section.js arms lazily near the viewport and drives the shared client verts module: AdSense when configured (script-load failure IS the adblock detector), the in-house/company inventory as the fallback lane (sandboxed iframe, origin-validated postMessage, host-owned rotation + staleness recovery), and the built-in OMEGA promo as the terminal lane so a unit never renders empty. Hidden for paying users via the standard auth binding. Without advertising config every unit lands on the promo — key presence enables the paid lanes.',
+
+  args: {
+    type: { type: 'string', description: "Unit type: 'display' | 'in-article' | 'in-feed' | 'multiplex' (AdSense lanes) | 'house' (straight to the in-house inventory)" },
+    size: { type: 'string', description: "Max-height preset — banner (150) | leaderboard (90) | rectangle (250) | large-rectangle (600) | skyscraper (600) — or a raw px value" },
+    vert_id: { type: 'string', description: 'Pin a specific house vert (served only if eligible)' },
+    tags: { type: 'array', description: "Contextual-targeting tags override (defaults to the brand's advertising.tags)" },
+    section_class: 'string',
+  },
+
+  // Mechanical knobs only — the unit has no copy to keep neutral
+  defaults: {
+    type: 'display',
+    size: 'rectangle',
+  },
+
+  demo: [
+    {
+      label: 'House unit',
+      args: { type: 'house', size: 'rectangle' },
+    },
+  ],
+}