@omega.js/extension 0.1.0

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

@@ -0,0 +1,361 @@
+---
+layout: frontend/core/base
+
+# ═══ /status — reimagined 2026-07-16: the status IS the hero (typographic
+# state line + live strip, no shouting green banner-card), services live in
+# ONE ops card, incidents/maintenance sit as a quiet duo, build info reads
+# like a build manifest. Every JS hook preserved (core/js/pages/status):
+# #status-banner/#status-text/#status-refresh-timer, data-service-*,
+# .uptime-bars/.uptime-bar, incidents/maintenance lists, subscribe form,
+# build-info ids.
+
+# Hero Section
+hero:
+  headline: "Every system,"
+  headline_accent: "accounted for"
+  subheadline: "Live status and 90-day uptime for everything {{ resolved.config.brand.name }} runs."
+
+# Status Section
+status:
+  days: 90  # Number of days to show in uptime bars
+  overall:
+    operational: "All systems operational"
+    degraded: "Partial system outage"
+    major: "Major system outage"
+    maintenance: "Under maintenance"
+  services:
+    - id: "website"
+      name: "Website"
+      description: "Main website and landing pages"
+      url: null  # Optional: Link to the service
+    - id: "api"
+      name: "API"
+      description: "REST API endpoints"
+      url: null
+    - id: "dashboard"
+      name: "Dashboard"
+      description: "User dashboard and account management"
+      url: null
+    - id: "cdn"
+      name: "CDN"
+      description: "Content delivery network"
+      url: null
+
+# Updates Section
+updates:
+  superheadline:
+    text: "Notifications"
+  headline: "Hear it from us"
+  headline_accent: "first"
+  subheadline: "Status changes land in your inbox the moment they happen."
+  button:
+    text: "Subscribe"
+    icon: "envelope"
+
+# Maintenance Section
+maintenance:
+  headline: "Scheduled maintenance"
+  empty_message: "Nothing scheduled. No planned interruptions."
+
+# Incidents Section
+incidents:
+  headline: "Recent incidents"
+  empty_message: "No incidents reported."
+  show_history_link: "Show incident history"
+  history_url: null  # Optional: Link to full incident history
+
+# Build Info Section
+build_info:
+  headline: "Build manifest"
+---
+
+<!-- ═══ Hero: the state is the headline ═══ -->
+{% 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", eyebrow: "Status", headline: resolved.hero.headline, headline_accent: resolved.hero.headline_accent, sub: resolved.hero.subheadline, first_paint: true %}
+  </div>
+</section>
+
+<!-- ═══ Live status strip ═══ -->
+<section class="pt-0 pb-4">
+  <div class="container">
+    <div id="status-banner" class="status-banner omega-status-strip bg-success" data-omega-reveal>
+      <div class="d-flex align-items-center gap-3">
+        <span class="status-indicator d-inline-flex">
+          <i class="fa-solid fa-circle-check status-icon fs-4"></i>
+        </span>
+        <h2 id="status-text" class="omega-status-strip__text mb-0">{{ resolved.status.overall.operational }}</h2>
+      </div>
+      <div class="d-flex align-items-center gap-2 omega-quiet small">
+        <span class="status-pulse rounded-circle animation-pulse"></span>
+        <span>Refreshed <span id="status-refresh-timer">0</span>s ago</span>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ═══ Services — one ops card ═══ -->
+<section class="pt-0">
+  <div class="container">
+    <div class="omega-status-card" data-omega-reveal>
+      <div id="services-list">
+        {% for service in resolved.status.services %}
+          <div class="service-item omega-status-card__row {% unless forloop.last %}omega-status-card__row--divided{% endunless %}" data-service-id="{{ service.id }}">
+            <div class="d-flex align-items-center justify-content-between mb-2">
+              <div class="d-flex align-items-center gap-2">
+                <span class="service-status-dot" data-service-status="{{ service.id }}">
+                  <i class="fa-solid fa-circle-check text-success"></i>
+                </span>
+                {% iftruthy service.url %}
+                  <a href="{{ service.url }}" class="fw-semibold text-body text-decoration-none">{{ service.name }}</a>
+                {% endiftruthy %}
+                {% iffalsy service.url %}
+                  <span class="fw-semibold">{{ service.name }}</span>
+                {% endiffalsy %}
+                {% iftruthy service.description %}
+                  <span class="omega-quiet small d-none d-md-inline">{{ service.description }}</span>
+                {% endiftruthy %}
+              </div>
+              <div class="d-flex align-items-center gap-2">
+                <span class="service-uptime fw-semibold font-monospace" data-service-uptime="{{ service.id }}">100%</span>
+              </div>
+            </div>
+            <div class="uptime-bars d-flex gap-1 cursor-pointer" data-service-bars="{{ service.id }}" title="Uptime history for the last {{ resolved.status.days }} days">
+              {% for i in (1..90) %}
+                <div class="uptime-bar rounded-1 bg-success" data-day="{{ i }}"></div>
+              {% endfor %}
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+
+      <!-- Uptime Legend -->
+      <div class="omega-status-card__legend d-flex align-items-center justify-content-between flex-wrap gap-2 omega-quiet small">
+        <div class="d-flex align-items-center flex-wrap gap-2 gap-md-4">
+          <div class="d-flex align-items-center gap-1">
+            <div class="uptime-bar-legend rounded-1 bg-success"></div>
+            <span>Operational</span>
+          </div>
+          <div class="d-flex align-items-center gap-1">
+            <div class="uptime-bar-legend rounded-1 bg-warning"></div>
+            <span>Degraded</span>
+          </div>
+          <div class="d-flex align-items-center gap-1">
+            <div class="uptime-bar-legend rounded-1 bg-danger"></div>
+            <span>Outage</span>
+          </div>
+          <div class="d-flex align-items-center gap-1">
+            <div class="uptime-bar-legend rounded-1 bg-info"></div>
+            <span>Maintenance</span>
+          </div>
+        </div>
+        <div>
+          <span class="d-none d-lg-inline">{{ resolved.status.days }} days ago</span>
+          <span class="d-none d-md-inline d-lg-none">60 days ago</span>
+          <span class="d-md-none">30 days ago</span>
+          <span class="mx-2">—</span>
+          <span>Today</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ═══ Incidents + maintenance duo ═══ -->
+<section>
+  <div class="container">
+    <div class="row g-4">
+      <div class="col-lg-6" data-omega-reveal>
+        <h2 class="omega-panel-head justify-content-start h5 mb-3">{{ resolved.incidents.headline }}</h2>
+        <div id="incidents-list">
+          <div id="incidents-empty" class="omega-status-empty">
+            <span class="omega-dot omega-dot--ok"></span>
+            <span>{{ resolved.incidents.empty_message }}</span>
+          </div>
+        </div>
+        {% iftruthy resolved.incidents.history_url %}
+          <div class="mt-3">
+            <a href="{{ resolved.incidents.history_url }}" class="text-decoration-none small">
+              {{ resolved.incidents.show_history_link }}
+              <i class="fa-solid fa-arrow-right fa-xs ms-1"></i>
+            </a>
+          </div>
+        {% endiftruthy %}
+      </div>
+
+      <div class="col-lg-6" data-omega-reveal>
+        <h2 class="omega-panel-head justify-content-start h5 mb-3">{{ resolved.maintenance.headline }}</h2>
+        <div id="maintenance-list">
+          <div id="maintenance-empty" class="omega-status-empty">
+            <span class="omega-dot"></span>
+            <span>{{ resolved.maintenance.empty_message }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ═══ Subscribe band ═══ -->
+<section>
+  <div class="container">
+    <div class="omega-status-subscribe" data-omega-reveal="scale">
+      <div>
+        {% iftruthy resolved.updates.superheadline.text %}
+          <span class="omega-micro d-block mb-2">{{ resolved.updates.superheadline.text }}</span>
+        {% endiftruthy %}
+        <h3 class="h5 mb-1">
+          {{ resolved.updates.headline }}
+          {% iftruthy resolved.updates.headline_accent %}
+            <em class="text-marketing">{{ resolved.updates.headline_accent }}</em>
+          {% endiftruthy %}
+        </h3>
+        {% iftruthy resolved.updates.subheadline %}
+          <p class="omega-quiet mb-0">{{ resolved.updates.subheadline }}</p>
+        {% endiftruthy %}
+      </div>
+      <form id="status-subscribe-form" class="d-flex flex-column flex-sm-row gap-2" novalidate data-form-state="initializing" onsubmit="return false">
+        <input
+          type="email"
+          class="form-control flex-grow-1"
+          id="status-email"
+          name="email"
+          placeholder="you@work.com"
+          autocomplete="email"
+          required
+        >
+        <button type="submit" class="btn btn-adaptive text-nowrap flex-shrink-0">
+          <i class="fa-solid fa-paper-plane fa-sm me-2"></i>
+          <span class="button-text">{{ resolved.updates.button.text }}</span>
+        </button>
+      </form>
+    </div>
+  </div>
+</section>
+
+<!-- ═══ Build manifest ═══ -->
+<section class="pb-4">
+  <div class="container">
+    <h2 class="omega-panel-head justify-content-start h5 mb-3" data-omega-reveal>{{ resolved.build_info.headline }}</h2>
+
+    <div id="build-info" class="omega-status-card omega-status-card--manifest" data-omega-reveal>
+      <!-- Loading state -->
+      <div id="build-info-loading" class="text-center omega-quiet py-3">
+        <div class="spinner-border spinner-border-sm me-2" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+        Loading build information...
+      </div>
+
+      <!-- Content (hidden until loaded) -->
+      <div id="build-info-content" class="d-none">
+        <div class="row g-4">
+          <!-- Build Time -->
+          <div class="col-md-6">
+            <div class="d-flex align-items-start gap-3">
+              <span class="omega-icon-chip omega-icon-chip--neutral flex-shrink-0">
+                <i class="fa-solid fa-clock fa-sm"></i>
+              </span>
+              <div>
+                <div class="omega-micro mb-1">Last build</div>
+                <div class="fw-semibold"><span id="build-time">—</span> <span id="build-time-ago" class="omega-quiet small ms-1"></span></div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Environment -->
+          <div class="col-md-6">
+            <div class="d-flex align-items-start gap-3">
+              <span class="omega-icon-chip omega-icon-chip--neutral flex-shrink-0">
+                <i class="fa-solid fa-server fa-sm"></i>
+              </span>
+              <div>
+                <div class="omega-micro mb-1">Environment</div>
+                <div id="build-environment" class="fw-semibold">—</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Version -->
+          <div class="col-md-6">
+            <div class="d-flex align-items-start gap-3">
+              <span class="omega-icon-chip omega-icon-chip--neutral flex-shrink-0">
+                <i class="fa-solid fa-tag fa-sm"></i>
+              </span>
+              <div>
+                <div class="omega-micro mb-1">Version</div>
+                <div id="build-version" class="fw-semibold">—</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Theme -->
+          <div class="col-md-6">
+            <div class="d-flex align-items-start gap-3">
+              <span class="omega-icon-chip omega-icon-chip--neutral flex-shrink-0">
+                <i class="fa-solid fa-palette fa-sm"></i>
+              </span>
+              <div>
+                <div class="omega-micro mb-1">Theme</div>
+                <div id="build-theme" class="fw-semibold">—</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Packages -->
+          <div class="col-12">
+            <div class="d-flex align-items-start gap-3">
+              <span class="omega-icon-chip omega-icon-chip--neutral flex-shrink-0">
+                <i class="fa-solid fa-box fa-sm"></i>
+              </span>
+              <div class="flex-grow-1">
+                <div class="omega-micro mb-2">Package versions</div>
+                <div id="build-packages" class="d-flex flex-wrap gap-2">
+                  <!-- Package badges will be inserted here -->
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Repository -->
+          <div class="col-12">
+            <div class="d-flex align-items-start gap-3">
+              <span class="omega-icon-chip omega-icon-chip--neutral flex-shrink-0">
+                <i class="fa-solid fa-code-branch fa-sm"></i>
+              </span>
+              <div>
+                <div class="omega-micro mb-1">Repository</div>
+                <div id="build-repo" class="fw-semibold">—</div>
+                <div id="build-commit" class="omega-quiet small font-monospace"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Error state -->
+      <div id="build-info-error" class="d-none text-center omega-quiet py-3">
+        <i class="fa-solid fa-circle-exclamation fs-3 mb-2 text-warning opacity-75"></i>
+        <p class="mb-0">Unable to load build information</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ═══ Footer links ═══ -->
+<section class="pt-0">
+  <div class="container">
+    <div class="d-flex justify-content-center align-items-center gap-3 omega-quiet small flex-wrap" data-omega-reveal>
+      <a href="/updates" class="text-decoration-none">
+        <i class="fa-solid fa-rocket fa-xs me-1"></i>
+        View updates
+      </a>
+    </div>
+  </div>
+</section>
+
+{{ content | omega_content_format }}

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

@@ -0,0 +1,210 @@
+---
+layout: frontend/core/base
+
+# Hero Section
+hero:
+  headline: "The people behind the"
+  headline_accent: "product"
+  description: "A small team with strong opinions, shipping every week."
+
+# Portrait grid head — OPTIONAL: author superheadline/headline/
+# headline_accent/subheadline and the cluster renders above the portraits;
+# author none and the grid runs straight off the masthead, as it always has.
+# Each member's own one-line `bio:` (in their _team doc) reads under their
+# name and position on the card.
+# grid_head:
+#   superheadline: "Who we are"
+#   headline: "The people behind the"
+#   headline_accent: "magic"
+#   subheadline: "A short line about how the team works."
+
+# Mission quote (rendered as the serif quote; attributed to the CEO/owner).
+# mission_headline is OPTIONAL: authored, it heads the band as its h2.
+mission_quote: "To empower individuals and businesses with <em>innovative technology</em> that simplifies complex challenges and unlocks new possibilities."
+
+# How we work — quiet principles band (override per brand)
+principles:
+  superheadline: "How we work"
+  headline: "Small team,"
+  headline_accent: "strong opinions"
+  items:
+    - title: "We ship weekly"
+      description: "Small releases, every week. Momentum beats ceremony."
+      icon: "rocket"
+    - title: "Everyone talks to users"
+      description: "Support isn't a department. The person who built it answers for it."
+      icon: "comments"
+    - title: "Writing over meetings"
+      description: "Decisions get written down where everyone can read them."
+      icon: "pen-nib"
+
+# Join CTA
+join_cta:
+  headline: "Want to join the team?"
+  subheadline: "We're always looking for talented, passionate people to join our mission."
+  primary_button:
+    text: "Apply now"
+    href: "/careers"
+  secondary_button:
+    text: "Get in touch"
+    href: "/contact"
+    nudge: true
+---
+
+<!-- ═══ 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", eyebrow: "Team", headline: resolved.hero.headline, headline_accent: resolved.hero.headline_accent, sub: resolved.hero.description, first_paint: true %}
+
+    {% assign _team_count = site.team | size %}
+  </div>
+</section>
+
+<!-- ═══ Portrait grid ═══ -->
+{% capture grid_head %}
+  {% component "heading/section-head", superheadline: resolved.grid_head.superheadline, headline: resolved.grid_head.headline, headline_accent: resolved.grid_head.headline_accent, sub: resolved.grid_head.subheadline %}
+{% endcapture %}
+{% assign grid_head = grid_head | strip %}
+<section class="pt-0">
+  <div class="container">
+    {% iftruthy grid_head %}
+      <div class="omega-section-head mb-4" data-omega-reveal>
+        {{ grid_head }}
+      </div>
+    {% endiftruthy %}
+
+    {% if _team_count == 0 %}
+      <div class="row justify-content-center">
+        <div class="col-lg-6">
+          <div class="card" data-omega-reveal>
+            <div class="card-body p-5 text-center text-muted">
+              <h2 class="h5">No profiles yet</h2>
+              <p class="mb-0">The team page fills in as member profiles are added.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    {% endif %}
+
+    <div class="row g-4" data-omega-reveal-stagger="70">
+      {% for member in site.team %}
+        <div class="col-lg-3 col-md-4 col-6" data-omega-reveal>
+          <div class="omega-person">
+            <a href="{{ member.url }}" class="omega-person__portrait">
+              {%- omega_member member.id, "image-tag", class="" -%}
+            </a>
+
+            <div class="omega-person__body">
+              <h3 class="omega-person__name">
+                <a href="{{ member.url }}">
+                  {%- omega_member member.id, "name" -%}
+                </a>
+              </h3>
+              <span class="omega-micro omega-person__role">{{ member.member.position }}</span>
+
+              {% iftruthy member.member.bio %}
+                <p class="omega-person__desc">{{ member.member.bio }}</p>
+              {% endiftruthy %}
+
+              {% iftruthy member.member.links %}
+                <div class="omega-person__links">
+                  {% for link in member.member.links %}
+                    {% assign link_icon = link.id %}
+                    {% if link.id == "website" %}{% assign link_icon = "globe" %}{% endif %}
+                    <a href="{{ link.url }}" class="omega-icon-link" target="_blank" rel="nofollow noopener" title="{{ link.title }}">
+                      <i class="fa-solid fa-{{ link_icon }} fa-sm"></i>
+                    </a>
+                  {% endfor %}
+                </div>
+              {% endiftruthy %}
+            </div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>
+
+<!-- ═══ How we work — quiet principles ═══ -->
+{% if _team_count > 0 %}
+<section>
+  <div class="container">
+    <div class="omega-duo">
+      <div class="omega-duo__aside omega-section-head" data-omega-reveal>
+        {% component "heading/section-head", superheadline: resolved.principles.superheadline, headline: resolved.principles.headline, headline_accent: resolved.principles.headline_accent %}
+      </div>
+
+      <div class="omega-rowlist" data-omega-reveal-stagger="60">
+        {% for item in resolved.principles.items %}
+          <div class="omega-rowlist__item" data-omega-reveal>
+            <span class="d-inline-flex align-items-center gap-3">
+              <span class="omega-icon-chip omega-icon-chip--neutral"><i class="fa-solid fa-{{ item.icon }} fa-sm"></i></span>
+              <strong>{{ item.title }}</strong>
+            </span>
+            <span class="omega-rowlist__meta">{{ item.description }}</span>
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</section>
+{% endif %}
+
+<!-- ═══ Mission quote ═══ -->
+{% if _team_count > 0 %}
+<section>
+  <div class="container">
+    {% iftruthy resolved.mission_headline %}
+      <div class="omega-section-head omega-section-head--center mb-4" data-omega-reveal>
+        {% component "heading/section-head", headline: resolved.mission_headline %}
+      </div>
+    {% endiftruthy %}
+
+    {% assign mission_member = nil %}
+    {% for member in site.team %}
+      {% assign position_lower = member.member.position | downcase %}
+      {% if position_lower == "ceo" or position_lower == "chief executive officer" %}
+        {% assign mission_member = member %}
+        {% break %}
+      {% endif %}
+    {% endfor %}
+    {% unless mission_member %}
+      {% for member in site.team %}
+        {% assign position_lower = member.member.position | downcase %}
+        {% if position_lower == "owner" or position_lower == "president" %}
+          {% assign mission_member = member %}
+          {% break %}
+        {% endif %}
+      {% endfor %}
+    {% endunless %}
+    {% unless mission_member %}
+      {% assign mission_member = site.team | first %}
+    {% endunless %}
+
+    <figure class="omega-quote" data-omega-reveal>
+      <blockquote class="omega-quote__text border-0 p-0 m-0">
+        &ldquo;{{ resolved.mission_quote }}&rdquo;
+      </blockquote>
+      {% if mission_member %}
+        <figcaption class="omega-quote__attr">
+          <span class="omega-quote__avatar overflow-hidden">
+            {%- omega_member mission_member.id, "image-tag", class="w-100 h-100 object-fit-cover" -%}
+          </span>
+          <span class="omega-quote__name">{%- omega_member mission_member.id, "name" -%}</span>
+          <span class="omega-quote__role">{{ mission_member.member.position }}</span>
+        </figcaption>
+      {% endif %}
+    </figure>
+  </div>
+</section>
+{% endif %}
+
+<!-- ═══ Join CTA band ═══ -->
+{% capture join_cta_class %}{% if _team_count == 0 %}pt-0{% endif %}{% endcapture %}
+{% section "marketing/cta", data: resolved.join_cta, section_class: join_cta_class %}
+
+{{ content | omega_content_format }}