@omega.js/extension 0.1.0

package/dist/assets/themes/newsflash/css/pages/404/index.scss

@@ -0,0 +1,79 @@
+// Newsflash Theme — 404 page-specific CSS
+// The theme forks no 404 layout: the BASE page renders (full-bleed
+// typographic moment on the dotfield, full chrome: omega-404 markup) and
+// this file dresses it editorial: stroked serif numerals, ink-framed URL
+// chip, rule-underlined trail links. The page-css lane carries the FULL
+// block styling (classy's 404 css lives in ITS page lane, not this chain).
+// Compiles standalone, so it pulls in the theme tokens + mixins via
+// loadPaths.
+@use 'config' as *;
+@import 'css/base/mixins';
+
+.omega-404 {
+  display: flex;
+  align-items: center;
+  min-height: calc(100vh - 12rem);
+  padding-block: 4rem;
+}
+
+// Oversized stroked serif numerals; the middle digit inks in vermilion
+.omega-404__code {
+  font-family: $nf-font-display;
+  font-style: italic;
+  font-weight: 900;
+  font-size: clamp(6rem, 18vw, 11rem);
+  letter-spacing: -0.04em;
+  line-height: 0.95;
+  color: transparent;
+  -webkit-text-stroke: 2px var(--omega-ink);
+
+  em {
+    font-style: italic;
+    -webkit-text-stroke-color: var(--omega-accent);
+  }
+}
+
+.omega-404__line {
+  font-family: $nf-font-display;
+  font-size: 1.375rem;
+  color: var(--bs-secondary-color);
+  max-width: 34rem;
+  margin: 1rem auto 1.75rem;
+  text-wrap: balance;
+
+  em {
+    color: var(--omega-accent);
+  }
+}
+
+// The URL chip: a framed paper slip
+.omega-404__url {
+  background: var(--bs-card-bg);
+  border-radius: 50rem;
+  @include nf-border();
+}
+
+.omega-404__actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 1.75rem;
+}
+
+.omega-404__trail {
+  margin-top: 2rem;
+
+  a {
+    color: var(--bs-secondary-color);
+    text-decoration: none;
+    border-bottom: 1.5px solid var(--omega-line-strong);
+    transition: $nf-transition;
+
+    &:hover {
+      color: var(--omega-accent);
+      border-bottom-color: var(--omega-accent);
+    }
+  }
+}

package/dist/assets/themes/newsflash/css/pages/blog/[slug].scss

@@ -0,0 +1,186 @@
+// Newsflash Theme — Blog post page-specific CSS
+// The editorial article treatment for
+// (_layouts/frontend/pages/blog/post.html): reading-progress
+// bar, drop cap, serif crossheads with the vermilion dash, framed in-content
+// images, and the centered pullquote. NOTE: [slug] wildcard filename (spec §7)
+// — the key blog/[slug] styles every /blog/<slug> post page, no frontmatter.
+// Compiles standalone, so it pulls in the theme tokens + mixins via loadPaths.
+@use 'config' as *;
+@import 'css/base/mixins';
+
+// ============================================
+// Reading progress — fixed vermilion rule across the very top
+// ============================================
+// Sits above the sticky masthead (z-index 1030); driven by pages/blog/post.js.
+.newsflash-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  z-index: 1040;
+  pointer-events: none;
+  background: transparent;
+
+  span {
+    display: block;
+    height: 100%;
+    background: var(--omega-accent);
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+}
+
+// ============================================
+// Article hero — wide cinematic frame
+// ============================================
+.newsflash-frame--article {
+  aspect-ratio: 21 / 10;
+
+  img {
+    height: 100%;
+    // Lift the framework's generic .blog-post-image cap (max-height: 480px in
+    // the main bundle) — the 21/10 frame is the size authority here, and the
+    // cap leaves a blank strip inside the frame on wide viewports.
+    max-height: none;
+  }
+}
+
+// ============================================
+// Article body — the editorial reading column
+// ============================================
+.blog-post-content {
+  font-size: 1.13rem;
+  line-height: 1.78;
+
+  p {
+    margin-bottom: 1.5em;
+  }
+
+  // Drop cap on the opening paragraph
+  > p:first-of-type::first-letter {
+    font-family: $nf-font-display;
+    font-weight: 600;
+    font-size: 4.2rem;
+    line-height: 0.82;
+    color: var(--omega-accent);
+    float: left;
+    padding: 8px 12px 0 0;
+  }
+
+  // Serif crossheads with the vermilion dash
+  h2, h3 {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    font-size: 1.7rem;
+    letter-spacing: -0.014em;
+    line-height: 1.25;
+    margin: 2em 0 0.8em;
+
+    &::before {
+      content: "";
+      width: 0.55em;
+      height: 0.18em;
+      background: var(--omega-accent);
+      border-radius: 50rem;
+      flex: none;
+    }
+  }
+
+  h3 {
+    font-size: 1.35rem;
+  }
+
+  // In-content images get the editorial frame
+  img {
+    border: var(--nf-border);
+    border-radius: $nf-radius;
+  }
+
+  figcaption {
+    font-size: 0.78rem;
+    color: var(--bs-secondary-color);
+    padding-top: 10px;
+    text-align: right;
+  }
+
+  // Pullquote — centered italic serif with the oversized quote mark
+  blockquote {
+    margin: 2.4em 0;
+    padding: 0 1em;
+    text-align: center;
+    border: 0;
+
+    &::before {
+      content: "\201C";
+      display: block;
+      font-family: $nf-font-display;
+      font-weight: 900;
+      font-size: 4rem;
+      line-height: 0.6;
+      color: var(--omega-accent);
+      margin-bottom: 0.25em;
+    }
+
+    p {
+      font-family: $nf-font-display;
+      font-style: italic;
+      font-weight: 550;
+      font-size: clamp(1.4rem, 2.6vw, 1.9rem);
+      letter-spacing: -0.01em;
+      line-height: 1.3;
+      margin: 0;
+    }
+
+    cite {
+      display: block;
+      margin-top: 1.1em;
+      font-family: $font-family-sans-serif;
+      font-style: normal;
+      font-weight: 700;
+      font-size: 0.78rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--bs-secondary-color);
+    }
+  }
+
+  // List markers pick up the accent
+  li::marker {
+    color: var(--omega-accent);
+  }
+
+  // Code blocks read as framed paper-2 slabs
+  pre {
+    padding: 1rem 1.25rem;
+    background: var(--omega-surface-2);
+    border: 1px solid var(--omega-line);
+    border-radius: $nf-radius-sm;
+  }
+}
+
+// Share buttons — monochrome ink chips (the editorial page keeps one accent);
+// the core palette is css-var-owned, so re-valuing the btn vars is enough.
+.social-share-btn {
+  --share-color: transparent;
+  --bs-btn-color: var(--omega-ink);
+  --bs-btn-border-color: var(--omega-line-strong);
+  --bs-btn-hover-bg: var(--omega-ink);
+  --bs-btn-hover-border-color: var(--omega-ink);
+  --bs-btn-hover-color: var(--omega-ground);
+  --bs-btn-active-bg: var(--omega-ink);
+  --bs-btn-active-border-color: var(--omega-ink);
+  --bs-btn-active-color: var(--omega-ground);
+}
+
+// Tag row sits on a hairline rule
+.newsflash-tag-row {
+  border-top: var(--nf-border);
+}
+
+@media (max-width: 767.98px) {
+  .blog-post-content {
+    font-size: 1.05rem;
+  }
+}

package/dist/assets/themes/newsflash/css/pages/blog/index.scss

@@ -0,0 +1,17 @@
+// Newsflash Theme — Blog index page-specific CSS
+// Small accents for the newspaper front page
+// (_layouts/frontend/pages/blog/index.html).
+// Compiles standalone, so it pulls in the theme tokens + mixins via loadPaths.
+@use 'config' as *;
+@import 'css/base/mixins';
+
+// The lead-story splash stays planted — only its framed image zooms
+.newsflash-story-card--lead {
+  &:hover {
+    transform: none;
+  }
+
+  .newsflash-frame {
+    aspect-ratio: 16 / 10;
+  }
+}

package/dist/assets/themes/newsflash/css/pages/index.scss

@@ -0,0 +1,157 @@
+// Newsflash Theme — Homepage page-specific CSS
+// Styles the newspaper front-page fork (_layouts/frontend/pages/index.html).
+// Fork markup wears theme-prefixed BEM (newsflash-hero, newsflash-feed,
+// newsflash-rail, …); Bootstrap vocabulary (.card/.badge) stays as-is.
+// Compiles standalone, so it pulls in the theme tokens + mixins via
+// loadPaths.
+@use 'config' as *;
+@import 'css/base/mixins';
+
+// ============================================
+// Hero — the front-page lead
+// ============================================
+.newsflash-hero {
+  padding-top: clamp(2.5rem, 5vw, 4rem);
+}
+
+.newsflash-hero__title {
+  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
+  font-weight: 550;
+  letter-spacing: -0.022em;
+  line-height: 1.04;
+}
+
+.newsflash-hero__art {
+  .newsflash-frame {
+    aspect-ratio: 4 / 3;
+    @include nf-shadow-pop();
+  }
+
+  .newsflash-hero__chip {
+    position: absolute;
+    top: 18px;
+    left: -14px;
+    transform: rotate(-4deg);
+    z-index: 2;
+  }
+}
+
+// Decorative cover art (pre-content fallback when the site has no posts yet):
+// vermilion-to-orange wash with a blue corner glow — pure CSS, no asset.
+.newsflash-hero__cover {
+  background:
+    radial-gradient(110% 90% at 88% 8%, #FFB36B 0%, rgba(255, 179, 107, 0) 52%),
+    radial-gradient(120% 110% at 8% 95%, var(--nf-blue) 0%, rgba(39, 66, 245, 0) 56%),
+    linear-gradient(155deg, var(--omega-accent) 10%, #FF7A3D 90%);
+}
+
+// ============================================
+// The rundown — stroked step numerals on dashed rows
+// ============================================
+// (The latest feed uses .newsflash-feed__item's BASE layout from
+// _editorial.scss: square art thumb + text. Only the rundown swaps the
+// thumb for a numeral.)
+.newsflash-feed__num {
+  font-family: $nf-font-display;
+  font-style: italic;
+  font-weight: 800;
+  font-size: 3.2rem;
+  line-height: 1;
+  color: transparent;
+  -webkit-text-stroke: 1.5px var(--omega-ink);
+}
+
+// On rundown rows the numeral replaces the thumbnail — shrink its column
+.newsflash-feed__item .newsflash-feed__num {
+  width: 5rem;
+}
+.newsflash-rundown .newsflash-feed__item {
+  grid-template-columns: 5rem 1fr;
+}
+
+// ============================================
+// The rail (sticky sidebar)
+// ============================================
+.newsflash-rail {
+  position: sticky;
+  top: 5.75rem; // clears the sticky masthead
+}
+
+.newsflash-rail__title {
+  display: flex;
+  align-items: center;
+  gap: 0.6em;
+  font-weight: 800;
+  font-size: 0.8rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  margin-bottom: 1rem;
+
+  &::after {
+    content: "";
+    flex: 1;
+    height: var(--nf-border-width);
+    background: var(--omega-line-strong);
+  }
+}
+
+// Most-read list — stroked counter numerals that ink in on hover
+.newsflash-rail__mostread {
+  counter-reset: mostread;
+
+  li {
+    counter-increment: mostread;
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+    padding: 0.8rem 0;
+    border-bottom: 1px solid var(--omega-line);
+
+    &:first-child { padding-top: 0; }
+    &:last-child { border-bottom: 0; padding-bottom: 0; }
+
+    &::before {
+      content: counter(mostread);
+      font-family: $nf-font-display;
+      font-style: italic;
+      font-weight: 900;
+      font-size: 2rem;
+      line-height: 1;
+      color: transparent;
+      -webkit-text-stroke: 1.3px var(--omega-ink);
+      flex: none;
+      width: 1.2em;
+      transition: $nf-transition;
+    }
+
+    &:hover::before {
+      color: var(--omega-accent);
+      -webkit-text-stroke-color: var(--omega-accent);
+    }
+  }
+
+  a {
+    font-weight: 700;
+    font-size: 0.95rem;
+    line-height: 1.35;
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+      color: var(--omega-accent);
+    }
+  }
+}
+
+// Newsletter rail — the vermilion slab gets the hard offset shadow
+.newsflash-rail .card.bg-primary {
+  box-shadow: var(--nf-shadow-hard-hover) !important;
+}
+
+// (The stats numerals + the CTA band live in the main bundle, in
+// _panels.scss, styled over the BASE omega-* markup those sections now
+// render.)
+
+@media (max-width: 991.98px) {
+  .newsflash-rail { position: static; }
+}

package/dist/assets/themes/newsflash/css/pages/pricing/index.scss

@@ -0,0 +1,55 @@
+// Newsflash Theme — Pricing page-specific CSS
+// The theme forks no pricing layout: the BASE page renders (omega-price-card
+// grid, omega-billing-toggle, the omega-band enterprise strip, the
+// feature-comparison table, the FAQ duo) and this file dresses it as the
+// "subscription desk": the framed enterprise band and comparison table.
+// Structure comes from the classy floor partials in the main bundle; these
+// page rules land after and win. The pill BILLING TOGGLE is not here: it
+// renders on the account page too, so its skin lives in
+// css/components/_billing-toggle.scss, in the main bundle ([#236]) — and the
+// PLAN CARDS left for the same reason ([#531]): marketing/pricing-cards
+// composes them on the homepage, so their skin lives in
+// css/components/_panels.scss. Compiles standalone: theme tokens + mixins via
+// loadPaths.
+@use 'config' as *;
+@import 'css/base/mixins';
+
+// ============================================
+// Enterprise strip: framed paper band
+// ============================================
+.omega-band {
+  background: var(--bs-card-bg);
+  @include nf-border();
+  border-radius: var(--bs-border-radius-lg);
+}
+
+// ============================================
+// Feature comparison: the framed ledger
+// ============================================
+.omega-compare {
+  // The responsive wrapper carries the frame (a collapsed-border table
+  // cannot clip its own radius).
+  .table-responsive {
+    border: var(--nf-border);
+    border-radius: var(--bs-border-radius-lg);
+  }
+
+  table {
+    margin-bottom: 0;
+
+    caption {
+      font-family: $nf-font-display;
+      color: var(--bs-body-color);
+      padding-inline: 1rem;
+    }
+
+    thead th {
+      font-family: $font-family-sans-serif;
+      font-size: 0.8rem;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      border-bottom: var(--nf-border);
+    }
+  }
+}

package/dist/assets/themes/newsflash/css/pages/test/libraries/layers/index.scss

@@ -0,0 +1,7 @@
+// /test — Theme (newsflash) page CSS — the #theme layer.
+// Loads AFTER the universal layer and turns the "css-theme" dot green.
+// Compiles standalone, so no theme tokens are needed here — just the proof.
+
+.layer-dot[data-layer="css-theme"] {
+  background: #30a46c; // green
+}

package/dist/assets/themes/newsflash/js/pages/blog/[slug].js

@@ -0,0 +1,29 @@
+// Newsflash Theme — Blog post page JS (the #theme layer)
+// Drives the reading-progress bar: fills the fixed top rule as the reader
+// scrolls through the page. NOTE: [slug] wildcard filename (spec §7) — the
+// key blog/[slug] serves every /blog/<slug> post page, no frontmatter.
+export default () => {
+  const $bar = document.querySelector('.newsflash-progress > span');
+  if (!$bar) {
+    return;
+  }
+
+  let ticking = false;
+  function update() {
+    const $doc = document.documentElement;
+    const progress = $doc.scrollTop / ($doc.scrollHeight - $doc.clientHeight);
+    $bar.style.transform = `scaleX(${Math.min(Math.max(progress, 0), 1)})`;
+    ticking = false;
+  }
+
+  function onScroll() {
+    if (!ticking) {
+      ticking = true;
+      window.requestAnimationFrame(update);
+    }
+  }
+
+  // Initial state + listener
+  update();
+  window.addEventListener('scroll', onScroll, { passive: true });
+};

package/dist/assets/themes/newsflash/js/pages/test/libraries/layers/index.js

@@ -0,0 +1,9 @@
+// /test — Theme (newsflash) page JS — the #theme layer.
+// Runs AFTER #main, BEFORE #project. Turns the "js-theme" dot green.
+export default ({ manager, options }) => {
+  const dot = document.querySelector('.layer-dot[data-layer="js-theme"]');
+  if (dot) {
+    dot.style.background = '#30a46c'; // green
+  }
+  console.log('[test-layer] #theme JS ran → js-theme dot green');
+};