@omega.js/extension 0.1.0

package/dist/assets/themes/neobrutalism/css/layout/_general.scss

@@ -0,0 +1,213 @@
+// Neobrutalism Theme — General Layout
+// Section rhythm, the hero treatment, footer, badges, and overrides for the
+// gradient/accent classes the shared (Classy-derived) layouts emit. The goal:
+// the inherited homepage/pricing/auth markup renders as flat neobrutalist
+// color-blocks instead of soft gradients — no layout override needed.
+
+// ============================================
+// Section rhythm
+// ============================================
+// Shared layouts rely on the theme to provide vertical section padding.
+section {
+  padding-top: clamp(3rem, 7vw, 6rem);
+  padding-bottom: clamp(3rem, 7vw, 6rem);
+}
+
+// The ink bar is sticky (in-flow), so no first-section navbar offset is
+// needed; content starts right under the bar.
+
+// ============================================
+// Hero — flat color block, not a gradient
+// ============================================
+// The hero <section> ships with .bg-gradient-rainbow .gradient-animated etc.
+// We neutralize the gradient and replace it with a solid accent block framed
+// by a thick ink rule at the bottom. Decorative grain/animation are dropped.
+.bg-gradient-rainbow,
+.gradient-animated,
+.gradient-grain {
+  background-image: none !important;
+  animation: none !important;
+}
+
+section.bg-gradient-rainbow {
+  background-color: var(--nb-accent-yellow) !important;
+  color: #111111 !important;
+  border-radius: 0 !important;
+  border-bottom: $nb-border-width-lg solid var(--nb-border-color);
+  box-shadow: none !important;
+
+  // Force readable ink text over the bright block
+  // (exclude the tagline kicker, which is ink-on-accent and styled below)
+  .text-light,
+  &.text-light,
+  h1, h2, h3, .lead,
+  p:not(.text-uppercase) {
+    color: #111111 !important;
+  }
+
+  // Tagline becomes a mono kicker chip: accent text on an ink block
+  .text-uppercase {
+    display: inline-block;
+    font-family: $nb-font-mono;
+    font-weight: 700;
+    background: #111111;
+    color: var(--nb-accent-yellow) !important;
+    padding: 0.4rem 0.8rem;
+    opacity: 1 !important;
+  }
+}
+
+// ============================================
+// CTA / promo cards (.card.bg-gradient.bg-primary.text-white)
+// ============================================
+// Flatten gradient promo cards into solid accent blocks with ink frame.
+.card.bg-gradient,
+.card.bg-primary {
+  background-image: none !important;
+  background-color: var(--nb-accent-blue) !important;
+  color: #fff !important;
+  @include nb-border();
+  @include nb-shadow(lg);
+}
+
+// Glassy hero-demo card → solid surface box
+.bg-glassy,
+.card.bg-glassy {
+  background: var(--nb-surface) !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  @include nb-border();
+}
+
+// ============================================
+// Shadow utility overrides → hard offset shadows
+// ============================================
+// Bootstrap's .shadow / .shadow-lg are soft blurs. Map them to the neobrutalist
+// hard offset so inherited markup (auth cards, modals) gets the right look.
+.shadow-sm { box-shadow: var(--nb-shadow-sm) !important; }
+.shadow    { box-shadow: var(--nb-shadow) !important; }
+.shadow-lg { box-shadow: var(--nb-shadow-lg) !important; }
+
+// Cards that ship with .border-0 (e.g. the auth card) lose Bootstrap's border;
+// give the frame back so the ink outline + hard shadow read as one box.
+// (Targeted to elevated cards so flat inline cards stay borderless.)
+.card.border-0.shadow-sm,
+.card.border-0.shadow,
+.card.border-0.shadow-lg {
+  @include nb-border();
+}
+
+// ============================================
+// Badges — sticker chips with ink frame
+// ============================================
+.badge {
+  border-radius: 0;
+  font-weight: 700;
+  letter-spacing: 0;
+  padding: 0.4rem 0.6rem;
+  @include nb-border($nb-border-width-sm);
+  color: #111111;
+}
+.badge.bg-body-tertiary { background: var(--nb-accent-yellow) !important; }
+// Strip decorative gradient borders from inherited badges
+.border-gradient-rainbow { border-image: none !important; }
+
+// ============================================
+// Shared section header (base markup: micro eyebrow + display headline + sub)
+// ============================================
+// Authored here because classy's layout/general (its usual home) is not
+// imported: its fixed-nav clearance rhythm has no place under the sticky
+// ink bar.
+.omega-section-head {
+  max-width: 46rem;
+
+  .omega-micro {
+    display: block;
+    margin-bottom: 0.875rem;
+  }
+
+  p {
+    margin-top: 1rem;
+    color: var(--bs-secondary-color);
+  }
+}
+
+.omega-section-head--center {
+  margin-inline: auto;
+  text-align: center;
+}
+
+// ============================================
+// Footer: the surface slab closed by a thick ink rule
+// ============================================
+// Structure comes from the classy footer floor (grid, columns, base row;
+// see _theme.scss); this overlay hardens it: solid surface, lg ink rule on
+// top, block-fill link hovers.
+footer,
+.omega-footer {
+  background: var(--nb-surface);
+  border-top: $nb-border-width-lg solid var(--nb-border-color);
+
+  a {
+    color: var(--bs-body-color);
+    text-decoration: none;
+    font-weight: 600;
+
+    &:hover {
+      background: var(--nb-accent-interactive);
+      color: var(--nb-accent-interactive-ink);
+    }
+  }
+}
+
+// ============================================
+// Tables, alerts, accordions — square + framed
+// ============================================
+.alert {
+  border-radius: 0;
+  @include nb-border();
+  @include nb-shadow(sm);
+}
+
+.accordion-item {
+  border-radius: 0;
+  @include nb-border();
+  @include nb-shadow(sm);
+
+  // Bootstrap strips the top border on .accordion-item:not(:first-of-type) to
+  // avoid doubled borders in a connected stack. Our items are separated (mb-3),
+  // so force the full ink frame back on every item (!important beats Bootstrap's
+  // same-specificity reset that may load after this via bootstrap/overrides).
+  &:not(:first-of-type) {
+    border-top: $nb-border-width solid var(--nb-border-color) !important;
+  }
+}
+.accordion-button {
+  border-radius: 0;
+  font-weight: 700;
+
+  &:not(.collapsed) {
+    background: var(--nb-accent-yellow);
+    color: #111111;
+    box-shadow: none;
+  }
+  &:focus {
+    box-shadow: none;
+    border-color: var(--nb-border-color);
+  }
+}
+
+.modal-content,
+.toast,
+.offcanvas {
+  border-radius: 0;
+  @include nb-border();
+  @include nb-shadow(lg);
+}
+
+// Back-to-top / floating action buttons stay on-brand
+.btn-back-to-top {
+  border-radius: 0;
+  @include nb-border();
+  @include nb-shadow(sm);
+}

package/dist/assets/themes/neobrutalism/css/layout/_navigation.scss

@@ -0,0 +1,171 @@
+// Neobrutalism Theme: Navigation
+// The BASE nav include (header.omega-nav; the theme forks no nav markup)
+// worn as a solid, ink-framed bar sitting flush at the top: a hard
+// horizontal block, true to the style. Sticky (in-flow), so pages need no
+// clearance offset. Scroll state comes from the shared motion engine
+// (data-omega-scroll-watch on the header stamps data-omega-scrolled; the
+// omega- namespace keeps the rule through the PurgeCSS greedy safelist).
+// Classy's _nav.scss (fixed glassy pill) is deliberately NOT imported: this
+// file owns the whole block.
+
+.omega-nav {
+  position: sticky;
+  top: 0;
+  z-index: 1030;
+  background: var(--nb-surface);
+  border-bottom: $nb-border-width-lg solid var(--nb-border-color);
+  transition: $nb-transition;
+
+  // Hard offset shadow only once scrolled
+  &[data-omega-scrolled='true'] {
+    @include nb-shadow(sm);
+  }
+
+  .navbar {
+    padding: 0.75rem clamp(1rem, 4vw, 3rem);
+  }
+
+  .container,
+  .container-fluid {
+    padding: 0;
+    max-width: 100%;
+  }
+
+  // Nav links: square hover blocks. Hover/active fill is the PRIMARY blue
+  // (white text), not the yellow accent, so the top-bar interactions match
+  // the brand's blue buttons instead of the yellow CTA accent.
+  .omega-nav__link {
+    display: inline-flex;
+    align-items: center;
+    font-weight: 700;
+    font-size: 0.95rem;
+    padding: 0.4rem 0.85rem;
+    margin: 0 0.15rem;
+    border: $nb-border-width-sm solid transparent;
+    border-radius: 0;
+    color: var(--bs-body-color);
+    text-decoration: none;
+    background: transparent;
+    transition: $nb-transition;
+
+    // Interactive accent (blue), not the yellow signature accent. Single
+    // token so every hover/active state across the theme stays consistent.
+    &:hover,
+    &:focus-visible {
+      background: var(--nb-accent-interactive);
+      color: var(--nb-accent-interactive-ink);
+      border-color: var(--nb-border-color);
+    }
+
+    // Active = solid blue block with white text (matches hover, readable).
+    &.active {
+      background: var(--nb-accent-interactive);
+      color: var(--nb-accent-interactive-ink);
+      border-color: var(--nb-border-color);
+    }
+  }
+
+  // Mobile collapsed menu becomes a bordered drawer panel
+  @media (max-width: 991.98px) {
+    .navbar-collapse {
+      margin-top: 0.75rem;
+      margin-bottom: 0.75rem;
+      padding: 0.75rem;
+      background: var(--nb-surface);
+      @include nb-border();
+      @include nb-shadow(md);
+    }
+
+    .omega-nav__link {
+      width: 100%;
+    }
+
+    // Actions sit under a hard rule, full width, real tap targets
+    .omega-nav__mobile-actions {
+      margin-top: 0.6rem;
+      padding-top: 0.75rem;
+      border-top: $nb-border-width-sm solid var(--nb-border-color);
+    }
+  }
+}
+
+// Brand lockup, shared by the bar AND the footer include: chunky display
+// type, no fade.
+.omega-nav__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: $nb-font-display;
+  font-weight: 900;
+  font-size: 1.4rem;
+  letter-spacing: -0.03em;
+  color: var(--bs-body-color);
+  text-decoration: none;
+
+  &:hover,
+  &:focus-visible {
+    color: var(--bs-body-color);
+  }
+
+  img {
+    height: 32px;
+    width: auto;
+  }
+}
+
+// Mobile toggle: a hard square button (the base include renders a bars icon
+// glyph, not Bootstrap's background-image span)
+.navbar-toggler {
+  border-radius: 0;
+  padding: 0.3rem 0.55rem;
+  color: var(--bs-body-color);
+  background: var(--nb-surface);
+  @include nb-border($nb-border-width-sm);
+  transition: $nb-transition;
+
+  &:hover {
+    background: var(--nb-accent-interactive);
+    color: var(--nb-accent-interactive-ink);
+  }
+
+  &:focus {
+    box-shadow: var(--nb-shadow-sm);
+  }
+}
+
+// ============================================
+// Dropdown menus: hard bordered panels
+// ============================================
+.dropdown-menu {
+  background: var(--nb-surface);
+  border-radius: 0;
+  @include nb-border();
+  @include nb-shadow(md);
+  padding: 0.4rem;
+  margin-top: 0.6rem;
+
+  .dropdown-item {
+    border-radius: 0;
+    font-weight: 600;
+    padding: 0.55rem 0.85rem;
+    color: var(--bs-body-color);
+
+    &:hover,
+    &:focus {
+      background: var(--nb-accent-interactive);
+      color: var(--nb-accent-interactive-ink);
+    }
+
+    &.active,
+    &:active {
+      background: var(--bs-body-color);
+      color: var(--nb-paper);
+    }
+  }
+
+  .dropdown-divider {
+    border-top: $nb-border-width-sm solid var(--nb-border-color);
+    opacity: 1;
+    margin: 0.4rem 0;
+  }
+}

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

@@ -0,0 +1,203 @@
+// Neobrutalism Theme: Homepage page-specific CSS
+// Styles the homepage identity fork
+// (themes/neobrutalism/_layouts/frontend/pages/index.html).
+//
+// Fork markup wears neo-<block>__<element>--<modifier> BEM (#177): the
+// asymmetric split hero, the alternating offset showcase, and the numbered
+// step cards. The delegated bands (trusted-by, stats, testimonials, cta)
+// render base omega-* markup styled by the MAIN bundle
+// (css/components/_marketing.scss). Compiles standalone, so it pulls in the
+// theme tokens + mixins via loadPaths.
+@use 'config' as *;
+@import 'css/base/mixins';
+
+// ============================================
+// Fork vocabulary shared by the bands below
+// ============================================
+// Eyebrow / kicker label above headlines: a mono chip. Default is the
+// signature yellow block; --ink flips to an ink block with yellow text for
+// placement on bright surfaces (the hero's warning-yellow field).
+.neo-kicker {
+  display: inline-block;
+  font-family: $nb-font-mono;
+  font-weight: 700;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 0.35rem 0.65rem;
+  background: var(--nb-accent-yellow);
+  color: #111111;
+  @include nb-border($nb-border-width-sm);
+
+  &--ink {
+    background: #111111;
+    color: var(--nb-accent-yellow);
+    border-color: #111111;
+  }
+}
+
+// Accent text (headline_accent spans): marker highlight instead of a color swap
+.neo-accent {
+  background: #111111;
+  color: var(--nb-accent-yellow);
+  padding: 0 0.1em;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+// Band heading block
+.neo-section-head {
+  max-width: 60ch;
+}
+
+.neo-section-head__title {
+  font-family: $nb-font-display;
+  font-weight: 900;
+  font-size: clamp(2rem, 5vw, 3.5rem);
+  letter-spacing: -0.03em;
+  line-height: 1;
+  margin: 0;
+}
+
+// ============================================
+// Hero: asymmetric split (.text-bg-warning gives the yellow block + ink text)
+// ============================================
+.neo-hero {
+  padding-top: clamp(3rem, 8vw, 7rem);
+  padding-bottom: clamp(3rem, 8vw, 7rem);
+  border-bottom: $nb-border-width-lg solid var(--nb-border-color);
+}
+
+.neo-hero__title {
+  font-family: $nb-font-display;
+  font-weight: 900;
+  font-size: clamp(2.75rem, 8vw, 6rem);
+  line-height: 0.92;
+  letter-spacing: -0.04em;
+  margin: 0;
+}
+
+// Hero CTAs use Bootstrap `.d-grid.gap-3` (full-width stacked buttons) in the
+// markup. The only theme-specific bit is the slight rightward offset on large
+// screens that gives the split hero its asymmetry.
+.neo-hero__actions {
+  @media (min-width: 992px) { margin-left: 1.5rem; }
+}
+
+// ============================================
+// Showcase: alternating offset rows
+// ============================================
+.neo-showcase {
+  padding: clamp(3rem, 8vw, 6rem) 0;
+}
+
+.neo-showcase__list {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.neo-showcase__row {
+  display: grid;
+  // Number column fixed; text column sized to content so it sits next to the
+  // number instead of stretching across the row (which left an awkward gap).
+  grid-template-columns: minmax(120px, 180px) minmax(auto, 60ch);
+  gap: 2.5rem;
+  align-items: center;
+  justify-content: start;
+
+  @media (max-width: 767.98px) { grid-template-columns: 1fr; gap: 1rem; }
+
+  // Flipped rows: number moves to the right, the whole pair sits to the right edge.
+  &--flip {
+    @media (min-width: 768px) {
+      grid-template-columns: minmax(auto, 60ch) minmax(120px, 180px);
+      justify-content: end;
+      .neo-showcase__num { order: 2; }
+      .neo-showcase__body { order: 1; }
+    }
+  }
+}
+
+.neo-showcase__num {
+  font-family: $nb-font-display;
+  font-weight: 900;
+  font-size: clamp(3rem, 9vw, 6rem);
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  @include nb-border($nb-border-width-lg);
+  @include nb-shadow(lg);
+  // Color comes from the Bootstrap .text-bg-* utility on the element.
+}
+
+.neo-showcase__body {
+  max-width: 60ch;
+}
+
+.neo-showcase__title {
+  font-family: $nb-font-display;
+  font-weight: 800;
+  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
+  letter-spacing: -0.02em;
+  margin-bottom: 0.75rem;
+}
+
+.neo-showcase__desc {
+  font-size: 1.1rem;
+  margin: 0;
+  color: var(--bs-body-color);
+}
+
+// ============================================
+// Steps (features): numbered .card blocks
+// ============================================
+.neo-steps {
+  padding: clamp(3rem, 8vw, 6rem) 0;
+  border-top: $nb-border-width-lg solid var(--nb-border-color);
+  border-bottom: $nb-border-width-lg solid var(--nb-border-color);
+}
+
+.neo-step-card { // sits on .card (gets the neobrutalist frame from the card component)
+  .card-body { padding: 1.75rem; }
+}
+
+.neo-step-card__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.25rem;
+}
+
+.neo-step-card__num {
+  font-family: $nb-font-display;
+  font-weight: 900;
+  font-size: 2.5rem;
+  line-height: 1;
+}
+
+.neo-step-card__icon {
+  font-size: 1.75rem;
+  width: 3.25rem;
+  height: 3.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--nb-accent-yellow);
+  color: #111111;
+  @include nb-border($nb-border-width-sm);
+}
+
+.neo-step-card__title {
+  font-family: $nb-font-display;
+  font-weight: 800;
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.neo-step-card__desc {
+  margin: 0;
+  color: var(--bs-body-color);
+}

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

@@ -0,0 +1,58 @@
+// Neobrutalism Theme: Pricing page-specific CSS
+// The theme forks no pricing layout (#177 phase 3): 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
+// neobrutalist: the framed comparison ledger and the enterprise strip.
+// Structure comes from the classy floor partials in the main bundle; these
+// page rules land after and win. The hard square 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/_marketing.scss. Compiles standalone: theme tokens + mixins
+// via loadPaths.
+@use 'config' as *;
+@import 'css/base/mixins';
+
+// ============================================
+// Enterprise strip: hard-framed band
+// ============================================
+.omega-band {
+  background: var(--nb-surface);
+  border-radius: 0;
+  @include nb-border();
+  @include nb-shadow(md);
+}
+
+// ============================================
+// Feature comparison: the framed ledger
+// ============================================
+.omega-compare {
+  // The responsive wrapper carries the frame (a collapsed-border table
+  // cannot clip its own edge).
+  .table-responsive {
+    border-radius: 0;
+    @include nb-border();
+    @include nb-shadow(md);
+  }
+
+  table {
+    margin-bottom: 0;
+
+    caption {
+      font-family: $nb-font-display;
+      font-weight: 800;
+      color: var(--bs-body-color);
+      padding-inline: 1rem;
+    }
+
+    thead th {
+      font-family: $nb-font-mono;
+      font-size: 0.8rem;
+      font-weight: 700;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      border-bottom: $nb-border-width solid var(--nb-border-color);
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+// /test — Theme (neobrutalism) 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/neobrutalism/js/pages/test/libraries/layers/index.js

@@ -0,0 +1,9 @@
+// /test — Theme (neobrutalism) 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');
+};