jekyll-theme-zer0 1.24.0 → 1.26.0

data/_includes/components/info-section.html

@@ -1,20 +1,35 @@
+{% comment %} Feature: ZER0-046 {% endcomment %}
 <!--
   ===================================================================
   INFO SECTION - Settings Offcanvas with Tabbed Interface
   ===================================================================
-  
+
   File: info-section.html
   Path: _includes/components/info-section.html
-  Purpose: Unified settings offcanvas panel with tabs for Settings, Environment, Developer
-  
+  Purpose: Unified settings offcanvas panel with three tabs —
+           Appearance (color mode, skin, backgrounds, primary color),
+           Site (environment, theme & build info, admin links) and
+           Developer (page location, metadata, source shortcuts).
+
   Dependencies:
   - Bootstrap 5 Offcanvas, Tabs
+  - _includes/components/env-detect.html (sets is_production/build_env)
+  - _includes/components/halfmoon.html (color-mode segmented control)
+  - _includes/components/background-settings.html (skin + backgrounds)
   - _includes/components/env-switcher.html
   - _includes/components/theme-info.html
+  - _includes/components/admin-links.html (cached admin quick links)
   - _includes/components/dev-shortcuts.html
-  - _includes/components/halfmoon.html
   - _includes/navigation/breadcrumbs.html
-  
+  - assets/js/modules/theme/appearance.js mounts the primary-color
+    picker into #zer0AppearanceSlot when site.appearance_panel is on
+
+  Notes:
+  - #info-section and the three pane ids are a public surface: the
+    header, navbar, footer, unified drawer and Playwright suites all
+    target them. Rename with care.
+  - Appearance preferences persist in localStorage only (no cookies).
+
   References:
   - https://getbootstrap.com/docs/5.3/components/offcanvas/
   - https://getbootstrap.com/docs/5.3/components/navs-tabs/
@@ -22,38 +37,29 @@
 -->
 
 {% include components/env-detect.html %}
-{%- comment -%}
-  Admin page URL lookup string is computed once per build by the
-  _plugins/admin_page_urls.rb :pre_render hook and exposed as
-  site.data.admin_page_urls. This avoids re-running
-  `site.html_pages | where_exp | map | join` on every page render
-  (150+ renders → 1 plugin call per build).
-{%- endcomment -%}
-{%- assign _admin_page_urls = site.data.admin_page_urls | default: "" -%}
+
 <!-- Settings Offcanvas -->
 <div class="offcanvas offcanvas-end" tabindex="-1" id="info-section" aria-labelledby="infoSectionLabel">
-  
+
   <!-- Offcanvas Header -->
   <div class="offcanvas-header border-bottom pb-0 d-block">
     <div class="d-flex align-items-center justify-content-between mb-2">
       <h5 class="offcanvas-title" id="infoSectionLabel">
-        <i class="bi bi-gear-wide-connected me-2"></i>Settings
+        <i class="bi bi-gear-wide-connected me-2" aria-hidden="true"></i>Settings
       </h5>
       <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
-    
+
     <!-- Tab Navigation -->
-    <ul class="nav nav-tabs" id="infoTabs" role="tablist">
+    <ul class="nav nav-tabs nav-fill" id="infoTabs" role="tablist">
       <li class="nav-item" role="presentation">
-        <button class="nav-link active" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings-pane" type="button" role="tab" aria-controls="settings-pane" aria-selected="true">
-          <i class="bi bi-sliders me-1"></i>
-          <span class="d-none d-sm-inline">Settings</span>
+        <button class="nav-link active" id="appearance-tab" data-bs-toggle="tab" data-bs-target="#appearance-pane" type="button" role="tab" aria-controls="appearance-pane" aria-selected="true">
+          <i class="bi bi-palette me-1" aria-hidden="true"></i>Appearance
         </button>
       </li>
       <li class="nav-item" role="presentation">
-        <button class="nav-link" id="environment-tab" data-bs-toggle="tab" data-bs-target="#environment-pane" type="button" role="tab" aria-controls="environment-pane" aria-selected="false">
-          <i class="bi bi-hdd-network me-1"></i>
-          <span class="d-none d-sm-inline">Environment</span>
+        <button class="nav-link" id="site-tab" data-bs-toggle="tab" data-bs-target="#site-pane" type="button" role="tab" aria-controls="site-pane" aria-selected="false">
+          <i class="bi bi-globe2 me-1" aria-hidden="true"></i>Site
           {% if is_production %}
             <span class="badge bg-success ms-1 d-none d-md-inline-block">Prod</span>
           {% else %}
@@ -63,139 +69,87 @@
       </li>
       <li class="nav-item" role="presentation">
         <button class="nav-link" id="developer-tab" data-bs-toggle="tab" data-bs-target="#developer-pane" type="button" role="tab" aria-controls="developer-pane" aria-selected="false">
-          <i class="bi bi-code-slash me-1"></i>
-          <span class="d-none d-sm-inline">Developer</span>
-        </button>
-      </li>
-      <li class="nav-item" role="presentation">
-        <button class="nav-link" id="background-tab" data-bs-toggle="tab" data-bs-target="#background-pane" type="button" role="tab" aria-controls="background-pane" aria-selected="false">
-          <i class="bi bi-palette2 me-1"></i>
-          <span class="d-none d-sm-inline">Background</span>
+          <i class="bi bi-code-slash me-1" aria-hidden="true"></i>Developer
         </button>
       </li>
     </ul>
   </div>
-  
+
   <!-- Offcanvas Body with Tab Content -->
   <div class="offcanvas-body">
     <div class="tab-content" id="infoTabContent">
-      
-      <!-- Settings Tab -->
-      <div class="tab-pane fade show active" id="settings-pane" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">
-        
-        <!-- Search -->
+
+      <!-- Appearance Tab — everything that changes how the site looks -->
+      <div class="tab-pane fade show active" id="appearance-pane" role="tabpanel" aria-labelledby="appearance-tab" tabindex="0">
+
+        <!-- Color Mode -->
         <div class="mb-4">
           <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
-            <i class="bi bi-search me-1"></i>Search
+            <i class="bi bi-moon-stars me-1" aria-hidden="true"></i>Color Mode
           </h6>
-          {% include components/searchbar.html %}
+          {% include components/halfmoon.html class="w-100" %}
         </div>
-        
-        <!-- Theme Toggle -->
+
+        <!-- Theme skin + SVG backgrounds (skin buttons, toggle, opacity) -->
+        {% include_cached components/background-settings.html %}
+
+        <!-- Primary color picker mounts here (appearance.js, optional) -->
+        <div id="zer0AppearanceSlot"></div>
+
+        <p class="text-body-secondary small mb-0 mt-4">
+          <i class="bi bi-device-hdd me-1" aria-hidden="true"></i>
+          Appearance preferences are saved in this browser only.
+        </p>
+      </div>
+
+      <!-- Site Tab — where the site runs and what it is built from -->
+      <div class="tab-pane fade" id="site-pane" role="tabpanel" aria-labelledby="site-tab" tabindex="0">
+
+        <!-- Environment -->
         <div class="mb-4">
           <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
-            <i class="bi bi-moon-stars me-1"></i>Appearance
-          </h6>
-          <div class="d-flex align-items-center justify-content-between p-3 bg-body-tertiary rounded">
-            <span>Theme Mode</span>
-            {% include components/halfmoon.html %}
-          </div>
-        </div>
-        
-        <!-- Theme Info (Collapsible) -->
-        <div class="mb-3">
-          <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
-            <i class="bi bi-info-circle me-1"></i>About
+            <i class="bi bi-hdd-network me-1" aria-hidden="true"></i>Environment
           </h6>
-          <button class="btn btn-outline-secondary btn-sm w-100 d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#themeInfoCollapse" aria-expanded="false" aria-controls="themeInfoCollapse">
-            <span>Theme & Build Info</span>
-            <i class="bi bi-chevron-down"></i>
-          </button>
-          <div class="collapse mt-2" id="themeInfoCollapse">
-            {% include components/theme-info.html %}
-          </div>
+          {% include components/env-switcher.html %}
         </div>
 
-        <!-- Admin Quick Links — only render links to pages that actually exist
-             in the build (prevents 404s on bare-minimum / remote-theme sites
-             that haven't created the admin pages). -->
-        {% assign _cfg_page = false %}
-        {% assign _theme_page = false %}
-        {% assign _nav_page = false %}
-        {% if _admin_page_urls contains "|/about/config/|" %}{% assign _cfg_page = true %}{% endif %}
-        {% if _admin_page_urls contains "|/about/settings/theme/|" %}{% assign _theme_page = true %}{% endif %}
-        {% if _admin_page_urls contains "|/about/settings/navigation/|" %}{% assign _nav_page = true %}{% endif %}
-        {% if _cfg_page or _theme_page or _nav_page %}
-        <div class="mb-3">
+        <!-- Theme & Build -->
+        <div class="mb-4">
           <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
-            <i class="bi bi-speedometer2 me-1"></i>Admin Dashboard
+            <i class="bi bi-info-circle me-1" aria-hidden="true"></i>Theme &amp; Build
           </h6>
-          <div class="list-group list-group-flush small">
-            {% if _cfg_page %}
-            <a href="{{ '/about/config/' | relative_url }}" class="list-group-item list-group-item-action d-flex align-items-center px-0">
-              <i class="bi bi-gear me-2 text-body-secondary"></i>Configuration
-            </a>
-            {% endif %}
-            {% if _theme_page %}
-            <a href="{{ '/about/settings/theme/' | relative_url }}" class="list-group-item list-group-item-action d-flex align-items-center px-0">
-              <i class="bi bi-palette me-2 text-body-secondary"></i>Theme Customizer
-            </a>
-            {% endif %}
-            {% if _nav_page %}
-            <a href="{{ '/about/settings/navigation/' | relative_url }}" class="list-group-item list-group-item-action d-flex align-items-center px-0">
-              <i class="bi bi-signpost-2 me-2 text-body-secondary"></i>Navigation Editor
-            </a>
-            {% endif %}
-          </div>
+          {% include components/theme-info.html %}
         </div>
-        {% endif %}
-      </div>
-      
-      <!-- Environment Tab -->
-      <div class="tab-pane fade" id="environment-pane" role="tabpanel" aria-labelledby="environment-tab" tabindex="0">
-        {% include components/env-switcher.html %}
-
-        <!-- Admin Link — only when target page exists -->
-        {% assign _env_page = false %}
-        {% if _admin_page_urls contains "|/about/settings/environment/|" %}{% assign _env_page = true %}{% endif %}
-        {% if _env_page %}
-        <div class="mt-4 pt-3 border-top">
-          <a href="{{ '/about/settings/environment/' | relative_url }}" class="btn btn-outline-secondary btn-sm w-100">
-            <i class="bi bi-box-arrow-up-right me-1"></i>Full Environment &amp; Build Info
-          </a>
-        </div>
-        {% endif %}
+
+        <!-- Admin quick links — cached include; renders only links to pages
+             that exist in the build (see components/admin-links.html) -->
+        {% include_cached components/admin-links.html %}
       </div>
-      
-      <!-- Developer Tab -->
+
+      <!-- Developer Tab — tools scoped to the current page -->
       <div class="tab-pane fade" id="developer-pane" role="tabpanel" aria-labelledby="developer-tab" tabindex="0">
-        
-        <!-- Page Location -->
+
+        <!-- Page Location — breadcrumbs render nothing on the homepage or
+             when site.breadcrumbs is off, so the section mirrors that gate -->
+        {% if page.url != "/" and site.breadcrumbs %}
         <div class="mb-4">
           <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
-            <i class="bi bi-signpost-split me-1"></i>Page Location
+            <i class="bi bi-signpost-split me-1" aria-hidden="true"></i>Page Location
           </h6>
           {% include navigation/breadcrumbs.html %}
         </div>
-        
-        <!-- Source Code Shortcuts -->
-        <div class="mb-4">
-          <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
-            <i class="bi bi-code-square me-1"></i>Source Code
-          </h6>
-          {% include components/dev-shortcuts.html %}
-        </div>
-        
+        {% endif %}
+
         <!-- Page Metadata -->
-        <div class="mb-3">
+        <div class="mb-4">
           <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
-            <i class="bi bi-file-earmark-code me-1"></i>Page Info
+            <i class="bi bi-file-earmark-code me-1" aria-hidden="true"></i>Page Info
           </h6>
           <div class="table-responsive">
             <table class="table table-sm table-hover mb-0 small">
               <tbody>
                 <tr>
-                  <td class="text-body-secondary" style="width: 30%;">Layout</td>
+                  <td class="text-body-secondary w-25">Layout</td>
                   <td><code>{{ page.layout | default: "none" }}</code></td>
                 </tr>
                 <tr>
@@ -220,14 +174,57 @@
             </table>
           </div>
         </div>
-      </div>
-      
-      <!-- Background Tab -->
-      <div class="tab-pane fade" id="background-pane" role="tabpanel" aria-labelledby="background-tab" tabindex="0">
-        {% include_cached components/background-settings.html %}
+
+        <!-- Source Code Shortcuts -->
+        <div class="mb-3">
+          <h6 class="text-body-secondary small text-uppercase fw-semibold mb-2">
+            <i class="bi bi-code-square me-1" aria-hidden="true"></i>Source Code
+          </h6>
+          {% include components/dev-shortcuts.html %}
+        </div>
       </div>
 
     </div>
   </div>
-  
-</div>
+
+</div>
+
+<!-- Copy-to-clipboard for the panel's URL fields (event delegation; no
+     inline handlers). Buttons declare data-zer0-copy="<text>" or
+     data-zer0-copy-target="#input-id". -->
+<script>
+document.addEventListener("click", function (e) {
+  var btn = e.target.closest("[data-zer0-copy], [data-zer0-copy-target]");
+  if (!btn) return;
+  var text = btn.getAttribute("data-zer0-copy") || "";
+  var targetSel = btn.getAttribute("data-zer0-copy-target");
+  if (!text && targetSel) {
+    // Guard the selector lookup — a missing/invalid value must not throw
+    // inside a document-level click listener.
+    try {
+      var target = document.querySelector(targetSel);
+      text = target && "value" in target ? target.value : "";
+    } catch (err) {
+      text = "";
+    }
+  }
+  if (!text || !navigator.clipboard) return;
+  navigator.clipboard.writeText(text).then(function () {
+    zer0CopyFeedback(btn, true);
+  }).catch(function () {
+    zer0CopyFeedback(btn, false);
+  });
+});
+
+function zer0CopyFeedback(btn, success) {
+  var original = btn.innerHTML;
+  btn.innerHTML = success ? '<i class="bi bi-check2"></i>' : '<i class="bi bi-x"></i>';
+  btn.classList.add(success ? "btn-success" : "btn-danger");
+  btn.classList.remove("btn-outline-secondary");
+  setTimeout(function () {
+    btn.innerHTML = original;
+    btn.classList.remove("btn-success", "btn-danger");
+    btn.classList.add("btn-outline-secondary");
+  }, 1500);
+}
+</script>

data/_includes/components/mermaid.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-013 {% endcomment %}
 <!--
   ===================================================================
   MERMAID DIAGRAM INTEGRATION (v2.1 - GitHub Pages Compatible)

data/_includes/components/nanobar.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-066 {% endcomment %}
 <!--
   ===================================================================
   NANOBAR - Config-Driven Page Loading Progress Bar

data/_includes/components/page-feedback.html

@@ -0,0 +1,252 @@
+{%- comment -%}
+  ===================================================================
+  PAGE FEEDBACK — "Improve this page" capture widget
+  ===================================================================
+
+  Component: page-feedback
+  Path:      _includes/components/page-feedback.html
+  Purpose:   Turn what a reader is looking at into a well-formed GitHub
+             issue — request type + description + live page context +
+             captured console/error logs — filed with labels that exist.
+             Replaces the build-time Copilot dropdown that used to live in
+             content/intro.html and baked _data/prompts.yml into <a href>s.
+
+  Params:    none — configured via site.page_feedback (+ site.data.feedback_types)
+  Depends on:
+    - assets/js/page-feedback.js          (behaviour)
+    - _sass/components/_page-feedback.scss (styling)
+    - _includes/core/console-capture.html (the log buffer, installed in <head>)
+    - _data/feedback_types.yml            (request-type taxonomy)
+    - FAB tokens (_sass/tokens/_spacing.scss, _layers.scss)
+
+  Layers:
+    - Base (always): opens a pre-filled github.com/issues/new form. No token,
+      works on any fork / GitHub Pages.
+    - AI enrichment (optional): when the chat proxy is deployed
+      (ai_chat.proxy_ready), an "Analyze with AI" step sends the capture to
+      Claude — via Claude Code OAuth, server-side — to clarify, vet,
+      prioritize, and recommend before the issue is filed.
+
+  Triggers:  the global FAB below, plus any element with [data-pf-open]
+             elsewhere on the page (e.g. the button in content/intro.html).
+             Add data-pf-type="<id>" to preselect a request type.
+
+  a11y:      role=dialog + aria-modal, labelled title, focus trap, Escape to
+             close, backdrop click to close, aria-live status region.
+  ===================================================================
+{%- endcomment -%}
+
+{%- unless site.page_feedback.enabled -%}{%- comment -%} widget disabled {%- endcomment -%}
+{%- else -%}
+
+{%- comment -%}
+  Booleans aren't evaluated inside assign tags (Liquid stores a truthy string),
+  so compute render flags with if-tags. The AI layer needs the chat proxy
+  deployed — reuse ai_chat.proxy_ready rather than a second readiness flag.
+{%- endcomment -%}
+{%- assign pf_ai_available = false -%}
+{%- if site.page_feedback.ai.enabled and site.ai_chat.proxy_ready -%}
+  {%- assign pf_ai_available = true -%}
+{%- endif -%}
+{%- assign pf_show_fab = false -%}
+{%- if site.page_feedback.fab -%}{%- assign pf_show_fab = true -%}{%- endif -%}
+
+{%- comment -%} Repo + file coordinates for the issue body (mirrors content/intro.html). {%- endcomment -%}
+{%- assign pf_repo = site.repository | join: "" -%}
+{%- assign pf_branch = site.branch | default: "main" -%}
+{%- assign pf_source_url = "" -%}
+{%- if pf_repo != "" and page.path -%}
+  {%- capture pf_source_url -%}https://github.com/{{ pf_repo }}/blob/{{ pf_branch }}/{{ page.path }}{%- endcapture -%}
+{%- endif -%}
+{%- assign pf_theme = site.theme | default: site.remote_theme | default: "" -%}
+
+{%- if pf_show_fab -%}
+<!-- Global feedback FAB (page-invariant; opens the modal) -->
+<button type="button"
+        id="pageFeedbackFab"
+        class="pf-fab btn shadow-lg position-fixed"
+        data-pf-open
+        aria-haspopup="dialog"
+        aria-controls="pageFeedbackModal"
+        title="{{ site.page_feedback.fab_label | default: 'Improve this page' | escape }}"
+        aria-label="{{ site.page_feedback.fab_label | default: 'Improve this page' | escape }}">
+  <i class="bi {{ site.page_feedback.fab_icon | default: 'bi-megaphone' }}" aria-hidden="true"></i>
+</button>
+{%- endif -%}
+
+<!-- Feedback modal (self-contained overlay; controlled by page-feedback.js).
+     `position-fixed` is required, not cosmetic: it opts this <body> child out of
+     the .zer0-bg-body flattening rule (_sass/theme/_backgrounds.scss) that would
+     otherwise force position:relative; z-index:1 and let the cookie banner steal
+     the dialog's clicks. -->
+<div class="pf-overlay position-fixed" id="pageFeedbackModal" role="dialog" aria-modal="true"
+     aria-labelledby="pfTitle" aria-describedby="pfIntro" hidden>
+  <div class="pf-dialog shadow-lg" role="document">
+
+    <header class="pf-header">
+      <div class="pf-header-text">
+        <h2 id="pfTitle" class="pf-title h5 mb-1">
+          <i class="bi bi-megaphone me-2" aria-hidden="true"></i>Share feedback
+        </h2>
+        <p id="pfIntro" class="pf-intro text-muted mb-0">
+          Report a problem or suggest an improvement — it becomes a GitHub issue
+          with the page details attached.
+        </p>
+      </div>
+      <button type="button" class="pf-close btn btn-sm" id="pfClose" aria-label="Close feedback dialog">
+        <i class="bi bi-x-lg" aria-hidden="true"></i>
+      </button>
+    </header>
+
+    <form id="pfForm" class="pf-body" novalidate>
+
+      <!-- Step 1 — request type -->
+      <fieldset class="pf-field pf-types">
+        <legend class="pf-legend">What kind of feedback?</legend>
+        {%- assign pf_group = "" -%}
+        {%- for t in site.data.feedback_types -%}
+          {%- if t.group != pf_group -%}
+            {%- unless forloop.first -%}</div>{%- endunless -%}
+            <p class="pf-types-group">{{ t.group }}</p>
+            <div class="pf-types-grid" role="radiogroup" aria-label="{{ t.group | escape }}">
+            {%- assign pf_group = t.group -%}
+          {%- endif -%}
+          <button type="button"
+                  class="pf-type"
+                  role="radio"
+                  aria-checked="false"
+                  data-pf-type-id="{{ t.id }}"
+                  tabindex="{% if forloop.first %}0{% else %}-1{% endif %}">
+            <i class="bi {{ t.icon | default: 'bi-chat-dots' }} pf-type-icon" aria-hidden="true"></i>
+            <span class="pf-type-text">
+              <span class="pf-type-label">{{ t.label }}</span>
+              {%- if t.description -%}<span class="pf-type-desc">{{ t.description }}</span>{%- endif -%}
+            </span>
+          </button>
+          {%- if forloop.last -%}</div>{%- endif -%}
+        {%- endfor -%}
+      </fieldset>
+
+      <!-- Step 2 — description -->
+      <div class="pf-field">
+        <label for="pfDescription" class="pf-label">Describe it</label>
+        <textarea id="pfDescription" class="form-control" rows="4"
+                  placeholder="Pick a type above, then tell us what you have in mind."
+                  aria-describedby="pfDescHelp" required></textarea>
+        <p id="pfDescHelp" class="pf-help text-muted">
+          Be specific — what you expected, what happened, or what would be better.
+        </p>
+      </div>
+
+      <!-- Step 3 — what gets attached -->
+      <details class="pf-field pf-context" id="pfContextWrap">
+        <summary class="pf-summary">
+          <i class="bi bi-paperclip me-1" aria-hidden="true"></i>What gets attached
+          <span class="pf-context-count" id="pfContextCount"></span>
+        </summary>
+        <ul class="pf-context-list" id="pfContextList" aria-live="polite">
+          <!-- page title / url / path filled in by JS -->
+        </ul>
+
+        {%- if site.page_feedback.capture_logs -%}
+        <div class="pf-logs" id="pfLogsWrap" hidden>
+          <label class="pf-check">
+            <input type="checkbox" id="pfIncludeLogs" checked>
+            Include <span id="pfLogsCount">0</span> captured console/error line(s)
+          </label>
+          <pre class="pf-logs-preview" id="pfLogsPreview" tabindex="0" aria-label="Captured console logs"></pre>
+          <p class="pf-help text-muted mb-0">
+            <i class="bi bi-shield-check me-1" aria-hidden="true"></i>
+            These come from your browser only and are never sent until you submit.
+            Review them and untick the box to leave them out.
+          </p>
+        </div>
+        {%- endif -%}
+      </details>
+
+      {%- if pf_ai_available -%}
+      <!-- Step 4 — optional AI review (proxy + Claude Code OAuth) -->
+      <div class="pf-field pf-ai" id="pfAiWrap">
+        <div class="pf-ai-head">
+          <button type="button" class="btn btn-sm btn-outline-primary" id="pfAnalyze">
+            <i class="bi bi-robot me-1" aria-hidden="true"></i>Analyze with AI
+          </button>
+          <span class="pf-ai-hint text-muted">Optional — clarifies, prioritizes, and suggests labels.</span>
+        </div>
+        <div class="pf-ai-result" id="pfAiResult" aria-live="polite" hidden></div>
+      </div>
+      {%- endif -%}
+
+      <p class="pf-status" id="pfStatus" role="status" aria-live="polite"></p>
+
+    </form>
+
+    <footer class="pf-footer">
+      <button type="button" class="btn btn-link btn-sm pf-copy" id="pfCopy">
+        <i class="bi bi-clipboard me-1" aria-hidden="true"></i>Copy details
+      </button>
+      <div class="pf-footer-primary">
+        <button type="button" class="btn btn-secondary btn-sm" id="pfCancel">Cancel</button>
+        <button type="submit" form="pfForm" class="btn btn-primary btn-sm" id="pfSubmit" disabled>
+          <i class="bi bi-github me-1" aria-hidden="true"></i>
+          <span class="pf-submit-label">Open GitHub issue</span>
+        </button>
+      </div>
+    </footer>
+
+  </div>
+</div>
+
+<!-- Widget configuration consumed by assets/js/page-feedback.js -->
+<script id="pageFeedbackConfig" type="application/json">
+{
+  "enabled": true,
+  "mode": {{ site.page_feedback.mode | default: "url" | jsonify }},
+  "endpoint": {{ site.page_feedback.endpoint | default: "/api/feedback" | jsonify }},
+  "issueEndpoint": {{ site.page_feedback.issue_endpoint | default: "/api/github/issue" | jsonify }},
+  "repository": {{ pf_repo | jsonify }},
+  "baseBranch": {{ pf_branch | jsonify }},
+  "defaultLabels": {% if site.page_feedback.default_labels %}{{ site.page_feedback.default_labels | jsonify }}{% else %}[]{% endif %},
+  "assignee": {{ site.page_feedback.assignee | default: "" | jsonify }},
+  "captureLogs": {{ site.page_feedback.capture_logs | default: true | jsonify }},
+  "fabLabel": {{ site.page_feedback.fab_label | default: "Improve this page" | jsonify }},
+  "ai": {
+    "available": {{ pf_ai_available | jsonify }},
+    "auto": {{ site.page_feedback.ai.auto | default: false | jsonify }},
+    "model": {{ site.page_feedback.ai.model | default: "claude-opus-4-8" | jsonify }},
+    "maxTokens": {{ site.page_feedback.ai.max_tokens | default: 1024 }}
+  }
+}
+</script>
+
+<!-- Request-type taxonomy (from _data/feedback_types.yml) -->
+<script id="pageFeedbackTypes" type="application/json">
+{{ site.data.feedback_types | jsonify }}
+</script>
+
+<!-- Live page context (build-time front matter; runtime detail added by JS) -->
+<script id="pageFeedbackContext" type="application/json">
+{
+  "title": {{ page.title | default: site.title | jsonify }},
+  "url": {{ page.url | absolute_url | jsonify }},
+  "path": {{ page.path | default: "" | jsonify }},
+  "sourceUrl": {{ pf_source_url | jsonify }},
+  "layout": {{ page.layout | default: "" | jsonify }},
+  "collection": {{ page.collection | default: "" | jsonify }},
+  "categories": {{ page.categories | default: "" | jsonify }},
+  "tags": {{ page.tags | default: "" | jsonify }},
+  "author": {{ page.author | default: site.author.name | default: "" | jsonify }},
+  "date": {{ page.date | date: "%Y-%m-%d" | default: "" | jsonify }},
+  "lastmod": {{ page.last_modified_at | default: page.lastmod | date: "%Y-%m-%d" | default: "" | jsonify }},
+  "branch": {{ pf_branch | jsonify }},
+  "repository": {{ pf_repo | jsonify }},
+  "siteUrl": {{ site.url | default: "" | jsonify }},
+  "baseurl": {{ site.baseurl | default: "" | jsonify }},
+  "theme": {{ pf_theme | jsonify }},
+  "jekyllEnv": {{ jekyll.environment | jsonify }}
+}
+</script>
+
+<script defer src="{{ '/assets/js/page-feedback.js' | relative_url }}"></script>
+
+{%- endunless -%}

data/_includes/components/post-type-badge.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-064 {% endcomment %}
 <!--
   ===================================================================
   POST TYPE BADGE COMPONENT - Visual indicator for article types

data/_includes/components/preview-image.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-004 {% endcomment %}
 {% comment %}
   PREVIEW IMAGE - Simple, Consistent Image Rendering
   

data/_includes/components/search-modal.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-032 {% endcomment %}
 <!--
   ===================================================================
   SEARCH MODAL - Site-wide Search Popup

data/_includes/components/searchbar.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-032 {% endcomment %}
 
 <!-- 
   title: Searchbar and hits

data/_includes/components/shortcuts-modal.html

@@ -1,3 +1,4 @@
+{% comment %} Feature: ZER0-009 {% endcomment %}
 {%- comment -%}
   ===================================================================
   SHORTCUTS-MODAL — Keyboard-shortcut reference