nuxt-devtools-observatory 0.1.33 → 0.1.34

package/client/src/App.vue

@@ -4,6 +4,7 @@ import { useObservatoryData } from './stores/observatory'
 import FetchDashboard from './views/FetchDashboard.vue'
 import ProvideInjectGraph from './views/ProvideInjectGraph.vue'
 import ComposableTracker from './views/ComposableTracker.vue'
+import PiniaStoreTracker from './views/PiniaStoreTracker.vue'
 import RenderHeatmap from './views/RenderHeatmap.vue'
 import TransitionTimeline from './views/TransitionTimeline.vue'
 import TraceViewer from './views/TraceViewer.vue'
@@ -13,6 +14,7 @@ const pathMap: Record<string, string> = {
     fetch: 'fetch',
     provide: 'provide',
     composables: 'composable',
+    pinia: 'pinia',
     heatmap: 'heatmap',
     transitions: 'transitions',
     traces: 'traces',
@@ -32,6 +34,7 @@ const tabs = computed(() => {
         f.fetchDashboard && { id: 'fetch', label: 'useFetch', icon: '⬡' },
         f.provideInjectGraph && { id: 'provide', label: 'provide/inject', icon: '⬡' },
         f.composableTracker && { id: 'composable', label: 'Composables', icon: '⬡' },
+        f.piniaTracker && { id: 'pinia', label: 'Pinia', icon: '⬡' },
         f.renderHeatmap && { id: 'heatmap', label: 'Heatmap', icon: '⬡' },
         f.transitionTracker && { id: 'transitions', label: 'Transitions', icon: '⬡' },
         f.traceViewer && { id: 'traces', label: 'Traces', icon: '⬡' },
@@ -53,6 +56,7 @@ const tabs = computed(() => {
             <FetchDashboard v-if="activeTab === 'fetch'" />
             <ProvideInjectGraph v-else-if="activeTab === 'provide'" />
             <ComposableTracker v-else-if="activeTab === 'composable'" />
+            <PiniaStoreTracker v-else-if="activeTab === 'pinia'" />
             <RenderHeatmap v-else-if="activeTab === 'heatmap'" />
             <TransitionTimeline v-else-if="activeTab === 'transitions'" />
             <TraceViewer v-else-if="activeTab === 'traces'" />

package/client/src/stores/observatory.ts

@@ -6,6 +6,7 @@ import type {
     ProvideEntry,
     InjectEntry,
     ComposableEntry,
+    PiniaStoreEntry,
     RenderEntry,
     TransitionEntry,
     TraceEntry,
@@ -16,6 +17,7 @@ type ProvideInjectSnapshot = { provides: ProvideEntry[]; injects: InjectEntry[]
 const fetchEntries = ref<FetchEntry[]>([])
 const provideInject = ref<ProvideInjectSnapshot>({ provides: [], injects: [] })
 const composables = ref<ComposableEntry[]>([])
+const piniaStores = ref<PiniaStoreEntry[]>([])
 const renders = ref<RenderEntry[]>([])
 const transitions = ref<TransitionEntry[]>([])
 const traces = ref<TraceEntry[]>([])
@@ -57,6 +59,7 @@ function applySnapshot(data: ObservatorySnapshot) {
           }
         : { provides: [], injects: [] }
     composables.value = cloneArray(data.composables as ComposableEntry[] | undefined)
+    piniaStores.value = cloneArray(data.piniaStores as PiniaStoreEntry[] | undefined)
     renders.value = normalizeRenderEntries(data.renders as RenderEntry[] | undefined)
     transitions.value = cloneArray(data.transitions as TransitionEntry[] | undefined)
     traces.value = cloneArray(data.traces as TraceEntry[] | undefined)
@@ -87,6 +90,7 @@ function applySnapshot(data: ObservatorySnapshot) {
         debugLog('first snapshot received', {
             fetch: fetchEntries.value.length,
             composables: composables.value.length,
+            piniaStores: piniaStores.value.length,
             renders: renders.value.length,
             transitions: transitions.value.length,
             traces: traces.value.length,
@@ -200,6 +204,21 @@ export function editComposableValue(id: string, key: string, value: unknown) {
     })
 }
 
+export function clearPiniaStores() {
+    piniaStores.value = []
+    rpc?.clearPiniaStores()
+        .then(() => rpc?.requestSnapshot())
+        .catch((error) => {
+            debugLog('clearPiniaStores failed', error)
+        })
+}
+
+export function editPiniaState(storeId: string, path: string, value: unknown) {
+    rpc?.editPiniaState(storeId, path, value).catch((error) => {
+        debugLog('editPiniaState failed', error)
+    })
+}
+
 export function openInEditor(file: string) {
     if (!file || file === 'unknown') {
         return
@@ -233,6 +252,7 @@ export function useObservatoryData() {
         fetch: fetchEntries,
         provideInject,
         composables,
+        piniaStores,
         renders,
         transitions,
         traces,

package/client/src/views/PiniaStoreTracker.vue

@@ -0,0 +1,343 @@
+<script setup lang="ts">
+// No store is accessed or created here, so Pinia Tracker will show 'no store available' by default.
+import { computed, ref } from 'vue'
+import { useObservatoryData, clearPiniaStores /* editPiniaState */ } from '@observatory-client/stores/observatory'
+import type { PiniaMutationEvent, PiniaStoreEntry } from '@observatory/types/snapshot'
+
+const { piniaStores, connected } = useObservatoryData()
+
+const selectedStoreId = ref<string | null>(null)
+const selectedEventId = ref<string | null>(null)
+// Disabled until we can get it working properly. See comments in the template and applyEdit function for details.
+// const editPath = ref('')
+// const editValue = ref('')
+const editError = ref('')
+
+const stores = computed(() => [...piniaStores.value].sort((a, b) => a.id.localeCompare(b.id)))
+
+const selectedStore = computed<PiniaStoreEntry | null>(() => {
+    if (!selectedStoreId.value) {
+        return stores.value[0] ?? null
+    }
+
+    return stores.value.find((item) => item.id === selectedStoreId.value) ?? null
+})
+
+const timeline = computed<PiniaMutationEvent[]>(() => {
+    return selectedStore.value ? [...selectedStore.value.timeline].slice().reverse() : []
+})
+
+const selectedEvent = computed<PiniaMutationEvent | null>(() => {
+    if (!selectedEventId.value) {
+        return timeline.value[0] ?? null
+    }
+
+    return timeline.value.find((event) => event.id === selectedEventId.value) ?? null
+})
+
+function selectStore(id: string) {
+    selectedStoreId.value = id
+    selectedEventId.value = null
+    editError.value = ''
+}
+
+function pretty(value: unknown) {
+    try {
+        return JSON.stringify(value, null, 2)
+    } catch {
+        return String(value)
+    }
+}
+
+function renderDuration(event: PiniaMutationEvent) {
+    if (typeof event.durationMs !== 'number') {
+        return '-'
+    }
+
+    return `${event.durationMs.toFixed(2)}ms`
+}
+
+/* Edit functionality is temporarily disabled due to issues with state updates not being reflected in the UI. This is likely related to how the editPiniaState function applies changes and how the store's reactivity system detects those changes. Further investigation is needed to determine the root cause and implement a proper fix.
+function applyEdit() {
+    const store = selectedStore.value
+
+    if (!store) {
+        editError.value = 'Select a store first.'
+
+        return
+    }
+
+    if (!editPath.value.trim()) {
+        editError.value = 'Path is required (for example: preferences.theme).'
+
+        return
+    }
+
+    let nextValue: unknown = editValue.value
+
+    if (editValue.value.trim()) {
+        try {
+            nextValue = JSON.parse(editValue.value)
+        } catch {
+            nextValue = editValue.value
+        }
+    }
+
+    editError.value = ''
+    editPiniaState(store.id, editPath.value.trim(), nextValue)
+} */
+</script>
+
+<template>
+    <section class="pinia-tracker">
+        <header class="toolbar">
+            <h2>Pinia State and Mutations</h2>
+            <div class="toolbar-actions">
+                <span v-if="connected" class="status connected">Connected</span>
+                <span v-else class="status">Waiting for app</span>
+                <button class="danger" @click="clearPiniaStores">Clear timeline</button>
+            </div>
+        </header>
+
+        <div v-if="stores.length === 0" class="empty">No Pinia stores detected yet. Trigger store usage in the app.</div>
+
+        <div v-else class="content-grid">
+            <aside class="panel stores">
+                <h3>Stores</h3>
+                <button
+                    v-for="store in stores"
+                    :key="store.id"
+                    class="store-row"
+                    :class="{ active: selectedStore?.id === store.id }"
+                    @click="selectStore(store.id)"
+                >
+                    <span>{{ store.name }}</span>
+                    <small>{{ store.timeline.length }} events</small>
+                </button>
+            </aside>
+
+            <section class="panel timeline">
+                <h3>Timeline</h3>
+                <div class="list">
+                    <button
+                        v-for="event in timeline"
+                        :key="event.id"
+                        class="event-row"
+                        :class="{ active: selectedEvent?.id === event.id }"
+                        @click="selectedEventId = event.id"
+                    >
+                        <strong>{{ event.kind }}</strong>
+                        <span>{{ event.name }}</span>
+                        <small>{{ renderDuration(event) }}</small>
+                    </button>
+                </div>
+            </section>
+
+            <section class="panel inspector">
+                <h3>Inspector</h3>
+
+                <div v-if="selectedStore" class="block">
+                    <h4>Current state</h4>
+                    <pre>{{ pretty(selectedStore.state) }}</pre>
+                </div>
+
+                <!-- Edit functionality is temporarily disabled due to issues with state updates not being reflected in the UI. This is likely related to how the editPiniaState function applies changes and how the store's reactivity system detects those changes. Further investigation is needed to determine the root cause and implement a proper fix.
+                <div v-if="selectedStore" class="block edit-box">
+                    <h4>Edit state path</h4>
+                    <input v-model="editPath" placeholder="preferences.theme" />
+                    <textarea v-model="editValue" rows="4" placeholder='"dark" or {"enabled":true}' />
+                    <div class="actions">
+                        <button @click="applyEdit">Apply edit</button>
+                        <small v-if="editError" class="error">{{ editError }}</small>
+                    </div>
+                </div>
+                -->
+
+                <div v-if="selectedEvent" class="block">
+                    <h4>Selected event</h4>
+                    <p class="meta">
+                        {{ selectedEvent.kind }} · {{ selectedEvent.name }} · {{ selectedEvent.status }} ·
+                        {{ renderDuration(selectedEvent) }}
+                    </p>
+                    <h5>Diff</h5>
+                    <ul class="diff-list">
+                        <li v-for="item in selectedEvent.diff" :key="item.path">
+                            <code>{{ item.path }}</code>
+                        </li>
+                    </ul>
+                    <h5>Before</h5>
+                    <pre>{{ pretty(selectedEvent.beforeState) }}</pre>
+                    <h5>After</h5>
+                    <pre>{{ pretty(selectedEvent.afterState) }}</pre>
+                </div>
+            </section>
+        </div>
+    </section>
+</template>
+
+<style scoped>
+.pinia-tracker {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    gap: 12px;
+    padding: 12px;
+}
+
+.toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.toolbar h2 {
+    margin: 0;
+    font-size: 14px;
+}
+
+.toolbar-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.status {
+    color: var(--text3);
+    font-size: 12px;
+}
+
+.status.connected {
+    color: var(--green);
+}
+
+.content-grid {
+    display: grid;
+    grid-template-columns: 220px 280px 1fr;
+    gap: 10px;
+    min-height: 0;
+    flex: 1;
+}
+
+.panel {
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--bg2);
+    padding: 10px;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.panel h3 {
+    margin: 0;
+    font-size: 12px;
+    color: var(--text2);
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+}
+
+.stores,
+.timeline,
+.inspector,
+.list {
+    overflow: auto;
+}
+
+.store-row,
+.event-row {
+    width: 100%;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--bg3);
+    color: var(--text);
+    text-align: left;
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    cursor: pointer;
+}
+
+.store-row.active,
+.event-row.active {
+    border-color: var(--purple);
+}
+
+.store-row small,
+.event-row small {
+    color: var(--text3);
+}
+
+.block {
+    border-top: 1px solid var(--border);
+    padding-top: 8px;
+}
+
+.block h4,
+.block h5 {
+    margin: 0 0 6px;
+    font-size: 12px;
+}
+
+.meta {
+    margin: 0 0 6px;
+    color: var(--text2);
+    font-size: 12px;
+}
+
+pre {
+    margin: 0;
+    background: var(--bg3);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 8px;
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-size: 11px;
+    max-height: 200px;
+    overflow: auto;
+}
+
+.edit-box input,
+.edit-box textarea {
+    width: 100%;
+    background: var(--bg3);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text);
+    padding: 6px;
+    font-size: 12px;
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.error {
+    color: var(--red);
+}
+
+.empty {
+    padding: 24px;
+    border: 1px dashed var(--border);
+    border-radius: 8px;
+    color: var(--text2);
+}
+
+.diff-list {
+    margin: 0;
+    padding-left: 16px;
+}
+
+.danger {
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--bg2);
+    color: var(--text);
+    padding: 6px 10px;
+    cursor: pointer;
+}
+</style>

package/client/src/views/ProvideInjectGraph.vue

@@ -380,6 +380,22 @@ const visibleNodes = computed<TreeNodeData[]>(() => {
 
 const visibleLeafCountById = computed(() => buildLeafCountMap(visibleNodes.value))
 
+function findNodeById(roots: TreeNodeData[], id: string): TreeNodeData | null {
+    const stack = [...roots]
+
+    while (stack.length) {
+        const node = stack.pop()!
+
+        if (node.id === id) {
+            return node
+        }
+
+        stack.push(...node.children)
+    }
+
+    return null
+}
+
 watch([visibleNodes, selectedNode], ([currentNodes, currentSelected]) => {
     if (!currentSelected) {
         return
@@ -396,6 +412,15 @@ watch([visibleNodes, selectedNode], ([currentNodes, currentSelected]) => {
 
     if (!ids.has(currentSelected.id)) {
         selectedNode.value = null
+
+        return
+    }
+
+    // Keep details reactive: remap to the latest node instance after snapshots refresh.
+    const latest = findNodeById(currentNodes, currentSelected.id)
+
+    if (latest && latest !== currentSelected) {
+        selectedNode.value = latest
     }
 })
 

package/dist/module.d.mts

@@ -39,6 +39,11 @@ interface ModuleOptions {
      * @default 300
      */
     maxComposableEntries?: number;
+    /**
+     * Maximum number of Pinia timeline events to keep per store
+     * @default 100
+     */
+    maxPiniaTimeline?: number;
     /**
      * Maximum number of render timeline events per entry
      * @default 100
@@ -66,6 +71,11 @@ interface ModuleOptions {
      * @default true
      */
     composableTracker?: boolean;
+    /**
+     * Enable the Pinia state tracker tab
+     * @default true
+     */
+    piniaTracker?: boolean;
     /**
      * Enable the render heatmap tab
      * @default true

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "0.1.33",
+  "version": "0.1.34",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -518,6 +518,7 @@ const defaults = {
   fetchDashboard: process.env.OBSERVATORY_FETCH_DASHBOARD === "true",
   provideInjectGraph: process.env.OBSERVATORY_PROVIDE_INJECT_GRAPH === "true",
   composableTracker: process.env.OBSERVATORY_COMPOSABLE_TRACKER === "true",
+  piniaTracker: process.env.OBSERVATORY_PINIA_TRACKER === "true",
   renderHeatmap: process.env.OBSERVATORY_RENDER_HEATMAP === "true",
   transitionTracker: process.env.OBSERVATORY_TRANSITION_TRACKER === "true",
   traceViewer: process.env.OBSERVATORY_TRACE_VIEWER === "true",
@@ -529,6 +530,7 @@ const defaults = {
   maxTransitions: process.env.OBSERVATORY_MAX_TRANSITIONS ? Number(process.env.OBSERVATORY_MAX_TRANSITIONS) : 500,
   maxComposableHistory: process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY) : 50,
   maxComposableEntries: process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES) : 300,
+  maxPiniaTimeline: process.env.OBSERVATORY_MAX_PINIA_TIMELINE ? Number(process.env.OBSERVATORY_MAX_PINIA_TIMELINE) : 100,
   maxRenderTimeline: process.env.OBSERVATORY_MAX_RENDER_TIMELINE ? Number(process.env.OBSERVATORY_MAX_RENDER_TIMELINE) : 100,
   composableNavigationMode: process.env.OBSERVATORY_COMPOSABLE_NAVIGATION_MODE === "session" ? "session" : "route",
   heatmapHideInternals: process.env.OBSERVATORY_HEATMAP_HIDE_INTERNALS === "true",
@@ -557,6 +559,7 @@ const module$1 = defineNuxtModule({
       fetchDashboard: options.fetchDashboard ?? (process.env.OBSERVATORY_FETCH_DASHBOARD ? process.env.OBSERVATORY_FETCH_DASHBOARD === "true" : true),
       provideInjectGraph: options.provideInjectGraph ?? (process.env.OBSERVATORY_PROVIDE_INJECT_GRAPH ? process.env.OBSERVATORY_PROVIDE_INJECT_GRAPH === "true" : true),
       composableTracker: options.composableTracker ?? (process.env.OBSERVATORY_COMPOSABLE_TRACKER ? process.env.OBSERVATORY_COMPOSABLE_TRACKER === "true" : true),
+      piniaTracker: options.piniaTracker ?? (process.env.OBSERVATORY_PINIA_TRACKER ? process.env.OBSERVATORY_PINIA_TRACKER === "true" : true),
       renderHeatmap: options.renderHeatmap ?? (process.env.OBSERVATORY_RENDER_HEATMAP ? process.env.OBSERVATORY_RENDER_HEATMAP === "true" : true),
       transitionTracker: options.transitionTracker ?? (process.env.OBSERVATORY_TRANSITION_TRACKER ? process.env.OBSERVATORY_TRANSITION_TRACKER === "true" : true),
       traceViewer: options.traceViewer ?? (process.env.OBSERVATORY_TRACE_VIEWER ? process.env.OBSERVATORY_TRACE_VIEWER === "true" : true),
@@ -569,6 +572,7 @@ const module$1 = defineNuxtModule({
       maxTransitions: options.maxTransitions ?? (process.env.OBSERVATORY_MAX_TRANSITIONS ? Number(process.env.OBSERVATORY_MAX_TRANSITIONS) : 500),
       maxComposableHistory: options.maxComposableHistory ?? (process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_HISTORY) : 50),
       maxComposableEntries: options.maxComposableEntries ?? (process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES ? Number(process.env.OBSERVATORY_MAX_COMPOSABLE_ENTRIES) : 300),
+      maxPiniaTimeline: options.maxPiniaTimeline ?? (process.env.OBSERVATORY_MAX_PINIA_TIMELINE ? Number(process.env.OBSERVATORY_MAX_PINIA_TIMELINE) : 100),
       maxRenderTimeline: options.maxRenderTimeline ?? (process.env.OBSERVATORY_MAX_RENDER_TIMELINE ? Number(process.env.OBSERVATORY_MAX_RENDER_TIMELINE) : 100),
       composableNavigationMode: options.composableNavigationMode ?? (process.env.OBSERVATORY_COMPOSABLE_NAVIGATION_MODE === "session" ? "session" : "route"),
       debugRpc: options.debugRpc ?? (process.env.OBSERVATORY_DEBUG_RPC ? process.env.OBSERVATORY_DEBUG_RPC === "true" : false)
@@ -603,7 +607,7 @@ const module$1 = defineNuxtModule({
     if (resolved.transitionTracker) {
       addVitePlugin(transitionTrackerPlugin(), vitePluginScope);
     }
-    if (resolved.fetchDashboard || resolved.provideInjectGraph || resolved.composableTracker || resolved.renderHeatmap || resolved.transitionTracker) {
+    if (resolved.fetchDashboard || resolved.provideInjectGraph || resolved.composableTracker || resolved.piniaTracker || resolved.renderHeatmap || resolved.transitionTracker) {
       addPlugin(resolver.resolve("./runtime/plugin"));
     }
     if (resolved.fetchDashboard || resolved.traceViewer && resolved.instrumentServer) {
@@ -620,6 +624,7 @@ const module$1 = defineNuxtModule({
       fetch: [],
       provideInject: { provides: [], injects: [] },
       composables: [],
+      piniaStores: [],
       renders: [],
       transitions: [],
       traces: [],
@@ -627,6 +632,7 @@ const module$1 = defineNuxtModule({
         fetchDashboard: !!resolved.fetchDashboard,
         provideInjectGraph: !!resolved.provideInjectGraph,
         composableTracker: !!resolved.composableTracker,
+        piniaTracker: !!resolved.piniaTracker,
         composableNavigationMode: resolved.composableNavigationMode,
         fetchPageSize: resolved.fetchPageSize,
         renderHeatmap: !!resolved.renderHeatmap,
@@ -655,6 +661,7 @@ const module$1 = defineNuxtModule({
           debugLog("received host snapshot", {
             fetch: Array.isArray(snapshot.fetch) ? snapshot.fetch.length : 0,
             composables: Array.isArray(snapshot.composables) ? snapshot.composables.length : 0,
+            piniaStores: Array.isArray(snapshot.piniaStores) ? snapshot.piniaStores.length : 0,
             renders: Array.isArray(snapshot.renders) ? snapshot.renders.length : 0,
             transitions: Array.isArray(snapshot.transitions) ? snapshot.transitions.length : 0
           });
@@ -680,6 +687,12 @@ const module$1 = defineNuxtModule({
           },
           async editComposableValue(id, key, value) {
             emitCommand({ cmd: "edit-composable", id, key, value });
+          },
+          async clearPiniaStores() {
+            emitCommand({ cmd: "clear-pinia" });
+          },
+          async editPiniaState(storeId, path, value) {
+            emitCommand({ cmd: "edit-pinia", storeId, path, value });
           }
         },
         nuxt
@@ -687,7 +700,7 @@ const module$1 = defineNuxtModule({
       rpc.broadcast.onSnapshot.asEvent(latestSnapshot);
     }, nuxt);
     nuxt.hook("devtools:customTabs", (tabs) => {
-      if (resolved.fetchDashboard || resolved.provideInjectGraph || resolved.composableTracker || resolved.renderHeatmap || resolved.transitionTracker) {
+      if (resolved.fetchDashboard || resolved.provideInjectGraph || resolved.composableTracker || resolved.piniaTracker || resolved.renderHeatmap || resolved.transitionTracker) {
         tabs.push({
           name: "observatory-trackers",
           title: "Observatory Trackers",
@@ -701,6 +714,7 @@ const module$1 = defineNuxtModule({
       fetchDashboard: resolved.fetchDashboard,
       provideInjectGraph: resolved.provideInjectGraph,
       composableTracker: resolved.composableTracker,
+      piniaTracker: resolved.piniaTracker,
       renderHeatmap: resolved.renderHeatmap,
       transitionTracker: resolved.transitionTracker,
       traceViewer: resolved.traceViewer,
@@ -710,6 +724,7 @@ const module$1 = defineNuxtModule({
       maxTransitions: resolved.maxTransitions,
       maxComposableHistory: resolved.maxComposableHistory,
       maxComposableEntries: resolved.maxComposableEntries,
+      maxPiniaTimeline: resolved.maxPiniaTimeline,
       maxRenderTimeline: resolved.maxRenderTimeline,
       composableNavigationMode: resolved.composableNavigationMode,
       heatmapHideInternals: resolved.heatmapHideInternals,

package/dist/runtime/composables/pinia-store-registry.d.ts

@@ -0,0 +1,44 @@
+import type { PiniaHydrationEvent, PiniaStateDiff, PiniaStoreDependency } from '../../types/snapshot.js';
+export declare function setupPiniaStoreRegistry(options: {
+    pinia?: unknown;
+    nuxtPayload?: unknown;
+    maxTimeline?: number;
+    stackProvider?: () => string[];
+}): {
+    clear: () => void;
+    editState: (storeId: string, path: string, value: unknown) => void;
+    getAll: () => {
+        state: unknown;
+        dependencies: PiniaStoreDependency[];
+        hydrationTimeline: {
+            at: number;
+            source: "nuxt-payload" | "persistedstate" | "runtime" | "unknown";
+            details?: string;
+        }[];
+        timeline: {
+            beforeState: unknown;
+            afterState: unknown;
+            diff: PiniaStateDiff[];
+            id: string;
+            storeId: string;
+            storeName: string;
+            kind: "action" | "mutation";
+            name: string;
+            startTime: number;
+            endTime?: number;
+            durationMs?: number;
+            status: "active" | "ok" | "error";
+            callerStack?: string[];
+            payload?: unknown;
+            error?: string;
+        }[];
+        id: string;
+        name: string;
+        lastMutationAt?: number;
+        lastActionAt?: number;
+        hydration?: PiniaHydrationEvent;
+    }[];
+    getSnapshot: () => string;
+    onChange: (cb: () => void) => () => void;
+    teardown: () => void;
+};