@omega.js/web 0.1.0

package/themes/base/_includes/global/sections/app-topbar.html

@@ -0,0 +1,228 @@
+{% comment %}
+  Base app topbar, omega-* markup shared by backend + admin surfaces (the cap
+  of the big content card). The CALLER assigns `data` before including this.
+
+  Data shape:
+    search:  { enabled, action, name, placeholder }        (optional; form GET)
+    status:  { label, tone: ok|warn|danger }                (optional env pill)
+    actions: [{ type: 'account' } | { type: 'notifications', icon, badge, dropdown }
+              | { label, href, icon, class, size, dropdown }]
+
+    action.size is 'sm' | 'lg' (Bootstrap's button sizes) — anything else
+    renders no size class. NEVER test it for truthiness: Liquid answers `.size`
+    on a hash with its KEY COUNT, so every action would "have" a size (#43).
+
+  Breadcrumbs come from the page's resolved.config.theme.header.breadcrumbs.items
+  (the same frontmatter API as ever — they render here now instead of the
+  in-card page header).
+{% endcomment %}
+
+<header class="omega-shell__topbar">
+  <div class="omega-shell__topbar-start">
+    {% comment %}Rail controls, on the same switch backend/core/base applies to the sidebar itself (#740): with no rail on the page they would be dead buttons naming an id the document does not carry.{% endcomment %}
+    {% unless resolved.config.theme.sidebar.enabled == false %}
+      <!-- Drawer toggle (mobile) -->
+      <button class="btn-icon d-xl-none" type="button" data-shell-toggle="drawer" aria-expanded="false" aria-controls="app-sidebar" aria-label="Toggle navigation">
+        <i class="fa-solid fa-bars fa-md"></i>
+      </button>
+
+      <!-- Rail collapse toggle (desktop) -->
+      <button class="btn-icon d-none d-xl-inline-flex" type="button" data-shell-toggle="collapse" aria-expanded="true" aria-controls="app-sidebar" aria-label="Toggle sidebar">
+        <i class="fa-solid fa-table-columns fa-sm"></i>
+      </button>
+    {% endunless %}
+
+    <!-- Breadcrumb trail -->
+    <div class="omega-topbar__crumbs d-none d-md-flex">
+      {% if resolved.config.theme.header.breadcrumbs.items %}
+        {% for crumb in resolved.config.theme.header.breadcrumbs.items %}
+          {% if forloop.last %}
+            <span>{{ crumb.label }}</span>
+          {% else %}
+            {% iftruthy crumb.href %}
+              <a href="{{ crumb.href }}">{{ crumb.label }}</a>
+            {% endiftruthy %}
+            {% iffalsy crumb.href %}
+              <span>{{ crumb.label }}</span>
+            {% endiffalsy %}
+            <span class="omega-topbar__crumb-sep">/</span>
+          {% endif %}
+        {% endfor %}
+      {% else %}
+        <span>{{ resolved.config.theme.header.title.content | default: resolved.meta.title | omega_liquify }}</span>
+      {% endif %}
+
+      {% iftruthy data.status.label %}
+        <span class="omega-status omega-status--{{ data.status.tone | default: 'ok' }} ms-2">
+          <span class="omega-dot omega-dot--{{ data.status.tone | default: 'ok' }}"></span>
+          {{ data.status.label }}
+        </span>
+      {% endiftruthy %}
+    </div>
+  </div>
+
+  <!-- Search (center) -->
+  {% if data.search %}
+    <div class="omega-topbar__center">
+      <form class="omega-search" action="{{ data.search.action | default: '/search' }}" method="get" role="search">
+        <i class="fa-solid fa-magnifying-glass fa-sm"></i>
+        <input
+          type="search"
+          name="{{ data.search.name | default: 'q' }}"
+          placeholder="{{ data.search.placeholder | default: 'Search…' }}"
+          aria-label="Search"
+        />
+        <kbd>⌘K</kbd>
+      </form>
+    </div>
+  {% endif %}
+
+  <div class="omega-shell__topbar-end">
+    <!-- Custom Actions -->
+    {% for action in data.actions %}
+      {% if action.type == 'notifications' %}
+        <!-- Notifications Dropdown -->
+        {% capture action_attributes %}{% if action.attributes %}{% for attr in action.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
+        <div class="dropdown">
+          {% capture notif_icon %}{{ action.icon | default: "bell" }}{% endcapture %}
+          <button class="btn-icon position-relative" type="button" data-bs-toggle="dropdown" {{ action_attributes }} aria-expanded="false" aria-label="{{ action.label | default: 'Notifications' }}">
+            <i class="fa-solid fa-{{ notif_icon }} fa-sm"></i>
+            {% if action.badge %}
+              <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill {{ action.badge.class | default: 'bg-danger' }}">
+                {{ action.badge.text }}
+                <span class="visually-hidden">unread notifications</span>
+              </span>
+            {% endif %}
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end" style="min-width: 320px; max-height: 400px; overflow-y: auto;">
+            <li class="px-3 py-2 hairline-bottom">
+              <div class="d-flex align-items-center justify-content-between">
+                <h6 class="mb-0">{{ action.label | default: 'Notifications' }}</h6>
+                {% if action.mark_all_read %}
+                  <a href="{{ action.mark_all_read }}" class="small text-decoration-none">Mark all read</a>
+                {% endif %}
+              </div>
+            </li>
+            {% if action.dropdown %}
+              {% for notification in action.dropdown %}
+                {% capture notif_attributes %}{% if notification.attributes %}{% for attr in notification.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
+                {% capture notif_class %}dropdown-item px-3 py-2 {% if notification.class %}{{ notification.class }}{% endif %}{% endcapture %}
+
+                {% if notification.divider %}
+                  <li><hr class="dropdown-divider" {{ notif_attributes }}/></li>
+                {% else %}
+                  <li>
+                    {% capture notif_content %}
+                      <div class="d-flex">
+                        {% if notification.icon %}
+                          <span class="omega-icon-chip omega-icon-chip--neutral me-3 flex-shrink-0">
+                            <i class="fa-solid fa-{{ notification.icon }} fa-sm"></i>
+                          </span>
+                        {% endif %}
+                        <div class="flex-fill">
+                          <div class="fw-semibold small">{{ notification.title }}</div>
+                          {% if notification.message %}
+                            <div class="small text-muted">{{ notification.message }}</div>
+                          {% endif %}
+                          {% if notification.time %}
+                            <div class="small text-muted mt-1">{{ notification.time }}</div>
+                          {% endif %}
+                        </div>
+                        {% if notification.unread %}
+                          <span class="omega-dot ms-2 mt-1"></span>
+                        {% endif %}
+                      </div>
+                    {% endcapture %}
+                    {% iftruthy notification.href %}
+                      <a class="{{ notif_class }}" href="{{ notification.href }}" {{ notif_attributes }}>
+                        {{ notif_content }}
+                      </a>
+                    {% endiftruthy %}
+                    {% iffalsy notification.href %}
+                      <div class="{{ notif_class }}" {{ notif_attributes }}>
+                        {{ notif_content }}
+                      </div>
+                    {% endiffalsy %}
+                  </li>
+                {% endif %}
+              {% endfor %}
+            {% else %}
+              <li class="px-3 py-4 text-center text-muted small">
+                No notifications
+              </li>
+            {% endif %}
+          </ul>
+        </div>
+      {% elsif action.type == 'account' %}
+        <!-- Account Dropdown -->
+        {% include global/sections/account.html size="sm" attributes=action.attributes %}
+      {% elsif action.dropdown %}
+        <!-- Generic Dropdown -->
+        {% comment %}Liquid's `.size` on a hash is its KEY COUNT — test the value, never truthiness (#43). The btn-sm default only applies when the author set no size.{% endcomment %}
+        {% assign action_size = '' %}{% if action.size == 'sm' or action.size == 'lg' %}{% assign action_size = action.size %}{% endif %}
+        {% capture action_class %}btn {% if action_size != '' %}btn-{{ action_size }}{% endif %} {% if action.class %}{{ action.class }}{% else %}btn-outline-adaptive{% if action_size == '' %} btn-sm{% endif %}{% endif %}{% endcapture %}
+        {% capture action_attributes %}{% if action.attributes %}{% for attr in action.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
+        <div class="dropdown">
+          <button class="{{ action_class }} dropdown-toggle" type="button" data-bs-toggle="dropdown" {{ action_attributes }}>
+            {% if action.icon %}
+              <i class="fa-solid fa-{{ action.icon }} fa-sm me-2"></i>
+            {% endif %}
+            <span>{{ action.label }}</span>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-end">
+            {% for child in action.dropdown %}
+              {% capture child_attributes %}{% if child.attributes %}{% for attr in child.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
+              {% capture child_active %}{% urlmatches child.href, "active" %}{% endcapture %}
+              {% capture child_class %}dropdown-item {{ child_active }} {% if child.class %}{{ child.class }}{% endif %}{% endcapture %}
+              {% capture child_content %}
+                {% if child.icon %}
+                  <i class="fa-solid fa-{{ child.icon }} fa-sm me-2"></i>
+                {% endif %}
+                <span>{{ child.label }}</span>
+              {% endcapture %}
+
+              {% if child.divider %}
+                <li><hr class="dropdown-divider" {{ child_attributes }}/></li>
+              {% else %}
+                <li>
+                  {% iftruthy child.href %}
+                    <a class="{{ child_class }}" href="{{ child.href }}" {{ child_attributes }}>
+                      {{ child_content }}
+                    </a>
+                  {% endiftruthy %}
+                  {% iffalsy child.href %}
+                    <button class="{{ child_class }}" type="button" {{ child_attributes }}>
+                      {{ child_content }}
+                    </button>
+                  {% endiffalsy %}
+                </li>
+              {% endif %}
+            {% endfor %}
+          </ul>
+        </div>
+      {% else %}
+        <!-- Regular Button -->
+        {% comment %}Liquid's `.size` on a hash is its KEY COUNT — test the value, never truthiness (#43). The btn-sm default only applies when the author set no size.{% endcomment %}
+        {% assign action_size = '' %}{% if action.size == 'sm' or action.size == 'lg' %}{% assign action_size = action.size %}{% endif %}
+        {% capture action_class %}btn {% if action_size != '' %}btn-{{ action_size }}{% endif %} {% if action.class %}{{ action.class }}{% else %}btn-outline-adaptive{% if action_size == '' %} btn-sm{% endif %}{% endif %}{% endcapture %}
+        {% capture action_attributes %}{% if action.attributes %}{% for attr in action.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
+        {% capture action_content %}
+          {% if action.icon %}
+            <i class="fa-solid fa-{{ action.icon }} fa-sm me-2"></i>
+          {% endif %}
+          <span>{{ action.label }}</span>
+        {% endcapture %}
+        {% iftruthy action.href %}
+          <a class="{{ action_class }}" href="{{ action.href }}" {{ action_attributes }}>
+            {{ action_content }}
+          </a>
+        {% endiftruthy %}
+        {% iffalsy action.href %}
+          <button class="{{ action_class }}" type="button" {{ action_attributes }}>
+            {{ action_content }}
+          </button>
+        {% endiffalsy %}
+      {% endif %}
+    {% endfor %}
+  </div>
+</header>

package/themes/base/_includes/global/sections/page-header.html

@@ -0,0 +1,99 @@
+{% comment %}
+  Shared base in-card page header: title + actions. Breadcrumbs moved to the
+  app topbar (global/sections/app-topbar.html) but keep their frontmatter API:
+  resolved.config.theme.header.{title, actions} render here.
+
+  action.size is 'sm' | 'lg' (Bootstrap's button sizes) — anything else renders
+  no size class. NEVER test it for truthiness: Liquid answers `.size` on a hash
+  with its KEY COUNT, so every action would "have" a size (#43).
+{% endcomment %}
+{% unless resolved.config.theme.header.enabled == false %}
+  <div class="page-header pb-3 mb-4 hairline-bottom">
+    <div class="row align-items-center">
+      <div class="col">
+        <!-- Page Title -->
+        {% unless resolved.config.theme.header.title.enabled == false %}
+          <h1 class="page-title mb-0 d-flex align-items-center {{ resolved.config.theme.header.title.class }}">
+            {% if resolved.config.theme.header.title.icon %}
+              <span class="omega-icon-chip omega-icon-chip--neutral me-2"><i class="fa-solid fa-{{ resolved.config.theme.header.title.icon }} fa-sm"></i></span>
+            {% endif %}
+            {{- resolved.config.theme.header.title.content | default: resolved.meta.title | omega_liquify -}}
+          </h1>
+        {% endunless %}
+      </div>
+
+      <!-- Page Actions (Right Side) -->
+      {% unless resolved.config.theme.header.actions.enabled == false %}
+        {% if resolved.config.theme.header.actions.items %}
+          <div class="col-auto">
+            <div class="d-flex gap-2">
+              {% for action in resolved.config.theme.header.actions.items %}
+                {% capture action_color %}{{ action.color | default: 'adaptive' }}{% endcapture %}
+                {% if action_color == 'primary' %}
+                  {% assign action_btn = 'btn-adaptive' %}
+                {% elsif action_color == 'adaptive' %}
+                  {% assign action_btn = 'btn-outline-adaptive' %}
+                {% else %}
+                  {% capture action_btn %}btn-{{ action_color }}{% endcapture %}
+                {% endif %}
+                {% comment %}Liquid's `.size` on a hash is its KEY COUNT — test the value, never truthiness (#43).{% endcomment %}
+                {% assign action_size = '' %}{% if action.size == 'sm' or action.size == 'lg' %}{% assign action_size = action.size %}{% endif %}
+                {% if action.dropdown %}
+                  <!-- Dropdown Button -->
+                  <div class="dropdown">
+                    <button class="btn {{ action_btn }} {% if action_size != '' %}btn-{{ action_size }}{% endif %} dropdown-toggle"
+                            type="button"
+                            data-bs-toggle="dropdown"
+                            aria-expanded="false">
+                      {% if action.icon %}
+                        <i class="fa-solid fa-{{ action.icon }} fa-sm me-2"></i>
+                      {% endif %}
+                      {{ action.label }}
+                    </button>
+                    <ul class="dropdown-menu dropdown-menu-end">
+                      {% for item in action.dropdown %}
+                        {% if item.divider %}
+                          <li><hr class="dropdown-divider"></li>
+                        {% else %}
+                          <li>
+                            <a class="dropdown-item" href="{{ item.href | default: '#' }}">
+                              {% if item.icon %}
+                                <i class="fa-solid fa-{{ item.icon }} fa-sm me-2"></i>
+                              {% endif %}
+                              {{ item.label }}
+                            </a>
+                          </li>
+                        {% endif %}
+                      {% endfor %}
+                    </ul>
+                  </div>
+                {% else %}
+                  <!-- Regular Button -->
+                  {% capture action_class %}btn {{ action_btn }} {% if action_size != '' %}btn-{{ action_size }}{% endif %} {% if action.class %}{{ action.class }}{% endif %}{% endcapture %}
+                  {% capture action_attributes %}{% if action.attributes %}{% for attr in action.attributes %} {{ attr[0] }}="{{ attr[1] }}"{% endfor %}{% endif %}{% endcapture %}
+                  {% capture action_content %}
+                    {% if action.icon %}
+                      <i class="fa-solid fa-{{ action.icon }} fa-sm me-2"></i>
+                    {% endif %}
+                    {{ action.label }}
+                  {% endcapture %}
+
+                  {% iftruthy action.href %}
+                    <a class="{{ action_class }}" href="{{ action.href }}" {{ action_attributes }}>
+                      {{ action_content }}
+                    </a>
+                  {% endiftruthy %}
+                  {% iffalsy action.href %}
+                    <button class="{{ action_class }}" type="button" {{ action_attributes }}>
+                      {{ action_content }}
+                    </button>
+                  {% endiffalsy %}
+                {% endif %}
+              {% endfor %}
+            </div>
+          </div>
+        {% endif %}
+      {% endunless %}
+    </div>
+  </div>
+{% endunless %}

package/themes/base/_layouts/admin/core/minimal-viewport-locked.html

@@ -0,0 +1,22 @@
+---
+layout: backend/core/minimal-viewport-locked
+
+meta:
+  index: false
+
+config:
+  client:
+    auth:
+      config:
+        policy: "authenticated"
+        roles:
+          admin: true
+    consent:
+      enabled: false
+    chatsy:
+      enabled: false
+    exitPopup:
+      enabled: false
+---
+
+{{ content | omega_content_format }}

package/themes/base/_layouts/admin/core/minimal.html

@@ -0,0 +1,23 @@
+---
+layout: backend/core/minimal
+
+meta:
+  index: false
+
+config:
+  client:
+    auth:
+      config:
+        policy: "authenticated"
+        roles:
+          admin: true
+    consent:
+      enabled: false
+    chatsy:
+      enabled: false
+    exitPopup:
+      enabled: false
+---
+
+{{ content | omega_content_format }}
+

package/themes/base/_layouts/backend/core/base.html

@@ -0,0 +1,57 @@
+---
+layout: core/root
+
+# Shared base app shell: rides the core .omega-shell mechanics
+# (core/css/shell/_index.scss + core/js/core/app-shell.js). The classy skin
+# (css/layout/_shell.scss) paints the gray canvas + big rounded content card.
+
+config:
+  client:
+    auth:
+      config:
+        policy: "authenticated"
+    consent:
+      enabled: false
+    exitPopup:
+      enabled: false
+---
+
+<!-- Backend Layout: omega-shell (sidebar + topbar + main + drawer scrim) -->
+<div class="omega-shell" data-omega-shell>
+  <!-- Sidebar (full height, controlled by page/layout front matter) -->
+  {% unless resolved.config.theme.sidebar.enabled == false %}
+    {% if page.url contains "/admin" %}
+      {%- include admin/sections/sidebar.html -%}
+    {% else %}
+      {%- include backend/sections/sidebar.html -%}
+    {% endif %}
+  {% endunless %}
+
+  <!-- Top Bar (controlled by page/layout front matter) -->
+  {% unless resolved.config.theme.topbar.enabled == false %}
+    {% if page.url contains "/admin" %}
+      {%- include admin/sections/topbar.html -%}
+    {% else %}
+      {%- include backend/sections/topbar.html -%}
+    {% endif %}
+  {% endunless %}
+
+  <!-- Floating drawer toggle: the topbar carries the rail controls (#740), so a
+       page with a rail and no topbar would have no way to open the drawer on a
+       narrow viewport. Same declarative control, same handler (#719). -->
+  {% if resolved.config.theme.topbar.enabled == false %}
+    {% unless resolved.config.theme.sidebar.enabled == false %}
+      <button class="btn-icon omega-shell__drawer-toggle d-xl-none" type="button" data-shell-toggle="drawer" aria-expanded="false" aria-controls="app-sidebar" aria-label="Toggle navigation">
+        <i class="fa-solid fa-bars fa-md"></i>
+      </button>
+    {% endunless %}
+  {% endif %}
+
+  <!-- Main Content -->
+  <main id="main-content" class="omega-shell__main d-flex flex-column {{ resolved.config.theme.main.class | omega_liquify }}" aria-label="Main content">
+    {{ content | omega_content_format }}
+  </main>
+
+  <!-- Drawer scrim (mobile) -->
+  <div class="omega-shell__scrim" data-shell-dismiss></div>
+</div>

package/themes/base/_layouts/backend/core/minimal-viewport-locked.html

@@ -0,0 +1,32 @@
+---
+layout: backend/core/base
+
+config:
+  theme:
+    sidebar:
+      enabled: true
+    topbar:
+      enabled: true
+    header:
+      enabled: true
+      title:
+        enabled: true
+        # class: ""
+        # content: ""
+      breadcrumbs:
+        # items render in the app topbar (global/sections/app-topbar.html)
+        enabled: true
+      actions:
+        enabled: true
+        # items: []
+    main:
+      class: "page-viewport-locked"
+---
+
+<!-- Page Header with Title and Actions (breadcrumbs live in the topbar) -->
+{% include global/sections/page-header.html %}
+
+<!-- Page Content (viewport-locked: fills remaining height, no page scroll) -->
+<div class="page-content page-content-viewport-locked d-flex flex-column flex-grow-1">
+  {{ content | omega_content_format }}
+</div>

package/themes/base/_layouts/backend/core/minimal.html

@@ -0,0 +1,32 @@
+---
+layout: backend/core/base
+
+config:
+  theme:
+    sidebar:
+      enabled: true
+    topbar:
+      enabled: true
+    header:
+      enabled: true
+      title:
+        enabled: true
+        # class: ""
+        # content: ""
+      breadcrumbs:
+        # items render in the app topbar (global/sections/app-topbar.html)
+        enabled: true
+      actions:
+        enabled: true
+        # items: []
+    # main:
+    #   class: ""
+---
+
+<!-- Page Header with Title and Actions (breadcrumbs live in the topbar) -->
+{% include global/sections/page-header.html %}
+
+<!-- Page Content -->
+<div class="page-content d-flex flex-column flex-grow-1">
+  {{ content | omega_content_format }}
+</div>