wagtail-developer-reference 0.1.2__tar.gz → 0.1.4__tar.gz

{wagtail_developer_reference-0.1.2/wagtail_developer_reference.egg-info → wagtail_developer_reference-0.1.4}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: wagtail-developer-reference
-Version: 0.1.2
+Version: 0.1.4
 Summary: A visual auditing tool for Wagtail developers to track Page models and StreamField blocks.
 Author-email: Four Digits <info@fourdigits.nl>
 Project-URL: Homepage, https://github.com/fourdigits/wagtail-developer-reference
@@ -32,14 +32,17 @@ Requires-Dist: pytest-django; extra == "dev"
 In large Wagtail projects, it’s easy to lose track of where specific blocks are used or which templates are being rendered. This tool gives you a "God-view" of your components without needing to dig through the database or shell.
 
 ## Features
-* **Usage Tracking:** See exactly how many times a Page type or StreamField block is used across the site.
-* **Template Discovery:** Instantly see the file path for the template associated with every component.
-* **Interactive Audit:** Filter by type or search for specific field names to find where logic is implemented.
-* **Zero-Config:** No extra database tables or complex settings. It inspects your models and content on the fly.
+* **Fast registry:** Code definitions are cached per worker; the normal registry response stays small and paginates at 20 rows.
+* **On-demand exact usage:** PAGE and BLOCK counts are calculated only for a usage range, scoped to the exact page model, StreamField and nested definition path.
+* **Scalable StreamField inspection:** Usage scans read raw StreamField JSON, avoiding chooser-object queries while keeping totals current.
+* **Searchable block picker:** An accessible, collapsed picker searches all definitions server-side and returns at most 30 choices at once.
+* **Multi-site aware:** Site root pages are included, nested subsites are excluded from parent-site counts, and an empty site filter aggregates globally.
+* **Usage inspection:** Open an exact definition's paginated page list and copy the visible usage table in one click.
+* **Template discovery:** See the template path associated with every component.
 
 ## Installation
 
-Compatibility: Python 3.9+ and Wagtail 4.1 through 7.4 LTS. Wagtail 7.4
+Compatibility: Python 3.9+ and Wagtail 4.1 through 7.4.2 LTS. Wagtail 7.4
 itself requires Python 3.10+.
 
 1. Add \`wagtail_developer_reference\` to your \`INSTALLED_APPS\`:

{wagtail_developer_reference-0.1.2 → wagtail_developer_reference-0.1.4}/README.md

@@ -6,14 +6,17 @@
 In large Wagtail projects, it’s easy to lose track of where specific blocks are used or which templates are being rendered. This tool gives you a "God-view" of your components without needing to dig through the database or shell.
 
 ## Features
-* **Usage Tracking:** See exactly how many times a Page type or StreamField block is used across the site.
-* **Template Discovery:** Instantly see the file path for the template associated with every component.
-* **Interactive Audit:** Filter by type or search for specific field names to find where logic is implemented.
-* **Zero-Config:** No extra database tables or complex settings. It inspects your models and content on the fly.
+* **Fast registry:** Code definitions are cached per worker; the normal registry response stays small and paginates at 20 rows.
+* **On-demand exact usage:** PAGE and BLOCK counts are calculated only for a usage range, scoped to the exact page model, StreamField and nested definition path.
+* **Scalable StreamField inspection:** Usage scans read raw StreamField JSON, avoiding chooser-object queries while keeping totals current.
+* **Searchable block picker:** An accessible, collapsed picker searches all definitions server-side and returns at most 30 choices at once.
+* **Multi-site aware:** Site root pages are included, nested subsites are excluded from parent-site counts, and an empty site filter aggregates globally.
+* **Usage inspection:** Open an exact definition's paginated page list and copy the visible usage table in one click.
+* **Template discovery:** See the template path associated with every component.
 
 ## Installation
 
-Compatibility: Python 3.9+ and Wagtail 4.1 through 7.4 LTS. Wagtail 7.4
+Compatibility: Python 3.9+ and Wagtail 4.1 through 7.4.2 LTS. Wagtail 7.4
 itself requires Python 3.10+.
 
 1. Add \`wagtail_developer_reference\` to your \`INSTALLED_APPS\`:

{wagtail_developer_reference-0.1.2 → wagtail_developer_reference-0.1.4}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "wagtail-developer-reference"
-version = "0.1.2"
+version = "0.1.4"
 description = "A visual auditing tool for Wagtail developers to track Page models and StreamField blocks."
 readme = "README.md"
 authors = [{name = "Four Digits", email = "info@fourdigits.nl" }]

{wagtail_developer_reference-0.1.2 → wagtail_developer_reference-0.1.4}/setup.py

@@ -2,7 +2,7 @@ from setuptools import find_packages, setup
 
 setup(
     name="wagtail-developer-reference",
-    version="0.1.2",
+    version="0.1.4",
     packages=find_packages(),
     include_package_data=True,
     install_requires=[

{wagtail_developer_reference-0.1.2 → wagtail_developer_reference-0.1.4}/wagtail_developer_reference/migrations/0001_initial.py

@@ -1,7 +1,6 @@
 # Generated manually for wagtail-developer-reference.
 
-from django.db import migrations
-from django.db import models
+from django.db import migrations, models
 
 
 class Migration(migrations.Migration):

{wagtail_developer_reference-0.1.2 → wagtail_developer_reference-0.1.4}/wagtail_developer_reference/templates/detail.html

@@ -98,6 +98,25 @@
 
     .empty-state p { font-size: 1.2rem; }
 
+    .registry-controls {
+        display: flex;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+        align-items: end;
+    }
+
+    .registry-controls {
+        background: #333; border-left: 0.3125rem solid #dcbd3d; padding: 1rem;
+    }
+    .registry-controls div:first-of-type { flex: 1; }
+    .registry-controls label { color: white; display: block; font-weight: bold; margin-bottom: 0.5rem; }
+    .registry-controls input {
+        background: #222; border: 0.0625rem solid #dcbd3d; box-sizing: border-box;
+        color: white; min-height: 2.5rem; padding: 0.6rem; width: 100%;
+    }
+    .usage-table-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }
+    .copy-table-button { border-radius: 0; }
+
     [data-wagtail-theme="dark"] .listing tbody tr:hover {
         background-color: #333 !important;
     }
@@ -110,12 +129,22 @@
       <div class="breadcrumb">
         <a href="{% url 'dev_reference' %}">&larr; Back to System Registry</a>
       </div>
-      <h1>Locations for: <strong>{{ component_name }}</strong></h1>
-      <p>Found in {{ pages|length }} location{{ pages|length|pluralize }}</p>
+      <h1>Usage: <strong>{{ component_name }}</strong></h1>
+      <p>{{ page_obj.paginator.count }} location{{ page_obj.paginator.count|pluralize }} found</p>
     </div>
   </header>
 
   <div class="nice-padding">
+    <form method="get" class="registry-controls" role="search">
+      <input type="hidden" name="site" value="{{ site_filter }}">
+      <div>
+        <label for="usage-search">Search pages</label>
+        <input id="usage-search" type="search" name="q" value="{{ search_query }}" placeholder="Filter by page title or slug...">
+      </div>
+      <div>
+        <button type="submit" class="button">Search</button>
+      </div>
+    </form>
     <table class="listing" id="usage-table">
       <thead>
         <tr>
@@ -130,14 +159,14 @@
           <tr class="usage-row">
             <td>
               <strong class="page-title">{{ page.title }}</strong>
-              <small class="page-type">Type: {{ page.get_verbose_name }}</small>
+              <small class="page-type">Type: {{ page.content_type.name|title }}</small>
             </td>
             <td class="td-status" data-sort="{% if page.live %}1{% else %}0{% endif %}">
               <span class="status-tag status-tag--{% if page.live %}live{% else %}draft{% endif %}">
                 {% if page.live %}Live{% else %}Draft{% endif %}
               </span>
             </td>
-            <td><code class="url-code">{{ page.url|default:"/(no slug)/" }}</code></td>
+            <td><code class="url-code">{{ page.url_path|default:"/(no path)/" }}</code></td>
             <td class="col-actions">
               <a href="{% url 'wagtailadmin_pages:edit' page.id %}" class="button button-small edit-button" target="_blank">Edit Page</a>
             </td>
@@ -151,12 +180,38 @@
         {% endfor %}
       </tbody>
     </table>
+    <div class="usage-table-actions">
+      <button id="copy-usage-table" type="button" class="button button-secondary copy-table-button">Copy displayed table</button>
+    </div>
+    {% if page_obj.paginator.num_pages > 1 %}
+      <nav class="pagination" aria-label="Usage result pages">
+        {% if page_obj.has_previous %}
+          <a class="button" href="?site={{ site_filter|urlencode }}&amp;q={{ search_query|urlencode }}&amp;page={{ page_obj.previous_page_number }}">Previous</a>
+        {% endif %}
+        <span>Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
+        {% if page_obj.has_next %}
+          <a class="button" href="?site={{ site_filter|urlencode }}&amp;q={{ search_query|urlencode }}&amp;page={{ page_obj.next_page_number }}">Next</a>
+        {% endif %}
+      </nav>
+    {% endif %}
   </div>
 
   <script>
     let currentSortCol = -1;
     let sortAsc = true;
 
+    function copyUsageTable() {
+        const headers = ["Page Title", "Status", "URL Path"];
+        const rows = Array.from(document.querySelectorAll("#usage-body .usage-row"));
+        const values = rows.map(row => [0, 1, 2].map(index => row.cells[index].innerText.trim().replace(/\s+/g, " ")));
+        const text = [headers, ...values].map(row => row.join("\t")).join("\n");
+        const button = document.getElementById("copy-usage-table");
+        navigator.clipboard.writeText(text).then(() => {
+            button.textContent = "Copied";
+            window.setTimeout(() => { button.textContent = "Copy displayed table"; }, 1500);
+        });
+    }
+
     function sortTable(colIdx) {
         const tbody = document.getElementById("usage-body");
         const rows = Array.from(tbody.querySelectorAll(".usage-row"));
@@ -173,12 +228,14 @@
             if (colIdx === 1) {
                 valA = parseInt(a.cells[colIdx].getAttribute('data-sort'));
                 valB = parseInt(b.cells[colIdx].getAttribute('data-sort'));
-                return sortAsc ? valA - valB : valB - valueA;
+                return sortAsc ? valA - valB : valB - valA;
             }
             valA = a.cells[colIdx].textContent.trim().toLowerCase();
             valB = b.cells[colIdx].textContent.trim().toLowerCase();
             return sortAsc ? valA.localeCompare(valB) : valB.localeCompare(valA);
         }).forEach(row => tbody.appendChild(row));
     }
+
+    document.getElementById("copy-usage-table").addEventListener("click", copyUsageTable);
   </script>
-{% endblock %}
+{% endblock %}

wagtail_developer_reference-0.1.4/wagtail_developer_reference/templates/index.html

@@ -0,0 +1,350 @@
+{% extends "wagtailadmin/base.html" %}
+{% block titletag %}System Registry{% endblock %}
+
+{% block extra_css %}
+<style>
+    .registry-controls {
+        display: flex; gap: 1rem; margin-bottom: 1.5rem;
+        background-color: #4a4a4a; padding: 1.25rem; border-left: 5px solid #dcbd3d;
+        align-items: end;
+    }
+    .registry-controls { flex-wrap: wrap; }
+    .registry-controls div { flex: 1 1 10rem; }
+    .registry-controls .registry-search { flex: 3 1 20rem; }
+    .registry-controls .usage-range { flex: 0 1 6rem; }
+    .registry-controls .filter-actions {
+        align-items: end; display: flex; flex: 0 0 auto; gap: 0.5rem;
+    }
+    .registry-controls .filter-actions .button { margin: 0; white-space: nowrap; }
+    .quick-search {
+        background: #333; border-left: 5px solid #dcbd3d; margin-bottom: 1rem;
+    }
+    .quick-search summary {
+        color: white; cursor: pointer; font-weight: bold; padding: 0.9rem 1.25rem;
+    }
+    .quick-search-filter {
+        box-sizing: border-box; margin: 0 1.25rem 0.75rem; max-width: 34rem;
+        min-height: 2.5rem; padding: 0.5rem; width: calc(100% - 2.5rem);
+    }
+    .quick-search-status { color: #ccc; display: block; font-size: 0.85rem; padding: 0 1.25rem 0.75rem; }
+    .quick-search-list {
+        display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 1.25rem 1.25rem;
+    }
+    .quick-search-item {
+        background: #222; border: 1px solid #777; color: white; cursor: pointer;
+        font: inherit; padding: 0.35rem 0.5rem; text-align: left;
+    }
+    .quick-search-item:hover, .quick-search-item:focus {
+        border-color: #dcbd3d; color: #dcbd3d;
+    }
+    .quick-search-item .type-tag { margin-right: 0.35rem; }
+    .registry-controls label { display: block; font-weight: bold; color: white; margin-bottom: 0.5rem; }
+    .registry-controls input, .registry-controls select {
+        box-sizing: border-box; height: 2.5rem; width: 100%;
+        border: 1px solid #dcbd3d; background: #333; color: white; border-radius: 0;
+    }
+
+    .listing thead tr { border-bottom: 2px solid #dcbd3d; }
+    .listing tbody td { vertical-align: top; }
+    .col-centered { text-align: center; width: 5rem; }
+    .col-site { width: 10rem; }
+    .col-type { width: 8rem; white-space: nowrap; }
+
+    .sortable { cursor: pointer; position: relative; transition: background 0.2s; }
+    .sortable:hover { background: #444; }
+    .sortable::after {
+        content: '↕';
+        font-size: 0.8rem;
+        margin-left: 5px;
+        opacity: 0.3;
+    }
+
+    .type-tag {
+        background: #222; color: #dcbd3d; border: 1px solid #dcbd3d;
+        padding: 2px 10px; text-transform: uppercase; font-size: 0.7rem;
+        display: inline-block; white-space: nowrap;
+        cursor: default; pointer-events: none;
+    }
+    .type-tag--page { background: #153a5b; border-color: #5db6ff; color: #b9e2ff; }
+    .type-tag--block { background: #3c2459; border-color: #bf8cff; color: #e2c8ff; }
+
+    .field-pill {
+        background: #222; border: 1px solid #dcbd3d; padding: 2px 6px;
+        display: inline-block; font-size: 0.75rem; white-space: nowrap;
+    }
+    .field-pill--metadata { border-color: #777; background: #333; }
+    .field-type { color: #aaa; font-size: 0.8em; }
+
+    .field-toggle {
+        background: #222;
+        border: 1px solid #dcbd3d;
+        color: #dcbd3d;
+        cursor: pointer;
+        font-size: 0.75rem;
+        padding: 0.3rem 0.5rem;
+        text-align: left;
+    }
+    .field-toggle:hover { background: #333; }
+    .field-toggle::before { content: "▸"; margin-right: 0.4rem; }
+    .field-toggle[aria-expanded="true"]::before { content: "▾"; }
+    .field-cell { position: relative; }
+    .field-details {
+        align-items: flex-start; background: #222; border: 1px solid #dcbd3d;
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35); display: flex;
+        flex-wrap: wrap; gap: 0.25rem; left: 0; margin-top: 0.5rem;
+        max-width: 36rem; min-width: 20rem; padding: 0.5rem; position: absolute;
+        top: 100%; z-index: 10;
+    }
+    .field-details[hidden] { display: none; }
+
+    .count-draft { color: #dcbd3d; font-weight: bold; }
+    .count-live { color: #1fb53a; font-weight: bold; }
+    .zero-usage { color: #af7f7f; opacity: 0.5; }
+
+    .usage-link { background: #dcbd3d !important; color: #222 !important; font-weight: bold; border-radius: 0; }
+    .template-label { color: #ccc; font-family: monospace; font-size: 0.7rem; }
+    .template-copy { margin-left: 0.35rem; padding: 0.15rem 0.35rem; }
+    .template-empty { color: #aaa; }
+
+    [data-wagtail-theme="dark"] .listing tbody tr:hover {
+        background-color: #333 !important;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+    {% include "wagtailadmin/shared/header.html" with title="System Registry" icon="code" %}
+    <div class="nice-padding">
+        <details class="quick-search">
+            <summary>Browse pages and blocks</summary>
+            <input id="quick-search-filter" class="quick-search-filter" type="search" placeholder="Search pages and blocks..." autocomplete="off">
+            <span id="quick-search-status" class="quick-search-status" aria-live="polite"></span>
+            <div class="quick-search-list" aria-label="Quick registry search">
+                {% for item in quick_search_items %}
+                    <button type="button" class="quick-search-item" data-search="{{ item.hierarchy }}" data-type="{{ item.component_type }}" data-definition="{{ item.definition_id }}">
+                        <span class="type-tag type-tag--{{ item.component_type|lower }}">{{ item.component_type }}</span>{{ item.hierarchy }}
+                    </button>
+                {% endfor %}
+            </div>
+        </details>
+        <form id="registry-filter-form" method="get" class="registry-controls">
+            <input type="hidden" name="apply" value="1">
+            <input id="definition-filter" type="hidden" name="definition" value="{{ filters.definition }}">
+            <div class="registry-search"><label for="reg-search">Search Registry</label><input type="search" id="reg-search" name="q" value="{{ filters.q }}" placeholder="Name, field or site..."></div>
+            <div><label for="reg-filter">Component Type</label><select id="reg-filter" name="type"><option value="ALL" {% if filters.type == "ALL" %}selected{% endif %}>All</option><option value="PAGE" {% if filters.type == "PAGE" %}selected{% endif %}>Pages</option><option value="BLOCK" {% if filters.type == "BLOCK" %}selected{% endif %}>Blocks</option></select></div>
+            <div><label for="reg-site-filter">Site</label><select id="reg-site-filter" name="site"><option value="">All sites</option>{% for site in sites %}<option value="{{ site.id }}" {% if filters.site == site.id|stringformat:"s" %}selected{% endif %}>{{ site.site_name }}</option>{% endfor %}</select></div>
+            <div class="usage-range"><label for="min-usage">Min usage</label><input id="min-usage" type="number" min="0" name="min_usage" value="{{ filters.min_usage }}"></div>
+            <div class="usage-range"><label for="max-usage">Max usage</label><input id="max-usage" type="number" min="0" name="max_usage" value="{{ filters.max_usage }}"></div>
+            <div class="filter-actions"><button type="submit" class="button">Apply Filters</button><a class="button button-secondary" href="{% url 'dev_reference' %}">Clear</a></div>
+        </form>
+        {% if filter_error %}<p class="error-message">{{ filter_error }}</p>{% endif %}
+        {% if is_applied %}
+        <table class="listing" id="registry-table">
+            <thead>
+                <tr>
+                    <th class="sortable col-site" onclick="sortTable(0)">Site</th>
+                    <th class="sortable" onclick="sortTable(1)">Hierarchy</th>
+                    <th class="sortable col-type" onclick="sortTable(2)">Type</th>
+                    <th class="sortable" onclick="sortTable(3)">Structure & Metadata</th>
+                    <th class="sortable col-centered" onclick="sortTable(4)">Draft</th>
+                    <th class="sortable col-centered" onclick="sortTable(5)">Live</th>
+                    <th class="sortable col-centered" onclick="sortTable(6)">Total</th>
+                    <th class="sortable" onclick="sortTable(7)">Template Path</th>
+                </tr>
+            </thead>
+            <tbody id="registry-body">
+                {% for item in audit_data %}
+                <tr class="registry-row" data-type="{{ item.type|upper }}" data-site="{{ item.site_id }}">
+                    <td class="col-site">{{ item.site_name }}</td>
+                    <td><strong>{{ item.hierarchy }}</strong></td>
+                    <td class="col-type"><span class="type-tag type-tag--{{ item.type|lower }}">{{ item.type }}</span></td>
+                    <td class="field-cell">
+                        <button
+                            type="button"
+                            class="field-toggle"
+                            aria-expanded="false"
+                            aria-controls="field-details-{{ forloop.counter }}"
+                        >
+                            S: {{ item.fields.structure|length }} · M: {{ item.fields.metadata|length }}
+                        </button>
+                        <div id="field-details-{{ forloop.counter }}" class="field-details" hidden>
+                            {% for field_info in item.fields.structure %}
+                                <div class="field-pill">
+                                    <code>{{ field_info.label }} <small class="field-type">({{ field_info.type }})</small></code>
+                                </div>
+                            {% endfor %}
+                            {% for field_info in item.fields.metadata %}
+                                <div class="field-pill field-pill--metadata">
+                                    <code>{{ field_info.label }} <small class="field-type">({{ field_info.type }})</small></code>
+                                </div>
+                            {% endfor %}
+                        </div>
+                    </td>
+                    {% if usage_requested %}
+                        <td class="col-centered" data-sort="{{ item.usage.draft }}"><span class="{% if item.usage.draft > 0 %}count-draft{% else %}zero-usage{% endif %}">{{ item.usage.draft }}</span></td>
+                        <td class="col-centered" data-sort="{{ item.usage.live }}"><span class="{% if item.usage.live > 0 %}count-live{% else %}zero-usage{% endif %}">{{ item.usage.live }}</span></td>
+                        <td class="col-centered" data-sort="{{ item.usage.total }}">{% if item.usage.total > 0 %}<a href="{% url 'dev_definition_usage' item.definition_id %}{% if item.site_id %}?site={{ item.site_id }}{% endif %}" class="button button-small usage-link">{{ item.usage.total }}</a>{% else %}<span class="zero-usage">0</span>{% endif %}</td>
+                    {% else %}
+                        <td class="col-centered"><span class="template-empty">—</span></td>
+                        <td class="col-centered"><span class="template-empty">—</span></td>
+                        <td class="col-centered"><span class="template-empty">Add min or max</span></td>
+                    {% endif %}
+                    <td>
+                        {% if item.template %}
+                            <span class="template-label" title="{{ item.template }}">{{ item.template_label }}</span>
+                            <button type="button" class="template-copy" data-template="{{ item.template }}">Copy</button>
+                        {% else %}
+                            <span class="template-empty">—</span>
+                        {% endif %}
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+        {% if page_obj.paginator.num_pages > 1 %}
+            <nav class="pagination" aria-label="Registry result pages">
+                {% if page_obj.has_previous %}<a class="button" href="?apply=1&amp;q={{ filters.q|urlencode }}&amp;type={{ filters.type|urlencode }}&amp;site={{ filters.site|urlencode }}&amp;min_usage={{ filters.min_usage|urlencode }}&amp;max_usage={{ filters.max_usage|urlencode }}&amp;definition={{ filters.definition|urlencode }}&amp;page={{ page_obj.previous_page_number }}">Previous</a>{% endif %}
+                <span>Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }} ({{ page_obj.paginator.count }} results)</span>
+                {% if page_obj.has_next %}<a class="button" href="?apply=1&amp;q={{ filters.q|urlencode }}&amp;type={{ filters.type|urlencode }}&amp;site={{ filters.site|urlencode }}&amp;min_usage={{ filters.min_usage|urlencode }}&amp;max_usage={{ filters.max_usage|urlencode }}&amp;definition={{ filters.definition|urlencode }}&amp;page={{ page_obj.next_page_number }}">Next</a>{% endif %}
+            </nav>
+        {% endif %}
+        {% else %}
+            <p class="help-block">Choose filters and select <strong>Apply Filters</strong> to load registry usage.</p>
+        {% endif %}
+    </div>
+
+    <script>
+        let currentSortColumn = -1;
+        let isSortAscending = true;
+
+        function sortTable(columnIndex) {
+            const tableBody = document.getElementById("registry-body");
+            const tableRows = Array.from(tableBody.querySelectorAll(".registry-row"));
+
+            isSortAscending = (currentSortColumn === columnIndex) ? !isSortAscending : true;
+            currentSortColumn = columnIndex;
+
+            tableRows.sort((rowA, rowB) => {
+                let cellA = rowA.cells[columnIndex];
+                let cellB = rowB.cells[columnIndex];
+                let valueA = cellA.getAttribute('data-sort') || cellA.textContent.trim().toLowerCase();
+                let valueB = cellB.getAttribute('data-sort') || cellB.textContent.trim().toLowerCase();
+
+                if (!isNaN(parseFloat(valueA)) && isFinite(valueA) && !isNaN(parseFloat(valueB)) && isFinite(valueB)) {
+                    return isSortAscending ? valueA - valueB : valueB - valueA;
+                }
+                return isSortAscending ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
+            }).forEach(sortedRow => tableBody.appendChild(sortedRow));
+        }
+
+        function runFilters() {
+            const searchTerm = document.getElementById("reg-search").value.toLowerCase();
+            const typeFilter = document.getElementById("reg-filter").value;
+            const siteFilter = document.getElementById("reg-site-filter").value;
+            document.querySelectorAll(".registry-row").forEach(row => {
+                const textMatches = row.textContent.toLowerCase().includes(searchTerm);
+                const typeMatches = typeFilter === "ALL" || row.dataset.type === typeFilter;
+                const siteMatches = siteFilter === "ALL" || row.dataset.site === siteFilter;
+                row.style.display = textMatches && typeMatches && siteMatches ? "" : "none";
+            });
+        }
+
+        document.querySelectorAll(".field-toggle").forEach(button => {
+            button.addEventListener("click", () => {
+                const details = document.getElementById(button.getAttribute("aria-controls"));
+                const isExpanded = button.getAttribute("aria-expanded") === "true";
+                document.querySelectorAll(".field-toggle").forEach(otherButton => {
+                    otherButton.setAttribute("aria-expanded", "false");
+                    document.getElementById(otherButton.getAttribute("aria-controls")).hidden = true;
+                });
+                if (!isExpanded) {
+                    button.setAttribute("aria-expanded", "true");
+                    details.hidden = false;
+                }
+            });
+        });
+
+        document.querySelectorAll(".template-copy").forEach(button => {
+            button.addEventListener("click", () => {
+                navigator.clipboard.writeText(button.dataset.template).then(() => {
+                    button.textContent = "Copied";
+                    window.setTimeout(() => { button.textContent = "Copy"; }, 1500);
+                });
+            });
+        });
+
+        const quickSearchInput = document.getElementById("quick-search-filter");
+        const quickSearchStatus = document.getElementById("quick-search-status");
+        const quickSearchList = document.querySelector(".quick-search-list");
+        const definitionFilter = document.getElementById("definition-filter");
+        let quickSearchTimer;
+        let quickSearchController;
+
+        function selectQuickItem(button) {
+            document.getElementById("reg-search").value = button.dataset.search;
+            document.getElementById("reg-filter").value = button.dataset.type;
+            definitionFilter.value = button.dataset.definition;
+            document.getElementById("registry-filter-form").submit();
+        }
+
+        function bindQuickItems() {
+            quickSearchList.querySelectorAll(".quick-search-item").forEach(button => {
+                button.addEventListener("click", () => selectQuickItem(button));
+            });
+        }
+
+        function renderQuickItems(results, total) {
+            quickSearchList.replaceChildren();
+            results.forEach(item => {
+                const button = document.createElement("button");
+                button.type = "button";
+                button.className = "quick-search-item";
+                button.dataset.search = item.name;
+                button.dataset.type = item.type;
+                button.dataset.definition = item.id;
+                const badge = document.createElement("span");
+                badge.className = `type-tag type-tag--${item.type.toLowerCase()}`;
+                badge.textContent = item.type;
+                button.append(badge, document.createTextNode(item.name));
+                quickSearchList.appendChild(button);
+            });
+            quickSearchStatus.textContent = total > results.length
+                ? `Showing ${results.length} of ${total} matching components.`
+                : `${total} matching component${total === 1 ? "" : "s"}.`;
+            bindQuickItems();
+        }
+
+        async function loadQuickItems() {
+            if (quickSearchController) quickSearchController.abort();
+            quickSearchController = new AbortController();
+            const query = quickSearchInput.value.trim();
+            const params = new URLSearchParams({q: query, limit: "30"});
+            try {
+                const response = await fetch(`{% url 'dev_catalog_search' %}?${params}`, {
+                    headers: {"X-Requested-With": "XMLHttpRequest"},
+                    signal: quickSearchController.signal,
+                });
+                if (!response.ok) throw new Error("Catalog search failed");
+                const data = await response.json();
+                renderQuickItems(data.results, data.total);
+            } catch (error) {
+                if (error.name !== "AbortError") {
+                    quickSearchStatus.textContent = "Could not load components.";
+                }
+            }
+        }
+
+        bindQuickItems();
+        quickSearchStatus.textContent = "Showing the first 30 components. Type to search all definitions.";
+        quickSearchInput.addEventListener("input", () => {
+            window.clearTimeout(quickSearchTimer);
+            quickSearchTimer = window.setTimeout(loadQuickItems, 200);
+        });
+        document.getElementById("reg-search").addEventListener("input", () => {
+            definitionFilter.value = "";
+        });
+        document.querySelector(".quick-search").addEventListener("toggle", event => {
+            if (event.target.open) quickSearchInput.focus();
+        });
+    </script>
+{% endblock %}