pywebview-htmx 0.4.2__tar.gz → 0.5.0__tar.gz

{pywebview_htmx-0.4.2 → pywebview_htmx-0.5.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: pywebview-htmx
-Version: 0.4.2
+Version: 0.5.0
 Summary: HTMX-style declarative UI bindings for PyWebview apps
 Author-Email: "B.T. Franklin" <brandon.franklin@gmail.com>
 License: MIT License
@@ -87,7 +87,9 @@ pdm add pywebview-htmx
 ## Maintainer Docs
 
 For maintainer and agent-facing repository guidance, see
-[`docs/index.md`](docs/index.md).
+[`docs/index.md`](docs/index.md). Run `pdm run check` for lint, tests, and
+offline documentation checks. The documentation check requires the native
+`perfect-doc` executable and can run alone with `pdm run check-docs`.
 
 ## Agent Skill
 
@@ -159,7 +161,7 @@ it is injected automatically.
 - Python handlers should return an HTML string fragment. Returning objects or
   other data types is treated as an error.
 - For ordinary buttons/links, params still come from `data-py-params`.
-- For `<form py-trigger="submit">`, named fields are serialized automatically
+- For forms with `submit`, `input`, or `change` triggers, named fields are serialized automatically
   and merged over `data-py-params`.
 - Returned HTML is inserted directly into the DOM, so escape untrusted values
   before returning markup.
@@ -253,8 +255,8 @@ JSON payload passed to Python method.
 
 Notes:
 - If missing, params default to `{}`.
-- Invalid JSON logs an error and falls back to `{}`.
-- For submit-triggered forms, named form fields are serialized automatically and
+- Invalid JSON or a value that is not an object emits `py:error`. Python is not called.
+- For forms with `submit`, `input`, or `change` triggers, named fields are serialized automatically and
   merged over this payload.
 
 ### `py-target` (optional)
@@ -294,6 +296,7 @@ Per-element concurrency override. If omitted, the global
 - `swapDelay` (ms, default: `0`)
 - `settleDelay` (ms, default: `20`)
 - `requestPolicy` (`"latest-wins"` default, or `"drop"`)
+- `requestTimeout` (ms, default: `0`; `py-timeout` overrides it per element)
 
 Runtime defaults are read for each accepted request. An element's explicit
 `py-swap` continues to override `defaultSwapStyle`; otherwise, changing
@@ -390,8 +393,8 @@ A call made before the bridge is available emits `py:error`. It is not queued.
 
 ## Dynamic Content Re-processing
 
-After a swap, `pywebview-htmx` automatically scans swapped content for new `py-call`
-elements and binds them. This enables chained interactions in returned fragments
+After a swap, `pywebview-htmx` binds controls in the inserted content. Append
+and outer replacement do not scan existing siblings again. This enables chained interactions in returned fragments
 without manual re-init code.
 
 ## Theme System
@@ -516,3 +519,72 @@ The demo includes:
 ## License
 
 MIT (see [LICENSE](LICENSE)).
+
+## Request deadlines
+
+Set `py-timeout="2000"` for a two-second Python response deadline. The global
+`requestTimeout` default is `0` (no deadline). Values are milliseconds from
+0 to 2147483647. A timeout emits `py:error` with `detail.phase="timeout"` and
+`error.name="TimeoutError"`. The loading indicator stops, and a late response
+cannot change the page. A late Python failure still emits `py:error` with
+`detail.expired=true`.
+
+A deadline does not cancel Python work or retry the call. Under `drop`, the
+scope stays locked until Python finishes. Show the timeout message and let the
+application check the operation's result before another attempt. If Python
+never returns, the lock remains until the page is reloaded; reloading does not
+prove that the operation was cancelled. Use `latest-wins` for independent read
+operations that can safely run again.
+
+## Delay rapid input calls
+
+Use `py-debounce="200"` on a read operation to wait until input stops for 200 ms.
+Each event replaces the pending call for that control. Only the final event's
+parameter snapshot is sent. Forms with `py-trigger="input"` or `change`
+serialize their named fields, as submit forms do. Input during text composition
+is not sent; the final input event supplies the completed text.
+
+```html
+<form py-call="search" py-trigger="input" py-debounce="200" py-target="#results">
+  <label for="query">Search</label>
+  <input id="query" name="query" type="search">
+</form>
+<div id="results"></div>
+```
+
+The delay defaults to zero. Clicks and submissions remain immediate unless a
+control explicitly sets `py-debounce`. A removed control cannot send its pending
+call while detached. Waiting state and request policy start when the call is
+sent, not while its timer is pending. `drop` can still reject that call if
+another operation is running; use `latest-wins` for live read results. The delay
+does not cancel Python work that has already started.
+
+## Focus after replacement
+
+Give controls stable, unique IDs. When a destructive swap removes the focused
+control, the runtime focuses the inserted control with the same ID without
+scrolling the page. Text inputs and textareas also retain their selection,
+limited to the replacement value's length.
+
+Focus is read immediately before the swap. Moving to a control outside the
+updated region during a request is respected. A lifecycle listener that sets
+focus after the swap also takes precedence. Append operations do not change
+focus. If no matching control is inserted, the runtime does not guess a new
+focus target.
+
+## Accessible loading and theme states
+
+While a request is waiting, its wait element has `aria-busy="true"` and
+`.py-waiting`. Shared wait elements remain busy until all visible waits finish
+or time out. The runtime then restores the element's original `aria-busy`
+value, or removes the attribute if it was absent. It does not add live regions
+to application content. Use `role="status"` on a short result or status message
+when an announcement is useful.
+
+Bundled themes provide readable text for each button variant, visible keyboard
+focus, and the matching light or dark color scheme for native controls.
+Reduced-motion settings remove button movement and spinner animation while
+keeping the busy marker visible. Custom theme authors should define
+`--pyh-focus`, `--pyh-color-scheme`, and the `--pyh-btn-primary-text`,
+`--pyh-btn-secondary-text`, and `--pyh-btn-danger-text` tokens along with the
+existing colors.

{pywebview_htmx-0.4.2 → pywebview_htmx-0.5.0}/README.md

@@ -47,7 +47,9 @@ pdm add pywebview-htmx
 ## Maintainer Docs
 
 For maintainer and agent-facing repository guidance, see
-[`docs/index.md`](docs/index.md).
+[`docs/index.md`](docs/index.md). Run `pdm run check` for lint, tests, and
+offline documentation checks. The documentation check requires the native
+`perfect-doc` executable and can run alone with `pdm run check-docs`.
 
 ## Agent Skill
 
@@ -119,7 +121,7 @@ it is injected automatically.
 - Python handlers should return an HTML string fragment. Returning objects or
   other data types is treated as an error.
 - For ordinary buttons/links, params still come from `data-py-params`.
-- For `<form py-trigger="submit">`, named fields are serialized automatically
+- For forms with `submit`, `input`, or `change` triggers, named fields are serialized automatically
   and merged over `data-py-params`.
 - Returned HTML is inserted directly into the DOM, so escape untrusted values
   before returning markup.
@@ -213,8 +215,8 @@ JSON payload passed to Python method.
 
 Notes:
 - If missing, params default to `{}`.
-- Invalid JSON logs an error and falls back to `{}`.
-- For submit-triggered forms, named form fields are serialized automatically and
+- Invalid JSON or a value that is not an object emits `py:error`. Python is not called.
+- For forms with `submit`, `input`, or `change` triggers, named fields are serialized automatically and
   merged over this payload.
 
 ### `py-target` (optional)
@@ -254,6 +256,7 @@ Per-element concurrency override. If omitted, the global
 - `swapDelay` (ms, default: `0`)
 - `settleDelay` (ms, default: `20`)
 - `requestPolicy` (`"latest-wins"` default, or `"drop"`)
+- `requestTimeout` (ms, default: `0`; `py-timeout` overrides it per element)
 
 Runtime defaults are read for each accepted request. An element's explicit
 `py-swap` continues to override `defaultSwapStyle`; otherwise, changing
@@ -350,8 +353,8 @@ A call made before the bridge is available emits `py:error`. It is not queued.
 
 ## Dynamic Content Re-processing
 
-After a swap, `pywebview-htmx` automatically scans swapped content for new `py-call`
-elements and binds them. This enables chained interactions in returned fragments
+After a swap, `pywebview-htmx` binds controls in the inserted content. Append
+and outer replacement do not scan existing siblings again. This enables chained interactions in returned fragments
 without manual re-init code.
 
 ## Theme System
@@ -476,3 +479,72 @@ The demo includes:
 ## License
 
 MIT (see [LICENSE](LICENSE)).
+
+## Request deadlines
+
+Set `py-timeout="2000"` for a two-second Python response deadline. The global
+`requestTimeout` default is `0` (no deadline). Values are milliseconds from
+0 to 2147483647. A timeout emits `py:error` with `detail.phase="timeout"` and
+`error.name="TimeoutError"`. The loading indicator stops, and a late response
+cannot change the page. A late Python failure still emits `py:error` with
+`detail.expired=true`.
+
+A deadline does not cancel Python work or retry the call. Under `drop`, the
+scope stays locked until Python finishes. Show the timeout message and let the
+application check the operation's result before another attempt. If Python
+never returns, the lock remains until the page is reloaded; reloading does not
+prove that the operation was cancelled. Use `latest-wins` for independent read
+operations that can safely run again.
+
+## Delay rapid input calls
+
+Use `py-debounce="200"` on a read operation to wait until input stops for 200 ms.
+Each event replaces the pending call for that control. Only the final event's
+parameter snapshot is sent. Forms with `py-trigger="input"` or `change`
+serialize their named fields, as submit forms do. Input during text composition
+is not sent; the final input event supplies the completed text.
+
+```html
+<form py-call="search" py-trigger="input" py-debounce="200" py-target="#results">
+  <label for="query">Search</label>
+  <input id="query" name="query" type="search">
+</form>
+<div id="results"></div>
+```
+
+The delay defaults to zero. Clicks and submissions remain immediate unless a
+control explicitly sets `py-debounce`. A removed control cannot send its pending
+call while detached. Waiting state and request policy start when the call is
+sent, not while its timer is pending. `drop` can still reject that call if
+another operation is running; use `latest-wins` for live read results. The delay
+does not cancel Python work that has already started.
+
+## Focus after replacement
+
+Give controls stable, unique IDs. When a destructive swap removes the focused
+control, the runtime focuses the inserted control with the same ID without
+scrolling the page. Text inputs and textareas also retain their selection,
+limited to the replacement value's length.
+
+Focus is read immediately before the swap. Moving to a control outside the
+updated region during a request is respected. A lifecycle listener that sets
+focus after the swap also takes precedence. Append operations do not change
+focus. If no matching control is inserted, the runtime does not guess a new
+focus target.
+
+## Accessible loading and theme states
+
+While a request is waiting, its wait element has `aria-busy="true"` and
+`.py-waiting`. Shared wait elements remain busy until all visible waits finish
+or time out. The runtime then restores the element's original `aria-busy`
+value, or removes the attribute if it was absent. It does not add live regions
+to application content. Use `role="status"` on a short result or status message
+when an announcement is useful.
+
+Bundled themes provide readable text for each button variant, visible keyboard
+focus, and the matching light or dark color scheme for native controls.
+Reduced-motion settings remove button movement and spinner animation while
+keeping the busy marker visible. Custom theme authors should define
+`--pyh-focus`, `--pyh-color-scheme`, and the `--pyh-btn-primary-text`,
+`--pyh-btn-secondary-text`, and `--pyh-btn-danger-text` tokens along with the
+existing colors.

{pywebview_htmx-0.4.2 → pywebview_htmx-0.5.0}/pyproject.toml

@@ -21,7 +21,7 @@ classifiers = [
     "Topic :: Software Development :: Libraries :: Python Modules",
     "Topic :: Internet :: WWW/HTTP",
 ]
-version = "0.4.2"
+version = "0.5.0"
 
 [project.license]
 file = "LICENSE"
@@ -68,7 +68,16 @@ includes = [
 ]
 
 [tool.pdm.scripts]
-test = "pytest"
+check-docs = "perfect-doc check . --offline --no-banner"
+test = "pytest --browser chromium --browser webkit"
+check-dist = "python scripts/check_distribution.py"
 test-native = "python tests/native_smoke.py"
 lint = "ruff check ."
-install-browser = "playwright install chromium"
+install-browser = "playwright install chromium webkit"
+
+[tool.pdm.scripts.check]
+composite = [
+    "lint",
+    "test",
+    "check-docs",
+]

{pywebview_htmx-0.4.2 → pywebview_htmx-0.5.0}/src/pywebview_htmx/static/runtime.js

@@ -6,6 +6,7 @@
     swapDelay: 0,
     settleDelay: 20,
     requestPolicy: "latest-wins",
+    requestTimeout: 0,
   };
   const selfRequestState = new WeakMap();
   const targetedRequestState = new Map();
@@ -33,38 +34,109 @@
     return event;
   }
 
+  function reportError(element, error, detail = {}) {
+    console.error("PyWebview HTMX: request failed", error);
+    const target = element.isConnected ? element : document.body || document;
+    triggerEvent(target, "py:error", { element, error, stale: false, ...detail });
+  }
+
   function delay(ms) {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }
 
-  function pySwap(target, content, swapStyle = config.defaultSwapStyle) {
+  function captureFocus(target, swapStyle) {
+    const active = document.activeElement;
+    if (swapStyle === "append" || !active?.id || !target.contains(active)) return null;
+    const scroll = [];
+    for (let parent = active.parentElement; parent; parent = parent.parentElement) {
+      scroll.push({ element: parent, left: parent.scrollLeft, top: parent.scrollTop });
+    }
+    return {
+      scroll,
+      left: window.scrollX,
+      top: window.scrollY,
+      element: active,
+      id: active.id,
+      start: active.selectionStart,
+      end: active.selectionEnd,
+      direction: active.selectionDirection,
+    };
+  }
+
+  function restoreFocus(snapshot, insertedNodes) {
+    if (!snapshot || snapshot.element.isConnected) return;
+    const active = document.activeElement;
+    if (active && active !== document.body && active !== document.documentElement) return;
+    const selector = `#${CSS.escape(snapshot.id)}`;
+    let replacement;
+    for (const node of insertedNodes) {
+      if (node.nodeType !== Node.ELEMENT_NODE || !node.isConnected) continue;
+      replacement = node.id === snapshot.id ? node : node.querySelector(selector);
+      if (replacement) break;
+    }
+    if (!replacement || typeof replacement.focus !== "function") return;
+    // Wait for layout so WebKit does not scroll to the replaced control.
+    requestAnimationFrame(() => {
+      const active = document.activeElement;
+      if (!replacement.isConnected || snapshot.element.isConnected ||
+          (active && active !== document.body && active !== document.documentElement)) return;
+      replacement.focus({ preventScroll: true });
+      if (typeof snapshot.start === "number" && typeof replacement.selectionStart === "number") {
+        replacement.setSelectionRange(snapshot.start, snapshot.end, snapshot.direction);
+      }
+      for (const position of snapshot.scroll) {
+        if (position.element.isConnected) {
+          position.element.scrollTo({ left: position.left, top: position.top, behavior: "instant" });
+        }
+      }
+      window.scrollTo({ left: snapshot.left, top: snapshot.top, behavior: "instant" });
+    });
+  }
+
+  function collectInsertedNodes(parent, previous, next, insertedNodes) {
+    let node = previous ? previous.nextSibling : parent.firstChild;
+    while (node && node !== next) {
+      insertedNodes.push(node);
+      node = node.nextSibling;
+    }
+  }
+
+  function pySwap(target, content, swapStyle = config.defaultSwapStyle, insertedNodes = []) {
     switch (swapStyle) {
-      case "innerHTML":
-        target.innerHTML = content;
-        return target;
       case "outerHTML": {
         const parent = target.parentElement || document.body;
+        const previous = target.previousSibling;
+        const next = target.nextSibling;
         target.outerHTML = content;
+        collectInsertedNodes(parent, previous, next, insertedNodes);
         return parent;
       }
-      case "append":
+      case "append": {
+        const previous = target.lastChild;
         target.insertAdjacentHTML("beforeend", content);
+        collectInsertedNodes(target, previous, null, insertedNodes);
         return target;
+      }
       default:
         target.innerHTML = content;
+        insertedNodes.push(target);
         return target;
     }
   }
 
   function parseParams(element) {
     const raw = element.getAttribute("data-py-params");
-    if (!raw) return {};
+    if (raw === null) return {};
+    let params;
     try {
-      return JSON.parse(raw);
+      params = JSON.parse(raw);
     } catch (error) {
-      console.error("PyWebview HTMX: invalid JSON in data-py-params", error);
-      return {};
+      throw new Error("PyWebview HTMX: invalid JSON in data-py-params", { cause: error });
+    }
+    if (params === null || typeof params !== "object" || Array.isArray(params)) {
+      throw new Error("PyWebview HTMX: data-py-params must contain a JSON object");
     }
+    return params;
   }
 
   function mergeParamValue(target, key, value) {
@@ -102,7 +174,7 @@
 
   function buildRequestParams(element, eventName, event) {
     const params = parseParams(element);
-    if (element.tagName !== "FORM" || eventName !== "submit") {
+    if (element.tagName !== "FORM" || !["submit", "input", "change"].includes(eventName)) {
       return params;
     }
     return { ...params, ...serializeForm(element, event) };
@@ -153,19 +225,26 @@
   }
 
   function addWaiting(waitTarget) {
-    const count = (waitState.get(waitTarget) || 0) + 1;
-    waitState.set(waitTarget, count);
+    let state = waitState.get(waitTarget);
+    if (!state) {
+      state = { count: 0, previousBusy: waitTarget.getAttribute("aria-busy") };
+      waitState.set(waitTarget, state);
+    }
+    state.count += 1;
     waitTarget.classList.add("py-waiting");
+    waitTarget.setAttribute("aria-busy", "true");
   }
 
   function removeWaiting(waitTarget) {
-    const count = Math.max(0, (waitState.get(waitTarget) || 0) - 1);
-    if (count === 0) {
+    const state = waitState.get(waitTarget);
+    if (!state) return;
+    state.count -= 1;
+    if (state.count === 0) {
       waitState.delete(waitTarget);
       waitTarget.classList.remove("py-waiting");
-      return;
+      if (state.previousBusy === null) waitTarget.removeAttribute("aria-busy");
+      else waitTarget.setAttribute("aria-busy", state.previousBusy);
     }
-    waitState.set(waitTarget, count);
   }
 
   function shouldPreventDefault(element, eventName) {
@@ -188,6 +267,14 @@
     return false;
   }
 
+  function getDuration(element, attribute, fallback) {
+    const value = Number(element.getAttribute(attribute) ?? fallback);
+    if (!Number.isFinite(value) || value < 0 || value > 2147483647) {
+      throw new Error(`PyWebview HTMX: ${attribute} must be between 0 and 2147483647 ms`);
+    }
+    return value;
+  }
+
   function getRequestPolicy(element) {
     const policy = element.getAttribute("py-policy") || config.requestPolicy;
     if (policy === "drop" || policy === "latest-wins") {
@@ -205,7 +292,7 @@
     if (root.matches && root.matches("[py-call]")) {
       elements.push(root);
     }
-    elements.push(...root.querySelectorAll("[py-call]"));
+    root.querySelectorAll("[py-call]").forEach(element => elements.push(element));
 
     elements.forEach((element) => {
       if (boundElements.has(element)) {
@@ -225,32 +312,15 @@
       }
       boundElements.add(element);
 
-      element.addEventListener(eventName, async (event) => {
-        if (eventName === "click" && pendingLabelControlClicks.has(element)) {
-          pendingLabelControlClicks.delete(element);
+      let debounceTimer;
+      async function sendRequest(params) {
+        let timeout;
+        try {
+          timeout = getDuration(element, "py-timeout", config.requestTimeout);
+        } catch (error) {
+          reportError(element, error, { phase: "config" });
           return;
         }
-        if (labelControl && event.target === labelControl) {
-          if (pendingLabelControlClicks.has(labelControl)) {
-            pendingLabelControlClicks.delete(labelControl);
-            return;
-          }
-          if (
-            labelControl.hasAttribute("py-call") &&
-            (labelControl.getAttribute("py-trigger") || "click") === "click"
-          ) {
-            return;
-          }
-        } else if (labelControl && event.target !== labelControl) {
-          pendingLabelControlClicks.add(labelControl);
-          setTimeout(() => pendingLabelControlClicks.delete(labelControl), 0);
-        }
-
-        if (shouldPreventDefault(element, eventName) && event.cancelable) {
-          event.preventDefault();
-        }
-
-        const params = buildRequestParams(element, eventName, event);
         const scope = getRequestScope(element, targetSelector);
         const state = scope.state;
         const requestPolicy = getRequestPolicy(element);
@@ -272,10 +342,28 @@
         const swapStyle = element.getAttribute("py-swap") || config.defaultSwapStyle;
         const waitTarget = getWaitTarget(element);
         addWaiting(waitTarget);
+        let waiting = true;
+        const finishWaiting = () => {
+          if (waiting) {
+            waiting = false;
+            removeWaiting(waitTarget);
+          }
+        };
+        let expired = false;
+        const timer = timeout > 0 ? setTimeout(() => {
+          expired = true;
+          finishWaiting();
+          const error = new Error(`Python response timed out after ${timeout} ms; work may still be running`);
+          error.name = "TimeoutError";
+          reportError(element, error, {
+            phase: "timeout", requestId, stale: requestId !== state.lastIssued,
+          });
+        }, timeout) : null;
 
         try {
           const response = await invokePython(functionName, params);
-          if (requestId !== state.lastIssued) {
+          clearTimeout(timer);
+          if (expired || requestId !== state.lastIssued) {
             return;
           }
           if (typeof response !== "string") {
@@ -302,30 +390,81 @@
             return;
           }
 
-          const processRoot = pySwap(target, response, swapStyle);
+          const focus = captureFocus(target, swapStyle);
+          const insertedNodes = [];
+          const processRoot = pySwap(target, response, swapStyle, insertedNodes);
           const afterSwapTarget =
             swapStyle === "outerHTML"
               ? (targetSelector ? $(targetSelector) || processRoot : processRoot)
               : target;
           triggerEvent(afterSwapTarget, "py:afterSwap", { response, requestId });
-          processPyWebviewHtmxNodes(processRoot);
+          insertedNodes.forEach(processPyWebviewHtmxNodes);
+          restoreFocus(focus, insertedNodes);
 
           if (config.settleDelay > 0) {
             await delay(config.settleDelay);
           }
         } catch (error) {
-          console.error("PyWebview HTMX: error calling Python function", error);
-          const errorTarget = element.isConnected ? element : document.body || document;
-          triggerEvent(errorTarget, "py:error", {
-            element,
-            error,
+          reportError(element, error, {
             requestId,
+            expired,
             stale: requestId !== state.lastIssued,
           });
         } finally {
+          clearTimeout(timer);
           state.inFlightCount = Math.max(0, state.inFlightCount - 1);
           releaseRequestScope(scope);
-          removeWaiting(waitTarget);
+          finishWaiting();
+        }
+      }
+
+      element.addEventListener(eventName, (event) => {
+        if (eventName === "click" && pendingLabelControlClicks.has(element)) {
+          pendingLabelControlClicks.delete(element);
+          return;
+        }
+        if (labelControl && event.target === labelControl) {
+          if (pendingLabelControlClicks.has(labelControl)) {
+            pendingLabelControlClicks.delete(labelControl);
+            return;
+          }
+          if (
+            labelControl.hasAttribute("py-call") &&
+            (labelControl.getAttribute("py-trigger") || "click") === "click"
+          ) {
+            return;
+          }
+        } else if (labelControl && event.target !== labelControl) {
+          pendingLabelControlClicks.add(labelControl);
+          setTimeout(() => pendingLabelControlClicks.delete(labelControl), 0);
+        }
+
+        if (shouldPreventDefault(element, eventName) && event.cancelable) {
+          event.preventDefault();
+        }
+
+        clearTimeout(debounceTimer);
+        if (event.isComposing) return;
+        let debounce;
+        try {
+          debounce = getDuration(element, "py-debounce", 0);
+        } catch (error) {
+          reportError(element, error, { phase: "config" });
+          return;
+        }
+        let params;
+        try {
+          params = buildRequestParams(element, eventName, event);
+        } catch (error) {
+          reportError(element, error, { phase: "params" });
+          return;
+        }
+        if (debounce > 0) {
+          debounceTimer = setTimeout(() => {
+            if (element.isConnected) sendRequest(params);
+          }, debounce);
+        } else {
+          sendRequest(params);
         }
       });
     });

{pywebview_htmx-0.4.2 → pywebview_htmx-0.5.0}/src/pywebview_htmx/static/themes/aurora.css

@@ -1,4 +1,6 @@
 :root {
+  --pyh-color-scheme: dark;
+  --pyh-focus: #ffffff;
   --pyh-font-ui: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
   --pyh-font-headline: "Gill Sans", "Trebuchet MS", sans-serif;
   --pyh-font-mono: "SFMono-Regular", "Menlo", "Consolas", monospace;
@@ -38,10 +40,13 @@
 
   --pyh-btn-text: #0a1d2d;
   --pyh-btn-bg: #dce8f1;
+  --pyh-btn-primary-text: #0a1d2d;
   --pyh-btn-primary-bg: linear-gradient(130deg, #79ffd3, #55e1b8);
+  --pyh-btn-secondary-text: #0a1d2d;
   --pyh-btn-secondary-bg: linear-gradient(130deg, #ffd899, #f7ba54);
+  --pyh-btn-danger-text: #0a1d2d;
   --pyh-btn-danger-bg: linear-gradient(130deg, #ffb8b8, #ef6f6f);
-  --pyh-btn-ghost-bg: rgba(255, 255, 255, 0.12);
+  --pyh-btn-ghost-bg: #102c40;
   --pyh-btn-ghost-text: #f4f8fb;
   --pyh-btn-ghost-border: rgba(255, 255, 255, 0.28);