@scayle/storefront-devtools 0.2.0-alpha.1

package/dist/orpc/core/store.d.ts

@@ -0,0 +1,50 @@
+import { OrpcCall, OrpcErrorKind, OrpcState, ProcedureStat, OrpcCallSummary } from './types';
+type Subscriber = (state: OrpcState) => void;
+interface StartInit {
+    procedure: string;
+    method: string;
+    url: string;
+    input?: unknown;
+    rawInput?: unknown;
+    headers?: Record<string, string>;
+}
+interface FinishResult {
+    status?: number;
+    ok?: boolean;
+    output?: unknown;
+    error?: unknown;
+    errorKind?: OrpcErrorKind;
+    streaming?: boolean;
+    rawOutput?: unknown;
+    rawError?: unknown;
+    responseHeaders?: Record<string, string>;
+}
+/**
+ * Central state store for the oRPC devtools panel. Records one `OrpcCall` per
+ * captured request, exposes a framework-agnostic `subscribe()` pattern, and
+ * persists a compact previous-session summary to sessionStorage.
+ */
+export declare class OrpcStore {
+    private ordered;
+    private maxCalls;
+    private nextId;
+    private _paused;
+    private subscribers;
+    private previousSession;
+    private saveTimer;
+    constructor(maxCalls?: number);
+    get calls(): OrpcCall[];
+    get paused(): boolean;
+    get previousSessionCalls(): OrpcCallSummary[];
+    getState(): OrpcState;
+    startCall(init: StartInit): number;
+    finishCall(id: number, result: FinishResult): void;
+    getProcedureStats(): ProcedureStat[];
+    subscribe(fn: Subscriber): () => void;
+    setPaused(value: boolean): void;
+    clear(): void;
+    private evictOldest;
+    private notify;
+}
+export {};
+//# sourceMappingURL=store.d.ts.map

package/dist/orpc/core/store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../../src/orpc/core/store.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,QAAQ,EACR,aAAa,EACb,SAAS,EACT,aAAa,EACb,eAAe,EAChB,MAAM,SAAS,CAAA;AA0BhB,KAAK,UAAU,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;AAE5C,UAAU,SAAS;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACjC;AAED,UAAU,YAAY;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,EAAE,CAAC,EAAE,OAAO,CAAA;IACZ,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACzC;AAED;;;;GAIG;AACH,qBAAa,SAAS;IACpB,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,QAAQ,CAAQ;IACxB,OAAO,CAAC,MAAM,CAAI;IAClB,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,WAAW,CAA6B;IAChD,OAAO,CAAC,eAAe,CAAuC;IAC9D,OAAO,CAAC,SAAS,CAA2C;gBAEhD,QAAQ,GAAE,MAAkB;IAKxC,IAAI,KAAK,IAAI,QAAQ,EAAE,CAOtB;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,oBAAoB,IAAI,eAAe,EAAE,CAE5C;IAED,QAAQ,IAAI,SAAS;IAOrB,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM;IAuBlC,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,GAAG,IAAI;IAmBlD,iBAAiB,IAAI,aAAa,EAAE;IA2CpC,SAAS,CAAC,EAAE,EAAE,UAAU,GAAG,MAAM,IAAI;IAOrC,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK/B,KAAK,IAAI,IAAI;IAQb,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,MAAM;CAYf"}

package/dist/orpc/core/types.d.ts

@@ -0,0 +1,67 @@
+/** Classifies an oRPC failure by where it originated. */
+export type OrpcErrorKind = 'validation' | 'server' | 'network';
+/** A single captured oRPC call. */
+export interface OrpcCall {
+    id: number;
+    /** Procedure path, for example `basket/add`. */
+    procedure: string;
+    method: string;
+    url: string;
+    status?: number;
+    ok?: boolean;
+    /** `performance.now()` at request start. */
+    startedAt: number;
+    finishedAt?: number;
+    duration?: number;
+    /** Parsed, safe-cloned request body. */
+    input?: unknown;
+    /** Parsed, safe-cloned success response body. */
+    output?: unknown;
+    /** Parsed ORPCError body or the thrown error. */
+    error?: unknown;
+    errorKind?: OrpcErrorKind;
+    /** True for an SSE/event-iterator response whose body is not buffered. */
+    streaming?: boolean;
+    /** Lowercased request headers (for example `x-shop-country-id`). */
+    headers?: Record<string, string>;
+    /** Raw `{ json, meta }` request envelope, before structured-type decoding. */
+    rawInput?: unknown;
+    /** Raw `{ json, meta }` success response envelope, before decoding. */
+    rawOutput?: unknown;
+    /** Raw `{ json, meta }` error envelope, before decoding. */
+    rawError?: unknown;
+    /** Allowlisted cache-relevant response headers (for example `x-cache`). */
+    responseHeaders?: Record<string, string>;
+}
+/** Snapshot of oRPC capture state exposed to subscribers. */
+export interface OrpcState {
+    /** A fresh array on every update, so Vue `computed` dependents re-run. */
+    calls: OrpcCall[];
+    paused: boolean;
+}
+/** Aggregated timing for one procedure across captured calls. */
+export interface ProcedureStat {
+    procedure: string;
+    count: number;
+    /** Number of completed calls that failed (`ok === false`). */
+    errorCount: number;
+    /** Mean duration in ms over calls that completed with a duration. */
+    avgDuration: number;
+    /** Duration in ms of the most recent completed call. */
+    lastDuration: number;
+}
+/** Compact call summary persisted to sessionStorage. */
+export interface OrpcCallSummary {
+    id: number;
+    procedure: string;
+    method: string;
+    status?: number;
+    duration?: number;
+    errorKind?: OrpcErrorKind;
+}
+/** Persisted snapshot of a previous capture session. */
+export interface OrpcSnapshot {
+    savedAt: number;
+    calls: OrpcCallSummary[];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/orpc/core/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/orpc/core/types.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAA;AAE/D,mCAAmC;AACnC,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,gDAAgD;IAChD,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,EAAE,CAAC,EAAE,OAAO,CAAA;IACZ,4CAA4C;IAC5C,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wCAAwC;IACxC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iDAAiD;IACjD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2EAA2E;IAC3E,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACzC;AAED,6DAA6D;AAC7D,MAAM,WAAW,SAAS;IACxB,0EAA0E;IAC1E,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,MAAM,EAAE,OAAO,CAAA;CAChB;AAED,iEAAiE;AACjE,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,8DAA8D;IAC9D,UAAU,EAAE,MAAM,CAAA;IAClB,qEAAqE;IACrE,WAAW,EAAE,MAAM,CAAA;IACnB,wDAAwD;IACxD,YAAY,EAAE,MAAM,CAAA;CACrB;AAED,wDAAwD;AACxD,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,aAAa,CAAA;CAC1B;AAED,wDAAwD;AACxD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,eAAe,EAAE,CAAA;CACzB"}

package/dist/orpc/core/url.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Extracts the oRPC procedure path from a request URL, relative to the API
+ * prefix. Used both to decide whether a request is an oRPC call and to label it
+ * by its procedure (for example `basket/add`).
+ *
+ * @param url - Absolute or relative request URL.
+ * @param prefix - The oRPC endpoint prefix, for example `/api`.
+ * @returns The path after the prefix with surrounding slashes stripped, or
+ *   `null` when the request path does not start with the prefix.
+ */
+export declare function procedureFromUrl(url: string, prefix: string): string | null;
+//# sourceMappingURL=url.d.ts.map

package/dist/orpc/core/url.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"url.d.ts","sourceRoot":"","sources":["../../../src/orpc/core/url.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAc3E"}

package/dist/orpc/plugin.d.ts

@@ -0,0 +1,10 @@
+import { Plugin } from 'vite';
+/**
+ * Creates the Vite plugin that registers the oRPC devtools panel: a
+ * custom-render dock entry whose renderer mounts the Vue panel directly into
+ * the dock panel DOM, reading the capture store off `window`. The capture
+ * client (a `window.fetch` patch) is injected into the app entry alongside the
+ * other panels' clients; see `src/index.ts`.
+ */
+export declare function createOrpcPlugin(): Plugin;
+//# sourceMappingURL=plugin.d.ts.map

package/dist/orpc/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/orpc/plugin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AASlC;;;;;;GAMG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAOzC"}

package/dist/orpc/renderer/index.d.mts

@@ -0,0 +1,16 @@
+import type { DockClientScriptContext } from '@vitejs/devtools-kit/client'
+
+/**
+ * Custom-render entry that mounts a devtools panel's Vue app into the dock
+ * panel DOM via `mountPanel` (see `src/shared/mount-panel.ts`). The Vite
+ * DevTools dock imports this by module specifier at runtime. This
+ * hand-authored declaration is the typed contract shared by the `./inertia/renderer`,
+ * `./orpc/renderer`, and `./storefront/renderer` exports. The Vue UI each
+ * renderer mounts has no emittable types and is excluded from declaration
+ * generation.
+ *
+ * @param ctx - The dock client-script context provided by the Vite DevTools dock.
+ */
+declare function setupRenderer(ctx: DockClientScriptContext): void
+
+export default setupRenderer

package/dist/orpc/renderer/index.mjs

@@ -0,0 +1,457 @@
+import { n as e, r as t, t as n } from "../../_chunks/panel-uV5ITqhY.mjs";
+import { n as r, r as i, t as a } from "../../_chunks/clipboard-DrVHc2QA.mjs";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, openBlock as g, ref as _, renderList as v, toDisplayString as y, useTemplateRef as b, vModelText as x, watch as S, withDirectives as C } from "vue";
+//#region src/orpc/panel/useStore.ts
+function w() {
+	return e(() => window.__STOREFRONT_DEVTOOLS_ORPC_STORE__);
+}
+function T() {
+	return window.__STOREFRONT_DEVTOOLS_ORPC_STORE__;
+}
+//#endregion
+//#region src/orpc/panel/CallList.vue?vue&type=script&setup=true&lang.ts
+var E = ["aria-activedescendant"], D = {
+	class: "sf-dt-filters",
+	role: "group",
+	"aria-label": "Filter by domain"
+}, O = ["aria-pressed", "onClick"], ee = {
+	key: 0,
+	class: "sf-dt-prev"
+}, te = ["aria-expanded"], k = {
+	key: 0,
+	id: "sf-dt-prev-calls",
+	class: "sf-dt-prev-rows"
+}, A = { class: "sf-dt-method" }, j = { class: "sf-dt-proc" }, M = {
+	key: 0,
+	class: "sf-dt-timing"
+}, N = { class: "sf-dt-rows" }, P = [
+	"id",
+	"aria-selected",
+	"onClick"
+], F = { class: "sf-dt-method" }, I = { class: "sf-dt-proc" }, L = { class: "sf-dt-timing" }, R = {
+	key: 1,
+	class: "sf-dt-empty"
+}, z = {
+	class: "sf-dt-visually-hidden",
+	role: "status",
+	"aria-live": "polite"
+}, B = /*#__PURE__*/ n(/* @__PURE__ */ m({
+	__name: "CallList",
+	props: {
+		calls: {},
+		selectedId: {},
+		paused: { type: Boolean }
+	},
+	emits: ["select"],
+	setup(e, { expose: t, emit: n }) {
+		let r = e, i = n, a = _(""), c = _("all"), p = _(!1), m = s(() => {
+			let e = /* @__PURE__ */ new Set();
+			for (let t of r.calls) e.add(t.procedure.split("/")[0]);
+			return ["all", ...Array.from(e)];
+		}), S = s(() => r.calls.filter((e) => {
+			let t = c.value === "all" || e.procedure.split("/")[0] === c.value, n = a.value.trim().toLowerCase(), r = !n || e.procedure.toLowerCase().includes(n);
+			return t && r;
+		})), w = s(() => T()?.previousSessionCalls ?? []);
+		function B(e) {
+			return e.ok ? "is-ok" : e.errorKind === "validation" ? "is-warn" : e.errorKind ? "is-error" : "";
+		}
+		function V(e) {
+			let t = S.value;
+			if (!t.length) return;
+			let n = t.findIndex((e) => e.id === r.selectedId);
+			e.key === "ArrowDown" ? (e.preventDefault(), i("select", t[Math.min(n + 1, t.length - 1)].id)) : e.key === "ArrowUp" && (e.preventDefault(), i("select", t[Math.max(n - 1, 0)].id));
+		}
+		let H = b("listEl");
+		return t({ focus: () => H.value?.focus() }), (t, n) => (g(), u("div", {
+			ref_key: "listEl",
+			ref: H,
+			class: "sf-dt-list",
+			tabindex: "0",
+			role: "listbox",
+			"aria-label": "oRPC calls",
+			"aria-activedescendant": e.selectedId == null ? void 0 : `sf-dt-call-${e.selectedId}`,
+			onKeydown: V
+		}, [
+			d("div", D, [(g(!0), u(o, null, v(m.value, (e) => (g(), u("button", {
+				key: e,
+				class: h(["sf-dt-filter", { "is-active": c.value === e }]),
+				"aria-pressed": c.value === e,
+				onClick: (t) => c.value = e
+			}, y(e), 11, O))), 128))]),
+			C(d("input", {
+				"onUpdate:modelValue": n[0] ||= (e) => a.value = e,
+				class: "sf-dt-search",
+				type: "search",
+				placeholder: "Filter by procedure",
+				"aria-label": "Filter calls by procedure"
+			}, null, 512), [[x, a.value]]),
+			w.value.length ? (g(), u("div", ee, [d("button", {
+				class: "sf-dt-prev-toggle",
+				"aria-expanded": p.value,
+				"aria-controls": "sf-dt-prev-calls",
+				onClick: n[1] ||= (e) => p.value = !p.value
+			}, y(p.value ? "▾" : "▸") + " Previous session (" + y(w.value.length) + ") ", 9, te), p.value ? (g(), u("ul", k, [(g(!0), u(o, null, v(w.value, (e) => (g(), u("li", {
+				key: e.id,
+				class: "sf-dt-prev-row"
+			}, [
+				d("span", A, y(e.method), 1),
+				d("span", j, y(e.procedure), 1),
+				e.status ? (g(), u("span", M, y(e.status), 1)) : l("", !0)
+			]))), 128))])) : l("", !0)])) : l("", !0),
+			d("ul", N, [(g(!0), u(o, null, v(S.value, (t) => (g(), u("li", {
+				id: `sf-dt-call-${t.id}`,
+				key: t.id,
+				class: h(["sf-dt-row", { "is-selected": t.id === e.selectedId }]),
+				role: "option",
+				"aria-selected": t.id === e.selectedId,
+				onClick: (e) => i("select", t.id)
+			}, [
+				d("span", F, y(t.method), 1),
+				d("span", I, y(t.procedure), 1),
+				d("span", { class: h(["sf-dt-status", B(t)]) }, y(t.status ?? "…"), 3),
+				d("span", L, y(t.duration == null ? "" : `${Math.round(t.duration)}ms`), 1)
+			], 10, P))), 128))]),
+			S.value.length ? l("", !0) : (g(), u("div", R, [r.calls.length ? (g(), u(o, { key: 0 }, [f("No calls match this filter")], 64)) : e.paused ? (g(), u(o, { key: 1 }, [f(" Capture is paused. Resume to see new calls. ")], 64)) : (g(), u(o, { key: 2 }, [f("Use the app to see oRPC calls appear here.")], 64))])),
+			d("div", z, y(S.value.length) + " call" + y(S.value.length === 1 ? "" : "s") + " captured ", 1)
+		], 40, E));
+	}
+}), [["__scopeId", "data-v-d23a53a8"]]);
+//#endregion
+//#region src/orpc/core/curl.ts
+function V(e) {
+	return `'${e.replace(/'/g, "'\\''")}'`;
+}
+function H(e) {
+	let t = [`curl -X ${e.method} ${V(e.url)}`];
+	return t.push(`-H ${V("Content-Type: application/json")}`), e.input !== void 0 && t.push(`-d ${V(JSON.stringify(e.input))}`), t.join(" ");
+}
+//#endregion
+//#region src/orpc/core/markdown.ts
+function U(e) {
+	let t;
+	t = e.duration == null ? e.finishedAt && e.startedAt ? `${Math.round(e.finishedAt - e.startedAt)}ms` : "in-flight" : `${Math.round(e.duration)}ms`;
+	let n = `${e.method} ${e.url}`;
+	e.status && (n += ` → ${e.status}`), n += ` (${t})`;
+	let r = [
+		"## oRPC Call",
+		"",
+		`**Procedure:** \`${e.procedure}\``,
+		`**Request:** ${n}`
+	];
+	return e.errorKind && r.push(`**Error kind:** ${e.errorKind}`), e.streaming && r.push("**Streaming:** Yes"), r.join("\n");
+}
+function W(e, t) {
+	return `### ${e}\n\n\`\`\`json\n${JSON.stringify(t, null, 2)}\n\`\`\``;
+}
+function G(e) {
+	let t = [U(e)];
+	return e.input !== void 0 && t.push(W("Input", e.input)), e.error === void 0 ? e.output !== void 0 && t.push(W("Output", e.output)) : t.push(W("Error", e.error)), e.headers && Object.keys(e.headers).length > 0 && t.push(W("Request headers", e.headers)), e.responseHeaders && Object.keys(e.responseHeaders).length > 0 && t.push(W("Response headers", e.responseHeaders)), t.join("\n\n");
+}
+//#endregion
+//#region src/orpc/core/orpc-error.ts
+function K(e) {
+	if (typeof e != "object" || !e) return null;
+	let t = e;
+	return typeof t.code == "string" ? {
+		code: t.code,
+		status: typeof t.status == "number" ? t.status : void 0,
+		message: typeof t.message == "string" ? t.message : void 0,
+		data: t.data
+	} : null;
+}
+//#endregion
+//#region src/orpc/panel/DataTab.vue?vue&type=script&setup=true&lang.ts
+var q = { class: "sf-dt-data-tab" }, J = { class: "sf-dt-section" }, Y = { class: "sf-dt-section-head" }, X = {
+	key: 0,
+	class: "sf-dt-section"
+}, Z = {
+	key: 0,
+	class: "sf-dt-error-fields"
+}, Q = {
+	key: 1,
+	class: "sf-dt-section"
+}, ne = {
+	key: 2,
+	class: "sf-dt-section"
+}, re = { class: "sf-dt-section-head" }, ie = "https://orpc.dev/docs/error-handling", ae = "https://orpc.dev/docs/event-iterator", oe = /*#__PURE__*/ n(/* @__PURE__ */ m({
+	__name: "DataTab",
+	props: { call: {} },
+	setup(e) {
+		let t = e, n = _(!1), r = _(!1);
+		function a(e, t) {
+			return e !== void 0 && JSON.stringify(e) !== JSON.stringify(t);
+		}
+		let c = s(() => a(t.call.rawInput, t.call.input)), m = s(() => a(t.call.rawOutput, t.call.output)), h = s(() => K(t.call.error));
+		return (t, a) => (g(), u("div", q, [d("section", J, [d("div", Y, [a[2] ||= d("h4", { class: "sf-dt-heading" }, "Input", -1), c.value ? (g(), u("button", {
+			key: 0,
+			class: "sf-dt-raw-toggle",
+			onClick: a[0] ||= (e) => n.value = !n.value
+		}, y(n.value ? "decoded" : "raw envelope"), 1)) : l("", !0)]), p(i, {
+			label: n.value ? "rawInput" : "input",
+			value: n.value ? e.call.rawInput : e.call.input
+		}, null, 8, ["label", "value"])]), e.call.error === void 0 ? e.call.streaming ? (g(), u("section", Q, [a[9] ||= d("h4", { class: "sf-dt-heading" }, "Output", -1), d("p", { class: "sf-dt-muted" }, [a[8] ||= f(" (streaming response, body not captured) ", -1), d("a", {
+			class: "sf-dt-doclink",
+			href: ae,
+			target: "_blank",
+			rel: "noreferrer"
+		}, "docs")])])) : (g(), u("section", ne, [d("div", re, [a[10] ||= d("h4", { class: "sf-dt-heading" }, "Output", -1), m.value ? (g(), u("button", {
+			key: 0,
+			class: "sf-dt-raw-toggle",
+			onClick: a[1] ||= (e) => r.value = !r.value
+		}, y(r.value ? "decoded" : "raw envelope"), 1)) : l("", !0)]), p(i, {
+			label: r.value ? "rawOutput" : "output",
+			value: r.value ? e.call.rawOutput : e.call.output
+		}, null, 8, ["label", "value"])])) : (g(), u("section", X, [
+			d("div", { class: "sf-dt-section-head" }, [a[3] ||= d("h4", { class: "sf-dt-heading" }, "Error", -1), d("a", {
+				class: "sf-dt-doclink",
+				href: ie,
+				target: "_blank",
+				rel: "noreferrer"
+			}, "docs")]),
+			h.value ? (g(), u("dl", Z, [
+				a[7] ||= d("dt", null, "Code", -1),
+				d("dd", null, y(h.value.code), 1),
+				h.value.status ? (g(), u(o, { key: 0 }, [a[4] ||= d("dt", null, "Status", -1), d("dd", null, y(h.value.status), 1)], 64)) : l("", !0),
+				h.value.message ? (g(), u(o, { key: 1 }, [a[5] ||= d("dt", null, "Message", -1), d("dd", null, y(h.value.message), 1)], 64)) : l("", !0),
+				h.value.data === void 0 ? l("", !0) : (g(), u(o, { key: 2 }, [a[6] ||= d("dt", null, "Data", -1), d("dd", null, [p(i, {
+					label: "data",
+					value: h.value.data
+				}, null, 8, ["value"])])], 64))
+			])) : l("", !0),
+			p(i, {
+				label: "error",
+				value: e.call.error
+			}, null, 8, ["value"])
+		]))]));
+	}
+}), [["__scopeId", "data-v-b4a3d433"]]), se = { class: "sf-dt-headers-tab" }, ce = {
+	key: 0,
+	class: "sf-dt-section"
+}, le = {
+	key: 1,
+	class: "sf-dt-section"
+}, ue = {
+	key: 2,
+	class: "sf-dt-muted"
+}, de = /*#__PURE__*/ n(/* @__PURE__ */ m({
+	__name: "HeadersTab",
+	props: { call: {} },
+	setup(e) {
+		return (t, n) => (g(), u("div", se, [
+			e.call.headers && Object.keys(e.call.headers).length ? (g(), u("section", ce, [n[0] ||= d("h4", { class: "sf-dt-heading" }, "Request headers", -1), p(r, { headers: e.call.headers }, null, 8, ["headers"])])) : l("", !0),
+			e.call.responseHeaders && Object.keys(e.call.responseHeaders).length ? (g(), u("section", le, [n[1] ||= d("h4", { class: "sf-dt-heading" }, "Response headers", -1), p(r, { headers: e.call.responseHeaders }, null, 8, ["headers"])])) : l("", !0),
+			!Object.keys(e.call.headers ?? {}).length && !Object.keys(e.call.responseHeaders ?? {}).length ? (g(), u("p", ue, " No headers captured for this call. ")) : l("", !0)
+		]));
+	}
+}), [["__scopeId", "data-v-2b32ad4e"]]), fe = { class: "sf-dt-detail" }, pe = { class: "sf-dt-detail-head" }, me = {
+	key: 0,
+	class: "sf-dt-toast",
+	role: "status"
+}, he = { class: "sf-dt-overview" }, ge = {
+	class: "sf-dt-subtabs",
+	role: "tablist",
+	"aria-label": "Call detail views"
+}, _e = [
+	"id",
+	"aria-selected",
+	"onClick"
+], ve = ["aria-labelledby"], ye = /*#__PURE__*/ n(/* @__PURE__ */ m({
+	__name: "CallDetail",
+	props: { call: {} },
+	emits: ["back"],
+	setup(e) {
+		let t = e, n = ["data", "headers"], r = _("data");
+		S(() => t.call.id, () => {
+			r.value = "data";
+		});
+		let i = _(null), f;
+		function p() {
+			i.value = "Copied", clearTimeout(f), f = setTimeout(() => {
+				i.value = null;
+			}, 2e3);
+		}
+		function m() {
+			a(H(t.call)), p();
+		}
+		function b() {
+			a(G(t.call)), p();
+		}
+		let x = s(() => t.call.headers?.["x-shop-country-id"]);
+		return (t, a) => (g(), u("div", fe, [
+			d("div", pe, [
+				d("button", {
+					class: "sf-dt-copy sf-dt-back",
+					onClick: a[0] ||= (e) => t.$emit("back")
+				}, " ← Back "),
+				d("button", {
+					class: "sf-dt-copy",
+					onClick: m
+				}, "Copy as curl"),
+				d("button", {
+					class: "sf-dt-copy",
+					onClick: b
+				}, "Copy as markdown"),
+				i.value ? (g(), u("span", me, y(i.value), 1)) : l("", !0)
+			]),
+			d("section", he, [d("dl", null, [
+				a[5] ||= d("dt", null, "Procedure", -1),
+				d("dd", null, y(e.call.procedure), 1),
+				a[6] ||= d("dt", null, "Method", -1),
+				d("dd", null, y(e.call.method), 1),
+				a[7] ||= d("dt", null, "URL", -1),
+				d("dd", null, y(e.call.url), 1),
+				e.call.status ? (g(), u(o, { key: 0 }, [a[1] ||= d("dt", null, "Status", -1), d("dd", null, y(e.call.status), 1)], 64)) : l("", !0),
+				e.call.duration == null ? l("", !0) : (g(), u(o, { key: 1 }, [a[2] ||= d("dt", null, "Duration", -1), d("dd", null, y(Math.round(e.call.duration)) + "ms", 1)], 64)),
+				e.call.errorKind ? (g(), u(o, { key: 2 }, [a[3] ||= d("dt", null, "Error", -1), d("dd", null, y(e.call.errorKind), 1)], 64)) : l("", !0),
+				x.value ? (g(), u(o, { key: 3 }, [a[4] ||= d("dt", null, "Shop country", -1), d("dd", null, y(x.value), 1)], 64)) : l("", !0)
+			])]),
+			a[8] ||= d("hr", { class: "sf-dt-meta-divider" }, null, -1),
+			d("nav", ge, [(g(), u(o, null, v(n, (e) => d("button", {
+				id: `sf-dt-subtab-${e}`,
+				key: e,
+				class: h(["sf-dt-subtab", { "is-active": r.value === e }]),
+				role: "tab",
+				"aria-selected": r.value === e,
+				"aria-controls": "sf-dt-subtabpanel",
+				onClick: (t) => r.value = e
+			}, y(e), 11, _e)), 64))]),
+			d("div", {
+				id: "sf-dt-subtabpanel",
+				class: "sf-dt-tabpanel",
+				role: "tabpanel",
+				"aria-labelledby": `sf-dt-subtab-${r.value}`
+			}, [r.value === "data" ? (g(), c(oe, {
+				key: 0,
+				call: e.call
+			}, null, 8, ["call"])) : (g(), c(de, {
+				key: 1,
+				call: e.call
+			}, null, 8, ["call"]))], 8, ve)
+		]));
+	}
+}), [["__scopeId", "data-v-13e1a486"]]), be = { class: "sf-dt-stats" }, $ = { key: 0 }, xe = { class: "sf-dt-proc" }, Se = {
+	key: 1,
+	class: "sf-dt-empty"
+}, Ce = /*#__PURE__*/ n(/* @__PURE__ */ m({
+	__name: "ProcedureStats",
+	props: { stats: {} },
+	setup(e) {
+		let t = e, n = _("count"), r = _(!0);
+		function i(e) {
+			n.value === e ? r.value = !r.value : (n.value = e, r.value = !0);
+		}
+		function a(e) {
+			return n.value === e ? r.value ? " ▾" : " ▴" : "";
+		}
+		let c = s(() => {
+			let e = r.value ? 1 : -1;
+			return [...t.stats].sort((t, r) => (r[n.value] - t[n.value]) * e);
+		});
+		return (e, t) => (g(), u("div", be, [c.value.length ? (g(), u("table", $, [d("thead", null, [d("tr", null, [
+			t[3] ||= d("th", null, "Procedure", -1),
+			d("th", {
+				class: h(["sf-dt-sortable", { "is-active": n.value === "count" }]),
+				onClick: t[0] ||= (e) => i("count")
+			}, " Count" + y(a("count")), 3),
+			d("th", {
+				class: h(["sf-dt-sortable", { "is-active": n.value === "errorCount" }]),
+				onClick: t[1] ||= (e) => i("errorCount")
+			}, " Errors" + y(a("errorCount")), 3),
+			d("th", {
+				class: h(["sf-dt-sortable", { "is-active": n.value === "avgDuration" }]),
+				onClick: t[2] ||= (e) => i("avgDuration")
+			}, " Avg" + y(a("avgDuration")), 3),
+			t[4] ||= d("th", null, "Last", -1)
+		])]), d("tbody", null, [(g(!0), u(o, null, v(c.value, (e) => (g(), u("tr", { key: e.procedure }, [
+			d("td", xe, y(e.procedure), 1),
+			d("td", null, y(e.count), 1),
+			d("td", { class: h({ "sf-dt-has-errors": e.errorCount > 0 }) }, y(e.errorCount), 3),
+			d("td", null, y(Math.round(e.avgDuration)) + "ms", 1),
+			d("td", null, y(Math.round(e.lastDuration)) + "ms", 1)
+		]))), 128))])])) : (g(), u("div", Se, "No oRPC calls captured yet"))]));
+	}
+}), [["__scopeId", "data-v-37db1106"]]), we = { class: "sf-devtools" }, Te = {
+	class: "sf-dt-tabs",
+	role: "tablist",
+	"aria-label": "oRPC panel views"
+}, Ee = ["aria-selected"], De = ["aria-selected"], Oe = ["aria-pressed"], ke = {
+	key: 1,
+	class: "sf-dt-empty"
+}, Ae = {
+	key: 1,
+	id: "sf-dt-tabpanel-orpc",
+	class: "sf-dt-body",
+	role: "tabpanel",
+	"aria-labelledby": "sf-dt-tab-stats"
+}, je = /* @__PURE__ */ m({
+	__name: "App",
+	setup(e) {
+		let t = w(), n = _("calls"), r = _(null), i = s(() => t.value?.calls ?? []), a = s(() => t.value?.paused ?? !1), o = s(() => i.value.find((e) => e.id === r.value) ?? null), l = s(() => T()?.getProcedureStats() ?? []);
+		function f() {
+			let e = T();
+			e && e.setPaused(!e.paused);
+		}
+		let m = b("callList");
+		function v() {
+			T()?.clear(), r.value = null, m.value?.focus();
+		}
+		function x() {
+			r.value = null;
+		}
+		return (e, t) => (g(), u("div", we, [d("nav", Te, [
+			d("button", {
+				id: "sf-dt-tab-calls",
+				class: h(["sf-dt-tab", { "is-active": n.value === "calls" }]),
+				role: "tab",
+				"aria-selected": n.value === "calls",
+				"aria-controls": "sf-dt-tabpanel-orpc",
+				onClick: t[0] ||= (e) => n.value = "calls"
+			}, " Calls ", 10, Ee),
+			d("button", {
+				id: "sf-dt-tab-stats",
+				class: h(["sf-dt-tab", { "is-active": n.value === "stats" }]),
+				role: "tab",
+				"aria-selected": n.value === "stats",
+				"aria-controls": "sf-dt-tabpanel-orpc",
+				onClick: t[1] ||= (e) => n.value = "stats"
+			}, " Stats ", 10, De),
+			d("button", {
+				class: "sf-dt-tab sf-dt-tabs-spacer",
+				"aria-pressed": a.value,
+				onClick: f
+			}, y(a.value ? "Resume" : "Pause"), 9, Oe),
+			d("button", {
+				class: "sf-dt-tab sf-dt-tabs-clear",
+				onClick: v
+			}, "Clear")
+		]), n.value === "calls" ? (g(), u("div", {
+			key: 0,
+			id: "sf-dt-tabpanel-orpc",
+			class: h(["sf-dt-body", { "has-selection": o.value }]),
+			role: "tabpanel",
+			"aria-labelledby": "sf-dt-tab-calls"
+		}, [p(B, {
+			ref_key: "callList",
+			ref: m,
+			calls: i.value,
+			"selected-id": r.value,
+			paused: a.value,
+			onSelect: t[2] ||= (e) => r.value = e
+		}, null, 8, [
+			"calls",
+			"selected-id",
+			"paused"
+		]), o.value ? (g(), c(ye, {
+			key: 0,
+			call: o.value,
+			onBack: x
+		}, null, 8, ["call"])) : (g(), u("div", ke, "Select a call to inspect it"))], 2)) : (g(), u("div", Ae, [p(Ce, { stats: l.value }, null, 8, ["stats"])]))]));
+	}
+});
+//#endregion
+//#region src/orpc/panel/renderer.ts
+function Me(e) {
+	t(e, je);
+}
+//#endregion
+export { Me as default };

package/dist/resource-center/client/index.mjs

@@ -0,0 +1,21 @@
+//#region src/resource-center/client.ts
+var e = "storefront-devtools-iframe-bg";
+function t() {
+	let t = document.querySelector("vite-devtools-dock-embedded")?.shadowRoot;
+	if (!t) return !1;
+	if (!t.getElementById(e)) {
+		let n = document.createElement("style");
+		n.id = e, n.textContent = "iframe{background:#fff}", t.appendChild(n);
+	}
+	return !0;
+}
+if (typeof window < "u" && typeof document < "u" && !t()) {
+	let e = new MutationObserver(() => {
+		t() && e.disconnect();
+	});
+	e.observe(document.documentElement, {
+		childList: !0,
+		subtree: !0
+	});
+}
+//#endregion

package/dist/resource-center/client.d.ts

@@ -0,0 +1,3 @@
+declare const STYLE_ID = "storefront-devtools-iframe-bg";
+declare function tryInject(): boolean;
+//# sourceMappingURL=client.d.ts.map

package/dist/resource-center/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/resource-center/client.ts"],"names":[],"mappings":"AAUA,QAAA,MAAM,QAAQ,kCAAkC,CAAA;AAEhD,iBAAS,SAAS,IAAI,OAAO,CAY5B"}