@ng-org/alien-deepsignals 0.1.2-alpha.2 → 0.1.2-alpha.4

package/dist/hooks/react/useDeepSignal.js

@@ -11,7 +11,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const watch_js_1 = require("../../watch.js");
 const react_1 = require("react");
-const deepSignal_1 = require("../../deepSignal");
+const __1 = require("../..");
 /**
  * Create or use an existing deepSignal object in your component.
  * Modifications to the returned deepSignal object cause an immediate rerender.
@@ -19,21 +19,28 @@ const deepSignal_1 = require("../../deepSignal");
  * is rerendered as well.
  *
  * @param object The object that should become reactive
- * @param deepSignalObjects When the object is not a deepSignal already, options passed to `deepSignal`.
- * @returns The deepSignal object of the object param.
+ * @param deepSignalOptions When the object is not a deepSignal already, options passed to `deepSignal`.
+ * @returns The deepSignal object of the object param. On every change, the returned object will change (a new no-op proxy is created) around the deepSignal object.
  */
-const useSignal = (object, deepSignalObjects) => {
-    const shapeSignalRef = (0, react_1.useRef)((0, deepSignal_1.deepSignal)(object, deepSignalObjects));
-    const [, setTick] = (0, react_1.useState)(0);
-    (0, react_1.useEffect)(() => {
-        const { stopListening } = (0, watch_js_1.watch)(shapeSignalRef.current, () => {
-            // trigger a React re-render when the deep signal updates
-            setTick((t) => t + 1);
+const useSignal = (object, deepSignalOptions) => {
+    // Create the actual deepSignal object from the raw object (if the object is a deepSignal object already, it returns itself).
+    const signal = (0, react_1.useMemo)(() => (0, __1.deepSignal)(object, deepSignalOptions), [object, deepSignalOptions]);
+    // Create a shallow proxy of the original object which can be disposed and a new one
+    // recreated on rerenders so that react knows it changed on comparisons.
+    const proxyRef = (0, react_1.useRef)(new Proxy(signal, {}));
+    // Update proxy ref when shapeSignal changes
+    (0, react_1.useMemo)(() => {
+        proxyRef.current = new Proxy(signal, {});
+    }, [signal]);
+    const subscribe = (0, react_1.useCallback)((onStoreChange) => {
+        const { stopListening } = (0, watch_js_1.watch)(signal, () => {
+            // Create a new shallow proxy and notify react about the change.
+            proxyRef.current = new Proxy(signal, {});
+            onStoreChange();
         }, { triggerInstantly: true });
-        return () => {
-            stopListening();
-        };
-    }, []);
-    return shapeSignalRef.current;
+        return stopListening;
+    }, [signal]);
+    const getSnapshot = (0, react_1.useCallback)(() => proxyRef.current, []);
+    return (0, react_1.useSyncExternalStore)(subscribe, getSnapshot);
 };
 exports.default = useSignal;

package/dist/hooks/svelte/useDeepSignal.svelte.d.ts

@@ -1,11 +1,7 @@
 import { type Readable } from "svelte/store";
-import { type DeepPatchBatch, DeepSignalOptions, RevertDeepSignal } from "../../index";
+import { DeepSignalOptions, RevertDeepSignal } from "../../index";
 /** Base result contract for a deepSignal-backed Svelte integration. */
-export interface UseDeepSignalResult<T extends object> extends Readable<T> {
-    /** Store of the full deep proxy tree (also accessible via `subscribe` directly on this result). */
-    deep: Readable<T>;
-    /** Last batch of deep mutation patches for this root (empties only on next non-empty batch). */
-    patches: Readable<DeepPatchBatch | null>;
+export interface UseDeepSignalResult<T> extends Readable<T> {
     /** Derive a nested selection; re-runs when the underlying tree version increments. */
     select<U>(selector: (tree: T) => U): Readable<U>;
     /** Stop receiving further updates (invoked automatically on component destroy). */
@@ -26,6 +22,6 @@ export interface UseDeepSignalResult<T extends object> extends Readable<T> {
  * @param deepSignalObjects When the object is not a deepSignal already, options passed to `deepSignal`.
  * @returns A rune for using the deepSignal object in svelte.
  */
-export declare function useDeepSignal<T extends object>(object: T, options?: DeepSignalOptions): UseDeepSignalResult<RevertDeepSignal<T>>;
+export declare function useDeepSignal<T extends object>(object: T | Promise<T>, options?: DeepSignalOptions): UseDeepSignalResult<RevertDeepSignal<T>>;
 export default useDeepSignal;
 //# sourceMappingURL=useDeepSignal.svelte.d.ts.map

package/dist/hooks/svelte/useDeepSignal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDeepSignal.svelte.d.ts","sourceRoot":"","sources":["../../../src/hooks/svelte/useDeepSignal.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,EAAqB,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEhE,OAAO,EAGH,KAAK,cAAc,EACnB,iBAAiB,EAEjB,gBAAgB,EAEnB,MAAM,aAAa,CAAC;AAErB,uEAAuE;AACvE,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,QAAQ,CAAC,CAAC,CAAC;IACtE,mGAAmG;IACnG,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClB,gGAAgG;IAChG,OAAO,EAAE,QAAQ,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACzC,sFAAsF;IACtF,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACjD,mFAAmF;IACnF,OAAO,IAAI,IAAI,CAAC;IAChB,sGAAsG;IACtG,GAAG,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IAChC,4DAA4D;IAC5D,MAAM,CAAC,OAAO,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;CACnD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAC1C,MAAM,EAAE,CAAC,EACT,OAAO,CAAC,EAAE,iBAAiB,GAC5B,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAiD1C;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"useDeepSignal.svelte.d.ts","sourceRoot":"","sources":["../../../src/hooks/svelte/useDeepSignal.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,EAAqB,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEhE,OAAO,EAIH,iBAAiB,EAEjB,gBAAgB,EAEnB,MAAM,aAAa,CAAC;AAErB,uEAAuE;AACvE,MAAM,WAAW,mBAAmB,CAAC,CAAC,CAAE,SAAQ,QAAQ,CAAC,CAAC,CAAC;IACvD,sFAAsF;IACtF,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACjD,mFAAmF;IACnF,OAAO,IAAI,IAAI,CAAC;IAChB,sGAAsG;IACtG,GAAG,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IAChC,4DAA4D;IAC5D,MAAM,CAAC,OAAO,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;CACnD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAC1C,MAAM,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC5B,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAkE1C;AAED,eAAe,aAAa,CAAC"}

package/dist/hooks/svelte/useDeepSignal.svelte.js

@@ -25,26 +25,42 @@ const index_1 = require("../../index");
  * @returns A rune for using the deepSignal object in svelte.
  */
 function useDeepSignal(object, options) {
-    const deepProxy = (0, index_1.deepSignal)(object, options);
-    const rootId = (0, index_1.getDeepSignalRootId)(deepProxy);
-    const initialVersion = (0, index_1.getDeepSignalVersion)(deepProxy) ?? 0;
-    const version = (0, store_1.writable)(initialVersion);
-    const patchesStore = (0, store_1.writable)(null);
-    const unsubscribe = (0, index_1.subscribeDeepMutations)(deepProxy, (batch) => {
-        if (!rootId)
+    const version = (0, store_1.writable)(-1);
+    let deepProxy;
+    let unsubscribe;
+    let isDestroyed = false;
+    const init = (obj) => {
+        if (isDestroyed)
             return;
-        if (batch.patches.length) {
-            patchesStore.set(batch);
-            version.set(batch.version);
-        }
-    });
-    const deep = (0, store_1.derived)(version, () => deepProxy);
-    const select = (selector) => (0, store_1.derived)(deep, (t) => selector(t));
-    const dispose = () => unsubscribe();
+        deepProxy = (0, index_1.deepSignal)(obj, options);
+        const rootId = (0, index_1.getDeepSignalRootId)(deepProxy);
+        const initialVersion = (0, index_1.getDeepSignalVersion)(deepProxy) ?? 0;
+        unsubscribe = (0, index_1.subscribeDeepMutations)(deepProxy, (batch) => {
+            if (!rootId)
+                return;
+            if (batch.patches.length) {
+                version.set(batch.version);
+            }
+        });
+        version.set(initialVersion);
+    };
+    if (object instanceof Promise) {
+        object.then(init);
+    }
+    else {
+        init(object);
+    }
+    const dispose = () => {
+        isDestroyed = true;
+        if (unsubscribe)
+            unsubscribe();
+    };
     (0, svelte_1.onDestroy)(dispose);
+    const deep = (0, store_1.derived)(version, () => deepProxy);
+    const select = (selector) => (0, store_1.derived)(deep, (t) => (t ? selector(t) : undefined));
     // Expose Svelte store contract by delegating subscribe to deep store.
     const applyReplacement = (next) => {
-        if (!next || typeof next !== "object")
+        if (!deepProxy || !next || typeof next !== "object")
             return;
         // Remove keys absent in next
         for (const k of Object.keys(deepProxy)) {
@@ -55,8 +71,6 @@ function useDeepSignal(object, options) {
         Object.assign(deepProxy, next);
     };
     const store = {
-        deep,
-        patches: patchesStore,
         select,
         dispose,
         subscribe: deep.subscribe,
@@ -64,6 +78,8 @@ function useDeepSignal(object, options) {
             applyReplacement(next);
         },
         update(updater) {
+            if (!deepProxy)
+                return;
             const result = updater(deepProxy);
             if (result && typeof result === "object")
                 applyReplacement(result);

package/dist/hooks/vue/useDeepSignal.d.ts

@@ -1,3 +1,4 @@
+import { type MaybeRefOrGetter } from "vue";
 import { DeepSignal, DeepSignalOptions } from "../../";
 /**
  * Create or use an existing deepSignal object in your component.
@@ -5,11 +6,11 @@ import { DeepSignal, DeepSignalOptions } from "../../";
  * If modifications of the object are made from somewhere else, the component
  * is rerendered as well.
  *
- * @param object The object that should become reactive
- * @param deepSignalObjects When the object is not a deepSignal already, options passed to `deepSignal`.
+ * @param object The object that should become reactive (can be a ref or getter)
+ * @param options When the object is not a deepSignal already, options passed to `deepSignal`.
  * @returns The deepSignal object of the object param.
  *
  */
-export declare function useDeepSignal<T extends object>(object: T, options?: DeepSignalOptions): DeepSignal<T>;
+export declare function useDeepSignal<T extends object>(object: MaybeRefOrGetter<T>, options?: DeepSignalOptions): DeepSignal<T>;
 export default useDeepSignal;
 //# sourceMappingURL=useDeepSignal.d.ts.map

package/dist/hooks/vue/useDeepSignal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDeepSignal.d.ts","sourceRoot":"","sources":["../../../src/hooks/vue/useDeepSignal.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,UAAU,EAAc,iBAAiB,EAAS,MAAM,QAAQ,CAAC;AAE1E;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAC1C,MAAM,EAAE,CAAC,EACT,OAAO,CAAC,EAAE,iBAAiB,GAC5B,UAAU,CAAC,CAAC,CAAC,CAgDf;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"useDeepSignal.d.ts","sourceRoot":"","sources":["../../../src/hooks/vue/useDeepSignal.ts"],"names":[],"mappings":"AAUA,OAAO,EAGH,KAAK,gBAAgB,EAGxB,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,UAAU,EAAc,iBAAiB,EAAS,MAAM,QAAQ,CAAC;AAE1E;;;;;;;;;;GAUG;AAEH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAC1C,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAC3B,OAAO,CAAC,EAAE,iBAAiB,GAC5B,UAAU,CAAC,CAAC,CAAC,CAkFf;AAED,eAAe,aAAa,CAAC"}

package/dist/hooks/vue/useDeepSignal.js

@@ -18,54 +18,82 @@ const __1 = require("../../");
  * If modifications of the object are made from somewhere else, the component
  * is rerendered as well.
  *
- * @param object The object that should become reactive
- * @param deepSignalObjects When the object is not a deepSignal already, options passed to `deepSignal`.
+ * @param object The object that should become reactive (can be a ref or getter)
+ * @param options When the object is not a deepSignal already, options passed to `deepSignal`.
  * @returns The deepSignal object of the object param.
  *
  */
+// Note partly written with the help of Gemini 3.
 function useDeepSignal(object, options) {
     const version = (0, vue_1.ref)(0);
-    const signalObject = (0, __1.deepSignal)(object, options);
-    const stopHandle = (0, __1.watch)(signalObject, ({ patches }) => {
-        if (patches.length > 0) {
-            version.value++;
+    // Holds the current reactive signal object.
+    let currentSignal;
+    let stopHandle;
+    // Watch the input object for changes.
+    const stopWatchingSource = (0, vue_1.watch)(() => (0, vue_1.toValue)(object), (newObj) => {
+        if (stopHandle) {
+            stopHandle.stopListening();
+            stopHandle = undefined;
         }
-    });
-    // Proxy that creates Vue dependency on version for any access
-    const proxy = new Proxy(signalObject, {
+        if (newObj) {
+            currentSignal = (0, __1.deepSignal)(newObj, options);
+            stopHandle = (0, __1.watch)(currentSignal, ({ patches }) => {
+                if (patches.length > 0)
+                    version.value++;
+            });
+        }
+        // Trigger Vue update.
+        version.value++;
+    }, { immediate: true });
+    // Determines the initial target for the Proxy (array vs object).
+    const initialVal = (0, vue_1.toValue)(object);
+    const proxyTarget = (Array.isArray(initialVal) ? [] : {});
+    // Proxy that creates Vue dependency on version for any access.
+    const proxy = new Proxy(proxyTarget, {
         get(target, key) {
             if (key === "__raw")
-                return target;
-            // Track version to create reactive dependency
+                return currentSignal;
+            // Track version to create reactive dependency.
             version.value;
-            const value = target[key];
-            // Bind methods to maintain correct `this` context
-            return typeof value === "function" ? value.bind(target) : value;
+            // Delegate to current signal.
+            const actualTarget = currentSignal || target;
+            const value = Reflect.get(actualTarget, key);
+            // Bind methods to maintain correct `this` context.
+            return typeof value === "function"
+                ? value.bind(actualTarget)
+                : value;
         },
         set(target, key, value) {
-            // Directly forward writes to the deep signal root so other frameworks observe the change.
-            return Reflect.set(target, key, value);
+            // Delegate to current signal.
+            const actualTarget = currentSignal || target;
+            return Reflect.set(actualTarget, key, value);
         },
         has(target, key) {
             version.value;
-            return key in target;
+            const actualTarget = currentSignal || target;
+            return Reflect.has(actualTarget, key);
         },
         ownKeys(target) {
             version.value;
-            return Reflect.ownKeys(target);
+            const actualTarget = currentSignal || target;
+            return Reflect.ownKeys(actualTarget);
         },
         getOwnPropertyDescriptor(target, key) {
             version.value;
-            const desc = Object.getOwnPropertyDescriptor(target, key);
+            const actualTarget = currentSignal || target;
+            const desc = Reflect.getOwnPropertyDescriptor(actualTarget, key);
             return desc ? { ...desc, configurable: true } : undefined;
         },
     });
     (0, vue_1.onBeforeUnmount)(() => {
-        try {
-            stopHandle.stopListening();
-        }
-        catch {
-            // ignore
+        stopWatchingSource();
+        if (stopHandle) {
+            try {
+                stopHandle.stopListening();
+            }
+            catch {
+                // ignore
+            }
         }
     });
     return proxy;

package/dist/test/frontend/astro-app/src/components/PerfSuiteClient.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const PerfSuiteClient: React.FC;
+export default PerfSuiteClient;
+//# sourceMappingURL=PerfSuiteClient.d.ts.map

package/dist/test/frontend/astro-app/src/components/PerfSuiteClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PerfSuiteClient.d.ts","sourceRoot":"","sources":["../../../../../../src/test/frontend/astro-app/src/components/PerfSuiteClient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AA+C5D,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAkL5B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/test/frontend/astro-app/src/components/PerfSuiteClient.js

@@ -0,0 +1,225 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const perfScenarios_1 = require("../../../utils/perfScenarios");
+const MAX_RESULTS = 12;
+const sortResults = (results) => [...results].sort((a, b) => (b.completedAt ?? 0) - (a.completedAt ?? 0));
+const resultSignature = (result) => [
+    result.framework,
+    result.variant,
+    result.completedAt ?? result.totalDuration,
+    result.runCount,
+].join(":");
+const attachEntryId = (result) => ({
+    ...result,
+    entryId: `${result.framework}-${result.variant}-${result.completedAt ?? Date.now()}-${Math.random()
+        .toString(36)
+        .slice(2, 8)}`,
+});
+const seedResults = () => {
+    if (typeof window === "undefined")
+        return [];
+    const latest = window.perfSuite?.latestResults;
+    if (!latest)
+        return [];
+    const flattened = Object.values(latest).flatMap((variants) => Object.values(variants));
+    return sortResults(flattened.map(attachEntryId));
+};
+const formatDuration = (value) => `${value.toFixed(2)}ms`;
+const formatSubRenderCount = (block, framework) => {
+    const entries = block.objectRenderCounts?.[framework];
+    if (!entries)
+        return 0;
+    return Object.values(entries).reduce((sum, count) => sum + count, 0);
+};
+const PerfSuiteClient = () => {
+    const [results, setResults] = (0, react_1.useState)(seedResults);
+    (0, react_1.useEffect)(() => {
+        if ((0, perfScenarios_1.registerPerfRunners)()) {
+            return;
+        }
+        const timer = window.setInterval(() => {
+            if ((0, perfScenarios_1.registerPerfRunners)()) {
+                window.clearInterval(timer);
+            }
+        }, 50);
+        return () => {
+            window.clearInterval(timer);
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (typeof window === "undefined")
+            return;
+        const suite = window.perfSuite;
+        if (!suite?.subscribe)
+            return;
+        const unsubscribe = suite.subscribe((result) => {
+            setResults((current) => {
+                if (current.some((entry) => resultSignature(entry) === resultSignature(result))) {
+                    return current;
+                }
+                const augmented = attachEntryId(result);
+                const next = sortResults([augmented, ...current]);
+                return next.slice(0, MAX_RESULTS);
+            });
+        });
+        return unsubscribe;
+    }, []);
+    const renderedList = (0, react_1.useMemo)(() => {
+        if (!results.length) {
+            return (<p className="perf-suite-results__empty">
+                    Awaiting perf runner output…
+                </p>);
+        }
+        return results.map((result) => (<li key={result.entryId} className="perf-suite-results__item">
+                <header>
+                    <strong>
+                        {result.framework}/{result.variant}
+                    </strong>
+                    <span>{formatDuration(result.totalDuration)}</span>
+                </header>
+                <div className="perf-suite-results__meta">
+                    <span>
+                        runs {result.runCount}
+                        {result.warmupCount
+                ? ` (+${result.warmupCount} warmup)`
+                : ""}
+                    </span>
+                    {result.completedAt ? (<time>
+                            {new Date(result.completedAt).toLocaleTimeString()}
+                        </time>) : null}
+                </div>
+                <dl>
+                    {Object.entries(result.blocks).map(([name, block]) => (<react_1.default.Fragment key={name}>
+                            <div className="perf-suite-results__block">
+                                <dt>{name}</dt>
+                                <dd>{formatDuration(block.duration)}</dd>
+                            </div>
+                            <div className="perf-suite-results__block perf-suite-results__block--subrenders">
+                                <dt>Subcomponent renders</dt>
+                                <dd>
+                                    {formatSubRenderCount(block, result.framework)}
+                                </dd>
+                            </div>
+                        </react_1.default.Fragment>))}
+                </dl>
+            </li>));
+    }, [results]);
+    return (<div className="perf-suite-results">
+            <div className="perf-suite-results__header">
+                <h3>Latest Perf Runs</h3>
+                <p>Playwright tests stream into this dashboard.</p>
+            </div>
+            <ul>{renderedList}</ul>
+            <style>
+                {`
+                .perf-suite-results {
+                    border: 1px solid var(--astro-color-border, rgba(120, 120, 120, 0.4));
+                    border-radius: 0.75rem;
+                    padding: 1rem;
+                    margin-top: 1.5rem;
+                    max-width: 720px;
+                }
+                .perf-suite-results__header {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.25rem;
+                    margin-bottom: 0.5rem;
+                }
+                .perf-suite-results__header h3 {
+                    margin: 0;
+                    font-size: 1.1rem;
+                }
+                .perf-suite-results__header p {
+                    margin: 0;
+                    opacity: 0.8;
+                    font-size: 0.9rem;
+                }
+                .perf-suite-results ul {
+                    list-style: none;
+                    padding: 0;
+                    margin: 0;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.75rem;
+                }
+                .perf-suite-results__item {
+                    background: rgba(120, 120, 120, 0.08);
+                    border: 1px solid rgba(120, 120, 120, 0.3);
+                    border-radius: 0.5rem;
+                    padding: 0.75rem;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.35rem;
+                }
+                .perf-suite-results__item header {
+                    display: flex;
+                    justify-content: space-between;
+                    font-size: 0.95rem;
+                }
+                .perf-suite-results__item header strong {
+                    text-transform: capitalize;
+                }
+                .perf-suite-results__meta {
+                    display: flex;
+                    justify-content: space-between;
+                    font-size: 0.8rem;
+                    opacity: 0.8;
+                }
+                .perf-suite-results__block {
+                    display: flex;
+                    justify-content: space-between;
+                    font-size: 0.85rem;
+                }
+                .perf-suite-results__block--subrenders {
+                    opacity: 0.85;
+                }
+                .perf-suite-results__block dt {
+                    margin: 0;
+                    text-transform: capitalize;
+                }
+                .perf-suite-results__block dd {
+                    margin: 0;
+                }
+                .perf-suite-results__empty {
+                    font-style: italic;
+                    opacity: 0.8;
+                }
+            `}
+            </style>
+        </div>);
+};
+exports.default = PerfSuiteClient;

package/dist/test/frontend/astro-app/src/components/ReactPanel.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const ReactPanel: React.FC;
+export default ReactPanel;
+//# sourceMappingURL=ReactPanel.d.ts.map

package/dist/test/frontend/astro-app/src/components/ReactPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/test/frontend/astro-app/src/components/ReactPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAqSvB,CAAC;AAEF,eAAe,UAAU,CAAC"}