@omega.js/desktop 0.1.0

package/dist/assets/themes/base/_components/heading/masthead/component.html

@@ -0,0 +1,22 @@
+{% comment %} Interior-page masthead cluster: omega-micro eyebrow + the
+omega-display--page h1 (+ optional em accent) + sub line. The calling layout
+owns the band shell (dotgrid section, container, duo/split wrappers, reveal
+stagger) — this is the repeated head only. Breadcrumb-eyebrow pages pass no
+eyebrow and keep their link row in the layout.
+
+#467: `first_paint` is the caller saying "this cluster IS the first viewport",
+and the reveal attributes come off — a band the visitor never scrolls to must
+not wait for the observer. The band itself declares data-omega-first-paint;
+this switch keeps the markup honest rather than shipping attributes the
+exemption has already neutralized. {% endcomment %}
+{% iffalsy args.first_paint %}{% assign masthead_reveal = " data-omega-reveal" %}{% endiffalsy %}
+{% iftruthy args.eyebrow %}
+  <span class="omega-micro d-block mb-3"{{ masthead_reveal }}>{{ args.eyebrow }}</span>
+{% endiftruthy %}
+<h1 class="omega-display omega-display--page{% if args.h1_class != blank %} {{ args.h1_class }}{% endif %}"{{ masthead_reveal }}>
+  {{ args.headline }}{% if args.headline_accent != blank %}
+  <em>{{ args.headline_accent }}</em>{% endif %}
+</h1>
+{% iftruthy args.sub %}
+  <p class="{{ args.sub_class }}"{{ masthead_reveal }}>{{ args.sub }}</p>
+{% endiftruthy %}

package/dist/assets/themes/base/_components/heading/masthead/component.json5

@@ -0,0 +1,30 @@
+{
+  description: 'Interior-page masthead head cluster — optional omega-micro eyebrow, the omega-display--page h1 with optional <em> accent, optional sub line. A COMPONENT: the page keeps its own shell (dotgrid section, container, duo/split wrappers) and composes this inside it; breadcrumb-eyebrow pages (blog taxonomy, alternative) pass no eyebrow and keep their link row in the layout. SHARED across the interior pages — defaults stay NEUTRAL (spec §6); sub_class/h1_class are mechanical knobs.',
+
+  args: {
+    eyebrow: 'string',
+    headline: 'string',
+    headline_accent: 'string',
+    sub: 'string',
+    sub_class: 'string',
+    h1_class: 'string',
+    first_paint: 'boolean', // #467: this cluster IS the first viewport — drop the reveal attributes, the band's data-omega-first-paint owns the paint
+  },
+
+  defaults: {
+    sub_class: 'omega-hero-split__sub',
+  },
+
+  // Showcase variants (spec §9)
+  demo: [
+    {
+      label: 'Eyebrow + accent + sub',
+      args: {
+        eyebrow: 'Guides',
+        headline: 'Everything about',
+        headline_accent: 'getting started',
+        sub: 'A short standfirst under the display headline.',
+      },
+    },
+  ],
+}

package/dist/assets/themes/base/_components/heading/section-head/component.html

@@ -0,0 +1,18 @@
+{% comment %} Section-head cluster: omega-micro eyebrow + the
+omega-display--section h2 (+ optional em accent) + plain sub line. The
+caller owns the omega-section-head wrapper div (its centering/duo/margin
+classes vary) and anything after the cluster — this is the inner head only.
+Sections compose it too (nested composition): pass the resolved STRING as
+superheadline. {% endcomment %}
+{% iftruthy args.superheadline %}
+  <span class="omega-micro">{{ args.superheadline }}</span>
+{% endiftruthy %}
+{% iftruthy args.headline %}
+  <h2 class="omega-display omega-display--section">
+    {{ args.headline }}{% if args.headline_accent != blank %}
+    <em>{{ args.headline_accent }}</em>{% endif %}
+  </h2>
+{% endiftruthy %}
+{% iftruthy args.sub %}
+  <p>{{ args.sub }}</p>
+{% endiftruthy %}

package/dist/assets/themes/base/_components/heading/section-head/component.json5

@@ -0,0 +1,27 @@
+{
+  description: 'Section-head cluster — optional omega-micro eyebrow, the omega-display--section h2 with optional <em> accent (whole h2 suppressed when headline is blank), optional plain sub line. A COMPONENT: the caller owns the omega-section-head wrapper div and everything after the cluster. Composed by layouts AND by sections (nested composition — pass the resolved string as superheadline, e.g. args.superheadline.text). Fully neutral: no defaults.',
+
+  args: {
+    superheadline: 'string',
+    headline: 'string',
+    headline_accent: 'string',
+    sub: 'string',
+  },
+
+  defaults: {},
+
+  // Showcase variants (spec §9) — stage_class supplies the wrapper the
+  // caller normally owns, so the demo renders in its natural shell.
+  demo: [
+    {
+      label: 'Full cluster',
+      stage_class: 'omega-section-head',
+      args: {
+        superheadline: 'Features',
+        headline: 'Built for',
+        headline_accent: 'momentum',
+        sub: 'A supporting line under the section head.',
+      },
+    },
+  ],
+}

package/dist/assets/themes/base/_components/pricing/features/component.html

@@ -0,0 +1,29 @@
+{% comment %} The price card's feature bullets — the ONE home of the list
+/pricing's plan cards, its one-time cards and the homepage plan band all
+render (#539). A feature the catalog gave a `definition` becomes the
+dotted-underline hover target Bootstrap's tooltip engine binds (the themes
+initialize tooltips page-wide, so the affordance works anywhere the list
+lands); a feature without one stays plain text. Values print through
+omega_commaify, which passes non-numeric strings ("Unlimited", "24/7")
+through untouched — then escape_once, because a catalog value is TEXT and a
+literal `<` must never open a tag the minifier can eat (#580). {% endcomment %}
+{% if args.features.size > 0 %}
+  <ul class="omega-price-card__features">
+    {% for feature in args.features %}
+      <li>
+        <span class="omega-feature-check text-success"><i class="fa-solid fa-check fa-sm"></i></span>
+        <span>
+          {% if feature.value and feature.value != true %}
+            {{ feature.value | omega_commaify | escape_once }}
+          {% endif %}
+          {% iftruthy feature.definition %}
+            <span class="text-decoration-underline text-decoration-dotted cursor-help" data-bs-toggle="tooltip" data-bs-title="{{ feature.definition }}">{{ feature.name }}</span>
+          {% endiftruthy %}
+          {% iffalsy feature.definition %}
+            {{ feature.name }}
+          {% endiffalsy %}
+        </span>
+      </li>
+    {% endfor %}
+  </ul>
+{% endif %}

package/dist/assets/themes/base/_components/pricing/features/component.json5

@@ -0,0 +1,30 @@
+{
+  description: 'The price card feature bullets — one green check per feature, the catalog\'s value ahead of its name, and the hover explanation a feature `definition` earns (dotted underline + tooltip). A COMPONENT because three surfaces render the same list: /pricing\'s plan cards, its one-time cards, and the homepage plan band (`marketing/pricing-cards`) — one home, so the hover surface can never exist on one and not the other (#539). The caller owns everything around the list, including the tier-note line above it — which reads `and:` on every surface (Ian 2026-08-24).',
+
+  args: {
+    features: 'array', // composed feature view-models — resolved.pricing plan/product `features`, never hand-authored
+  },
+
+  defaults: {
+    // No feature defaults, ever: a feature a brand does not sell is fiction,
+    // and the catalog is the one source (C2). An empty list renders nothing.
+    features: [],
+  },
+
+  // Showcase variants (spec §9): the list is catalog-driven, so the demo
+  // bridges feature view-models the way the pricing composer emits them.
+  demo: [
+    {
+      label: 'With a definition',
+      stage_class: 'omega-price-card',
+      args: {
+        features: [
+          { id: 'requests', name: 'Requests', value: 10000, definition: 'API requests per month.' },
+          { id: 'seats', name: 'Seats', value: 10 },
+          { id: 'projects', name: 'Projects', value: 'Unlimited' },
+          { id: 'support', name: 'Priority support', value: true },
+        ],
+      },
+    },
+  ],
+}

package/dist/assets/themes/base/_hero/orbit/index.html

@@ -0,0 +1,30 @@
+{% comment %}
+  `orbit` — the framework's REFERENCE hero animation (#441): what a brand's own
+  `src/_hero/<name>/` folder looks like, and the proof that the slot's three
+  lanes (markup, style.scss, script.js) all land.
+
+  A product card at the centre with four satellites tracking around it: the
+  "one config, every surface" shape, in the theme's own tokens (no colors, no
+  fonts, no sizes of its own — style.scss reads `--omega-*` like every other
+  core surface, so it re-inks with the brand).
+
+  Context-free like a section: the markup renders in an empty scope, so
+  `omega_*` tags work and no page data leaks in. The wrapper the tag emits
+  carries `data-omega-hero="orbit"`, which is what boots script.js.
+
+  Reduced motion is style.scss's branch: the ring parks and every satellite
+  renders at its final position — a still diagram, never a blank box.
+{% endcomment %}
+<div class="omega-orbit" aria-hidden="true">
+  <div class="omega-orbit__ring">
+    <span class="omega-orbit__satellite" style="--omega-orbit-index: 0;"><i class="fa-solid fa-globe"></i></span>
+    <span class="omega-orbit__satellite" style="--omega-orbit-index: 1;"><i class="fa-solid fa-server"></i></span>
+    <span class="omega-orbit__satellite" style="--omega-orbit-index: 2;"><i class="fa-solid fa-desktop"></i></span>
+    <span class="omega-orbit__satellite" style="--omega-orbit-index: 3;"><i class="fa-solid fa-puzzle-piece"></i></span>
+  </div>
+
+  <div class="omega-orbit__core">
+    <span class="omega-orbit__pulse"></span>
+    <i class="fa-solid fa-cube"></i>
+  </div>
+</div>

package/dist/assets/themes/base/_hero/orbit/script.js

@@ -0,0 +1,33 @@
+/**
+ * `orbit` — the reference hero animation's behavior (#441).
+ *
+ * The animation itself is pure CSS and needs no JS at all; this is the slot's
+ * third lane doing its ONE honest job: an offscreen orbit is CPU spent on
+ * nothing, so the loops park when the piece scrolls out of view and resume when
+ * it comes back. The §7 presence init calls this once per rendered instance
+ * with the wrapper element (`data-omega-hero="orbit"`), exactly like a
+ * section.js.
+ *
+ * No observer (an old browser, a headless render) leaves the CSS running, which
+ * is the state it ships in.
+ */
+export default (el) => {
+  if (typeof IntersectionObserver !== 'function') {
+    return;
+  }
+
+  const $animated = el.querySelectorAll('.omega-orbit__ring, .omega-orbit__satellite, .omega-orbit__pulse');
+
+  if (!$animated.length) {
+    return;
+  }
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      const state = entry.isIntersecting ? 'running' : 'paused';
+      $animated.forEach(($node) => { $node.style.animationPlayState = state; });
+    });
+  }, { threshold: 0 });
+
+  observer.observe(el);
+};

package/dist/assets/themes/base/_hero/orbit/style.scss

@@ -0,0 +1,133 @@
+// `orbit` — the reference hero animation's sheet (#441, the §7 omega:sections
+// lane picks it up like any section.scss).
+//
+// Token-only: every colour, shadow, radius and easing comes off the `--omega-*`
+// design system, so the visual re-inks with the brand instead of carrying a
+// palette of its own. Sizes are `em` off the block's own font-size, so a
+// consumer scales the whole thing with one declaration.
+//
+// The motion is TWO counter-rotations: the ring turns, each satellite turns
+// back by the same amount, so the icons stay upright while they travel. Under
+// `prefers-reduced-motion: reduce` both park and the piece reads as a still
+// diagram — the accessibility contract in docs/shared/theming.md.
+
+.omega-orbit {
+  --omega-orbit-size: 18em;
+  --omega-orbit-duration: 26s;
+
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: min(var(--omega-orbit-size), 100%);
+  aspect-ratio: 1;
+  margin-inline: auto;
+  font-size: 1rem;
+}
+
+.omega-orbit__ring {
+  position: absolute;
+  inset: 0;
+  border: 1px dashed var(--omega-line);
+  border-radius: 50%;
+  animation: omega-orbit-spin var(--omega-orbit-duration) linear infinite;
+}
+
+.omega-orbit__satellite {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: grid;
+  place-items: center;
+  width: 3em;
+  height: 3em;
+  margin: -1.5em 0 0 -1.5em;
+  color: var(--omega-accent);
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: 50%;
+  box-shadow: var(--omega-shadow-1);
+  // Out to the rim at this satellite's share of the circle, then back upright
+  // by whatever the ring has turned.
+  transform:
+    rotate(calc(90deg * var(--omega-orbit-index)))
+    translateY(calc(var(--omega-orbit-size) / -2))
+    rotate(calc(-90deg * var(--omega-orbit-index)));
+  animation: omega-orbit-counter var(--omega-orbit-duration) linear infinite;
+}
+
+.omega-orbit__core {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 6em;
+  height: 6em;
+  font-size: 1.6em;
+  color: var(--omega-accent-ink);
+  background: var(--omega-accent);
+  border-radius: var(--omega-radius-xl);
+  box-shadow: var(--omega-shadow-2);
+}
+
+// The core's breathing halo — a ring that grows and fades, never a fill, so
+// nothing behind the card shifts.
+.omega-orbit__pulse {
+  position: absolute;
+  inset: 0;
+  border: 1px solid var(--omega-accent);
+  border-radius: inherit;
+  animation: omega-orbit-pulse 3.2s var(--omega-ease) infinite;
+}
+
+@keyframes omega-orbit-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// The counter-turn: the same rotation, backwards, composed after the satellite's
+// own placement so the icon stays the right way up all the way round.
+@keyframes omega-orbit-counter {
+  from {
+    transform:
+      rotate(calc(90deg * var(--omega-orbit-index)))
+      translateY(calc(var(--omega-orbit-size) / -2))
+      rotate(calc(-90deg * var(--omega-orbit-index)));
+  }
+
+  to {
+    transform:
+      rotate(calc(90deg * var(--omega-orbit-index)))
+      translateY(calc(var(--omega-orbit-size) / -2))
+      rotate(calc(-90deg * var(--omega-orbit-index) - 360deg));
+  }
+}
+
+@keyframes omega-orbit-pulse {
+  from {
+    opacity: 0.55;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(1.35);
+  }
+}
+
+// Reduced motion: everything parks at its final state. The satellites keep the
+// placement transform from the base rule (the animations are what is dropped),
+// so the piece still reads as the diagram it is.
+@media (prefers-reduced-motion: reduce) {
+  .omega-orbit__ring,
+  .omega-orbit__satellite {
+    animation: none;
+  }
+
+  // The halo's own park carries its resting frame too — dropping the animation
+  // alone would leave it at the keyframe-less default (fully opaque, unscaled),
+  // which is a heavier ring than the loop ever draws.
+  .omega-orbit__pulse {
+    opacity: 0.55;
+    animation: none;
+  }
+}

package/dist/assets/themes/base/_includes/admin/sections/sidebar.html

@@ -0,0 +1,3 @@
+{% comment %} Section data: json-in-_includes (a consumer src/_includes/admin/sections/sidebar.json overrides the packaged one); markup is the shared app-sidebar {% endcomment %}
+{% assign data = site.data._includes.admin.sections.sidebar %}
+{% include global/sections/app-sidebar.html %}

package/dist/assets/themes/base/_includes/admin/sections/topbar.html

@@ -0,0 +1,3 @@
+{% comment %} Section data: json-in-_includes (a consumer src/_includes/admin/sections/topbar.json overrides the packaged one); markup is the shared app-topbar {% endcomment %}
+{% assign data = site.data._includes.admin.sections.topbar %}
+{% include global/sections/app-topbar.html %}

package/dist/assets/themes/base/_includes/backend/sections/sidebar.html

@@ -0,0 +1,3 @@
+{% comment %} Section data: json-in-_includes (a consumer src/_includes/backend/sections/sidebar.json overrides the packaged one); markup is the shared app-sidebar {% endcomment %}
+{% assign data = site.data._includes.backend.sections.sidebar %}
+{% include global/sections/app-sidebar.html %}

package/dist/assets/themes/base/_includes/backend/sections/topbar.html

@@ -0,0 +1,3 @@
+{% comment %} Section data: json-in-_includes (a consumer src/_includes/backend/sections/topbar.json overrides the packaged one); markup is the shared app-topbar {% endcomment %}
+{% assign data = site.data._includes.backend.sections.topbar %}
+{% include global/sections/app-topbar.html %}

package/dist/assets/themes/base/_includes/frontend/components/connection-card.html

@@ -0,0 +1,49 @@
+{% comment %}
+  One connection card on the account page — the row the connections section's
+  JS drives (`connection-<id>` is the element it looks for, and its absence is
+  what makes a configured provider render the unsupported warning instead).
+  Params: id, name, logo, first (the top card wears no hairline).
+
+  `logo` takes one of two shapes ([#793](https://github.com/Omega-JS-Stack/omega/issues/793)):
+  the NAME of a mark this package ships (`core/logos/brandmarks/original/<name>.svg`),
+  drawn inline by omega_logo — what the packaged defaults use — or a full URL,
+  drawn as an img. A value carrying a `/` or a `:` is a URL; anything else is a
+  mark name.
+{% endcomment %}
+<div id="connection-{{ include.id }}" class="{% unless include.first %}border-top{% endunless %} px-0 py-3 d-none">
+  <div class="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center justify-content-between gap-3">
+    <div class="d-flex align-items-center">
+      <div class="d-flex align-items-center justify-content-center me-3 flex-shrink-0 fa fa-3xl">
+        {% assign logoIsUrl = false %}
+        {% if include.logo contains '/' or include.logo contains ':' %}{% assign logoIsUrl = true %}{% endif %}
+        {% if logoIsUrl %}
+          <img src="{{ include.logo | omega_cachebreak }}" class="object-fit-contain" alt="{{ include.name }} Logo"/>
+        {% else %}
+          {% omega_logo include.logo %}
+        {% endif %}
+      </div>
+      <div>
+        <h6 class="mb-0">{{ include.name }}</h6>
+        <small class="text-muted d-block" id="{{ include.id }}-connection-description"></small>
+      </div>
+    </div>
+    <div class="text-start text-sm-end flex-shrink-0">
+      <div>
+        <form id="connection-form-{{ include.id }}" class="d-grid d-sm-inline-block" novalidate data-form-state="initializing" onsubmit="return false">
+          <input type="hidden" name="provider" value="{{ include.id }}">
+          <!-- Connect button -->
+          <button type="submit" class="btn btn-sm btn-adaptive" data-action="connect">
+            <i class="fa-solid fa-link fa-sm"></i>
+            <span class="button-text">Connect</span>
+          </button>
+          <!-- Disconnect button (hidden by default) -->
+          <button type="submit" class="btn btn-sm btn-outline-danger d-none" data-action="disconnect">
+            <i class="fa-solid fa-unlink fa-sm"></i>
+            <span class="button-text">Disconnect</span>
+          </button>
+        </form>
+        <small class="text-muted d-block mt-1" id="{{ include.id }}-connection-status"></small>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/assets/themes/base/_includes/frontend/components/post-card.html

@@ -0,0 +1,54 @@
+{% comment %}
+  Base post card: the shared blog grid unit (index, related posts,
+  category and tag pages all render the SAME card). UNBOXED (bronn pattern):
+  media panel, mono CATEGORY · DATE line, serif title, clamped excerpt.
+  Usage: {% include frontend/components/post-card.html post=post %}
+
+  Media contract: post.image === false → designed no-media panel (serif
+  monogram on dotgrid); post.image = "/path.jpg" → that image; absent →
+  the legacy /assets/images/blog/post-<id>/ convention via omega_post.
+{% endcomment %}
+{% assign _p = include.post %}
+<article class="omega-post-card">
+  <a href="{{ _p.url }}" class="omega-post-card__media{% if _p.post.image == false %} omega-post-card__media--pattern omega-dotgrid{% endif %}">
+    {%- if _p.post.image == false -%}
+      {%- assign _mono_source = _p.post.categories[0] | default: _p.post.title -%}
+      <span class="omega-post-card__monogram" aria-hidden="true">{{ _mono_source | slice: 0 | upcase }}</span>
+    {%- elsif _p.post.image -%}
+      <img src="{{ site.omega.placeholder.src }}" data-lazy="@src {{ _p.post.image }}" alt="{{ _p.post.title }}">
+    {%- else -%}
+      {%- omega_post _p.post.id, "image-tag", class="" -%}
+    {%- endif -%}
+  </a>
+
+  <div class="omega-post-card__body">
+    <div class="omega-post-card__eyebrow">
+      {% if _p.post.categories[0] %}
+        <a href="/blog/categories/{{ _p.post.categories[0] | slugify }}">{{ _p.post.categories[0] | omega_title_case }}</a>
+        <span>·</span>
+      {% endif %}
+      <time datetime="{{ _p.date | date_to_xmlschema }}">{{ _p.date | date: "%b %d, %Y" }}</time>
+
+      {% comment %} Generated-content tell (#208): sample content renders on the
+        real posts lane, so every listing row of a `generated` document says so.
+        Keyed off the frontmatter flag ALONE — no environment check, because
+        samples never inject into a production build. It rides the meta line
+        (#322): a chip beside the date, above the title, never a row of its
+        own. {% endcomment %}
+      {% if _p.generated %}<span class="omega-chip omega-generated-badge">TEST</span>{% endif %}
+    </div>
+
+    <h3 class="omega-post-card__title">
+      <a href="{{ _p.url }}">{{ _p.post.title }}</a>
+    </h3>
+
+    {%- capture _excerpt -%}{{ _p.post.description }}{%- endcapture -%}
+    {%- assign _excerpt = _excerpt | strip -%}
+    {%- if _excerpt == '' -%}
+      {%- capture _excerpt -%}{{ _p.content | strip_html | strip_newlines | truncate: 150 }}{%- endcapture -%}
+    {%- endif -%}
+    {% if _excerpt != '' %}
+      <p class="omega-post-card__excerpt">{{ _excerpt }}</p>
+    {% endif %}
+  </div>
+</article>

package/dist/assets/themes/base/_includes/frontend/sections/account-connections.html

@@ -0,0 +1,42 @@
+{% comment %}
+  The account page's connection cards, from ONE source: the brand's `connections`
+  config ([#793](https://github.com/Omega-JS-Stack/omega/issues/793)).
+
+  Every entry carrying a `name` and a `logo` draws a card. The framework's config
+  DEFAULTS carry both (plus a description) for the five providers @omega.js/backend
+  ships a module for, so a brand that writes `google: { enabled: true }` gets a
+  drawn card and can still overwrite any field. The layout's old `connections:`
+  frontmatter rows are gone: they shadowed the config, and their CDN logos 404.
+
+  A configured provider with no name+logo gets the connections section's
+  "unsupported connection" card at runtime, which says what is missing.
+  Visibility is the JS's alone: every card renders hidden and the section shows
+  the enabled ones.
+{% endcomment %}
+<div id="connections-list">
+  <!-- Loading state -->
+  <div id="connections-loading" class="text-center py-3">
+    <div class="spinner-border spinner-border-sm text-primary" role="status">
+      <span class="visually-hidden">Loading connections...</span>
+    </div>
+  </div>
+
+  <!-- No connections message (hidden by default) -->
+  <div id="connections-empty" class="text-center py-4 text-muted d-none">
+    <p>No connections are available right now.</p>
+  </div>
+
+  {% assign connectionCardDrawn = false %}
+  {% for entry in resolved.config.connections %}
+    {% assign providerId = entry[0] %}
+    {% assign provider = entry[1] %}
+    {% if provider.name and provider.logo %}
+      {% assign isFirstCard = false %}
+      {% unless connectionCardDrawn %}
+        {% assign isFirstCard = true %}
+        {% assign connectionCardDrawn = true %}
+      {% endunless %}
+      {% include frontend/components/connection-card.html id=providerId name=provider.name logo=provider.logo first=isFirstCard %}
+    {% endif %}
+  {% endfor %}
+</div>

package/dist/assets/themes/base/_includes/frontend/sections/account-section-header.html

@@ -0,0 +1,11 @@
+{% comment %}
+  Account section header — the admin page-header anatomy (icon chip + page
+  title + hairline) stamped INSIDE each hash-driven section, so the visible
+  page title tracks the active section with zero JS. Params: title, icon.
+{% endcomment %}
+<header class="page-header pb-3 mb-4 hairline-bottom">
+  <h2 class="page-title mb-0 d-flex align-items-center">
+    <span class="omega-icon-chip omega-icon-chip--neutral me-2"><i class="fa-solid fa-{{ include.icon }} fa-sm"></i></span>
+    {{ include.title }}
+  </h2>
+</header>