@omega.js/web 0.1.0

package/themes/base/_sections/about/principles/section.html

@@ -0,0 +1,17 @@
+<section>
+  <div class="container">
+    <div class="omega-section-head mb-5" data-omega-reveal>
+      {% component "heading/section-head", superheadline: args.superheadline.text, headline: args.headline, headline_accent: args.headline_accent, sub: args.subheadline %}
+    </div>
+
+    <div class="omega-numbered" data-omega-reveal-stagger="70">
+      {% for value in args.items %}
+        <div class="omega-numbered__item" data-omega-reveal>
+          <span class="omega-numbered__index">{{ forloop.index | prepend: '0' | slice: -2, 2 }}</span>
+          <div class="omega-numbered__title">{{ value.title }}</div>
+          <p class="omega-numbered__desc">{{ value.description }}</p>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>

package/themes/base/_sections/about/principles/section.json5

@@ -0,0 +1,34 @@
+{
+  description: 'About principles — the numbered values list under a centered section head. Order is the statement: item 1 outranks item 2. The layout bridges the page\'s values object via data:.',
+
+  args: {
+    superheadline: 'object', // { text }
+    headline: 'string',
+    headline_accent: 'string',
+    subheadline: 'string',
+    items: 'array', // [{ title, description }] — icons intentionally unrendered; the index number is the mark
+  },
+
+  defaults: {
+    superheadline: { text: 'Principles' },
+    headline: 'What we <em>refuse</em> to compromise on',
+    // An ABSENT subheadline renders NOTHING (#512): the optional sub line is
+    // never a demo sentence a brand's own band inherits. The demo copy lives
+    // in the variant below.
+    subheadline: '',
+    items: [
+      { title: 'Ship it simple', description: 'The smallest thing that solves the problem wins.' },
+      { title: 'Own the outcome', description: 'Everyone ships; everyone answers for what ships.' },
+      { title: 'Say it plainly', description: 'Clear words over clever ones, in product and in person.' },
+    ],
+  },
+
+  demo: [
+    {
+      label: 'Default principles',
+      args: {
+        subheadline: 'Our working principles, in order.',
+      },
+    },
+  ],
+}

package/themes/base/_sections/about/timeline/section.html

@@ -0,0 +1,20 @@
+<section>
+  <div class="container">
+    <div class="omega-duo">
+      <div class="omega-duo__aside omega-section-head" data-omega-reveal>
+        {% component "heading/section-head", superheadline: args.superheadline.text, headline: args.headline, headline_accent: args.headline_accent, sub: args.subheadline %}
+      </div>
+
+      <div class="omega-timeline" data-omega-reveal-stagger="80">
+        {% for item in args.items %}
+          <div class="omega-timeline__item" data-omega-reveal>
+            {%- comment %} A value is TEXT, never markup (#580). {% endcomment -%}
+            <div class="omega-timeline__year">{{ item.year | escape_once }}</div>
+            <div class="omega-timeline__title">{{ item.title }}</div>
+            <p class="omega-timeline__desc">{{ item.description }}</p>
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</section>

package/themes/base/_sections/about/timeline/section.json5

@@ -0,0 +1,34 @@
+{
+  description: 'About timeline — sticky section head beside the year-by-year journey. The layout bridges the page\'s story object via data:.',
+
+  args: {
+    superheadline: 'object', // { text }
+    headline: 'string',
+    headline_accent: 'string',
+    subheadline: 'string',
+    items: 'array', // [{ year, title, description }]
+  },
+
+  defaults: {
+    superheadline: { text: 'History' },
+    headline: 'Follow our <em>journey</em>',
+    // An ABSENT subheadline renders NOTHING (#512): the optional sub line is
+    // never a demo sentence a brand's own band inherits. The demo copy lives
+    // in the variant below.
+    subheadline: '',
+    items: [
+      { year: '2017', title: 'The beginning', description: 'Founded with a vision to revolutionize the industry' },
+      { year: '2020', title: 'Global expansion', description: 'Reached customers in over 100 countries' },
+      { year: '2024', title: 'Innovation award', description: 'Recognized as an industry leader' },
+    ],
+  },
+
+  demo: [
+    {
+      label: 'Default journey',
+      args: {
+        subheadline: 'The moments that shaped how we work.',
+      },
+    },
+  ],
+}

package/themes/base/_sections/marketing/bento/section.html

@@ -0,0 +1,91 @@
+{% if args.items and args.items.size > 0 %}
+  <section>
+    <div class="container">
+      {%- comment %} superheadline takes a plain string OR { text }: the object
+      shape resolves to its label, the string passes straight through. Either
+      way the micro line is words only. {% endcomment -%}
+      {%- if args.superheadline.text -%}
+        {%- assign superheadline = args.superheadline.text -%}
+      {%- else -%}
+        {%- assign superheadline = args.superheadline -%}
+      {%- endif %}
+      <div class="omega-section-head omega-section-head--center mb-5" data-omega-reveal>
+        {% component "heading/section-head", superheadline: superheadline, headline: args.headline, headline_accent: args.headline_accent, sub: args.subheadline %}
+      </div>
+
+      <div class="omega-bento" data-omega-reveal-stagger="70">
+        {% for item in args.items %}
+          {% capture span_class %}{% if item.span == 'big' %}omega-tile--big{% elsif item.span == 'tall' %}omega-tile--tall{% elsif item.span == 'wide' %}omega-tile--wide{% endif %}{% endcapture %}
+          {%- comment %} A tile with href IS the link: the whole surface becomes
+          ONE anchor wearing the shared .omega-interactive states, so its body
+          carries no nested anchor (invalid html). No href = the div tile,
+          unchanged. {% endcomment -%}
+          {% capture tile_class %}omega-tile {{ span_class }}{% if item.href != blank %} omega-interactive{% endif %}{% endcapture %}
+          {% capture tile_body %}
+            <div class="omega-tile__head">
+              {% iftruthy args.numbered %}
+                <span class="omega-tile__ordinal">{{ forloop.index }}</span>
+              {% endiftruthy %}
+              {% iftruthy item.icon %}
+                <span class="omega-icon-chip"><i class="fa-solid fa-{{ item.icon }} fa-sm"></i></span>
+              {% endiftruthy %}
+              <span class="omega-tile__title">{{ item.title }}</span>
+            </div>
+            <p class="omega-tile__desc">{{ item.description }}</p>
+
+            {% case item.type %}
+              {% when 'code' %}
+                {%- comment %} Panel tokens and transcript lines are TEXT, never
+                markup (#580): a literal `<` opened a tag the minifier ate.
+                {% endcomment -%}
+                <div class="omega-tile__code omega-ink-panel"><span class="tok-c">{{ args.config_demo.label | escape_once }}</span>
+{ brand: { name: <span class="tok-v">'{{ args.config_demo.name | escape_once }}'</span>,
+           color: <span class="tok-a">'{{ args.config_demo.color | escape_once }}'</span> },
+  targets: { <span class="tok-k">web</span>: {…}, <span class="tok-k">backend</span>: {…},
+             <span class="tok-k">desktop</span>: {…}, <span class="tok-k">extension</span>: {…} } }</div>
+              {% when 'terminal' %}
+                <div class="omega-tile__term omega-ink-panel">
+                  <div><span class="omega-term__prompt">$</span> {{ item.terminal.command | default: 'npm run deploy' | escape_once }}</div>
+                  <div class="omega-term__out">{{ item.terminal.out | default: '→ building 42 pages · hashing assets' | escape_once }}</div>
+                  <div class="omega-term__out"><span class="omega-term__ok">✓</span> {{ item.terminal.ok | default: 'live in 38s' | escape_once }}<span class="omega-caret"></span></div>
+                </div>
+              {% when 'split' %}
+                <div class="omega-tile__demo">
+                  <div class="omega-tile__split">
+                    <div class="omega-tile__split-pane">
+                      <div class="omega-tile__split-card">Revenue<span class="omega-tile__split-num">$24.3k</span></div>
+                    </div>
+                    <div class="omega-tile__split-pane">
+                      <div class="omega-tile__split-card">Revenue<span class="omega-tile__split-num">$24.3k</span></div>
+                    </div>
+                  </div>
+                </div>
+              {% when 'brand' %}
+                <div class="omega-tile__brandrow">
+                  <span class="omega-tile__swatch active" style="background: var(--omega-accent);"></span>
+                  <span class="omega-tile__swatch" style="background: #d6336c;"></span>
+                  <span class="omega-tile__swatch" style="background: #0f8fa9;"></span>
+                  <span class="omega-tile__swatch" style="background: #c47206;"></span>
+                  <span class="omega-tile__swatch" style="background: #12925c;"></span>
+                </div>
+            {% endcase %}
+          {% endcapture %}
+          {% if item.href != blank %}
+            <a href="{{ item.href }}" class="{{ tile_class }}" data-omega-reveal>{{ tile_body }}</a>
+          {% else %}
+            <div class="{{ tile_class }}" data-omega-reveal>{{ tile_body }}</div>
+          {% endif %}
+        {% endfor %}
+      </div>
+      {%- if args.cta_button.enabled != false and args.cta_button.text %}
+
+      <div class="text-center mt-5" data-omega-reveal>
+        <a href="{{ args.cta_button.href }}" class="btn btn-adaptive btn-lg omega-hover-nudge">
+          {{ args.cta_button.text }}
+          <span class="omega-nudge ms-2"><i class="fa-solid fa-arrow-right fa-sm"></i></span>
+        </a>
+      </div>
+      {%- endif %}
+    </div>
+  </section>
+{% endif %}

package/themes/base/_sections/marketing/bento/section.json5

@@ -0,0 +1,152 @@
+{
+  description: 'The hairline feature grid — mixed-size tiles (span: big/tall/wide) with typed demo bodies (type: code/terminal/split/brand/default), closing on the optional cta_button. Give a tile an href and the WHOLE tile becomes one anchor (the linked-card listing: hubs, category indexes) — its body carries no nested anchors. numbered: true counts the tiles as process steps. Empty items suppresses the band. superheadline accepts a string or { text } (no schema type on purpose).',
+
+  args: {
+    superheadline: { description: 'string or { text } — both render as the micro label, words only' },
+    headline: 'string',
+    headline_accent: 'string',
+    subheadline: 'string',
+    items: 'array', // [{ title, description, icon, span, type, href }] — href turns that tile into ONE anchor
+    numbered: { type: 'boolean', description: 'auto-numbers the tiles 1..N by position as an ordinal chip (process steps); reordering renumbers itself' },
+    config_demo: 'object',
+    cta_button: { type: 'object', description: 'the closing CTA under the grid — { text, href, enabled }; enabled: false suppresses it' },
+  },
+
+  defaults: {
+    superheadline: 'Why {{ resolved.config.brand.name }}',
+    headline: "Everything you need. <em>Nothing you don't.</em>",
+    // No sub line by default: an ABSENT subheadline renders NOTHING. A band
+    // the brand authors inherits no words it never wrote (the demo line lives
+    // in the gallery variant below, where sample content belongs).
+    subheadline: '',
+    items: [
+      {
+        type: 'code',
+        span: 'big',
+        icon: 'sliders',
+        title: 'One config, every surface',
+        description: 'A single file drives your brand, targets, and integrations. Change it once and every page follows.',
+      },
+      {
+        type: 'split',
+        span: 'tall',
+        icon: 'circle-half-stroke',
+        title: 'Light & dark, born together',
+        description: 'Every component ships in both modes from day one, with no bolted-on dark theme.',
+      },
+      {
+        type: 'terminal',
+        icon: 'terminal',
+        title: 'Deploy in one verb',
+        description: 'Build, verify, and publish from a single command.',
+      },
+      {
+        type: 'brand',
+        icon: 'palette',
+        title: 'Your brand, everywhere',
+        description: 'One brand color recolors every accent surface: buttons, links, focus rings, charts.',
+      },
+      {
+        type: 'default',
+        icon: 'shield-halved',
+        title: 'Auth & accounts built in',
+        description: 'Sign-in, subscriptions, and billing flows ready on day one.',
+      },
+    ],
+    // The fake-config demo panel inside the 'code' tile (previously hardcoded
+    // {{ resolved.config.brand.* }} in markup — now args, per context-freeness). label
+    // is the comment line above the snippet — generic by default (pass B: no
+    // framework filename in a theme's voice); a brand that wants its real
+    // config named passes its own. The 'terminal' tile's mock lines are
+    // per-ITEM args the same way: item.terminal.{command,out,ok}, defaulting
+    // to a generic npm session.
+    config_demo: {
+      label: '// one config, every target',
+      name: '{{ resolved.config.brand.name }}',
+      color: '{{ resolved.config.brand.color | default: "#2563EB" }}',
+    },
+  },
+
+  // Showcase variants (spec §9)
+  demo: [
+    {
+      label: 'Default grid',
+      args: {
+        subheadline: 'A complete foundation that stays out of your way: configure once, ship everywhere.',
+      },
+    },
+    {
+      // Demo hrefs point at pages EVERY brand build writes — a default page
+      // may never link a route the build never wrote (#427).
+      label: 'Linked tiles — a hub listing',
+      args: {
+        superheadline: { text: 'Start here' },
+        headline: 'Everything, one grid',
+        subheadline: 'Each tile is the link: the whole card clicks through.',
+        items: [
+          {
+            icon: 'tag',
+            title: 'What it costs',
+            description: 'Every plan, and what each one includes.',
+            href: '/pricing',
+          },
+          {
+            icon: 'users',
+            title: 'Who we are',
+            description: 'The people behind the product.',
+            href: '/about',
+          },
+          {
+            icon: 'envelope',
+            title: 'Talk to us',
+            description: 'Questions, demos, and anything else.',
+            href: '/contact',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Numbered process',
+      args: {
+        superheadline: { text: 'How it works' },
+        headline: 'Four steps, start to live',
+        numbered: true,
+        items: [
+          { icon: 'comments', title: 'Discover', description: 'We listen before we draw anything.' },
+          { icon: 'pen-ruler', title: 'Design', description: 'The shape of the thing, agreed up front.' },
+          { icon: 'hammer', title: 'Build', description: 'Shipped in weekly slices you can see.' },
+          { icon: 'rocket', title: 'Launch', description: 'Live, measured, and handed over.' },
+        ],
+      },
+    },
+    {
+      label: 'Three tiles, icon eyebrow + closing CTA',
+      args: {
+        superheadline: { text: 'The short list' },
+        headline: 'The essentials',
+        subheadline: 'A tighter grid: layout self-adjusts to the item count.',
+        cta_button: { text: 'See every feature', href: '/pricing' },
+        items: [
+          {
+            type: 'terminal',
+            icon: 'terminal',
+            title: 'One-verb deploys',
+            description: 'Build, verify, and publish from a single command.',
+          },
+          {
+            type: 'default',
+            icon: 'bolt',
+            title: 'Fast by default',
+            description: 'Static output, tuned assets, nothing to babysit.',
+          },
+          {
+            type: 'default',
+            icon: 'lock',
+            title: 'Secure sessions',
+            description: 'Auth and account flows ready on day one.',
+          },
+        ],
+      },
+    },
+  ],
+}

package/themes/base/_sections/marketing/cta/section.html

@@ -0,0 +1,44 @@
+{% if args.enabled %}
+  <section{% if args.section_class != blank %} class="{{ args.section_class }}"{% endif %}>
+    <div class="container">
+      <div class="omega-cta omega-ink-panel" data-omega-reveal="scale">
+        {% iftruthy args.superheadline.text %}
+          <span class="omega-micro d-block mb-3">{{ args.superheadline.text }}</span>
+        {% endiftruthy %}
+        <h2 class="omega-cta__headline">{% if args.headline_accent != blank %}
+          {{ args.headline }}
+          <em>{{ args.headline_accent }}</em>
+        {% else %}{{ args.headline }}{% endif %}</h2>
+        {% iftruthy args.subheadline %}
+          <p class="omega-cta__sub">{{ args.subheadline }}</p>
+        {% endiftruthy %}
+        <div class="omega-cta__ctas">
+          {% iftruthy args.primary_button.text %}
+            <a href="{{ args.primary_button.href }}" class="btn btn-adaptive btn-lg omega-hover-nudge">
+              {{ args.primary_button.text }}
+              <span class="omega-nudge ms-2"><i class="fa-solid fa-arrow-right fa-sm"></i></span>
+            </a>
+          {% endiftruthy %}
+          {% iftruthy args.command %}
+            <a href="{{ args.command_href | default: '/download' }}" class="btn btn-cmd btn-lg">
+              {%- comment %} A shell command is TEXT, never markup (#580). {% endcomment -%}
+              <span class="omega-cmd-prompt">$</span>{{ args.command | escape_once }}
+            </a>
+          {% endiftruthy %}
+          {% iftruthy args.secondary_button.text %}
+            {% if args.secondary_button.nudge %}
+              <a href="{{ args.secondary_button.href }}" class="btn btn-outline-adaptive btn-lg omega-hover-nudge">
+                {{ args.secondary_button.text }}
+                <span class="omega-nudge ms-2"><i class="fa-solid fa-arrow-right fa-sm"></i></span>
+              </a>
+            {% else %}
+              <a href="{{ args.secondary_button.href }}" class="btn btn-outline-adaptive btn-lg">
+                {{ args.secondary_button.text }}
+              </a>
+            {% endif %}
+          {% endiftruthy %}
+        </div>
+      </div>
+    </div>
+  </section>
+{% endif %}

package/themes/base/_sections/marketing/cta/section.json5

@@ -0,0 +1,47 @@
+{
+  description: 'The ink CTA band — on by default, enabled: false removes it entirely; optional superheadline micro label, headline with optional <em> accent, optional subheadline, then primary button / mono command / secondary button (each renders only when set; secondary_button.nudge: true adds the arrow). A SHARED band (index, about, pricing, download, extension, team, alternatives) — defaults stay NEUTRAL and every page passes its own copy over the data bridge (spec §6 shared-band ruling).',
+
+  args: {
+    enabled: 'boolean',
+    superheadline: 'object',
+    headline: 'string',
+    headline_accent: 'string',
+    subheadline: 'string',
+    primary_button: 'object',
+    secondary_button: 'object',
+    command: 'string',
+    command_href: 'string',
+    section_class: 'string',
+  },
+
+  defaults: {
+    // Mechanical knob only (§6): the family gate. ON by default — a page that
+    // wants no CTA at all passes enabled: false and the band disappears
+    // instead of shipping framework words or an empty panel.
+    enabled: true,
+  },
+
+  // Showcase variants (spec §9) — a SHARED band keeps neutral defaults, so
+  // the demo carries its own generic copy.
+  demo: [
+    {
+      label: 'Full band',
+      args: {
+        superheadline: { text: 'Get started' },
+        headline: 'Ready to ship',
+        headline_accent: 'something great?',
+        subheadline: 'Start free and grow into every surface your product needs.',
+        primary_button: { text: 'Start free', href: '/signup', icon: 'rocket' },
+        command: 'npx acme setup',
+        secondary_button: { text: 'Talk to sales', href: '/contact', nudge: true },
+      },
+    },
+    {
+      label: 'Minimal',
+      args: {
+        headline: 'Try it today',
+        primary_button: { text: 'Get started', href: '/signup' },
+      },
+    },
+  ],
+}

package/themes/base/_sections/marketing/faq/section.html

@@ -0,0 +1,52 @@
+{% comment %} FAQ accordion band. Duo layout (aside head left, accordion
+right) by default; variant: "center" stacks a centered head over a narrowed
+accordion. Bootstrap collapse wires by DOM id — dom_id namespaces them so two
+instances on one page can coexist. {% endcomment %}
+{%- capture _head -%}
+{% component "heading/section-head", superheadline: args.superheadline.text, headline: args.headline, headline_accent: args.headline_accent, sub: args.subheadline %}
+{%- endcapture -%}
+{%- capture _accordion -%}
+<div class="omega-faq accordion" id="{{ args.dom_id }}Accordion" data-omega-reveal>
+  {% for faq in args.items %}
+    <div class="accordion-item">
+      <h2 class="accordion-header">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#{{ args.dom_id }}{{ forloop.index }}" aria-expanded="false" aria-controls="{{ args.dom_id }}{{ forloop.index }}">
+          {{ faq.question }}
+        </button>
+      </h2>
+      <div id="{{ args.dom_id }}{{ forloop.index }}" class="accordion-collapse collapse" data-bs-parent="#{{ args.dom_id }}Accordion">
+        <div class="accordion-body">
+          {{ faq.answer }}
+        </div>
+      </div>
+    </div>
+  {% endfor %}
+</div>
+{%- endcapture -%}
+{%- if args.variant == "center" -%}
+<section>
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-lg-8">
+        <div class="omega-section-head omega-section-head--center mb-5" data-omega-reveal>
+          {{ _head }}
+        </div>
+
+        {{ _accordion }}
+      </div>
+    </div>
+  </div>
+</section>
+{%- else -%}
+<section>
+  <div class="container">
+    <div class="omega-duo">
+      <div class="omega-duo__aside omega-section-head" data-omega-reveal>
+        {{ _head }}
+      </div>
+
+      {{ _accordion }}
+    </div>
+  </div>
+</section>
+{%- endif %}

package/themes/base/_sections/marketing/faq/section.json5

@@ -0,0 +1,68 @@
+{
+  description: 'FAQ accordion band — aside head + Bootstrap accordion in the asymmetric duo layout by default; variant: "center" stacks a centered head over a narrowed accordion (col-lg-8). A SHARED band (contact, download, extension, alternatives) — defaults stay NEUTRAL and every page passes its own copy over the data bridge (spec §6 shared-band ruling). Pricing keeps its own inline copy: its aside embeds the bespoke billing-guarantee object.',
+
+  args: {
+    superheadline: 'object', // { text } — the micro label is words only
+    headline: 'string',
+    headline_accent: 'string',
+    subheadline: 'string',
+    items: 'array',
+    variant: 'string',
+    dom_id: 'string',
+  },
+
+  defaults: {
+    // Mechanical knob only (§6): Bootstrap collapse wires by DOM id; a second
+    // instance on one page passes its own namespace.
+    dom_id: 'faq',
+  },
+
+  // Showcase variants (spec §9) — a SHARED band keeps neutral defaults, so
+  // the demo carries its own generic copy. Both variants render on one page,
+  // so each passes its own dom_id (exactly what the knob is for).
+  demo: [
+    {
+      label: 'Duo layout',
+      args: {
+        superheadline: { text: 'FAQ' },
+        headline: 'Common questions',
+        subheadline: 'Short answers to the things people ask first.',
+        dom_id: 'demoFaqDuo',
+        items: [
+          {
+            question: 'Do I need a credit card to start?',
+            answer: 'No. The free plan needs only an email address.',
+          },
+          {
+            question: 'Can I bring my own domain?',
+            answer: 'Yes. Point your DNS at us and certificates are handled automatically.',
+          },
+          {
+            question: 'What happens if I cancel?',
+            answer: 'Your site keeps running until the end of the billing period, and your content exports any time.',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Centered',
+      args: {
+        variant: 'center',
+        superheadline: { text: 'FAQ' },
+        headline: 'Questions,',
+        headline_accent: 'answered',
+        dom_id: 'demoFaqCenter',
+        items: [
+          {
+            question: 'Is there a free tier?',
+            answer: 'Yes. Free forever for personal projects.',
+          },
+          {
+            question: 'How do upgrades work?',
+            answer: 'One click from the dashboard; changes prorate automatically.',
+          },
+        ],
+      },
+    },
+  ],
+}