@omega.js/web 0.1.0

package/core/_includes/core/head.html

@@ -0,0 +1,423 @@
+<!-- Meta Variables -->
+{% assign page-viewport = "width=device-width, initial-scale=1.0, user-scalable=yes, shrink-to-fit=no" %}
+{%- iftruthy resolved.meta.viewport -%}
+  {% assign page-viewport = resolved.meta.viewport | omega_liquify %}
+{% endiftruthy %}
+
+{% assign page-referrer = "strict-origin-when-cross-origin" %}
+{%- iftruthy resolved.meta.referrer -%}
+  {% assign page-referrer = resolved.meta.referrer | omega_liquify %}
+{%- endiftruthy -%}
+
+{% assign page-keywords = "" %}
+{%- iftruthy resolved.meta.keywords -%}
+  {% assign page-keywords = resolved.meta.keywords | omega_liquify %}
+{%- endiftruthy -%}
+
+{% assign favicon-path = resolved.config.url | append: "/assets/images/favicon" %}
+{%- iftruthy resolved.config.favicon.path -%}
+  {% assign favicon-path = resolved.config.favicon.path %}
+{%- endiftruthy -%}
+
+<!-- The index posture (#564): `meta.index` is the ONE decision, resolved once
+     per page by the engine (engine.js `resolved`): the site default
+     `targets.web.meta.index`, then the layout's, then the page's own, then the
+     framework's automatic exclusions (drafts, the /test dev surfaces, /admin/,
+     redirect stubs, a listing's pages 2..N). sitemap.xml, pages.json and
+     llms.txt filter on that very same value, so no signal keeps a rule list of
+     its own and none of them can disagree. -->
+{% assign page-robots = "index" %}
+{%- if resolved.meta.index == false -%}
+  {% assign page-robots = "noindex" %}
+{%- endif -%}
+
+<!-- Redirect pages (#466): a page carrying `redirect.url` is not a page, it is
+     a forwarding URL, so the head says so three ways — the destination is the
+     canonical (this URL never competes with it in an index), the layout's own
+     `meta.index: false` already made it noindex, and a meta-refresh performs
+     the hop with JavaScript off. The refresh is emitted inside <noscript>
+     BELOW: with JS on, the redirect layout's own script does the hop and forwards the
+     querystring and the fragment, which a refresh cannot, so the two must
+     never race. A SITE-RELATIVE destination is absolutized here, since the
+     base-path pass only rewrites href/src attributes — and only that one: a
+     single leading slash. `//cdn.example.com/x` is already absolute and a
+     `mailto:` is not a path at all, so both ship verbatim. -->
+{% assign page-redirect = "" %}
+{%- iftruthy resolved.redirect.url -%}
+  {% capture page-redirect %}{{ resolved.redirect.url | omega_liquify | strip }}{% endcapture %}
+  {%- assign page-redirect-head1 = page-redirect | slice: 0, 1 -%}
+  {%- assign page-redirect-head2 = page-redirect | slice: 0, 2 -%}
+  {%- if page-redirect-head1 == "/" and page-redirect-head2 != "//" -%}
+    {% capture page-redirect %}{{ resolved.config.url }}{{ page-redirect }}{% endcapture %}
+  {%- endif -%}
+{%- endiftruthy -%}
+
+<!-- Assign Default Dynamic Variables -->
+<!-- (Asset lookups are computed by the engine: pageAssets.css / pageAssets.js
+     resolve this URL's content-hashed bundles from the asset manifest, and
+     layoutAssets.css / layoutAssets.js this page's layout chain. Each is a LIST
+     — every layer that ships one, in load order. A css entry carries `href`
+     for a hashed file, or `inline` for a sheet small enough to print in the
+     document instead of fetching, #767.) -->
+{% assign page-title = resolved.meta.title | omega_liquify %}
+{% assign page-description = resolved.meta.description | omega_liquify %}
+{% assign page-image = resolved.meta.image | omega_liquify %}
+{% assign page-og-type = "website" %}
+
+<!-- Assign Post Dynamic Variables -->
+{%- iftruthy resolved.post.id -%}
+  {% assign page-title = resolved.post.title | omega_liquify %}
+  {% assign page-description = resolved.post.description | omega_liquify %}
+  {% capture page-image %}{%- omega_post resolved.post.id, "image" -%}{% endcapture %}
+  {% assign page-og-type = "article" %}
+{% endiftruthy %}
+
+<!-- Assign Member Dynamic Variables -->
+{%- iftruthy resolved.member.id -%}
+  {% assign page-title = resolved.member.name | omega_liquify %}
+  {% assign page-description = resolved.member.description | omega_liquify %}
+  {% capture page-image %}{%- omega_member resolved.member.id, "image" -%}{% endcapture %}
+  {% assign page-og-type = "profile" %}
+{% endiftruthy %}
+
+<!-- Fallbacks: a value that LIQUIFIES to empty (nothing configured) still needs
+     the brand default — `default:` only sees the raw string (footer.html pattern) -->
+{% assign page-title = page-title | strip %}
+{% if page-title == '' or page-title == 'null' %}{% assign page-title = resolved.config.brand.name %}{% endif %}
+{% assign page-description = page-description | strip %}
+{% if page-description == '' or page-description == 'null' %}{% assign page-description = resolved.config.brand.description %}{% endif %}
+{% assign page-image = page-image | strip %}
+{% if page-image == '' or page-image == 'null' %}{% assign page-image = resolved.config.brand.images.social | default: resolved.config.brand.images.brandmark %}{% endif %}
+
+<!-- Resolve Image -->
+{% capture page-image %}{% omega_external page-image %}{% endcapture %}
+
+{% capture page-ie-script %}
+  <style media="screen">
+    .main-alert-outdated {
+      display: block !important;
+    }
+  </style>
+{% endcapture %}
+
+<!-- Prefetch and Preconnect -->
+<!-- First-party themes VENDOR their webfonts (D5) — no font-CDN warmup by
+     default. A theme that CDN-loads faces adds its own preconnect alongside
+     its stylesheet link via theme.head.content. -->
+<!-- <link rel="preconnect" href="https://cdn.jsdelivr.net"/> -->
+<!-- <link rel="preconnect" href="https://cdnjs.cloudflare.com"/> -->
+<!-- <link rel="dns-prefetch" href="https://cdn.jsdelivr.net"/> -->
+<!-- <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com"/> -->
+
+<!-- Google Adsense (conditionally loaded) -->
+{% iftruthy resolved.config.advertising.providers.adsense.client %}
+  <!-- Google AdSense -->
+  <!-- <link rel="preconnect" href="https://pagead2.googlesyndication.com" crossorigin/> -->
+  <!-- <link rel="dns-prefetch" href="https://pagead2.googlesyndication.com"/> -->
+
+  <!-- Additional AdSense domains if needed -->
+  <!-- <link rel="preconnect" href="https://googleads.g.doubleclick.net" crossorigin/> -->
+  <!-- <link rel="dns-prefetch" href="https://googleads.g.doubleclick.net"/> -->
+  <!-- <link rel="preconnect" href="https://tpc.googlesyndication.com" crossorigin/> -->
+  <!-- <link rel="dns-prefetch" href="https://tpc.googlesyndication.com"/> -->
+{% endiftruthy %}
+
+<!-- Chatsy (if used) -->
+{% iftruthy resolved.config.inbound.chat.providers.chatsy.enabled %}
+  <link rel="preconnect" href="https://chatsy.ai" crossorigin/>
+  <link rel="dns-prefetch" href="https://chatsy.ai"/>
+{% endiftruthy %}
+
+<!-- Analytics providers (#467): the three origins core/js/core/analytics-loader.js
+     injects a script from, each on the SAME gate the loader reads — a provider
+     with no id is never injected, so warming its origin would be a handshake
+     nobody spends. Consent gates the injection, not the warmup: a preconnect
+     sends no request and sets no cookie, and by the time a visitor accepts the
+     banner the connection is already open.
+     No crossorigin here: these are plain <script src> fetches, and an anonymous
+     preconnect opens a connection the tag cannot reuse. -->
+{% iftruthy resolved.config.analytics.providers.google.id %}
+  <link rel="preconnect" href="https://www.googletagmanager.com"/>
+  <link rel="dns-prefetch" href="https://www.googletagmanager.com"/>
+{% endiftruthy %}
+{% iftruthy resolved.config.analytics.providers.meta.id %}
+  <link rel="preconnect" href="https://connect.facebook.net"/>
+  <link rel="dns-prefetch" href="https://connect.facebook.net"/>
+{% endiftruthy %}
+{% iftruthy resolved.config.analytics.providers.tiktok.id %}
+  <link rel="preconnect" href="https://analytics.tiktok.com"/>
+  <link rel="dns-prefetch" href="https://analytics.tiktok.com"/>
+{% endiftruthy %}
+
+<!-- Firebase (#467): @omega.js/client boots the SDK the moment cloud.config
+     carries an apiKey (index.js `_resolveFirebaseConfig()?.apiKey`) — auth
+     refreshes the persisted token against securetoken, then the auth module
+     reads the account doc from firestore. Both are CORS fetches, so the warmup
+     IS anonymous or it is not the connection the SDK reuses. -->
+{% iftruthy resolved.config.cloud.config.apiKey %}
+  <link rel="preconnect" href="https://securetoken.googleapis.com" crossorigin/>
+  <link rel="dns-prefetch" href="https://securetoken.googleapis.com"/>
+  <link rel="preconnect" href="https://firestore.googleapis.com" crossorigin/>
+  <link rel="dns-prefetch" href="https://firestore.googleapis.com"/>
+{% endiftruthy %}
+
+<!-- Cloudflare Insights (if used) -->
+<!-- <link rel="preconnect" href="https://static.cloudflareinsights.com"/>
+<link rel="dns-prefetch" href="https://static.cloudflareinsights.com"/> -->
+
+<!-- Meta -->
+<meta charset="utf-8"/>
+
+<!-- Motion gate: reveal styles (core/css/motion) only hide content under this
+     stamp, so no-JS pages render fully visible. Inline + first so the stamp
+     beats first paint. -->
+<script>document.documentElement.setAttribute('data-omega-motion', 'true');</script>
+
+<!-- First-paint reveal starter (#763): the band that IS the first viewport
+     animates from the moment it is PARSED, not when the engine's observer
+     fires. Inline on purpose — a fetch here is the wait it exists to remove
+     (#749 measured ~2.0s of a 2,588ms mobile LCP on that wait).
+     The guard is PER ELEMENT, never per band: the parser hands the band over at
+     its OPEN tag, when it holds no copy yet, so a band-level "already handled"
+     flag stamped nothing and left the real work to DOMContentLoaded — which
+     waits for the deferred module bundles, exactly the wait this removes. Each
+     mutation batch collects the reveals it just saw (data-omega-inview IS the
+     guard) and coalesces TWO frames, so the browser paints the opacity-0 state
+     and the CSS transition really runs. The stagger is re-applied to the whole
+     container each time (motion.js applyStagger, same 60ms default): parse
+     order is document order, so an index never changes and re-setting the same
+     value restarts nothing. The engine's observeReveal skips a stamped element,
+     so its later boot does nothing in here, and reduced motion needs no guard:
+     the reveal lane only hides under no-preference. -->
+<script>
+(() => {
+  const HOOK = '[data-omega-first-paint] [data-omega-reveal]:not([data-omega-inview])'
+    + ', [data-omega-first-paint][data-omega-reveal]:not([data-omega-inview])';
+  const queue = new Set();
+  const collect = (node) => {
+    if (node.nodeType !== 1) { return; }
+    if (node.matches(HOOK)) { queue.add(node); }
+    node.querySelectorAll(HOOK).forEach((el) => queue.add(el));
+  };
+  let frame = 0;
+  const schedule = () => {
+    if (frame || !queue.size) { return; }
+    // TWO frames on purpose: the first one paints what has been collected at
+    // opacity 0 (a transition needs that starting state to have been rendered),
+    // the second stamps it. Anything the parser adds in between rides the next
+    // batch, so every element gets its own painted frame first.
+    frame = requestAnimationFrame(() => {
+      const batch = [...queue];
+      queue.clear();
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        new Set(batch.map((el) => el.closest('[data-omega-first-paint]'))).forEach((band) => {
+          if (!band) { return; }
+          band.querySelectorAll('[data-omega-reveal-stagger]').forEach((parent) => {
+            const step = Number(parent.getAttribute('data-omega-reveal-stagger')) || 60;
+            parent.querySelectorAll('[data-omega-reveal]').forEach((el, index) => {
+              el.style.setProperty('--omega-reveal-delay', `${index * step}ms`);
+            });
+          });
+        });
+        batch.forEach((el) => el.setAttribute('data-omega-inview', 'true'));
+        schedule();
+      });
+    });
+  };
+  const observer = new MutationObserver((records) => {
+    records.forEach((record) => record.addedNodes.forEach(collect));
+    schedule();
+  });
+  observer.observe(document.documentElement, { childList: true, subtree: true });
+  // The backstop, for anything the parser was still emitting at the last frame.
+  document.addEventListener('DOMContentLoaded', () => {
+    observer.disconnect();
+    collect(document.documentElement);
+    schedule();
+  });
+})();
+</script>
+
+<!-- First-paint script (#585): the reveal starter, in its own tiny bundle.
+     A deferred module, so it downloads in parallel with the stylesheet and runs
+     the moment the DOM is parsed — ahead of the main bundle's module in the
+     foot, and independent of images, fonts and firebase. Booting reveals from
+     the main bundle meant the hero stayed blank for the whole JS download.
+     core/js/first-paint.js is the seam; keep it small. -->
+<script type="module" src="{{ assetManifest.js.firstPaint }}"></script>
+
+<meta name="viewport" content="{{ page-viewport }}"/>
+<meta name="HandheldFriendly" content="True"/>
+<meta name="MobileOptimized" content="320"/>
+<meta name="generator" content="OMEGA"/>
+<meta name="author" content="{{ resolved.config.brand.name }}"/>
+<meta name="copyright" content="{{ site.characters.copyright }} {{ site.omega.date.year }} {{ resolved.config.brand.name }}">
+
+<!-- Referrer -->
+<meta name="referrer" content="{{ page-referrer }}"/>
+
+<!-- Canonical (a redirect page's is its DESTINATION, #466) -->
+<link rel="canonical" href="{% if page-redirect != '' %}{{ page-redirect }}{% else %}{{ resolved.config.url }}{{ page.url }}{% endif %}"/>
+
+<!-- Meta refresh: the no-JS half of a redirect page. In <noscript> on purpose
+     — the redirect layout's script forwards the querystring and the fragment,
+     so it must win whenever it can run at all. -->
+{%- if page-redirect != '' -%}
+  <noscript><meta http-equiv="refresh" content="0; url={{ page-redirect }}"/></noscript>
+{%- endif -%}
+
+<!-- Robots -->
+<meta name="robots" content="{{ page-robots }}"/>
+
+<!-- Keywords -->
+<meta name="keywords" content="{{ page-keywords }}"/>
+
+<!-- Web app manifest (part of the minted favicon set — static-assets channel;
+     no minted set → no link, a virgin brand serves zero dangling refs) -->
+{% if assetManifest.favicons %}
+  <link rel="manifest" href="{{ favicon-path | append: '/site.webmanifest' | omega_cachebreak }}"/>
+{% endif %}
+
+<!-- Title -->
+<title>{{ page-title }}</title>
+<meta name="twitter:title" content="{{ page-title }}"/>
+<meta property="og:title" content="{{ page-title }}"/>
+
+<!-- Description -->
+<meta name="description" content="{{ page-description }}"/>
+<meta name="twitter:description" content="{{ page-description }}"/>
+<meta property="og:description" content="{{ page-description }}"/>
+
+<!-- Image -->
+<meta name="twitter:image" content="{{ page-image }}"/>
+<meta property="og:image" content="{{ page-image }}"/>
+<meta property="og:image:width" content="{{ resolved.meta.og_image_width | default: '1200' }}"/>
+<meta property="og:image:height" content="{{ resolved.meta.og_image_height | default: '630' }}"/>
+
+<!-- OG: Twitter -->
+<meta name="twitter:card" content="{{ resolved.meta.twitter_card | default: 'summary_large_image' }}"/>
+<meta name="twitter:site" content="@{{ resolved.config.socials.twitter.handle | default: resolved.config.socials.twitter }}"/>
+<meta name="twitter:widgets:theme" content="light"/>
+
+<!-- OG: Facebook / Open Graph -->
+<meta property="og:url" content="{{ resolved.config.url }}{{ page.url }}"/>
+<meta property="og:type" content="{{ page-og-type }}"/>
+{% assign page-translation-default = resolved.config.translation.default | default: 'en' %}
+<meta property="og:locale" content="{{ ogLocale }}"/>
+<meta property="og:site_name" content="{{ resolved.config.brand.name }}"/>
+
+<!-- Additional SEO Tags -->
+<meta property="article:author" content="{{ resolved.config.brand.name }}"/>
+<meta property="article:publisher" content="{{ resolved.config.url }}"/>
+<meta name="twitter:creator" content="@{{ resolved.config.socials.twitter.handle | default: resolved.config.socials.twitter }}"/>
+{%- iftruthy resolved.post.id -%}
+<meta property="article:published_time" content="{{ page.date | date_to_xmlschema }}"/>
+<meta property="article:modified_time" content="{{ site.time | date_to_xmlschema }}"/>
+{%- endiftruthy -%}
+
+<!-- Main Feed -->
+<link href="{{ resolved.config.url }}/feeds/posts.xml" type="application/atom+xml" rel="alternate" title="{{ resolved.config.brand.name }} Feed"/>
+
+<!-- Language Tags -->
+<link rel="alternate" href="{{ resolved.config.url }}{{ page.url }}" hreflang="x-default"/>
+<link rel="alternate" href="{{ resolved.config.url }}{{ page.url }}" hreflang="{{ page-translation-default }}"/>
+
+<!-- Favicon — exactly the minted set (manager assets service → .omega/assets/favicon,
+     bridged to /assets/images/favicon by the static-assets channel) -->
+{% if assetManifest.favicons %}
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ favicon-path | append: '/apple-touch-icon.png' | omega_cachebreak }}"/>
+  <link rel="icon" type="image/png" sizes="32x32" href="{{ favicon-path | append: '/favicon-32x32.png' | omega_cachebreak }}"/>
+  <link rel="icon" type="image/png" sizes="16x16" href="{{ favicon-path | append: '/favicon-16x16.png' | omega_cachebreak }}"/>
+  <link rel="shortcut icon" type="image/x-icon" href="{{ favicon-path | append: '/favicon.ico' | omega_cachebreak }}"/>
+{% endif %}
+<meta name="theme-color" content="{{ resolved.config.favicon.theme-color }}"/>
+
+<!-- Browser Support -->
+<!--[if lte IE 11]>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
+  {{ page-ie-script }}
+<![endif]-->
+
+<!-- Font preloads: the first-paint faces the asset lane picked off the
+     compiled sheet's @font-face rules (#765) — fetched in parallel with the
+     stylesheet so glyphs are ready by the time the layout paints (eliminates
+     the system-font flash on cold cache). crossorigin is required for font
+     preloads per spec. -->
+{% for font in assetManifest.fontPreloads %}
+<link rel="preload" href="{{ font }}" as="font" type="font/woff2" crossorigin/>
+{% endfor %}
+
+<!-- CSS Bundles: content-hashed by the asset pipeline, mapped via the manifest.
+     The main sheet does NOT render-block (#750): the asset lane extracts its
+     first-paint subset (tokens, shell chrome, nav, hero) and it is inlined
+     here, then the full sheet loads through rel=preload and swaps itself into
+     the cascade on load. The <link> keeps its document position, so cascade
+     order never moves — the layout and page sheets below still win over it.
+     <noscript> carries the plain sheet for a visitor with JS off.
+     Note: media="print" onload="this.media='all'" does NOT improve performance.
+     A dev build extracts nothing (that lane never purges either), so there the
+     head keeps the plain blocking link — no flash while you work. The dev
+     manifest carries '' and Liquid's `if` reads '' as true, hence iftruthy. -->
+{% iftruthy assetManifest.css.critical %}
+<style>{{ assetManifest.css.critical }}</style>
+<link rel="preload" as="style" href="{{ assetManifest.css.main }}" onload="this.onload=null;this.rel='stylesheet'"/>
+<noscript><link rel="stylesheet" type="text/css" href="{{ assetManifest.css.main }}"/></noscript>
+{% endiftruthy %}
+{% iffalsy assetManifest.css.critical %}
+<link rel="stylesheet" type="text/css" href="{{ assetManifest.css.main }}"/>
+{% endiffalsy %}
+
+<!-- Then this page's LAYOUT sheets: one per layout in the chain, outermost
+     first (css/layouts/<layout>.scss). A sheet under the lane's byte budget
+     arrives as css TEXT and prints here as a <style> block instead of a link
+     (#767): the request queues behind the HTML and the font preloads, which
+     cost about a second of first paint however small the sheet is. The block
+     stands exactly where the link stood, so the cascade never moves. -->
+{% for layoutCss in layoutAssets.css %}
+  {% if layoutCss.inline %}<style>{{ layoutCss.inline }}</style>
+  {% else %}<link rel="stylesheet" type="text/css" href="{{ layoutCss.href }}"/>
+  {% endif %}
+{% endfor %}
+
+<!-- Then the page-specific bundles: EVERY layer that ships a sheet for this
+     URL, in layer order — core, then the theme, then the consumer (#624). One
+     rule, the same one the page JS follows: nothing replaces anything, the
+     later sheet decorates the earlier one by winning the cascade. A layer with
+     no sheet for this path simply contributes nothing. -->
+{% for pageCss in pageAssets.css %}
+  {% if pageCss.inline %}<style>{{ pageCss.inline }}</style>
+  {% else %}<link rel="stylesheet" type="text/css" href="{{ pageCss.href }}"/>
+  {% endif %}
+{% endfor %}
+
+<!-- Brand accent tokens: derived from brand.color at build (src/brand-tokens.js);
+     emitted AFTER the bundles so the ramps win the cascade over the token sheet's
+     placeholders. Two ramps — light plus a legibility-lifted dark variant —
+     stamped with the SAME plumbing as the token sheet (OS preference carries,
+     the appearance.js data-bs-theme stamp beats it both ways). Values are
+     regenerated from parsed channels — config strings never pass through
+     verbatim. -->
+{% iftruthy site.brandTokens %}
+{% capture brand-ramp-light %}--omega-accent:{{ site.brandTokens.accent }};--omega-accent-hover:{{ site.brandTokens.accentHover }};--omega-accent-active:{{ site.brandTokens.accentActive }};--omega-accent-subtle:{{ site.brandTokens.accentSubtle }};--omega-accent-ink:{{ site.brandTokens.accentInk }};--omega-accent-ring:{{ site.brandTokens.accentRing }}{% endcapture %}
+{% capture brand-ramp-dark %}--omega-accent:{{ site.brandTokens.dark.accent }};--omega-accent-hover:{{ site.brandTokens.dark.accentHover }};--omega-accent-active:{{ site.brandTokens.dark.accentActive }};--omega-accent-subtle:{{ site.brandTokens.dark.accentSubtle }};--omega-accent-ink:{{ site.brandTokens.dark.accentInk }};--omega-accent-ring:{{ site.brandTokens.dark.accentRing }}{% endcapture %}
+<style>
+  :root { {{ brand-ramp-light }} }
+  @media (prefers-color-scheme: dark) { :root { {{ brand-ramp-dark }} } }
+  :root[data-bs-theme='dark'] { {{ brand-ramp-dark }} }
+  :root[data-bs-theme='light'] { {{ brand-ramp-light }} }
+</style>
+{% endiftruthy %}
+
+<!-- Style - Scripts are Disabled -->
+<noscript>
+  {{ page-ie-script }}
+</noscript>
+
+<!-- Theme - Injected head -->
+{{ resolved.config.theme.head.content | omega_content_format }}
+
+<!-- Page - Injected head -->
+{{ resolved.head.content | omega_content_format }}

package/core/_includes/core/pricing/price-per-unit.html

@@ -0,0 +1,33 @@
+{% comment %}
+  Per-unit pricing math — shared by every theme's pricing layout. Jekyll
+  includes share the caller's variable scope, so the assigns land in the
+  calling template.
+
+  In:  include.plan — a composed resolved.pricing.plans item
+       resolved.pricing.price_per_unit — consumer knob { enabled, feature_id, label }
+
+  Out: monthly_price_per_unit — $/unit at monthly billing (nil unless computable)
+       annual_price_per_unit  — $/unit at annual billing, monthly-equivalent
+
+  Only computes for paid plans whose target feature resolves to a usable
+  positive number (guards the divided_by). Re-assigned on every call so loop
+  iterations never see a previous plan's values.
+{% endcomment %}
+
+{% assign monthly_price_per_unit = nil %}
+{% assign annual_price_per_unit = nil %}
+{% assign _ppu_value = nil %}
+
+{% if include.plan.prices.monthly > 0 %}
+  {% for _ppu_feature in include.plan.features %}
+    {% if _ppu_feature.id == resolved.pricing.price_per_unit.feature_id %}
+      {% assign _ppu_value = _ppu_feature.value %}
+      {% break %}
+    {% endif %}
+  {% endfor %}
+  {% if _ppu_value and _ppu_value > 0 %}
+    {% assign monthly_price_per_unit = include.plan.prices.monthly | times: 1.0 | divided_by: _ppu_value | round: 2 %}
+    {% assign _ppu_annual_monthly = include.plan.prices.annually | divided_by: 12.0 %}
+    {% assign annual_price_per_unit = _ppu_annual_monthly | divided_by: _ppu_value | round: 2 %}
+  {% endif %}
+{% endif %}

package/core/_includes/core/showcase/entry-body.html

@@ -0,0 +1,94 @@
+{% comment %}
+  One resolved library entry's BODY (#540): every demo variant STACKED — its
+  label, an Open-frame link, the embedded frame, then its options — followed by
+  the args reference the entry's own schema generates.
+
+  Rendered by `defaults/showcase/entry.html`, the ONE generator behind both
+  galleries (#602): a section entry and a component entry are the same page
+  wearing kind-aware urls, so neither kind can drift into documenting itself
+  differently. The caller owns the HEAD above this.
+
+  Docs display stays RAW: argsJson, defaultsJson and the descriptions arrive
+  HTML-escaped from the collector, printed verbatim, never liquified. The
+  frames are #463's — same lazy loading, same min-height fallback, same
+  `data-omega-showcase-frame` autosize hook. Their URLs come off the variant
+  itself (#602): the library computes each kind's gallery paths, so this
+  include never composes one and cannot disagree with the frame page's own
+  permalink.
+
+  In:  include.entry      — the sectionLibrary entry to render
+       include.prefix     — panel id prefix ('variant-'), the rail's anchor
+                            target for each variant
+       include.heading    — tag for the variant/Args headings, so the document
+                            outline stays ordered under either caller's head
+       include.subheading — tag one level under it (the Options label)
+{% endcomment %}
+{% assign showcase_entry = include.entry %}
+
+{% if showcase_entry.demo.size > 0 %}
+  <div data-omega-showcase-panels>
+    {% for variant in showcase_entry.demo %}
+      {% comment %} scroll-margin clears the fixed masthead, so a rail anchor
+      lands on the variant's own label, not behind the nav. {% endcomment %}
+      <section id="{{ include.prefix }}{{ variant.slug }}" class="mb-4" style="scroll-margin-top: 5.5rem;" data-omega-showcase-variant="{{ variant.slug }}">
+        <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
+          <span class="badge text-bg-secondary">demo</span>
+          <{{ include.heading }} class="h5 mb-0">{{ variant.label }}</{{ include.heading }}>
+          <a href="{{ variant.url }}" class="small ms-auto text-decoration-none" target="_blank" rel="noopener">Open frame &rarr;</a>
+        </div>
+        <iframe
+          class="w-100 border rounded"
+          src="{{ variant.url }}"
+          title="{{ variant.label }}"
+          loading="lazy"
+          style="min-height: 640px;"
+          data-omega-showcase-frame></iframe>
+        <{{ include.subheading }} class="h6 text-uppercase text-muted mt-4 mb-2">Options</{{ include.subheading }}>
+        {% if variant.argsJson != "" %}
+          {% comment %} argsJson arrives HTML-escaped from the collector — print verbatim {% endcomment %}
+          <pre class="border rounded p-3 mb-0 small overflow-auto"><code>{{ variant.argsJson }}</code></pre>
+        {% else %}
+          <p class="text-muted small mb-0">No args — the entry's own defaults, as they ship.</p>
+        {% endif %}
+      </section>
+    {% endfor %}
+  </div>
+{% else %}
+  <p class="text-muted">
+    No demo data: this entry documents its args only (lookup-driven entries render from live site content, which a gallery page can't fabricate).
+  </p>
+{% endif %}
+
+<!-- ═══ Args reference (generated from the schema) ═══ -->
+<{{ include.heading }} class="h5 border-top pt-4 mb-3">Args</{{ include.heading }}>
+{% if showcase_entry.argsTable.size > 0 %}
+  <div class="table-responsive">
+    <table class="table align-middle">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Type</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for row in showcase_entry.argsTable %}
+          <tr>
+            <td><code>{{ row.name }}</code></td>
+            <td>{% if row.type != "" %}<code>{{ row.type }}</code>{% else %}<span class="text-muted">any</span>{% endif %}</td>
+            <td class="small">{{ row.description }}</td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+{% else %}
+  <p class="text-muted">No declared args.</p>
+{% endif %}
+
+{% if showcase_entry.defaultsJson != "" %}
+  <details class="mt-2">
+    <summary class="fw-bold">Defaults</summary>
+    <pre class="border rounded p-3 mt-2 small overflow-auto"><code>{{ showcase_entry.defaultsJson }}</code></pre>
+  </details>
+{% endif %}

package/core/_includes/core/showcase/index-body.html

@@ -0,0 +1,43 @@
+{% comment %}
+  A gallery INDEX's listing (#602) — one row per resolved entry of ONE kind,
+  grouped by its category folder, linking that entry's own page. The two
+  galleries mirror each other, so this is ONE home: a listing that grows a
+  column grows it on both, and neither can drift into describing its library
+  differently.
+
+  Auto-generated from the resolved library: a new `_sections`/`_components`
+  folder appears here with zero authoring, and each row chips the layer that
+  owns it (a consumer override says `consumer`).
+
+  Development-only surface (the engine gates the whole `defaults/showcase/`
+  dir), so it reads the sectionLibrary global directly. Neutral Bootstrap
+  vocabulary, like the pages around it.
+
+  In:  include.kind — which library to list ('section' / 'component')
+{% endcomment %}
+{% for group in sectionLibrary.groups %}
+  {% if group.kind == include.kind %}
+    <div class="d-flex align-items-baseline gap-2 border-bottom pb-2 mb-3">
+      <h2 class="h5 mb-0 text-capitalize">{{ group.kind }}s</h2>
+      <code class="text-muted">{{ group.category }}/</code>
+    </div>
+
+    <ul class="list-unstyled mb-4">
+      {% for entry in group.entries %}
+        <li class="border-bottom py-3">
+          <a href="{{ entry.url }}" class="d-flex align-items-center gap-2 text-decoration-none mb-1">
+            <code>{{ entry.id }}</code>
+            <span class="badge text-bg-secondary ms-auto">{{ entry.source }}</span>
+          </a>
+          {% comment %} description arrives HTML-escaped from the collector — print verbatim {% endcomment %}
+          <p class="small text-muted mb-1">{{ entry.description | truncate: 200 }}</p>
+          <p class="small text-body-secondary mb-0">
+            {{ entry.argsTable.size }} args
+            · {{ entry.demo.size }} demo{% if entry.demo.size != 1 %}s{% endif %}
+            {% if entry.inherit.size > 0 %}· inherits {{ entry.inherit | join: ", " }}{% endif %}
+          </p>
+        </li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+{% endfor %}

package/core/_includes/core/showcase/nav.html

@@ -0,0 +1,60 @@
+{% comment %}
+  A gallery's navigation rail (#540) — the resolved library as a SIDEBAR: every
+  entry OF ONE KIND, grouped the way that gallery's index groups them, and the
+  current entry's demo variants nested under it as ANCHOR JUMPS to that
+  variant's frame (Ian's QA call: the entry page stacks every variant, so the
+  rail scrolls to one — no tab machinery, no reload).
+
+  Kind-scoped (#602): the two galleries are separate libraries in separate url
+  spaces, so a component rail lists components and a section rail lists
+  sections. One home for both — and for each gallery's index and entry pages —
+  so a rail that grows a group grows it everywhere it appears.
+
+  The sticky offset clears the site masthead: classy's nav is `position:
+  fixed`, and a rail pinned at the viewport top slid under it — taking the
+  back link with it, which is what made that link look dead.
+
+  Development-only surface (the engine gates the injection), so it reads the
+  sectionLibrary global directly. Neutral Bootstrap vocabulary, like the pages
+  around it — this renders under whichever theme is active.
+
+  In:  include.kind         — which library this rail is ('section'/'component')
+       include.home         — that library's index url
+       include.label        — that library's name, for the landmark + back link
+       include.current      — the entry id the page is showing ('' on the index)
+       include.variants     — that entry's demo variants (empty on the index)
+{% endcomment %}
+<nav class="position-sticky pb-3" style="top: 5.5rem; max-height: calc(100vh - 7rem); overflow-y: auto;" aria-label="{{ include.label }}">
+  <a href="{{ include.home }}" class="d-block small text-decoration-none mb-3">&larr; {{ include.label }}</a>
+
+  {% for group in sectionLibrary.groups %}
+    {% if group.kind == include.kind %}
+      <p class="text-uppercase small fw-bold text-muted mb-1">{{ group.category }}/</p>
+      <ul class="list-unstyled mb-3">
+        {% for item in group.entries %}
+          {% assign is_current = false %}
+          {% if item.id == include.current %}
+            {% assign is_current = true %}
+          {% endif %}
+          <li>
+            <a href="{{ item.url }}"
+              class="d-block small py-1 text-decoration-none{% if is_current %} fw-bold{% else %} text-body-secondary{% endif %}"
+              {% if is_current %}aria-current="page"{% endif %}>{{ item.id }}</a>
+
+            {% comment %} The current entry's variants are ANCHOR JUMPS: every
+            frame is on the page already, so a rail item scrolls to its own. {% endcomment %}
+            {% if is_current and include.variants.size > 0 %}
+              <ul class="list-unstyled border-start ms-1 ps-2 mb-2">
+                {% for variant in include.variants %}
+                  <li>
+                    <a href="#variant-{{ variant.slug }}" class="d-block small py-1 text-decoration-none text-body-secondary">{{ variant.label }}</a>
+                  </li>
+                {% endfor %}
+              </ul>
+            {% endif %}
+          </li>
+        {% endfor %}
+      </ul>
+    {% endif %}
+  {% endfor %}
+</nav>