@omega.js/extension 0.1.0

package/dist/assets/themes/base/_layouts/frontend/pages/blog/tags/tag.html

@@ -0,0 +1,88 @@
+---
+layout: frontend/core/base
+
+# Hero Section
+hero:
+  subheadline: "Browse all posts with this tag"
+---
+
+<!-- ═══ Masthead ═══ -->
+{% comment %} The term as it DISPLAYS: the aggregation humanizes the winning
+   spelling ("Growth Hacks", #457); the tag cloud on /blog/tags title-cases the
+   RAW spelling ("Growth-hacks") — a split legacy UJM shipped too (#294). {% endcomment %}
+{% assign tag_name = resolved.tag.name | omega_title_case %}
+{% comment %} #467 (after #749): this masthead IS the page's first viewport, so
+the band paints with the document — data-omega-first-paint on the section, no
+stagger container, and the masthead cluster on its first_paint switch. The
+bands below keep the reveal lane. {% endcomment %}
+<section class="omega-dotgrid pb-4" data-omega-first-paint data-omega-dotfield>
+  <div class="container">
+    <div class="omega-post-card__eyebrow mb-4">
+      <a href="/blog">Blog</a>
+      <span>/</span>
+      <a href="/blog/tags">Tags</a>
+      <span>/</span>
+      <span>{{ tag_name }}</span>
+    </div>
+
+    {% component "heading/masthead", headline: tag_name, sub: resolved.hero.subheadline, first_paint: true %}
+  </div>
+</section>
+
+<!-- ═══ Posts grid ═══ -->
+<section class="pt-0">
+  <div class="container">
+    {% comment %} Filter posts by tag (max 100) {% endcomment %}
+    {% assign tag_slug = resolved.tag.slug %}
+    {% assign filtered_posts = '' | split: ',' %}
+    {% for post in site.posts %}
+      {% if filtered_posts.size >= 100 %}
+        {% break %}
+      {% endif %}
+      {% for tag in post.post.tags %}
+        {% assign t_slug = tag | slugify %}
+        {% if t_slug == tag_slug %}
+          {% assign filtered_posts = filtered_posts | push: post %}
+          {% break %}
+        {% endif %}
+      {% endfor %}
+    {% endfor %}
+
+    {% comment %} The grid's heading (#313): the cards' names are h3s, so
+      without it the page skips from the masthead h1 straight to h3. Visually
+      hidden — the blog index carries its h2 as the featured post's title, and
+      a term page has no feature, only the grid. {% endcomment %}
+    <h2 class="visually-hidden">Posts tagged {{ tag_name }}</h2>
+
+    <div class="row g-4 mb-5" data-omega-reveal-stagger="60">
+      {% for post in filtered_posts %}
+        <div class="col-xl-4 col-lg-6 col-md-12" data-omega-reveal>
+          {% include frontend/components/post-card.html post=post %}
+        </div>
+      {% endfor %}
+    </div>
+
+    {% if filtered_posts.size == 0 %}
+      <div class="row justify-content-center">
+        <div class="col-lg-6 text-center" data-omega-reveal>
+          <div class="py-5">
+            <h2 class="h5">No posts with this tag</h2>
+            <p class="text-muted">Check back soon for new content.</p>
+          </div>
+        </div>
+      </div>
+    {% endif %}
+
+    <!-- Back to Tags -->
+    <div class="row justify-content-center">
+      <div class="col-12 text-center">
+        <a href="/blog/tags" class="btn btn-outline-adaptive">
+          <i class="fa-solid fa-arrow-left fa-sm me-2"></i>
+          All tags
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+
+{{ content | omega_content_format }}

package/dist/assets/themes/base/_layouts/frontend/pages/collection/category.html

@@ -0,0 +1,72 @@
+---
+layout: frontend/core/base
+
+# ═══ One category of a brand's own collection (#207). The term rides the
+# page's `category` pagination alias and carries its own documents.
+
+category_empty: "Nothing in this category yet."
+---
+
+<!-- ═══ Masthead ═══ -->
+{% comment %} The term as it DISPLAYS: the aggregation keeps the documents' own
+   spelling ("guides"), and the generated page's meta title-cases the same way
+   — one presentation of one term (#312). {% endcomment %}
+{% assign category_name = category.name | omega_title_case %}
+{% comment %} #467 (after #749): this masthead IS the page's first viewport, so
+the band paints with the document — data-omega-first-paint on the section, no
+stagger container, and the masthead cluster on its first_paint switch. The
+bands below keep the reveal lane. {% endcomment %}
+<section class="omega-dotgrid pb-4" data-omega-first-paint data-omega-dotfield>
+  <div class="container">
+    <div class="omega-post-card__eyebrow mb-4">
+      <a href="{{ resolved.collection.base }}">{{ resolved.collection.title }}</a>
+      <span>/</span>
+      <span>{{ category_name }}</span>
+    </div>
+
+    {% component "heading/masthead", headline: category_name, sub: resolved.collection.description, first_paint: true %}
+  </div>
+</section>
+
+<!-- ═══ The documents in this category ═══ -->
+<section class="pt-0">
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-8">
+        {% if category.posts.size > 0 %}
+          <div class="omega-rowlist" data-omega-reveal-stagger="50">
+            {% comment %} Taxonomy terms carry the raw collection documents, so a
+            document's own fields live under `data` (the listing's paginator
+            flattens them; this one does not). {% endcomment %}
+            {% for item in category.posts %}
+              {% assign entry = item.data[resolved.collection.namespace] %}
+              <a href="{{ item.url }}" class="omega-rowlist__item omega-rowlist__item--link" data-omega-reveal>
+                <span>{{ entry.title | default: item.data.title | default: item.url }}</span>
+                <span class="omega-rowlist__meta">
+                  {{ entry.description | default: item.data.description }}
+                  <i class="fa-solid fa-arrow-right fa-xs ms-2"></i>
+                </span>
+              </a>
+            {% endfor %}
+          </div>
+        {% else %}
+          <div class="omega-status-empty" data-omega-reveal>
+            <span class="omega-dot"></span>
+            <span>{{ resolved.category_empty }}</span>
+          </div>
+        {% endif %}
+      </div>
+    </div>
+
+    <div class="row justify-content-center mt-5">
+      <div class="col-12 text-center">
+        <a href="{{ resolved.collection.base }}" class="btn btn-outline-adaptive">
+          <i class="fa-solid fa-arrow-left fa-sm me-2"></i>
+          All {{ resolved.collection.title }}
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+
+{{ content | omega_content_format }}

package/dist/assets/themes/base/_layouts/frontend/pages/collection/document.html

@@ -0,0 +1,54 @@
+---
+layout: frontend/core/base
+
+# ═══ One document of a brand's own collection (#207). The engine fills the
+# collection block into every document under `_<name>/`, so ONE layout serves
+# docs, guides, recipes, portfolios — exactly like its listing/category
+# siblings.
+---
+
+{% comment %} A document keeps its own fields under the namespace of the
+   configured category field (doc.category → doc.title); a bare `title` is the
+   flat spelling, and the same pair names the page's meta (#317). {% endcomment %}
+{% assign entry = resolved[resolved.collection.namespace] %}
+{% assign document_title = entry.title | default: resolved.title | default: resolved.collection.title %}
+{% assign document_description = entry.description | default: resolved.description %}
+
+<!-- ═══ Masthead ═══ -->
+{% comment %} #467 (after #749): this masthead IS the page's first viewport, so
+the band paints with the document — data-omega-first-paint on the section, no
+stagger container, and the masthead cluster on its first_paint switch. The
+bands below keep the reveal lane. {% endcomment %}
+<section class="omega-dotgrid pb-4" data-omega-first-paint data-omega-dotfield>
+  <div class="container">
+    <div class="omega-post-card__eyebrow mb-4">
+      <a href="{{ resolved.collection.base }}">{{ resolved.collection.title }}</a>
+      <span>/</span>
+      <span>{{ document_title }}</span>
+    </div>
+
+    {% component "heading/masthead", headline: document_title, sub: document_description, first_paint: true %}
+  </div>
+</section>
+
+<!-- ═══ The document itself ═══ -->
+<section class="pt-0">
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-8">
+        <div class="omega-prose" data-omega-reveal>
+          {{ content | omega_content_format }}
+        </div>
+      </div>
+    </div>
+
+    <div class="row justify-content-center mt-5">
+      <div class="col-12 text-center">
+        <a href="{{ resolved.collection.base }}" class="btn btn-outline-adaptive">
+          <i class="fa-solid fa-arrow-left fa-sm me-2"></i>
+          All {{ resolved.collection.title }}
+        </a>
+      </div>
+    </div>
+  </div>
+</section>

package/dist/assets/themes/base/_layouts/frontend/pages/collection/index.html

@@ -0,0 +1,84 @@
+---
+layout: frontend/core/base
+
+# ═══ The listing page of a brand's own collection (#207). Every value comes
+# from targets.web.collections.<name> through the generated page's
+# `collection` block, so ONE layout serves docs, guides, recipes, portfolios.
+
+collection_empty: "Nothing here yet. The first entry will land right on this page."
+---
+
+<!-- ═══ Masthead ═══ -->
+{% comment %} #467 (after #749): this masthead IS the page's first viewport, so
+the band paints with the document — data-omega-first-paint on the section, no
+stagger container, and the masthead cluster on its first_paint switch. The
+bands below keep the reveal lane. {% endcomment %}
+<section class="omega-dotgrid pb-4" data-omega-first-paint data-omega-dotfield>
+  <div class="container">
+    {% component "heading/masthead", headline: resolved.collection.title, sub: resolved.collection.description, first_paint: true %}
+
+    {% comment %} Category rail — the collection's own taxonomy, one link per term {% endcomment %}
+    {% assign terms = collections[resolved.collection.taxonomy] %}
+    {% if terms and terms.size > 0 %}
+      <nav class="omega-tabs mt-5" aria-label="{{ resolved.collection.title }} categories">
+        <a href="{{ resolved.collection.base }}" class="active">All</a>
+        {% for term in terms %}
+          <a href="{{ resolved.collection.base }}/categories/{{ term.slug }}">{{ term.name | omega_title_case }}</a>
+        {% endfor %}
+      </nav>
+    {% endif %}
+  </div>
+</section>
+
+<!-- ═══ The documents on this page ═══ -->
+<section class="pt-0">
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-8">
+        {% if paginator.posts.size > 0 %}
+          <div class="omega-rowlist" data-omega-reveal-stagger="50">
+            {% for item in paginator.posts %}
+              {% comment %} A document keeps its own fields under the namespace of the
+              configured category field (doc.category → doc.title); a bare `title`
+              is the flat spelling. {% endcomment %}
+              {% assign entry = item[resolved.collection.namespace] %}
+              <a href="{{ item.url }}" class="omega-rowlist__item omega-rowlist__item--link" data-omega-reveal>
+                <span>{{ entry.title | default: item.title | default: item.url }}</span>
+                <span class="omega-rowlist__meta">
+                  {{ entry.description | default: item.description }}
+                  <i class="fa-solid fa-arrow-right fa-xs ms-2"></i>
+                </span>
+              </a>
+            {% endfor %}
+          </div>
+        {% else %}
+          <div class="omega-status-empty" data-omega-reveal>
+            <span class="omega-dot"></span>
+            <span>{{ resolved.collection_empty }}</span>
+          </div>
+        {% endif %}
+      </div>
+    </div>
+
+    <!-- Pagination — the paths come from the paginator, which is the one home of the URL shape -->
+    {% if paginator.total_pages > 1 %}
+      <nav aria-label="{{ resolved.collection.title }} pagination" class="d-flex justify-content-center align-items-center gap-3 mt-5" data-omega-reveal>
+        {% if paginator.previous_page_path %}
+          <a class="btn btn-outline-adaptive btn-sm omega-hover-nudge" href="{{ paginator.previous_page_path }}">
+            <i class="fa-solid fa-chevron-left fa-xs me-2"></i>
+            Previous
+          </a>
+        {% endif %}
+        <span class="omega-quiet small">Page {{ paginator.page }} of {{ paginator.total_pages }}</span>
+        {% if paginator.next_page_path %}
+          <a class="btn btn-outline-adaptive btn-sm omega-hover-nudge" href="{{ paginator.next_page_path }}">
+            Next
+            <i class="fa-solid fa-chevron-right fa-xs ms-2"></i>
+          </a>
+        {% endif %}
+      </nav>
+    {% endif %}
+  </div>
+</section>
+
+{{ content | omega_content_format }}

package/dist/assets/themes/base/_layouts/frontend/pages/connections/callback.html

@@ -0,0 +1,55 @@
+---
+layout: frontend/core/cover
+---
+
+<section class="col-12">
+  <div class="omega-auth" data-omega-reveal>
+    <div class="omega-auth__card text-center">
+      <!-- Logo -->
+      <div class="omega-auth__brand">
+        {% comment %} #467: the VISIBLE lockup prefers the bridged vector when the mint produced one — `brand.images.brandmark` stays the raster OG/social and payment sync need. {% endcomment %}
+        <img src="{{ assetManifest.brandmarkSvg | default: resolved.config.brand.images.brandmark | omega_cachebreak }}" class="filter-adaptive" alt="{{ resolved.config.brand.name }} Logo"/>
+      </div>
+
+      <!-- Loading State -->
+      <div id="connections-loading">
+        <h1 class="omega-auth__title">Authorizing <span id="connections-provider">Provider</span></h1>
+        <p class="omega-auth__sub">Hold tight. Completing the connection.</p>
+        <div class="spinner-border spinner-border-sm mb-0" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+      </div>
+
+      <!-- Result State -->
+      <div id="connections-result" class="d-none">
+        <!-- Success -->
+        <div id="result-success" class="d-none">
+          <h1 class="omega-auth__title">Connected</h1>
+          <p class="omega-auth__sub mb-0">Your account is linked. Redirecting you now.</p>
+        </div>
+
+        <!-- Error -->
+        <div id="result-error" class="d-none mb-3">
+          <h1 class="omega-auth__title mb-3">Connection failed</h1>
+          <div class="alert alert-danger mb-3 text-start" role="alert">
+            <p id="error-message" class="mb-0">An error occurred while connecting your account.</p>
+          </div>
+          <div class="text-center mb-0">
+            <a id="return-button" href="/dashboard/account#connections" class="btn btn-adaptive">
+              <i class="fa-solid fa-arrow-left fa-sm me-2"></i><span class="button-text">Return to account</span>
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <!-- Help -->
+      <div class="mt-4 pt-3 hairline-top text-center">
+        <span class="small omega-quiet">
+          Need help? <a href="/contact" class="text-decoration-none">Contact support</a>
+        </span>
+      </div>
+    </div>
+  </div>
+</section>
+
+{{ content | omega_content_format }}

package/dist/assets/themes/base/_layouts/frontend/pages/contact.html

@@ -0,0 +1,214 @@
+---
+layout: frontend/core/base
+
+# Hero Section
+hero:
+  headline: "Talk to a <em>human</em>"
+  headline_accent: ""
+  subheadline: "Questions, ideas, or something broken: a real person from {{ resolved.config.brand.name }} reads every message."
+
+# Contact Methods Section (the channels rail)
+contact_methods:
+  - title: "Email support"
+    description: "Get help within 24 hours"
+    icon: "envelope"
+    value: "Email us"
+    link: "#form"
+  - title: "Live chat"
+    description: "Chat with our team now 24/7"
+    icon: "comments"
+    value: "Chat now"
+    link: "#chat"
+
+# Contact Form Section
+contact_form:
+  superheadline:
+    text: "Email"
+  headline: "Send us a <em>message</em>"
+  subheadline: "Fill out the form below and we'll get back to you within 24 hours."
+
+# Response facts — the rail footer. Copy lands in markup UNESCAPED, so an
+# angle bracket ships as an entity (#451): a raw `<` opens a bogus tag the
+# production minifier resolves by eating the value's closing tags.
+stats:
+  items:
+    - number: "&lt;15m"
+      label: "Response time"
+      sublabel: "Median first reply"
+    - number: "24/7"
+      label: "Live chat support"
+      sublabel: "Every day of the year"
+    - number: "4.9"
+      label: "Support rating"
+      sublabel: "Across review platforms"
+    - number: "50+"
+      label: "Languages"
+      sublabel: "Around the world"
+
+# FAQs Section
+faqs:
+  superheadline:
+    text: "FAQs"
+  headline: "Frequently asked <em>questions</em>"
+  subheadline: "Everything you need to know about our support experience."
+  items:
+  - question: "How quickly do you respond to support requests?"
+    answer: "We aim to respond to all support requests within 24 hours during business days. For urgent issues, our live chat is available 24/7."
+  - question: "Do you offer phone support?"
+    answer: "Yes! Phone support is available for premium customers. Contact us to schedule a call with our support team."
+  - question: "Can you help with technical integration?"
+    answer: "Absolutely! Our technical support team can help with API integration, troubleshooting, and custom implementations."
+---
+
+<!-- ═══ Masthead ═══ -->
+{% comment %} #467 (after #749): this masthead IS the page's first viewport, so
+the band paints with the document — data-omega-first-paint on the section, no
+stagger container, and the masthead cluster on its first_paint switch. The
+bands below keep the reveal lane. {% endcomment %}
+<section class="omega-dotgrid pb-0" data-omega-first-paint data-omega-dotfield>
+  <div class="container">
+    {% component "heading/masthead", eyebrow: "Contact", headline: resolved.hero.headline, headline_accent: resolved.hero.headline_accent, sub: resolved.hero.subheadline, first_paint: true %}
+  </div>
+</section>
+
+<!-- ═══ Channels rail + form ═══ -->
+<section id="form">
+  <div class="container">
+    <div class="omega-duo" style="--omega-duo-cols: 5fr 7fr;">
+      <!-- Rail: ways to reach us -->
+      <div class="omega-duo__aside" data-omega-reveal-stagger="80">
+        <span class="omega-micro d-block mb-2" data-omega-reveal>Ways to reach us</span>
+
+        <div class="mb-5">
+          {% for method in resolved.contact_methods %}
+            <a href="{{ method.link }}" class="omega-channel" data-omega-reveal>
+              <span class="omega-icon-chip"><i class="fa-solid fa-{{ method.icon }} fa-sm"></i></span>
+              <span class="omega-channel__body">
+                <span class="omega-channel__title d-block">{{ method.title }}</span>
+                <span class="omega-channel__desc d-block">{{ method.description }}</span>
+              </span>
+              <span class="omega-channel__arrow"><i class="fa-solid fa-arrow-right fa-sm"></i></span>
+            </a>
+          {% endfor %}
+        </div>
+
+        <!-- Response facts (count up on reveal) -->
+        {% if resolved.stats.items %}
+          <div class="omega-facts mt-5" style="--omega-facts-cols: 2;" data-omega-reveal>
+            {% for stat in resolved.stats.items %}
+              <div class="omega-facts__item">
+                <span class="omega-micro omega-facts__label">{{ stat.label }}</span>
+                <span class="omega-facts__value omega-facts__value--num" data-omega-countup>{{ stat.number }}</span>
+                {% iftruthy stat.sublabel %}
+                  <span class="omega-facts__sub">{{ stat.sublabel }}</span>
+                {% endiftruthy %}
+              </div>
+            {% endfor %}
+          </div>
+        {% endif %}
+      </div>
+
+      <!-- The form -->
+      <div class="omega-form-panel" data-omega-reveal>
+        <div class="mb-4">
+          {% iftruthy resolved.contact_form.superheadline.text %}
+            <span class="omega-micro d-block mb-2">{{ resolved.contact_form.superheadline.text }}</span>
+          {% endiftruthy %}
+          <h2 class="omega-display omega-display--section mb-2">{{ resolved.contact_form.headline }}</h2>
+          {% iftruthy resolved.contact_form.subheadline %}
+            <p class="text-muted mb-0">{{ resolved.contact_form.subheadline }}</p>
+          {% endiftruthy %}
+        </div>
+
+        <form id="contact-form" autocomplete="on" data-form-state="initializing" onsubmit="return false">
+          <div class="row g-3 mb-3">
+            <div class="col-md-6">
+              <label for="first_name" class="form-label fw-semibold">First name <span class="text-danger">*</span></label>
+              <input type="text" class="form-control" id="first_name" name="first_name"
+                placeholder="Enter your first name"
+                autocomplete="given-name"
+                minlength="2"
+                maxlength="50"
+                required>
+              <div class="invalid-feedback"></div>
+            </div>
+            <div class="col-md-6">
+              <label for="last_name" class="form-label fw-semibold">Last name <span class="text-danger">*</span></label>
+              <input type="text" class="form-control" id="last_name" name="last_name"
+                placeholder="Enter your last name"
+                autocomplete="family-name"
+                minlength="2"
+                maxlength="50"
+                required>
+              <div class="invalid-feedback"></div>
+            </div>
+          </div>
+
+          <!-- Honeypot field (bot detection) -->
+          <div class="form-group mb-3" style="display: none;" aria-hidden="true">
+            <input type="text" class="form-control" name="honey" tabindex="-1" autocomplete="off">
+          </div>
+
+          <!-- Hidden auth field (auto-populated via bindings) -->
+          <input type="hidden" aria-hidden="true" name="uid" data-omega-bind="@value auth.user.uid">
+
+          <div class="row g-3 mb-3">
+            <div class="col-md-6">
+              <label for="email" class="form-label fw-semibold">Email address <span class="text-danger">*</span></label>
+              <input type="email" class="form-control" id="email" name="email"
+                placeholder="Enter your email address"
+                autocomplete="email"
+                data-omega-bind="@value auth.user.email"
+                required>
+              <div class="invalid-feedback"></div>
+            </div>
+            <div class="col-md-6">
+              <label for="company" class="form-label fw-semibold">Company</label>
+              <input type="text" class="form-control" id="company" name="company"
+                placeholder="Optional"
+                autocomplete="organization"
+                maxlength="100">
+            </div>
+          </div>
+
+          <div class="mb-3">
+            <label for="subject" class="form-label fw-semibold">Subject <span class="text-danger">*</span></label>
+            <select class="form-select" id="subject" name="subject" required>
+              <option value="">Choose a topic...</option>
+              <option value="general">General inquiry</option>
+              <option value="support">Technical support</option>
+              <option value="billing">Billing question</option>
+              <option value="partnership">Partnership</option>
+              <option value="other">Other</option>
+            </select>
+            <div class="invalid-feedback"></div>
+          </div>
+
+          <div class="mb-4">
+            <label for="message" class="form-label fw-semibold">Message <span class="text-danger">*</span></label>
+            <textarea class="form-control" id="message" name="message" rows="5"
+              placeholder="Tell us how we can help you..."
+              minlength="10"
+              maxlength="5000"
+              required></textarea>
+            <div class="invalid-feedback"></div>
+          </div>
+
+          <div class="d-flex flex-wrap align-items-center gap-3">
+            <button type="submit" class="btn btn-adaptive btn-lg px-5 omega-hover-nudge">
+              Send message
+              <span class="omega-nudge ms-2"><i class="fa-solid fa-arrow-right fa-sm"></i></span>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ═══ FAQ — asymmetric ═══ -->
+{% if resolved.faqs.items %}
+  {% section "marketing/faq", data: resolved.faqs %}
+{% endif %}
+
+{{ content | omega_content_format }}