@scayle/storefront-devtools 0.2.0-alpha.1

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# @scayle/storefront-devtools
+
+## 0.2.0-alpha.1
+
+### Patch Changes
+
+- First release of `@scayle/storefront-devtools`, a dev-only Vite plugin that adds Storefront Application V3 panels to the Vite DevTools dock:
+
+  - **Inertia.js panel**: every visit your app makes, correlated into one request per navigation. Shows the response body and headers, the Inertia protocol details (partial reload keys, asset version, redirects), and a lifecycle timeline, with diagnostics for common mistakes like a missing partial-reload prop.
+  - **oRPC panel**: every call to your `/api` endpoint, decoded from its wire format back to typed input and output. Groups calls by procedure, classifies failures, and tracks per-procedure timing.
+  - **Storefront context panel**: a read-only view of the resolved shop, country, locale, and session for the page you're looking at.
+  - **Resource Center**: the Storefront documentation, embedded in the dock so you don't have to leave the app to look something up.
+  - **Vue panel**: the component tree and timeline you'd otherwise get from a separate `vite-plugin-vue-devtools` install.
+
+  Add `storefrontDevtools()` to your `vite.config.ts` plugins array and nothing else. The plugin only runs on the dev server and drops out of production builds automatically.

package/README.md

@@ -0,0 +1,222 @@
+![scayle-logo-cr](https://cdn-prod.scayle.com/public/media/general/SCAYLE-Commerce-Engine-header.png)
+
+<h1 align="center">
+  SCAYLE Storefront DevTools
+</h1>
+
+<h4 align="center">
+  <a href="https://scayle.dev">Documentation</a> |
+  <a href="https://www.scayle.com/">Website</a>
+</h4>
+
+<p align="center">
+  The SCAYLE <strong>Storefront DevTools</strong> package wires the Vite DevTools dock into the Storefront Application V3, with an Inertia.js inspector, an oRPC call inspector, a Storefront context viewer, a Resource Center, and Vue DevTools, behind a single Vite plugin call.
+</p>
+<p align="center">
+  <a href="#"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="SCAYLE's Storefront DevTools is released under the MIT license." /></a>
+</p>
+
+## Overview
+
+`@scayle/storefront-devtools` is a dev-only Vite plugin. It hosts the Vite DevTools dock and registers a **SCAYLE Storefront** dock group, plus a **Vue** group:
+
+- **Inertia.js panel**: every visit your app makes, correlated into one request per navigation. Shows the response body and headers, the Inertia protocol details (partial reload keys, asset version, redirects), and a lifecycle timeline, with diagnostics for common mistakes like a missing partial-reload prop. The [Inertia.js panel](#inertiajs-panel) section covers it in depth.
+- **oRPC panel**: every call to your `/api` endpoint, decoded from its wire format back to typed input and output. Groups calls by procedure, classifies failures, and tracks per-procedure timing. The [oRPC panel](#orpc-panel) section covers it in depth.
+- **Storefront context panel**: a read-only view of the resolved shop, country, locale, and session for the page you're looking at, read from the Inertia page the SDK ships. The [Storefront context panel](#storefront-context-panel) section covers it.
+- **Resource Center**: the Storefront documentation, embedded in the dock so you don't have to leave the app to look something up.
+- **Vue panel**: the component tree and timeline you'd otherwise get from a separate `vite-plugin-vue-devtools` install, mounted in the same dock.
+
+The plugin runs only on the dev server and drops out of production builds with no environment flag needed — see "Production safety" below for exactly why.
+
+## Why not the browser Network tab?
+
+The browser's Network tab is the right tool for raw HTTP. These panels exist for what it structurally cannot show.
+
+- **Inertia visits often have no network footprint.** The initial page load embeds the page object in the HTML, so it is never an XHR. Client-side history navigations, prefetch cache hits, and `preserveState` updates produce no request at all. The Network tab has no row for any of these. The panel captures them from Inertia's DOM events and history, so they are visible.
+- **The panel diffs and correlates across visits.** It shows a structural props diff between consecutive visits, links a deferred-prop reload to the parent visit that triggered it, and renders the lifecycle event timeline. The Network tab shows one request at a time with no memory of the last one.
+- **oRPC bodies on the wire are not your arguments.** Every oRPC call is a `POST /api` carrying a `{ json, meta }` envelope. The Network tab shows that envelope raw and cannot reconstruct the `Date`, `Map`, `Set`, or `BigInt` values it encodes, because JSON has no way to represent them. The panel decodes the envelope to the typed value your handler actually received.
+- **oRPC calls are indistinguishable in the Network tab.** They are all POSTs to the same `/api` URL, so you cannot tell `basket/add` from `wishlist/remove` without opening each one and reading the body. The panel groups by procedure, aggregates per-procedure timing, and classifies each failure as validation, server, or network.
+
+Where it overlaps the Network tab (the per-call HTTP view of a single oRPC request), the panels do not try to replace it. Use the Network tab for the raw transaction, the panels for the framework-level meaning.
+
+## Installation
+
+The package ships with Storefront Application V3 by default. To add it manually:
+
+```bash
+pnpm add -D @scayle/storefront-devtools
+```
+
+## Integration
+
+The package is consumed only from the Storefront Application V3 `vite.config.ts`. No other application code changes are required: the dock client and the Inertia and oRPC capture clients are injected into the application's client entry automatically.
+
+Import the default export and spread it into the `plugins` array, after `@vitejs/plugin-vue`:
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import storefrontDevtools from '@scayle/storefront-devtools'
+import storefrontBuild from '@scayle/storefront-build'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    // The Vite DevTools dock with the SCAYLE Storefront panels.
+    ...storefrontDevtools(),
+    storefrontBuild({
+      serverEntry: './src/server/index.ts',
+      ssrEntry: './src/client/ssr.ts',
+      indexEntry: './src/client/index.html',
+    }),
+    // ...other plugins
+  ],
+})
+```
+
+`storefrontDevtools()` returns an array of Vite plugins, so it must be spread. It also provides the Vue DevTools panel itself, so no separate `vite-plugin-vue-devtools` is needed.
+
+### Dev server path exclusion
+
+The dock and its assets are served by Vite under `/__devtools/` and `/__storefront-devtools/`. The Storefront Application V3 serves pages through a Hono dev server with a country-prefix redirect, which would otherwise catch those paths and rewrite them. `@scayle/storefront-build` already excludes the DevTools mount paths from the Hono dev server, so no extra configuration is needed when both packages are present.
+
+`storefrontDevtools()` takes no options. It always registers the Inertia.js, oRPC, Storefront context, Resource Center, and Vue panels, and always injects into the Storefront Application V3's own client entry (`src/client/main.ts`).
+
+## Opening the dock
+
+Run the Storefront Application V3 dev server (`pnpm dev`) and open the app. A floating launcher appears on the page. Open it, then open the **SCAYLE Storefront** group to reach the **Inertia.js**, **oRPC**, **Storefront**, and **Resource Center** entries, or the **Vue** group for the component tree and timeline.
+
+The launcher is injected into the client entry (not the HTML) because the Storefront Application V3 composes its HTML through the SSR renderer, so Vite's `transformIndexHtml` hook never fires. The same mechanism injects every panel's capture client.
+
+## Security: how the dock authenticates the browser
+
+The dock's browser side and the Vite dev server talk over a WebSocket RPC channel (`@devframes/hub`, using `crossws` as its transport abstraction). That channel is not limited to rendering our panels — `@vitejs/devtools` ships its own built-in RPC surface with real capabilities on the developer's machine, most notably **`vite:core:open-in-editor`** (opens an arbitrary file path in the developer's editor) and a terminals feed. This package sets `builtinDevTools: false`, which drops the upstream Terminals/Messages/Inspector docks and their UI, but the underlying RPC declarations are part of `@vitejs/devtools` itself, not something a consumer can un-register from the wire protocol. Two independent gates protect this channel:
+
+- **Origin allowlist.** `@vitejs/devtools` only accepts WebSocket connections whose `Origin` header matches a built-in loopback allowlist (`localhost`, `127.0.0.1`, and similar). This check is a **plain string match, not a DNS or hosts-file resolution** — a custom dev hostname that resolves to loopback via `/etc/hosts` or a local DNS override (e.g. `dev-my-app.example.com`) is invisible to it and gets rejected by default. If your setup needs a non-default hostname (a reverse proxy, a tunnel, a custom `/etc/hosts` entry), list it explicitly via `devtools: { allowedOrigins: ['https://dev-my-app.example.com'] }` in the app's Vite config.
+- **One-time client authorization.** On top of the origin check, `@vitejs/devtools` gates the RPC connection behind a one-time code by default (`clientAuth: true`). On first connection from a new browser, the `pnpm dev` terminal prints `devframe auth code <code>` and a magic-link URL (`...#devframe_otp=<code>`); enter the code in the dock's prompt, or open the printed URL, to authorize that browser. Until then, the dock stays unauthorized — this is expected, not a connection failure.
+
+**Disabling the authorization gate.** Setting `devtools: { clientAuth: false }` (or the `VITE_DEVTOOLS_DISABLE_CLIENT_AUTH=true` env var) skips the one-time-code prompt. Per `@vitejs/devtools`'s own documentation: _"if you disable client authentication, any browsers can connect to the devtools and access to your server and filesystem (including other devices, if you open server `host` option to LAN or WAN)."_ Only disable this in an environment where every request already reaches only a trusted developer (never with `server.host` bound to a LAN/WAN interface), and never in anything resembling a shared or production-adjacent environment.
+
+**Production safety.** `storefrontDevtools()` always registers its plugins, with no `import.meta.env.PROD` check on our side — the safety comes from `@vitejs/devtools` itself. The plugin that actually opens the WebSocket RPC server does so from Vite's `configureServer` hook, which Vite only ever calls during `vite dev`/`vite serve`, never during `vite build`. A production build and its runtime output carry no RPC server, no WebSocket endpoint, and none of the injected capture/launcher code reachable from a deployed Storefront Application V3.
+
+## How it works
+
+The package has two halves, both running in the host page's browser context, connected through a `window` global. There is no iframe between them: the Inertia panel mounts directly into the dock's panel element (a custom-render entry) and reads the capture store off `window`.
+
+```
+host page (browser)
+  injected client (into the app's client entry)      dock custom-render
+    DOM-event capture (inertia:*)                       Vue panel
+      -> Correlator -> RequestRecords          reads &  mounted into the dock DOM
+    history-capture (pushState/replaceState)   ───────▶ subscribes to the store
+    network timing (PerformanceObserver)
+      -> DevToolsStore on window
+  window.__STOREFRONT_DEVTOOLS_STORE__
+```
+
+### Capture (host page)
+
+On load, the injected client builds a `DevToolsStore`, stashes it at `window.__STOREFRONT_DEVTOOLS_STORE__`, and wires three non-invasive sources into it:
+
+- **DOM events** — `document.addEventListener` over the Inertia 3.x `inertia:*` events. Each event's detail is safely serialized (depth-limited, functions and abort signals stripped) and fed to the store. No `router.on()` patching.
+- **Network timing** — a `PerformanceObserver` over resource-timing entries, matched to in-flight requests by URL.
+- **Client-side history** — a `history.pushState` / `replaceState` patch that detects client visits (`router.push` / `router.replace`) that bypass the normal Inertia event lifecycle.
+
+Every handler is wrapped so the devtools can never crash the host application.
+
+### Correlation
+
+A correlator groups the raw events into one `RequestRecord` per logical visit, matching events by a visit fingerprint plus an active-visit pointer. It handles deferred prop reloads, prefetch cache hits, POST→redirect flows, 409 asset-version mismatches, and the initial page load. Records are kept in a bounded buffer (200), and a compact summary of the previous session is persisted to `sessionStorage` so requests from before a reload remain visible.
+
+### oRPC capture
+
+The oRPC panel follows the same shape with its own store on `window.__STOREFRONT_DEVTOOLS_ORPC_STORE__`. Its injected client patches `window.fetch` once on load. Each request whose path starts with `/api` is recorded as one `OrpcCall`: the procedure name (the path after `/api`), the JSON input read from the request body, and on response the JSON output, the status, the duration, and any error. Every other fetch passes through untouched, and the original response or rejection always reaches the app unchanged, so the patch can never break a real request. The store caps the buffer at 200, classifies each failure as validation, server, or network, and persists a previous-session summary like the Inertia store. The wire JSON is captured as-is, not the decoded oRPC values.
+
+### Storefront context
+
+Unlike the Inertia and oRPC panels, the Storefront context panel has no capture client of its own: it reads the live Inertia page directly from the Inertia panel's store (`window.__STOREFRONT_DEVTOOLS_STORE__`), so it only shows data that store has already captured.
+
+### Mounting a panel into the dock
+
+Every custom-render panel (Inertia, oRPC, Storefront context) mounts through a shared `mountPanel()` helper, not a naive `dom:panel:mounted` listener. The dock's `@devframes/hub-ui` runtime switches to a panel entry and assigns its DOM element (which internally fires `dom:panel:mounted`) _before_ it `import()`s the panel's renderer module, so a listener registered inside the renderer never sees that event fire. `mountPanel()` checks the panel element synchronously first, falling back to the event listener only if it isn't set yet — the same pattern `@devframes/hub-ui` uses internally for its own iframe entries.
+
+## Panels
+
+### Inertia.js panel
+
+This panel is the reason the package exists. Inertia drives navigation over XHR and swaps page props without a full reload, so the browser network tab shows you raw JSON and nothing about the visit itself. The panel reads the Inertia lifecycle directly and shows you the visit.
+
+It opens on the **Requests** tab and has a second **Page** tab. A top bar carries **Pause** and **Clear**.
+
+**Requests tab.** The left side lists every visit as it happens: method, URL, visit type, timing, and a badge for any diagnostics. Filter the list by type (full, partial, deferred, prefetch, redirect, client) or type a string into the URL box to narrow it. Deferred reloads nest under the visit that triggered them, so you can see which page kicked off which background load. When the buffer fills past 200 visits a footer tells you how many older ones rolled off. Reload the page and a collapsible **Previous session** block keeps the visits from before the reload, which matters because a full reload normally wipes the list. Use this tab to answer "did that click even fire a visit, and what kind."
+
+Select a visit and the right side opens its detail across four tabs:
+
+- **Response** — the response props actually captured for that visit, each tagged with how it arrived (full, partial, deferred, merged, prepended, or deep-merged), plus a note for any prop you requested via `only` that the response omitted, and a count of props carried over unchanged from the previous page. A **Show changes since last page** toggle switches to a before/after diff instead, marking added keys, removed keys, and changed values. This is where you confirm a partial or deferred reload returned the prop you asked for, or spot a prop that changed when it should not have.
+- **Headers** — the request and response headers actually sent and received for that visit, as a table. Credential-bearing headers (`authorization`, `cookie`, and similar) are redacted before they are ever stored.
+- **Network** — the Inertia protocol view of the request: asset version, the `only` / `except` partial-reload keys, the `errorBag` name, reset keys, plus resource timing and transfer size when the browser recorded them. Use it to verify a partial reload sent the right `only` set, or to see how long a visit actually took on the wire.
+- **Events** — a lifecycle timeline (`before`, `start`, `success`, `finish`, and the rest) with each step's offset in milliseconds from the first event, color-coded by outcome. Below it, every captured event with its full payload as a collapsible tree. This is where you debug a visit that hung, was canceled, or fired events in an order you did not expect.
+
+The detail header also carries **Copy as Markdown**, which copies the visit (header, features, error, and the raw page JSON) to your clipboard for pasting into an issue or an AI chat.
+
+Above the tabs, the detail shows an overview (method, URL, type, status, component, duration, and the redirect URL on a 409), the active **feature badges**, and any **diagnostics**.
+
+**Feature badges** mark the Inertia features active on a visit: partial reload, deferred props, the merge / deep-merge / prepend strategies, scroll regions, once props, prefetch, cached (a prefetch hit that skipped the network), flash data, remembered state, encrypted history, and clear-history. Click a badge to expand its description and a link to the matching Inertia docs, so you do not need to remember what each one means.
+
+**Diagnostics** flag common mistakes on a visit: an asset-version mismatch that forced a 409 reload, a canceled or interrupted visit, a partial-reload prop you requested but the response omitted, validation errors dropped because an `only` option left out `errors`, deferred props that failed to load, and a same-URL history replace. Each links to the relevant docs.
+
+**Page tab.** The current page props as a collapsible tree, with the page-level feature badges. Use it to inspect the props your component is rendering right now, separate from any one visit.
+
+**Pause** stops capture so a busy page stops flooding the list while you read a visit. Resume picks up new visits from that point. **Clear** empties the list. Your active tab and list filter persist across panel reopens, the URL search does not.
+
+### oRPC panel
+
+The Storefront Application V3 mutates state through oRPC calls to `/api`: add to basket, toggle wishlist, apply a promotion, run a search. In the browser network tab these all look like identical POSTs to `/api`, with the procedure buried in the request body. This panel reads them as oRPC calls and labels each by its procedure.
+
+It opens on the **Calls** tab and has a second **Stats** tab. A top bar carries **Pause** and **Clear**.
+
+**Calls tab.** The left side lists every oRPC call as it fires: method, procedure (`basket/add`, `wishlist/remove`, and so on), a status badge colored green for success, amber for a validation error, red for a server or network error, and the duration. Filter the list by domain (the first path segment, `basket`, `wishlist`, `search`) or type a string into the box to match the procedure. A collapsible **Previous session** block keeps the calls from before a reload.
+
+Select a call and the right side opens its detail across two tabs:
+
+- **Data** — the request input as a collapsible tree, and the success output as a collapsible tree, or, when the call failed, the **Error** with its oRPC code, status, message, and data. A streaming response shows a note instead of a buffered body.
+- **Headers** — the request and response headers actually sent and received for that call, as a table. Credential-bearing headers and sensitive input fields (passwords, tokens, and similar) are redacted before they are ever stored.
+
+The overview above the tabs shows the procedure, method, URL, status, duration, and the error kind when the call failed.
+
+The detail header carries **Copy as curl**, which copies the call as a runnable `curl` command with the JSON body, for replaying the request in a terminal or pasting into an issue.
+
+**Stats tab.** A table of every procedure with its call count, average duration, and last duration. Sort by count to find the chatty procedure a page fires ten times, or by average to find the slow one. Use it to answer "which call is making this page feel slow."
+
+**Pause** stops capture while you read a call. **Clear** empties the list.
+
+### Storefront context panel
+
+A read-only view of the resolved shop, country, locale, and session for the current page, plus the config public fields the SDK exposes to the client. It never renders secrets or the full session token, only what the Inertia page props already contain. Use it to confirm which shop/country/locale the app resolved for a request without hunting through page props by hand.
+
+### Resource Center
+
+A plain iframe that embeds the Storefront documentation in the dock, so you can look something up without leaving the app or hunting for a tab.
+
+### Vue
+
+The Vue DevTools component tree and timeline, in a **Vue** dock group alongside the SCAYLE Storefront group. It runs as a standalone iframe app (not a custom-render panel like the others) connected to the host page over a `BroadcastChannel` RPC bridge, so it works without the dock owning an `<iframe>` element the applet controls directly. Replaces a separate `vite-plugin-vue-devtools` install.
+
+Click-to-inspect (clicking a rendered element to jump to its component in the tree) is not included: it needs `vite-plugin-vue-inspector` wired into the app's own Vite config, which this package does not add.
+
+## Architecture notes
+
+Each panel that captures live app state (Inertia, oRPC) separates a framework-agnostic core (plain TypeScript, no Vue) from its Vue panel. The Inertia panel lives in `src/inertia/core` and `src/inertia/panel`. The oRPC panel mirrors it in `src/orpc/core` and `src/orpc/panel`. Both reuse shared panel UI (`TreeView`, the clipboard helper, panel styles) and shared capture-side generics (a `window`-store polling hook, a `sessionStorage` persistence helper) from `src/shared/`. The core handles capture, classification, diffing, diagnostics, and persistence, and the panel renders it. The panel styles are dark-mode only and are injected into the dock's shadow root, so they never leak into the host application.
+
+## Upstream stability
+
+`@vitejs/devtools`, `@vitejs/devtools-kit`, `@devframes/hub`, and `@devframes/hub-ui` are all pre-1.0 (`0.x`) releases. There is no published semver stability guarantee for 0.x versions of these packages — any minor version can carry a breaking change with no deprecation window, and neither project's changelog consistently flags every breaking change as such. If you upgrade any of them:
+
+- Check `@vitejs/devtools`'s peer range against the Vite version this repository pins — `@vitejs/devtools` 0.6.x and 0.7.x have shipped outside `vite`'s own declared peer range for `@vitejs/devtools` at times, so a newer devtools version is not automatically compatible with an older (or even the current) pinned Vite.
+- `@devframes/hub`/`@devframes/hub-ui` resolve as transitive dependencies of `@vitejs/devtools`, so a routine `pnpm update` (or a fresh install after a range widens) can move them independently of any `@vitejs/devtools` version bump you intended.
+- Re-run `pnpm exec vitest run`, `pnpm run build`, `pnpm run verify-packaging`, and a live check of all five panels in the dock after any bump — the unit tests do not exercise the dock's actual runtime, only this package's own capture/classification logic.
+
+## License
+
+MIT

package/dist/_chunks/clipboard-DrVHc2QA.mjs

@@ -0,0 +1,61 @@
+import { t as e } from "./panel-uV5ITqhY.mjs";
+import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeStyle as c, openBlock as l, ref as u, renderList as d, resolveComponent as f, toDisplayString as p, withKeys as m, withModifiers as h } from "vue";
+//#region src/shared/TreeView.vue?vue&type=script&setup=true&lang.ts
+var g = { class: "sf-dt-tree" }, _ = [
+	"role",
+	"tabindex",
+	"aria-expanded"
+], v = { class: "sf-dt-tree-caret" }, y = { class: "sf-dt-tree-key" }, b = { class: "sf-dt-tree-preview" }, x = /*#__PURE__*/ e(/* @__PURE__ */ s({
+	name: "TreeView",
+	__name: "TreeView",
+	props: {
+		label: {},
+		value: {},
+		depth: {}
+	},
+	setup(e) {
+		let s = e, x = n(() => s.depth ?? 0), S = u(!1), C = n(() => Array.isArray(s.value) ? "array" : s.value !== null && typeof s.value == "object" ? "object" : "primitive"), w = n(() => C.value === "array" ? s.value.map((e, t) => [String(t), e]) : C.value === "object" ? Object.entries(s.value) : []), T = n(() => C.value === "array" ? `Array(${s.value.length})` : C.value === "object" ? `{ ${Object.keys(s.value).length} }` : E(s.value));
+		function E(e) {
+			return typeof e == "string" ? `"${e}"` : String(e);
+		}
+		return (n, s) => {
+			let u = f("TreeView", !0);
+			return l(), a("div", g, [o("div", {
+				class: "sf-dt-tree-row",
+				style: c({ paddingLeft: `${x.value * 16}px` }),
+				role: C.value === "primitive" ? void 0 : "button",
+				tabindex: C.value === "primitive" ? void 0 : 0,
+				"aria-expanded": C.value === "primitive" ? void 0 : S.value,
+				onClick: s[0] ||= (e) => C.value !== "primitive" && (S.value = !S.value),
+				onKeydown: [s[1] ||= m((e) => C.value !== "primitive" && (S.value = !S.value), ["enter"]), s[2] ||= m(h((e) => C.value !== "primitive" && (S.value = !S.value), ["prevent"]), ["space"])]
+			}, [
+				o("span", v, p(C.value === "primitive" ? "" : S.value ? "▾" : "▸"), 1),
+				o("span", y, p(e.label) + ":", 1),
+				o("span", b, p(T.value), 1)
+			], 44, _), S.value && C.value !== "primitive" ? (l(!0), a(t, { key: 0 }, d(w.value, ([e, t]) => (l(), r(u, {
+				key: e,
+				label: e,
+				value: t,
+				depth: x.value + 1
+			}, null, 8, [
+				"label",
+				"value",
+				"depth"
+			]))), 128)) : i("", !0)]);
+		};
+	}
+}), [["__scopeId", "data-v-dcfacad6"]]), S = { class: "sf-dt-header-table" }, C = { scope: "row" }, w = /*#__PURE__*/ e(/* @__PURE__ */ s({
+	name: "HeaderTable",
+	__name: "HeaderTable",
+	props: { headers: {} },
+	setup(e) {
+		return (n, r) => (l(), a("table", S, [o("tbody", null, [(l(!0), a(t, null, d(e.headers, (e, t) => (l(), a("tr", { key: t }, [o("th", C, p(t), 1), o("td", null, p(e), 1)]))), 128))])]));
+	}
+}), [["__scopeId", "data-v-d6d30a99"]]);
+//#endregion
+//#region src/shared/clipboard.ts
+function T(e) {
+	typeof navigator < "u" && navigator.clipboard && navigator.clipboard.writeText(e);
+}
+//#endregion
+export { w as n, x as r, T as t };

package/dist/_chunks/diff-DzJ5arJj.mjs

@@ -0,0 +1,169 @@
+//#region src/inertia/core/features.ts
+function e(e) {
+	return typeof e == "object" && !!e && Object.keys(e).length > 0;
+}
+function t(t) {
+	let n = [], r = null;
+	return e(t.deferredProps) ? r = t.deferredProps : e(t.initialDeferredProps) && (r = t.initialDeferredProps), r && n.push({
+		type: "deferred",
+		label: "DEFERRED",
+		details: { groups: r }
+	}), t.mergeProps?.length && n.push({
+		type: "merge",
+		label: "MERGE",
+		details: { props: t.mergeProps }
+	}), t.prependProps?.length && n.push({
+		type: "prepend",
+		label: "PREPEND",
+		details: { props: t.prependProps }
+	}), t.deepMergeProps?.length && n.push({
+		type: "deep-merge",
+		label: "DEEP MERGE",
+		details: { props: t.deepMergeProps }
+	}), e(t.scrollProps) && n.push({
+		type: "scroll",
+		label: "SCROLL",
+		details: { props: t.scrollProps }
+	}), e(t.onceProps) && n.push({
+		type: "once",
+		label: "ONCE",
+		details: { props: t.onceProps }
+	}), t.encryptHistory && n.push({
+		type: "encrypted",
+		label: "ENCRYPTED"
+	}), t.clearHistory && n.push({
+		type: "clear-history",
+		label: "CLEAR HISTORY"
+	}), e(t.flash) && n.push({
+		type: "flash",
+		label: "FLASH",
+		details: { flash: t.flash }
+	}), e(t.rememberedState) && n.push({
+		type: "remember",
+		label: "REMEMBER",
+		details: { keys: Object.keys(t.rememberedState) }
+	}), n;
+}
+function n(e, n) {
+	let r = [];
+	return e.type === "partial" && r.push({
+		type: "partial",
+		label: "PARTIAL"
+	}), r.push(...t(n)), e.type === "prefetch" && r.push({
+		type: "prefetch",
+		label: "PREFETCH"
+	}), !e.events.some((e) => e.name === "inertia:start") && e.startedAt > 0 && e.type !== "client" && r.push({
+		type: "cached",
+		label: "CACHED"
+	}), r;
+}
+//#endregion
+//#region src/inertia/core/diff.ts
+function r(e, t) {
+	if (!e && !t) return [];
+	if (!e) return Object.entries(t).map(([e, t]) => ({
+		type: "added",
+		key: e,
+		newValue: t
+	}));
+	if (!t) return Object.entries(e).map(([e, t]) => ({
+		type: "removed",
+		key: e,
+		oldValue: t
+	}));
+	let n = /* @__PURE__ */ new Set([...Object.keys(e), ...Object.keys(t)]), r = [];
+	for (let a of n) {
+		let n = a in e, o = a in t, s = e[a], c = t[a];
+		n ? o ? r.push(i(a, s, c)) : r.push({
+			type: "removed",
+			key: a,
+			oldValue: s
+		}) : r.push({
+			type: "added",
+			key: a,
+			newValue: c
+		});
+	}
+	return r.toSorted((e, t) => {
+		let n = {
+			added: 0,
+			removed: 1,
+			changed: 2,
+			nested: 3,
+			unchanged: 4
+		}, r = n[e.type] - n[t.type];
+		return r === 0 ? e.key.localeCompare(t.key) : r;
+	});
+}
+function i(e, t, n) {
+	if (o(t) && o(n)) {
+		let i = r(t, n), a = i.some((e) => e.type !== "unchanged");
+		return {
+			type: a ? "nested" : "unchanged",
+			key: e,
+			newValue: n,
+			children: a ? i : void 0
+		};
+	}
+	return Array.isArray(t) && Array.isArray(n) ? a(e, t, n) : s(t, n) ? {
+		type: "unchanged",
+		key: e,
+		newValue: n
+	} : {
+		type: "changed",
+		key: e,
+		oldValue: t,
+		newValue: n
+	};
+}
+function a(e, t, n) {
+	let r = Math.max(t.length, n.length), a = [];
+	for (let e = 0; e < r; e++) {
+		let r = `[${e}]`;
+		e >= t.length ? a.push({
+			type: "added",
+			key: r,
+			newValue: n[e]
+		}) : e >= n.length ? a.push({
+			type: "removed",
+			key: r,
+			oldValue: t[e]
+		}) : a.push(i(r, t[e], n[e]));
+	}
+	return a.every((e) => e.type === "unchanged") ? {
+		type: "unchanged",
+		key: e,
+		newValue: n
+	} : {
+		type: "nested",
+		key: e,
+		newValue: n,
+		children: a
+	};
+}
+function o(e) {
+	return typeof e == "object" && !!e && !Array.isArray(e);
+}
+function s(e, t) {
+	return c(e, t, /* @__PURE__ */ new WeakSet());
+}
+function c(e, t, n) {
+	if (e === t) return !0;
+	if (e === null || t === null || typeof e != typeof t) return !1;
+	if (typeof e == "object") {
+		if (n.has(e) || n.has(t)) return !1;
+		n.add(e), n.add(t);
+	}
+	try {
+		if (Array.isArray(e) && Array.isArray(t)) return e.length === t.length && e.every((e, r) => c(e, t[r], n));
+		if (o(e) && o(t)) {
+			let r = Object.keys(e), i = Object.keys(t);
+			return r.length === i.length && r.every((r) => c(e[r], t[r], n));
+		}
+		return !1;
+	} finally {
+		typeof e == "object" && (n.delete(e), n.delete(t));
+	}
+}
+//#endregion
+export { t as i, r as n, n as r, s as t };

package/dist/_chunks/panel-uV5ITqhY.mjs

@@ -0,0 +1,51 @@
+import { createApp as e, onUnmounted as t, shallowRef as n } from "vue";
+//#region \0virtual:css-injected-by-js
+function r(e) {
+	if (typeof globalThis < "u") {
+		globalThis.__VITE_CSS_INJECT_OPTS__ = e || {};
+		for (var t = globalThis.__VITE_CSS_QUEUE__ || [], n = globalThis.__VITE_CSS_EXECUTED__ || [], r = 0; r < n.length; r++) n[r](e || {});
+		for (var r = 0; r < t.length; r++) t[r](e || {}), n.push(t[r]);
+		globalThis.__VITE_CSS_QUEUE__ = [], globalThis.__VITE_CSS_EXECUTED__ = n;
+	}
+}
+//#endregion
+//#region src/shared/mount-panel.ts
+function i(t, n) {
+	let i, a;
+	function o(t) {
+		if (t === a) return;
+		i?.unmount();
+		let o = t.getRootNode();
+		r({ target: o instanceof ShadowRoot ? o : document.head }), i = e(n), i.mount(t), a = t;
+	}
+	t.current.events.on("dom:panel:mounted", o);
+	let s = t.current.domElements.panel;
+	s && o(s);
+}
+//#endregion
+//#region src/shared/use-window-store.ts
+var a = 250;
+function o(e) {
+	let r = n(null), i, o;
+	function s(e) {
+		r.value = e.getState(), i = e.subscribe((e) => {
+			r.value = e;
+		});
+	}
+	let c = e();
+	return c ? s(c) : o = setInterval(() => {
+		let t = e();
+		t && (clearInterval(o), o = void 0, s(t));
+	}, a), t(() => {
+		i?.(), o && clearInterval(o);
+	}), r;
+}
+//#endregion
+//#region \0plugin-vue:export-helper
+var s = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+};
+//#endregion
+export { o as n, i as r, s as t };

package/dist/_chunks/redact-DmIF-iyk.mjs

@@ -0,0 +1,96 @@
+function e(e) {
+	return {
+		save(t) {
+			if (typeof sessionStorage < "u") try {
+				sessionStorage.setItem(e, JSON.stringify(t));
+			} catch {}
+		},
+		load() {
+			if (typeof sessionStorage > "u") return null;
+			try {
+				let t = sessionStorage.getItem(e);
+				if (!t) return null;
+				let n = JSON.parse(t);
+				return Date.now() - n.savedAt > 3e5 ? (sessionStorage.removeItem(e), null) : n;
+			} catch {
+				return null;
+			}
+		},
+		clear() {
+			typeof sessionStorage < "u" && sessionStorage.removeItem(e);
+		}
+	};
+}
+var t = /* @__PURE__ */ new Set(["cancelToken", "signal"]);
+function n(e) {
+	if (e instanceof Date) return e.toISOString();
+	if (e instanceof URL || e instanceof RegExp) return e.toString();
+	if (e instanceof Error) return {
+		message: e.message,
+		name: e.name,
+		stack: e.stack
+	};
+}
+function r(e, n, r, a) {
+	if (Array.isArray(e)) return e.map((e) => i(e, a, n - 1, r));
+	if (e instanceof Set) return Array.from(e, (e) => i(e, a, n - 1, r));
+	if (e instanceof Map) {
+		let t = {};
+		for (let [o, s] of e) t[String(o)] = i(s, a, n - 1, r);
+		return t;
+	}
+	try {
+		let o = {};
+		for (let [s, c] of Object.entries(e)) typeof c == "function" || t.has(s) || (o[s] = a.redactKey?.(s) ? "[redacted]" : i(c, a, n - 1, r));
+		return o;
+	} catch {
+		return String(e);
+	}
+}
+function i(e, t = {}, i = 10, a = /* @__PURE__ */ new Set()) {
+	if (typeof e != "object" || !e) return e;
+	if (i <= 0) return "[too deep]";
+	if (a.has(e)) return "[circular]";
+	let o = n(e);
+	if (o !== void 0) return o;
+	a.add(e);
+	try {
+		return r(e, i, a, t);
+	} finally {
+		a.delete(e);
+	}
+}
+function a(e) {
+	if (e == null) return {};
+	if (typeof e != "object") return { value: e };
+	try {
+		let t = {};
+		for (let [n, r] of Object.entries(e)) t[n] = i(r);
+		return t;
+	} catch {
+		return {};
+	}
+}
+//#endregion
+//#region src/shared/redact.ts
+var o = /password|passphrase|secret|token|credential|authorization|apikey|api_key/i, s = { "auth.exchangeAuthCode": /* @__PURE__ */ new Set(["code"]) }, c = /* @__PURE__ */ new Set([
+	"authorization",
+	"cookie",
+	"proxy-authorization",
+	"x-api-key",
+	"x-auth-token"
+]);
+function l(e) {
+	return o.test(e);
+}
+function u(e) {
+	let t = s[e];
+	return (e) => l(e) || (t?.has(e) ?? !1);
+}
+function d(e) {
+	let t = {};
+	for (let [n, r] of Object.entries(e)) c.has(n) || l(n) || (t[n] = r);
+	return t;
+}
+//#endregion
+export { a, i, l as n, e as o, d as r, u as t };

package/dist/_chunks/useStore-Db8RZW8T.mjs

@@ -0,0 +1,10 @@
+import { n as e } from "./panel-uV5ITqhY.mjs";
+//#region src/inertia/panel/useStore.ts
+function t() {
+	return e(() => window.__STOREFRONT_DEVTOOLS_STORE__);
+}
+function n() {
+	return window.__STOREFRONT_DEVTOOLS_STORE__;
+}
+//#endregion
+export { t as n, n as t };