django-debug-toolbar-datastar 0.1.0__tar.gz

django_debug_toolbar_datastar-0.1.0/.gitignore

@@ -0,0 +1,12 @@
+__pycache__/
+*.py[cod]
+*.egg-info/
+.venv/
+/dist/
+/build/
+/node_modules/
+/.vitest/
+.env
+learning_notes
+.pytest_cache/
+qrspi/

django_debug_toolbar_datastar-0.1.0/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2026, Marcus A. Lee, MarcusL11
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors
+   may be used to endorse or promote products derived from this software without
+   specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

django_debug_toolbar_datastar-0.1.0/PKG-INFO

@@ -0,0 +1,120 @@
+Metadata-Version: 2.5
+Name: django-debug-toolbar-datastar
+Version: 0.1.0
+Summary: Community-maintained Datastar signal projection panel for Django Debug Toolbar
+Project-URL: Homepage, https://github.com/MarcusL11/django-debug-toolbar-datastar
+Project-URL: Issues, https://github.com/MarcusL11/django-debug-toolbar-datastar/issues
+Project-URL: Source, https://github.com/MarcusL11/django-debug-toolbar-datastar
+License-Expression: BSD-3-Clause
+License-File: LICENSE
+Classifier: Development Status :: 3 - Alpha
+Classifier: Environment :: Web Environment
+Classifier: Framework :: Django
+Classifier: Intended Audience :: Developers
+Classifier: Operating System :: OS Independent
+Classifier: Programming Language :: Python :: 3
+Classifier: Programming Language :: Python :: 3 :: Only
+Requires-Python: >=3.10
+Requires-Dist: django-debug-toolbar>=8.0.0
+Requires-Dist: django>=5.2
+Description-Content-Type: text/markdown
+
+# Datastar Signals for Django Debug Toolbar
+
+This is a **third-party panel** for [Django Debug Toolbar](https://django-debug-toolbar.readthedocs.io/en/latest/). It displays a browser-side JSON view of the current page's [Datastar signals](https://data-star.dev/guide/reactive_signals).
+
+![Datastar Signals panel beside Django's welcome page](https://raw.githubusercontent.com/MarcusL11/django-debug-toolbar-datastar/main/docs/images/datastar-signals-overview.png)
+
+Search highlights matching signal names and paths without hiding other values.
+
+<img src="https://raw.githubusercontent.com/MarcusL11/django-debug-toolbar-datastar/main/docs/images/datastar-signals-search.png" alt="Search results with four matching paths" width="400" height="480">
+
+## Core idea
+
+This plugin displays Datastar signals from the page DOM. The template includes a search field. A script creates a hidden collector element in the document body for Datastar.
+
+The collector shows the current signals as JSON. Datastar reads `data-json-signals__terse` and writes JSON to the collector text. The panel reads this text and does not keep a history.
+
+For example, the collector holds `{"count":2}` when `count` is 2. When `count` changes to 3, a `MutationObserver` calls `render()` and the panel shows the new value. A panel that opens later reads the current JSON from the collector.
+
+## Install in a Django project
+
+Use a local development environment with Python 3.10+, Django 5.2+, and Django Debug Toolbar 8.0.0+.
+
+Install version `0.1.0` from PyPI after its release:
+
+```sh
+python -m pip install django-debug-toolbar-datastar==0.1.0
+```
+
+Before publication, build and install the wheel from this checkout:
+
+```sh
+python -m pip install build
+python -m build
+python -m pip install dist/django_debug_toolbar_datastar-0.1.0-py3-none-any.whl
+```
+
+Keep your existing apps, including `django.contrib.staticfiles` and `debug_toolbar`. Add `django_datastar_toolbar` to `INSTALLED_APPS`:
+
+```python
+INSTALLED_APPS = [
+    # Keep the other apps from your project here.
+    "django.contrib.staticfiles",
+    "debug_toolbar",
+    "django_datastar_toolbar",
+]
+```
+
+Add `"django_datastar_toolbar.panels.DatastarStorePanel"` to your existing complete ordered `DEBUG_TOOLBAR_PANELS` list. This setting replaces the toolbar defaults. Keep every other panel that you want to use.
+
+For a short test only, you can use the History panel and the Datastar panel. This list removes the other default panels. Copy the complete panel list for your installed toolbar version if you want to keep them.
+
+```python
+DEBUG_TOOLBAR_PANELS = [
+    "debug_toolbar.panels.history.HistoryPanel",
+    "django_datastar_toolbar.panels.DatastarStorePanel",
+]
+```
+
+Installing the package does not activate the toolbar or the panel. If your project does not use Django Debug Toolbar yet, follow its [installation guide](https://django-debug-toolbar.readthedocs.io/en/latest/installation.html). Add its middleware and URLs to your project. Set `DEBUG=True` for local development, allow your local IP in `INTERNAL_IPS`, and enable the app-directory template loader (`APP_DIRS=True`). The page must load the official full Datastar bundle. The core bundle alone does not include the built-in `data-json-signals` attribute.
+
+Run Django checks and find the add-on script:
+
+```sh
+python manage.py check
+python manage.py findstatic django_datastar_toolbar/js/datastar_store.js
+```
+
+Start your project and open a page that uses Datastar. Select Datastar Signals in the toolbar, then change a sample signal and check the JSON display. The package does not ship or inject any Datastar bundle or Inspector assets.
+
+Use sample data only. This panel does not hide sensitive values, and its raw JSON projection remains in the page DOM.
+
+## AI-assisted development
+
+Large language models (LLMs) helped create parts of this project's code and documentation.
+The author reviewed and edited all LLM-assisted content.
+
+## Run tests
+
+Run the Python panel tests:
+
+```sh
+python -m pytest tests/python/test_panel.py
+```
+
+Run the JavaScript tests in headless Chromium. Use Node.js 22.12 or newer in the 22 series, or use Node.js 24:
+
+```sh
+npm ci
+npx playwright install chromium
+npm test
+```
+
+The `npm test` suite tests the DOM without Django or Datastar.
+The full browser tests start Django and load the pinned full Datastar bundle.
+Run them with the Python environment that has this package installed:
+
+```sh
+TEST_PYTHON=python npm run test:e2e
+```

django_debug_toolbar_datastar-0.1.0/README.md

@@ -0,0 +1,99 @@
+# Datastar Signals for Django Debug Toolbar
+
+This is a **third-party panel** for [Django Debug Toolbar](https://django-debug-toolbar.readthedocs.io/en/latest/). It displays a browser-side JSON view of the current page's [Datastar signals](https://data-star.dev/guide/reactive_signals).
+
+![Datastar Signals panel beside Django's welcome page](https://raw.githubusercontent.com/MarcusL11/django-debug-toolbar-datastar/main/docs/images/datastar-signals-overview.png)
+
+Search highlights matching signal names and paths without hiding other values.
+
+<img src="https://raw.githubusercontent.com/MarcusL11/django-debug-toolbar-datastar/main/docs/images/datastar-signals-search.png" alt="Search results with four matching paths" width="400" height="480">
+
+## Core idea
+
+This plugin displays Datastar signals from the page DOM. The template includes a search field. A script creates a hidden collector element in the document body for Datastar.
+
+The collector shows the current signals as JSON. Datastar reads `data-json-signals__terse` and writes JSON to the collector text. The panel reads this text and does not keep a history.
+
+For example, the collector holds `{"count":2}` when `count` is 2. When `count` changes to 3, a `MutationObserver` calls `render()` and the panel shows the new value. A panel that opens later reads the current JSON from the collector.
+
+## Install in a Django project
+
+Use a local development environment with Python 3.10+, Django 5.2+, and Django Debug Toolbar 8.0.0+.
+
+Install version `0.1.0` from PyPI after its release:
+
+```sh
+python -m pip install django-debug-toolbar-datastar==0.1.0
+```
+
+Before publication, build and install the wheel from this checkout:
+
+```sh
+python -m pip install build
+python -m build
+python -m pip install dist/django_debug_toolbar_datastar-0.1.0-py3-none-any.whl
+```
+
+Keep your existing apps, including `django.contrib.staticfiles` and `debug_toolbar`. Add `django_datastar_toolbar` to `INSTALLED_APPS`:
+
+```python
+INSTALLED_APPS = [
+    # Keep the other apps from your project here.
+    "django.contrib.staticfiles",
+    "debug_toolbar",
+    "django_datastar_toolbar",
+]
+```
+
+Add `"django_datastar_toolbar.panels.DatastarStorePanel"` to your existing complete ordered `DEBUG_TOOLBAR_PANELS` list. This setting replaces the toolbar defaults. Keep every other panel that you want to use.
+
+For a short test only, you can use the History panel and the Datastar panel. This list removes the other default panels. Copy the complete panel list for your installed toolbar version if you want to keep them.
+
+```python
+DEBUG_TOOLBAR_PANELS = [
+    "debug_toolbar.panels.history.HistoryPanel",
+    "django_datastar_toolbar.panels.DatastarStorePanel",
+]
+```
+
+Installing the package does not activate the toolbar or the panel. If your project does not use Django Debug Toolbar yet, follow its [installation guide](https://django-debug-toolbar.readthedocs.io/en/latest/installation.html). Add its middleware and URLs to your project. Set `DEBUG=True` for local development, allow your local IP in `INTERNAL_IPS`, and enable the app-directory template loader (`APP_DIRS=True`). The page must load the official full Datastar bundle. The core bundle alone does not include the built-in `data-json-signals` attribute.
+
+Run Django checks and find the add-on script:
+
+```sh
+python manage.py check
+python manage.py findstatic django_datastar_toolbar/js/datastar_store.js
+```
+
+Start your project and open a page that uses Datastar. Select Datastar Signals in the toolbar, then change a sample signal and check the JSON display. The package does not ship or inject any Datastar bundle or Inspector assets.
+
+Use sample data only. This panel does not hide sensitive values, and its raw JSON projection remains in the page DOM.
+
+## AI-assisted development
+
+Large language models (LLMs) helped create parts of this project's code and documentation.
+The author reviewed and edited all LLM-assisted content.
+
+## Run tests
+
+Run the Python panel tests:
+
+```sh
+python -m pytest tests/python/test_panel.py
+```
+
+Run the JavaScript tests in headless Chromium. Use Node.js 22.12 or newer in the 22 series, or use Node.js 24:
+
+```sh
+npm ci
+npx playwright install chromium
+npm test
+```
+
+The `npm test` suite tests the DOM without Django or Datastar.
+The full browser tests start Django and load the pinned full Datastar bundle.
+Run them with the Python environment that has this package installed:
+
+```sh
+TEST_PYTHON=python npm run test:e2e
+```

django_debug_toolbar_datastar-0.1.0/pyproject.toml

@@ -0,0 +1,33 @@
+[build-system]
+requires = ["hatchling"]
+build-backend = "hatchling.build"
+
+[project]
+name = "django-debug-toolbar-datastar"
+version = "0.1.0"
+description = "Community-maintained Datastar signal projection panel for Django Debug Toolbar"
+readme = "README.md"
+license = "BSD-3-Clause"
+license-files = ["LICENSE"]
+requires-python = ">=3.10"
+dependencies = ["django>=5.2", "django-debug-toolbar>=8.0.0"]
+classifiers = [
+  "Development Status :: 3 - Alpha",
+  "Environment :: Web Environment",
+  "Framework :: Django",
+  "Intended Audience :: Developers",
+  "Operating System :: OS Independent",
+  "Programming Language :: Python :: 3",
+  "Programming Language :: Python :: 3 :: Only",
+]
+
+[project.urls]
+Homepage = "https://github.com/MarcusL11/django-debug-toolbar-datastar"
+Issues = "https://github.com/MarcusL11/django-debug-toolbar-datastar/issues"
+Source = "https://github.com/MarcusL11/django-debug-toolbar-datastar"
+
+[tool.hatch.build.targets.wheel]
+packages = ["src/django_datastar_toolbar"]
+
+[tool.hatch.build.targets.sdist]
+include = ["/src/django_datastar_toolbar", "/README.md", "/LICENSE", "/pyproject.toml"]

django_debug_toolbar_datastar-0.1.0/src/django_datastar_toolbar/__init__.py

@@ -0,0 +1 @@
+"""Datastar signal projection panel for Django Debug Toolbar."""

django_debug_toolbar_datastar-0.1.0/src/django_datastar_toolbar/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class DatastarToolbarConfig(AppConfig):
+    name = "django_datastar_toolbar"
+    verbose_name = "Datastar Debug Toolbar Panel"

django_debug_toolbar_datastar-0.1.0/src/django_datastar_toolbar/panels.py

@@ -0,0 +1,28 @@
+from debug_toolbar.panels import Panel
+from django.templatetags.static import static
+from django.utils.translation import gettext_lazy as _
+
+
+class DatastarStorePanel(Panel):
+    """Render a browser-owned view of the current Datastar JSON projection."""
+
+    is_async = True
+    title = _("Current Signal Store (JSON projection)")
+    nav_title = _("Datastar Signals")
+    nav_icon = "django_datastar_toolbar/img/rocket.svg"
+    template = "django_datastar_toolbar/panels/datastar_store.html"
+
+    @property
+    def is_historical(self):
+        return False
+
+    @property
+    def scripts(self):
+        return [
+            *super().scripts,
+            static("django_datastar_toolbar/js/datastar_store.js"),
+        ]
+
+    def generate_stats(self, request, response):
+        # Only shell availability is stored; browser values never cross to Django.
+        self.record_stats({"available": True})

django_debug_toolbar_datastar-0.1.0/src/django_datastar_toolbar/static/django_datastar_toolbar/css/datastar_store.css

@@ -0,0 +1,57 @@
+#djDebug #DatastarStorePanel {
+    left: auto;
+    right: 240px;
+    width: min(400px, calc(100vw - 240px));
+    box-sizing: border-box;
+    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
+}
+
+#djDebug #DatastarStorePanel .djDebugPanelTitle {
+    box-sizing: border-box;
+    padding-right: 60px;
+}
+
+#djDebug #DatastarStorePanel .djDebugPanelTitle h3 {
+    font-size: 18px;
+    line-height: 1.2;
+}
+
+@media (max-width: 800px) {
+    #djDebug #DatastarStorePanel {
+        right: 0;
+        width: min(400px, 100vw);
+        z-index: 100000001;
+    }
+}
+
+#djDebug .djdt-datastar-controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.6em;
+    margin: 1em 0;
+}
+
+#djDebug .djdt-datastar-controls input {
+    min-width: 12em;
+    padding: 0.3em;
+    color: var(--djdt-font-color);
+    background: var(--djdt-background-color);
+    border: 1px solid var(--djdt-button-border-color);
+}
+
+#djDebug
+    [data-datastar-store-output]
+    [data-datastar-store-path].djdt-datastar-match {
+    background-color: #ffe761;
+    color: #111;
+}
+
+#djDebug [data-datastar-store-output] .djdt-datastar-current-match {
+    outline: 2px solid var(--djdt-focus-color);
+}
+
+#djDebug [data-datastar-store-status][hidden],
+#djDebug [data-datastar-store-match-count][hidden] {
+    display: none;
+}

django_debug_toolbar_datastar-0.1.0/src/django_datastar_toolbar/static/django_datastar_toolbar/img/rocket.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M8 15 9 9c2-4 6-6 11-6 0 5-2 9-6 11l-6 1Z"/>
+  <path d="M9 9H5l-2 4 5 2M15 15v4l-4 2-2-5"/>
+  <circle cx="15.5" cy="8.5" r="1.5"/>
+  <path d="M6 17c-2 0-3 2-3 4 2 0 4-1 4-3"/>
+</svg>

django_debug_toolbar_datastar-0.1.0/src/django_datastar_toolbar/static/django_datastar_toolbar/js/datastar_store.js

@@ -0,0 +1,160 @@
+import { renderProjection, setStatus, setText } from "./display.js";
+import { handleInput, handleKeyDown, resetSearch, updateMatches } from "./search.js";
+
+const panelId = "DatastarStorePanel";
+const waitMs = 2_000;
+let toolbar;
+let shellObserver;
+let bodyObserver;
+let collector;
+let collectorObserver;
+let pendingTimer;
+let attachedContent;
+let projectionText = "";
+
+function sync() {
+  // Attach to the current toolbar and keep one collector for its panel.
+  // Checks whether the toolbar and our panel exist. It starts a collector 
+  // for a new panel or stops the old one. If the panel already exists, it calls render(), 
+  // which returns without changing the display when the JSON has not changed.
+  const nextToolbar = currentToolbar();
+  if (nextToolbar !== toolbar) {
+    stopCollector();
+    shellObserver?.disconnect();
+    toolbar?.removeEventListener("djdt.panel.render", onPanelRender);
+    toolbar?.removeEventListener("input", onInput);
+    toolbar?.removeEventListener("keydown", onKeyDown);
+    toolbar = nextToolbar;
+    if (toolbar) {
+      toolbar.addEventListener("djdt.panel.render", onPanelRender);
+      toolbar.addEventListener("input", onInput);
+      toolbar.addEventListener("keydown", onKeyDown);
+      shellObserver = new MutationObserver(sync);
+      shellObserver.observe(toolbar, { childList: true, subtree: true });
+    }
+  }
+  const panel = content();
+  if (!panel) {
+    stopCollector();
+    return;
+  }
+  if (panel !== attachedContent) {
+    stopCollector();
+    attachedContent = panel;
+    startCollector();
+  } else {
+    render();
+  }
+}
+
+function currentToolbar() {
+  // Find the current Debug Toolbar in the host or its shadow root.
+  const host = document.getElementById("djDebugRoot");
+  return (host?.shadowRoot ?? host)?.querySelector("#djDebug") ?? null;
+}
+
+function content() {
+  // Find this panel's content in the current toolbar.
+  return (
+    toolbar?.querySelector(`#${panelId} [data-datastar-store-panel]`) ??
+    null
+  );
+}
+
+function render() {
+  // Read new collector text, parse it, and show the result or an error.
+  const panel = content();
+  if (!panel || !collector) return;
+  const text = collector.textContent;
+  if (!text || text === projectionText) return;
+  let projection;
+  try {
+    projection = JSON.parse(text);
+  } catch {
+    projectionText = "";
+    clearTimeout(pendingTimer);
+    setStatus(
+      panel,
+      "Invalid JSON projection. The panel cleared the previous display."
+    );
+    setText(panel.querySelector("[data-datastar-store-output]"), "");
+    updateMatches(panel, Boolean(projectionText));
+    return;
+  }
+  projectionText = text;
+  clearTimeout(pendingTimer);
+  setStatus(panel, "");
+  if (renderProjection(panel, projection))
+    updateMatches(panel, Boolean(projectionText));
+}
+
+function onInput(event) {
+  // Give search the active panel and its projection status.
+  handleInput(event, content(), Boolean(projectionText));
+}
+
+function onKeyDown(event) {
+  // Give search the active panel for keyboard navigation.
+  handleKeyDown(event, content());
+}
+
+function stopCollector() {
+  // Remove the collector and its observer, then clear panel state.
+  clearTimeout(pendingTimer);
+  collectorObserver?.disconnect();
+  collectorObserver = null;
+  collector?.remove();
+  collector = null;
+  attachedContent = null;
+  projectionText = "";
+  resetSearch();
+}
+
+function startCollector() {
+  // Create the hidden JSON collector and watch it for changes.
+  setStatus(content(), "Waiting for Datastar signal data…");
+  collector = document.createElement("pre");
+  collector.hidden = true;
+  collector.setAttribute("data-json-signals__terse", "");
+  collector.setAttribute("data-djdt-datastar-collector", "");
+  // Datastar observes the host's light DOM, not the toolbar's shadow root.
+  document.body.append(collector);
+  collectorObserver = new MutationObserver(render);
+  collectorObserver.observe(collector, {
+    subtree: true,
+    childList: true,
+    characterData: true,
+  });
+  pendingTimer = setTimeout(() => {
+    if (collector && collector.textContent === "") {
+      setStatus(
+        content(),
+        "Still waiting for Datastar signal data…"
+      );
+    }
+  }, waitMs);
+  render();
+}
+
+function onPanelRender(event) {
+  // Check this panel when the toolbar adds its HTML.
+  // If the ID is DatastarStorePanel, it calls sync()
+  if (event.detail?.panelId === panelId) sync();
+}
+
+function watchBody() {
+  // Watch for a body change, then ask sync() to find the toolbar
+  bodyObserver?.disconnect();
+  bodyObserver = new MutationObserver(sync);
+  if (document.body) bodyObserver.observe(document.body, { childList: true });
+  sync();
+}
+
+// Module scripts can execute before eager panel markup or after lazy render's event.
+// Future patch history needs a listener before the first patch.
+// Lazy panels can load this script after users open the panel, so this script cannot recover earlier patch events.
+const documentObserver = new MutationObserver(watchBody);
+documentObserver.observe(document.documentElement, { childList: true });
+watchBody();
+if (document.readyState === "loading")
+  document.addEventListener("DOMContentLoaded", watchBody, { once: true });

django_debug_toolbar_datastar-0.1.0/src/django_datastar_toolbar/static/django_datastar_toolbar/js/display.js

@@ -0,0 +1,113 @@
+export function setText(node, text) {
+  // Write text only when it changes, so the DOM gets fewer changes.
+  if (node && node.textContent !== text) node.textContent = text;
+}
+
+export function setStatus(panel, text) {
+  // Set the status text and hide the line when it is empty.
+  const status = panel?.querySelector("[data-datastar-store-status]");
+  setText(status, text);
+  if (status) status.hidden = !text;
+}
+
+export function renderProjection(panel, value) {
+  // Build the new display before replacing the old display.
+  const output = panel.querySelector("[data-datastar-store-output]");
+  if (!output) return false;
+  const fragment = document.createDocumentFragment();
+  appendJsonValue(fragment, value, "", 0);
+  output.replaceChildren(fragment);
+  output.hidden = false;
+  return true;
+}
+
+function appendJsonValue(parent, value, path, depth, marker) {
+  // Walk the JSON value and add text and path markers to the display.
+  if (!isBranch(value)) {
+    appendPrimitive(parent, value, marker);
+    return;
+  }
+
+  const array = Array.isArray(value);
+  const children = entries(value);
+
+  appendOpening(parent, array, marker);
+
+  for (const [index, [key, child]] of children.entries()) {
+    const childPath = displayPath(path, key);
+    const childMarker = keyMarker(key, childPath);
+    parent.append("\n", "  ".repeat(depth + 1));
+    if (array) {
+      appendJsonValue(parent, child, childPath, depth + 1, childMarker);
+    } else {
+      childMarker.textContent = JSON.stringify(key);
+      parent.append(childMarker, ": ");
+      appendJsonValue(parent, child, childPath, depth + 1);
+    }
+    if (index < children.length - 1) parent.append(",");
+  }
+  if (children.length) appendIndentNewline(parent, depth);
+  appendClosing(parent, array);
+}
+
+function isBranch(value) {
+  // Treat arrays and non-null objects as JSON branches.
+  return value !== null && typeof value === "object";
+}
+
+function entries(value) {
+  // Pair array items with indexes, or get object key-value pairs.
+  return Array.isArray(value)
+    ? value.map((item, index) => [index, item])
+    : Object.entries(value);
+}
+
+function displayPath(parent, key) {
+  // Build a readable path for an object key or array index.
+  if (typeof key === "number") return `${parent}[${key}]`;
+  const part = /^[a-zA-Z_$][\w$]*$/.test(key)
+    ? key
+    : `[${JSON.stringify(key)}]`;
+  return parent
+    ? part.startsWith("[")
+      ? `${parent}${part}`
+      : `${parent}.${part}`
+    : part;
+}
+
+function keyMarker(key, path) {
+  // Mark a key with its path so search can find it.
+  const marker = document.createElement("span");
+  marker.dataset.datastarStorePath = path;
+  marker.dataset.datastarStoreKey =
+    typeof key === "number" ? `[${key}]` : key;
+  return marker;
+}
+
+function appendPrimitive(parent, value, marker) {
+  const text = JSON.stringify(value);
+  if (marker) {
+    marker.textContent = text;
+    parent.append(marker);
+  } else {
+    parent.append(text);
+  }
+}
+
+function appendOpening(parent, array, marker) {
+  const opening = array ? "[" : "{";
+  if (marker) {
+    marker.textContent = opening;
+    parent.append(marker);
+  } else {
+    parent.append(opening);
+  }
+}
+
+function appendClosing(parent, array) {
+  parent.append(array ? "]" : "}");
+}
+
+function appendIndentNewline(parent, depth) {
+  parent.append("\n", "  ".repeat(depth));
+}

django_debug_toolbar_datastar-0.1.0/src/django_datastar_toolbar/static/django_datastar_toolbar/js/search.js

@@ -0,0 +1,76 @@
+import { setText } from "./display.js";
+
+let matches = [];
+let currentMatch = 0;
+
+export function updateMatches(panel, hasProjection) {
+  // Mark matching names and paths without hiding other values.
+  const count = panel.querySelector("[data-datastar-store-match-count]");
+  const query = panel
+    .querySelector("[data-datastar-store-search]")
+    ?.value.trim()
+    .toLocaleLowerCase();
+  matches = [];
+  currentMatch = 0;
+  if (count) count.hidden = !query || !hasProjection;
+  for (const marker of panel.querySelectorAll("[data-datastar-store-path]")) {
+    const matchesQuery =
+      Boolean(query) &&
+      (marker.dataset.datastarStorePath
+        .toLocaleLowerCase()
+        .includes(query) ||
+        marker.dataset.datastarStoreKey
+          .toLocaleLowerCase()
+          .includes(query));
+    marker.classList.toggle("djdt-datastar-match", matchesQuery);
+    marker.classList.remove("djdt-datastar-current-match");
+    if (matchesQuery) matches.push(marker);
+  }
+  if (query && hasProjection) showCurrentMatch(panel);
+}
+
+export function handleInput(event, panel, hasProjection) {
+  // Refresh the search results only when the search field changes.
+  if (event.target === panel?.querySelector("[data-datastar-store-search]"))
+    updateMatches(panel, hasProjection);
+}
+
+export function handleKeyDown(event, panel) {
+  // Use Enter to move through matches, and Shift+Enter to move back.
+  if (
+    event.key !== "Enter" ||
+    event.target !== panel?.querySelector("[data-datastar-store-search]") ||
+    !matches.length
+  )
+    return;
+  event.preventDefault();
+  currentMatch =
+    (currentMatch + (event.shiftKey ? -1 : 1) + matches.length) %
+    matches.length;
+  showCurrentMatch(panel);
+}
+
+export function resetSearch() {
+  // Clear matches when the toolbar changes or removes the panel.
+  matches = [];
+  currentMatch = 0;
+}
+function showCurrentMatch(panel) {
+  // Mark the selected match, show its count, and scroll to it.
+  for (const match of matches)
+    match.classList.remove("djdt-datastar-current-match");
+  const count = panel.querySelector("[data-datastar-store-match-count]");
+  setText(
+    count,
+    matches.length
+      ? `${currentMatch + 1} of ${matches.length} matching paths (Enter for next)`
+      : "No matching signal names or paths."
+  );
+  if (matches.length) {
+    matches[currentMatch].classList.add("djdt-datastar-current-match");
+    if (panel.getClientRects().length)
+      matches[currentMatch].scrollIntoView({ block: "nearest" });
+  }
+}
+
+

django_debug_toolbar_datastar-0.1.0/src/django_datastar_toolbar/templates/django_datastar_toolbar/panels/datastar_store.html

@@ -0,0 +1,11 @@
+{% load i18n static %}
+<link rel="stylesheet" href="{% static 'django_datastar_toolbar/css/datastar_store.css' %}">
+<div data-datastar-store-panel>
+  <p role="status" data-datastar-store-status>{% translate "Waiting for Datastar signal data…" %}</p>
+  <div class="djdt-datastar-controls">
+    <label for="djdt-datastar-search">{% translate "Search signal names" %}</label>
+    <input id="djdt-datastar-search" type="search" autocomplete="off" title="{% translate 'Press Enter for the next match' %}" data-datastar-store-search>
+    <span data-datastar-store-match-count role="status" hidden></span>
+  </div>
+  <pre data-datastar-store-output></pre>
+</div>