@omega.js/web 0.1.0

package/themes/classy/css/pages/status/index.scss

@@ -0,0 +1,164 @@
+// Classy v2 status page — the page JS toggles bg-success/warning/danger/info
+// on the banner, service dots, and uptime bars (that class contract is the
+// API; don't rename it). In classy the banner and dots stay hairline
+// surfaces: the LEVEL paints the glyph, never a colored slab. Uptime bars
+// keep their bg-* paint — there the color IS the data (chart semantics).
+// This is a theme PAGE entry (css/pages/status/index.scss): it loads AFTER
+// the core status page css, so equal-specificity overrides here win.
+
+.status-banner {
+  // Beat the .bg-* utility the JS applies AND the core status css's
+  // .status-banner.bg-* washes (0,2,0 specificity — match it per level)
+  &,
+  &.bg-success,
+  &.bg-warning,
+  &.bg-danger,
+  &.bg-info {
+    background: var(--omega-surface) !important;
+    border: 1px solid var(--omega-line) !important;
+  }
+
+  color: var(--omega-ink);
+
+  .status-icon {
+    transition: color var(--omega-speed) var(--omega-ease);
+  }
+
+  // Level → glyph + pulse color
+  &.bg-success .status-icon,
+  &.bg-success .status-pulse {
+    color: var(--omega-ok) !important;
+  }
+
+  &.bg-warning .status-icon,
+  &.bg-warning .status-pulse {
+    color: var(--omega-warn) !important;
+  }
+
+  &.bg-danger .status-icon,
+  &.bg-danger .status-pulse {
+    color: var(--omega-danger) !important;
+  }
+
+  &.bg-info .status-icon,
+  &.bg-info .status-pulse {
+    color: var(--omega-accent) !important;
+  }
+
+  // The pulse dot rides currentColor
+  .status-pulse {
+    width: 8px;
+    height: 8px;
+    display: inline-block;
+    background: currentcolor !important;
+  }
+}
+
+// Service rows — the dot span gets the bg-* class; recolor the glyph instead
+.service-status-dot {
+  background: transparent !important;
+
+  svg {
+    transition: color var(--omega-speed) var(--omega-ease);
+  }
+
+  &.bg-success svg {
+    color: var(--omega-ok) !important;
+  }
+
+  &.bg-warning svg {
+    color: var(--omega-warn) !important;
+  }
+
+  &.bg-danger svg {
+    color: var(--omega-danger) !important;
+  }
+
+  &.bg-info svg {
+    color: var(--omega-accent) !important;
+  }
+}
+
+.service-item {
+  border-color: var(--omega-line) !important;
+}
+
+// ── Reimagined composition (2026-07-16) ──────────────────────────────────────
+
+// The live strip: status as a sentence, not a colored slab
+.omega-status-strip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 1rem;
+  padding: 1.125rem 1.5rem;
+  border-radius: var(--omega-radius-l);
+}
+
+.omega-status-strip__text {
+  font-family: var(--omega-font-marketing);
+  font-size: 1.375rem;
+  font-weight: 550;
+  letter-spacing: -0.01em;
+}
+
+// The ops card: every service in ONE surface
+.omega-status-card {
+  padding: 1.75rem;
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-l);
+}
+
+.omega-status-card__row {
+  padding-block: 1.125rem;
+
+  &:first-child {
+    padding-top: 0;
+  }
+
+  &--divided {
+    border-bottom: 1px solid var(--omega-line);
+  }
+}
+
+.omega-status-card__legend {
+  margin-top: 1.25rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid var(--omega-line);
+}
+
+.omega-status-card--manifest {
+  padding: 1.5rem 1.75rem;
+}
+
+// Quiet empty states: a dot and a sentence, not a card-in-card
+.omega-status-empty {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 1.125rem 1.375rem;
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-m);
+  color: var(--omega-ink-muted);
+}
+
+// Subscribe band: split panel on surface-2
+.omega-status-subscribe {
+  display: grid;
+  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+  gap: 2rem;
+  align-items: center;
+  padding: 2rem 2.25rem;
+  background: var(--omega-surface-2);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-l);
+
+  @media (max-width: 767.98px) {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1.25rem;
+    padding: 1.5rem;
+  }
+}

package/themes/classy/css/pages/terms.scss

@@ -0,0 +1,2 @@
+// /terms — the shared classy legal-document treatment (legal/_document.scss).
+@use 'legal/document';

package/themes/classy/css/pages/updates/index.scss

@@ -0,0 +1,128 @@
+// classy /updates — the version timeline: a hairline spine with version
+// nodes; the latest release leads with an accent node + Latest status.
+
+.omega-timeline {
+  position: relative;
+  padding-inline-start: 2rem;
+
+  // The spine
+  &::before {
+    content: '';
+    position: absolute;
+    inset-block: 0.5rem;
+    inset-inline-start: 0.4375rem;
+    width: 1px;
+    background: var(--omega-line-strong);
+  }
+}
+
+.omega-timeline__entry {
+  position: relative;
+  padding-bottom: 2.75rem;
+
+  &:last-child {
+    padding-bottom: 0.5rem;
+  }
+}
+
+.omega-timeline__node {
+  position: absolute;
+  inset-inline-start: -2rem;
+  top: 0.3125rem;
+  width: 0.9375rem;
+  display: flex;
+  justify-content: center;
+}
+
+.omega-timeline__dot {
+  width: 0.5625rem;
+  height: 0.5625rem;
+  border-radius: 50%;
+  background: var(--omega-ground);
+  border: 1.5px solid var(--omega-ink-faint);
+}
+
+.omega-timeline__entry--latest .omega-timeline__dot {
+  background: var(--omega-accent);
+  border-color: var(--omega-accent);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--omega-accent) 18%, transparent);
+}
+
+.omega-timeline__meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.625rem;
+  margin-bottom: 0.375rem;
+}
+
+.omega-timeline__version {
+  font-size: 0.8125rem;
+  font-weight: 650;
+  letter-spacing: 0.02em;
+  color: var(--omega-ink);
+  padding: 0.125rem 0.5rem;
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line-strong);
+  border-radius: var(--omega-radius-s);
+}
+
+.omega-timeline__body {
+  position: relative; // stretched-link boundary
+  padding: 1.375rem 1.5rem;
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-l);
+  transition: box-shadow var(--omega-speed) var(--omega-ease), border-color var(--omega-speed) var(--omega-ease);
+
+  &:hover {
+    border-color: var(--omega-line-strong);
+    box-shadow: var(--omega-shadow-2);
+  }
+}
+
+.omega-timeline__entry--latest .omega-timeline__body {
+  border-color: var(--omega-line-strong);
+}
+
+.omega-timeline__title {
+  font-family: var(--omega-font-marketing);
+  font-size: 1.375rem;
+  font-weight: 550;
+  letter-spacing: -0.01em;
+  margin-bottom: 0.375rem;
+
+  a {
+    color: var(--omega-ink);
+    text-decoration: none;
+  }
+}
+
+.omega-timeline__summary {
+  margin-bottom: 0;
+  max-width: 40rem;
+}
+
+.omega-timeline__more {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 0.875rem;
+  color: var(--omega-ink-muted);
+  transition: color var(--omega-speed) var(--omega-ease);
+
+  .omega-timeline__body:hover & {
+    color: var(--omega-ink);
+  }
+}
+
+// The quiet empty state (shared shape with /status)
+.omega-status-empty {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 1.125rem 1.375rem;
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-m);
+  color: var(--omega-ink-muted);
+}

package/themes/classy/js/hero-demo-form.js

@@ -0,0 +1,56 @@
+/**
+ * Hero Demo Form
+ * Initializes FormManager for hero demo forms (input or form type)
+ */
+
+// Zero-trust URL gate. `dataset.redirect` is DOM-controllable and could in
+// principle be set to `javascript:...` by an attacker who can inject markup.
+// Anything that isn't a same-origin path or http(s) URL is rejected outright.
+function safeRedirect(raw) {
+  if (!raw || typeof raw !== 'string') return '/dashboard/account';
+  // Same-origin path — must start with `/` and NOT `//` (protocol-relative).
+  if (raw.startsWith('/') && !raw.startsWith('//')) return raw;
+  try {
+    const parsed = new URL(raw, window.location.origin);
+    if (parsed.protocol === 'http:' || parsed.protocol === 'https:') return raw;
+  } catch (e) { /* fall through */ }
+  return '/dashboard/account';
+}
+
+/**
+ * Initialize the hero demo form if present
+ */
+export default async function initHeroDemoForm() {
+  const $form = document.querySelector('#hero-demo-form');
+
+  if (!$form) {
+    return;
+  }
+
+  // Dynamic import FormManager only when needed
+  const { FormManager } = await import('@omega.js/client/modules/form-manager.js');
+
+  const formManager = new FormManager($form, {
+    submittingText: 'Processing...',
+  });
+
+  formManager.on('submit', async ({ data }) => {
+    // Get redirect URL from form data attribute or default to /dashboard
+    const redirectUrl = safeRedirect($form.dataset.redirect);
+
+    // Build query string from form data
+    const params = new URLSearchParams();
+
+    Object.entries(data).forEach(([key, value]) => {
+      if (value !== null && value !== undefined && value !== '') {
+        params.set(key, value);
+      }
+    });
+
+    // Redirect with form data as query params
+    const queryString = params.toString();
+    const url = queryString ? `${redirectUrl}?${queryString}` : redirectUrl;
+
+    window.location.href = url;
+  });
+}

package/themes/neobrutalism/README.md

@@ -0,0 +1,118 @@
+# Neobrutalism Theme
+
+A bold, high-contrast omega theme built on the neobrutalist design language:
+**pure-ink borders, hard offset shadows (no blur), zero border-radius, chunky
+grotesk display type, and flat saturated color blocks.** Buttons and cards
+"press" into the page on interaction. Full light + dark mode support.
+
+## Skin + bounded forks
+
+Neobrutalism follows the base/skin/fork convention
+(`docs/web/sections.md` "Markup convention"): it is a SKIN over the base
+theme's shared markup, plus a short list of identity forks. Every surface it
+does not fork renders base markup (`omega-*` classes) restyled by this
+theme's scss, so the nav, pricing, 404, about, contact, team, blog, and auth
+pages are structurally identical to every other skin, and the behavior
+contracts that ride base markup (`data-omega-countup`, the pricing JS hooks,
+the feature-comparison table) all work here unchanged.
+
+## Forks
+
+Identity forks, all wearing `neo-*` BEM classes. This list is
+machine-checked (packages/web/test/theme-convention.test.js): every markup
+file in the theme must appear here, and every listed path must exist.
+
+- `themes/neobrutalism/_layouts/frontend/core/base.html`: the smallest
+  possible fork: body markup identical to base; the only delta is the head
+  block loading the display faces (Archivo / Space Grotesk / Space Mono via
+  Google Fonts). When the faces are vendored like newsflash's, this fork
+  dies.
+- `themes/neobrutalism/_layouts/frontend/pages/index.html`: the neobrutalist
+  homepage. Three hand-built bands where the structure is genuinely
+  neo-specific: the asymmetric split hero, the alternating offset showcase
+  rows, and the numbered step cards, plus the fork vocabulary they share
+  (kicker, accent, section-head). The rest of the page delegates to base
+  sections: trusted-by (the omega-marquee logo wall, ink-framed by this
+  theme), stats (omega-stat cells painted as color blocks), testimonials,
+  and the cta band (the omega-cta ink panel).
+
+Everything else falls through to base, including the whole pricing page.
+The scss floor for the fallthrough vocabulary comes from classy's token-pure
+partials (imported in `_theme.scss`) painted through this theme's
+`--omega-*` re-values, with neobrutalist overlays on top
+(`css/components/_marketing.scss` for the marketing bands — plan cards
+included, since `marketing/pricing-cards` composes them off /pricing too
+(#531) — the omega voice rules in `css/base/_utilities.scss`, the ink-bar
+re-skin of `.omega-nav` in `css/layout/_navigation.scss`, and the pricing page
+css).
+
+## Select the theme
+
+```json5
+// config/omega.json5 (consuming brand/app)
+theme: {
+  id: "neobrutalism",
+  appearance: "system", // or "light" / "dark"; dark mode is first-class
+},
+```
+
+## Customize
+
+Compile-time knobs: every variable in `_config.scss` is `!default`; override
+any of them from your project's main.scss:
+
+```scss
+// src/assets/css/main.scss (consuming project)
+@use 'omega:main' with (
+  $primary:           #FF5C00,   // your brand color
+  $nb-border-width:   4px,       // chunkier borders
+  $nb-shadow-offset:  7px,       // deeper hard shadow
+  $nb-accent-yellow:  #D4FF00,   // swap the signature highlight
+);
+```
+
+### Key tokens (see `_config.scss` for the full list)
+
+| Token | Purpose | Default |
+|---|---|---|
+| `$primary` … `$danger` | Bootstrap semantic colors | electric blue, hot pink, etc. |
+| `$nb-ink` / `$nb-paper` | Border/shadow color + page surface (light) | `#111` / `#FFFEF2` |
+| `$nb-ink-dark` / `$nb-paper-dark` | Same, dark mode | `#F5F5F5` / `#16161A` |
+| `$nb-border-width` | Standard border thickness | `3px` |
+| `$nb-shadow-offset` | Hard shadow distance | `5px` |
+| `$nb-accent-*` | Color-block palette | blue/pink/yellow/green/purple/orange |
+| `$nb-font-display` | Heading font | `Archivo` |
+| `$font-family-sans-serif` | Body font | `Space Grotesk` |
+
+Runtime paint reads the shared `--omega-*` token contract
+(`core/css/tokens/_index.scss`), which `css/base/_root.scss` re-values with
+the ink/paper sheet: light AND dark, three-stamp plumbing, Bootstrap
+bridged. Consumers can override any token per-mode in plain CSS. Genuinely
+neobrutalist extras (the accent palette, border/shadow recipes, the press
+interaction) keep the `--nb-*` namespace; the `nb-` prefix never appears in
+markup.
+
+## Fonts
+
+Archivo + Space Grotesk + Space Mono load via the theme's `head` block in
+the core/base fork (Google Fonts). If you change the font tokens, update the
+`<link>` accordingly (in your page/layout `theme.head.content`, or by
+overriding the base layout).
+
+## Behaviors
+
+None of its own. Bootstrap tooltips come from the shared core-layer
+initializer every theme imports; the logo wall rides the shared motion
+engine's marquee; nav scroll state is engine-stamped
+(`data-omega-scroll-watch` on the base nav include).
+
+## Conventions
+
+- Fork markup wears `neo-<block>__<element>--<modifier>` BEM (`neo-hero`,
+  `neo-showcase`, `neo-step-card`, `neo-kicker`, `neo-accent`, ...).
+  Bootstrap classes (`.card`, `.btn-*`, `.text-bg-*`), the shared `omega-*`
+  vocabulary, `data-*` idioms, and core JS hooks (`amount`, `billing-info`,
+  `price-per-unit`, `button-text`) stay untouched.
+- The border/shadow/press system lives in `css/base/_mixins.scss`
+  (`nb-border` / `nb-shadow` / `nb-press`), the SSOT for the look;
+  components include these rather than repeating the recipes.

package/themes/neobrutalism/_config.scss

@@ -0,0 +1,139 @@
+// Neobrutalism Theme Configuration
+// ALL customizable variables are defined here with !default.
+// Consuming projects override any of these BEFORE the theme is imported.
+//
+// Design language: raw, high-contrast color blocks; pure-black hard borders;
+// hard offset shadows (no blur); zero border-radius; chunky grotesk type.
+// This is NOT a recolored Classy — the shadow/border/press system is the identity.
+
+// ============================================
+// Bootstrap Color Overrides
+// ============================================
+// Loud, saturated, high-contrast. These map onto Bootstrap's semantic colors.
+$primary:    #2563EB !default;   // electric blue
+$secondary:  #EC4899 !default;   // hot pink
+$success:    #16A34A !default;   // grass green
+$info:       #06B6D4 !default;   // cyan
+$warning:    #FACC15 !default;   // acid yellow
+$danger:     #EF4444 !default;   // red
+$light:      #FFFEF2 !default;   // paper white (warm off-white)
+$dark:       #111111 !default;   // near-black
+
+// ============================================
+// Ink & Paper (the structural neutrals)
+// ============================================
+// "Ink" = the universal border/shadow color. "Paper" = the page surface.
+$nb-ink:            #111111 !default;   // borders + hard shadows (light mode)
+$nb-paper:          #FFFEF2 !default;   // body background (light mode)
+$nb-surface:        #FFFFFF !default;   // cards / elevated surfaces (light mode)
+$nb-surface-alt:    #F4F1E4 !default;   // alt sections / wells (light mode)
+
+// Dark mode counterparts
+$nb-ink-dark:       #F5F5F5 !default;   // borders + shadows become near-white
+$nb-paper-dark:     #16161A !default;   // body background (dark mode)
+$nb-surface-dark:   #1F1F25 !default;   // cards (dark mode)
+$nb-surface-alt-dark: #25252D !default; // alt sections (dark mode)
+
+// ============================================
+// Accent Palette (for color-block sections, tags, highlights)
+// ============================================
+// Used directly as section backgrounds and decorative blocks.
+$nb-accent-blue:    #2563EB !default;
+$nb-accent-pink:    #EC4899 !default;
+$nb-accent-yellow:  #FACC15 !default;
+$nb-accent-green:   #16A34A !default;
+$nb-accent-purple:  #8B5CF6 !default;
+$nb-accent-orange:  #FB923C !default;
+
+// ============================================
+// Borders — the defining structural element
+// ============================================
+$nb-border-width:     3px !default;          // standard border thickness
+$nb-border-width-lg:  4px !default;          // emphasis (hero buttons, feature cards)
+$nb-border-width-sm:  2px !default;          // small controls (inputs, tags)
+$nb-border-color:     $nb-ink !default;      // remapped to ink-dark in dark mode via _root
+$nb-border:           $nb-border-width solid $nb-border-color !default;
+
+// Zero radius everywhere — this is the neobrutalist signature.
+$border-radius:     0 !default;
+$border-radius-sm:  0 !default;
+$border-radius-lg:  0 !default;
+$border-radius-xl:  0 !default;
+$border-radius-2xl: 0 !default;
+$border-radius-pill: 0 !default;
+
+// ============================================
+// Hard Offset Shadows — the second defining element
+// ============================================
+// No blur, no spread — a solid block offset down-right in ink color.
+$nb-shadow-offset:     5px !default;   // default offset distance
+$nb-shadow-offset-sm:  3px !default;
+$nb-shadow-offset-lg:  8px !default;
+$nb-shadow-color:      $nb-ink !default;  // remapped in dark mode via _root
+
+$nb-shadow-sm: $nb-shadow-offset-sm $nb-shadow-offset-sm 0 $nb-shadow-color !default;
+$nb-shadow:    $nb-shadow-offset    $nb-shadow-offset    0 $nb-shadow-color !default;
+$nb-shadow-lg: $nb-shadow-offset-lg $nb-shadow-offset-lg 0 $nb-shadow-color !default;
+
+// ============================================
+// Typography
+// ============================================
+// Chunky geometric grotesk for display; clean grotesk for body.
+$font-family-sans-serif: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !default;
+$nb-font-display: 'Archivo', 'Space Grotesk', sans-serif !default;
+$nb-font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace !default;
+
+$headings-font-weight: 800 !default;
+$nb-heading-letter-spacing: -0.02em !default;
+$font-weight-bold: 700 !default;
+
+// ============================================
+// Motion — snappy, mechanical, no easing softness
+// ============================================
+// Neobrutalism favors instant/linear motion over smooth cubic-beziers.
+$nb-transition-fast: all 0.08s ease-out !default;
+$nb-transition:      all 0.12s ease-out !default;
+
+// ============================================
+// Component Sizing
+// ============================================
+// Avatar sizes map (matches Classy so shared layouts/includes render correctly)
+$avatar-sizes: (
+  null: 3rem,
+  2xs: 0.5rem,
+  xs: 1.5rem,
+  sm: 2rem,
+  md: 2.5rem,
+  lg: 3.5rem,
+  xl: 5rem,
+  2xl: 7.5rem,
+  3xl: 10rem,
+  4xl: 12.5rem,
+  5xl: 15rem
+) !default;
+
+// ============================================
+// Forward Bootstrap with our configuration
+// ============================================
+@forward '../bootstrap/scss/bootstrap.scss' with (
+  $primary: $primary,
+  $secondary: $secondary,
+  $success: $success,
+  $info: $info,
+  $warning: $warning,
+  $danger: $danger,
+  $light: $light,
+  $dark: $dark,
+  $font-family-sans-serif: $font-family-sans-serif,
+  $headings-font-weight: $headings-font-weight,
+  $font-weight-bold: $font-weight-bold,
+  $border-radius: $border-radius,
+  $border-radius-sm: $border-radius-sm,
+  $border-radius-lg: $border-radius-lg,
+  // Neobrutalism uses solid borders everywhere, so Bootstrap's default
+  // border width is bumped and box-shadow softness is disabled.
+  $border-width: $nb-border-width,
+  $enable-rounded: false,
+  $enable-shadows: false,
+  $enable-negative-margins: true
+);

package/themes/neobrutalism/_layouts/frontend/core/base.html

@@ -0,0 +1,30 @@
+---
+layout: core/root
+
+config:
+  # The smallest possible fork (#177): body markup is IDENTICAL to the base
+  # core/base. The only delta is the head block loading the theme's display
+  # faces (Archivo / Space Grotesk / Space Mono); when the faces are vendored
+  # like newsflash's, this fork dies and the base shell serves.
+  theme:
+    head:
+      content: |
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800;900&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap" media="print" onload="this.media='all'">
+    body:
+      class: "d-flex flex-column min-vh-100"
+---
+
+<!-- Nav (controlled by page/layout front matter) -->
+{% unless resolved.config.theme.nav.enabled == false %}
+  {%- include frontend/sections/nav.html -%}
+{% endunless %}
+
+<!-- Main Content -->
+<main id="main-content" class="flex-fill {{ resolved.config.theme.main.class | omega_liquify }}" aria-label="Main content">
+  {{ content | omega_content_format }}
+</main>
+
+<!-- Footer (controlled by page/layout front matter) -->
+{% unless resolved.config.theme.footer.enabled == false %}
+  {%- include frontend/sections/footer.html -%}
+{% endunless %}