nuxt-devtools-observatory 0.1.12 → 0.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1 @@
1
+ .view[data-v-8c1465c0]{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:12px;gap:10px}.stats-row[data-v-8c1465c0]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex-shrink:0}.toolbar[data-v-8c1465c0]{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap}.split[data-v-8c1465c0]{display:flex;gap:12px;flex:1;overflow:hidden;min-height:0}.table-wrap[data-v-8c1465c0]{flex:1;overflow:auto;border:.5px solid var(--border);border-radius:var(--radius-lg)}.detail-panel[data-v-8c1465c0]{width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:8px;overflow:auto;border:.5px solid var(--border);border-radius:var(--radius-lg);padding:12px;background:var(--bg3)}.detail-empty[data-v-8c1465c0]{width:280px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:12px;border:.5px dashed var(--border);border-radius:var(--radius-lg)}.detail-header[data-v-8c1465c0]{display:flex;align-items:center;justify-content:space-between}.meta-grid[data-v-8c1465c0]{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:11px}.section-label[data-v-8c1465c0]{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin-top:6px}.payload-box[data-v-8c1465c0]{font-family:var(--mono);font-size:11px;color:var(--text2);background:var(--bg2);border-radius:var(--radius);padding:8px 10px;overflow:auto;white-space:pre;max-height:160px}.waterfall[data-v-8c1465c0]{flex-shrink:0;background:var(--bg3);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:10px 12px}.waterfall-header[data-v-8c1465c0]{display:flex;align-items:center;justify-content:space-between;gap:8px}.waterfall-body[data-v-8c1465c0]{margin-top:6px}.wf-row[data-v-8c1465c0]{display:flex;align-items:center;gap:8px;margin-bottom:4px}.wf-track[data-v-8c1465c0]{flex:1;position:relative;height:8px;background:var(--bg2);border-radius:2px;overflow:hidden}.wf-bar[data-v-8c1465c0]{position:absolute;top:0;height:100%;border-radius:2px;opacity:.8}.view[data-v-f074866d]{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:12px;gap:10px}.toolbar[data-v-f074866d]{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap}.split[data-v-f074866d]{display:flex;gap:12px;flex:1;overflow:hidden;min-height:0}.graph-area[data-v-f074866d]{flex:1;overflow:auto;border:.5px solid var(--border);border-radius:var(--radius-lg);padding:12px;background:var(--bg3)}.legend[data-v-f074866d]{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--text2);margin-bottom:12px}.canvas-stage[data-v-f074866d]{display:flex;justify-content:center;align-items:flex-start;min-width:100%}.dot[data-v-f074866d]{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:2px}.canvas-wrap[data-v-f074866d]{position:relative}.edges-svg[data-v-f074866d]{position:absolute;top:0;left:0;pointer-events:none}.edge[data-v-f074866d]{stroke:var(--border);stroke-width:1.5}.graph-node[data-v-f074866d]{position:absolute;display:flex;align-items:center;gap:7px;padding:0 10px;height:32px;border-radius:var(--radius);border:.5px solid var(--border);background:var(--bg3);cursor:pointer;transition:border-color .12s,background .12s;overflow:hidden;box-sizing:border-box;white-space:nowrap}.graph-node[data-v-f074866d]:hover{border-color:var(--text3)}.graph-node.is-selected[data-v-f074866d]{border-color:var(--node-color);background:color-mix(in srgb,var(--node-color) 8%,transparent)}.node-dot[data-v-f074866d]{width:7px;height:7px;border-radius:50%;flex-shrink:0}.node-label[data-v-f074866d]{font-size:11px;flex:1;overflow:hidden;text-overflow:ellipsis}.badge-xs[data-v-f074866d]{font-size:9px;padding:1px 4px}.detail-panel[data-v-f074866d]{width:280px;flex-shrink:0;overflow:auto;border:.5px solid var(--border);border-radius:var(--radius-lg);padding:12px;background:var(--bg3);display:flex;flex-direction:column;gap:4px;min-height:0}.detail-empty[data-v-f074866d]{width:280px;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:12px;border:.5px dashed var(--border);border-radius:var(--radius-lg);flex-shrink:0}.graph-empty[data-v-f074866d]{display:flex;align-items:center;justify-content:center;min-height:180px;color:var(--text3);font-size:12px}.detail-header[data-v-f074866d]{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.section-label[data-v-f074866d]{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin:8px 0 5px}.detail-section[data-v-f074866d]{display:flex;flex-direction:column;min-height:0}.detail-list[data-v-f074866d]{display:flex;flex-direction:column;gap:3px;overflow:auto;max-height:220px;padding-right:2px}.provide-row[data-v-f074866d]{display:flex;flex-direction:column;gap:4px;padding:5px 8px;background:var(--bg2);border-radius:var(--radius);margin-bottom:3px}.row-warning[data-v-f074866d]{font-size:11px;color:var(--amber);padding:2px 0}.row-consumers[data-v-f074866d]{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:2px 0}.consumer-chip[data-v-f074866d]{font-size:10px;padding:1px 6px;border-radius:4px;background:color-mix(in srgb,var(--blue) 10%,var(--bg3));border:.5px solid color-mix(in srgb,var(--blue) 30%,var(--border));color:var(--text2)}.scope-badge[data-v-f074866d]{font-size:10px;padding:1px 6px;border-radius:4px}.scope-global[data-v-f074866d]{background:color-mix(in srgb,var(--amber) 15%,transparent);border:.5px solid color-mix(in srgb,var(--amber) 40%,var(--border));color:color-mix(in srgb,var(--amber) 80%,var(--text))}.scope-layout[data-v-f074866d]{background:color-mix(in srgb,var(--purple) 15%,transparent);border:.5px solid color-mix(in srgb,var(--purple) 40%,var(--border));color:color-mix(in srgb,var(--purple) 80%,var(--text))}.scope-component[data-v-f074866d]{background:var(--bg3);border:.5px solid var(--border);color:var(--text3)}.row-main[data-v-f074866d]{display:flex;align-items:center;gap:8px;min-width:0}.row-key[data-v-f074866d]{min-width:100px;color:var(--text2);flex-shrink:0}.row-value-preview[data-v-f074866d]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-toggle[data-v-f074866d]{padding:2px 8px;font-size:10px}.value-box[data-v-f074866d]{font-family:var(--mono);font-size:11px;color:var(--text2);background:#0000001a;border-radius:var(--radius);padding:8px 10px;white-space:pre-wrap;word-break:break-word;overflow:auto;max-height:180px}.inject-row[data-v-f074866d]{display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--bg2);border-radius:var(--radius);margin-bottom:3px}.row-from[data-v-f074866d]{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inject-miss[data-v-f074866d]{background:#e24b4a14}.view[data-v-d1ee181e]{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:12px;gap:10px}.stats-row[data-v-d1ee181e]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex-shrink:0}.toolbar[data-v-d1ee181e]{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap}.clear-btn[data-v-d1ee181e]{color:var(--text3);border-color:var(--border);flex-shrink:0}.clear-btn[data-v-d1ee181e]:hover{color:var(--red);border-color:var(--red);background:transparent}.list[data-v-d1ee181e]{flex:1;overflow:auto;display:flex;flex-direction:column;gap:5px;min-height:0}.comp-card[data-v-d1ee181e]{background:var(--bg3);border:.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;flex-shrink:0}.comp-card[data-v-d1ee181e]:hover{border-color:var(--text3)}.comp-card.leak[data-v-d1ee181e]{border-left:2px solid var(--red);border-radius:0 var(--radius-lg) var(--radius-lg) 0}.comp-card.expanded[data-v-d1ee181e]{border-color:var(--purple)}.comp-header[data-v-d1ee181e]{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;gap:8px}.comp-identity[data-v-d1ee181e]{display:flex;align-items:baseline;gap:6px;min-width:0;flex:1}.comp-name[data-v-d1ee181e]{font-size:12px;font-weight:500;color:var(--text);flex-shrink:0}.comp-file[data-v-d1ee181e]{font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.comp-meta[data-v-d1ee181e]{display:flex;align-items:center;gap:5px;flex-shrink:0}.refs-preview[data-v-d1ee181e]{display:flex;flex-wrap:wrap;gap:4px;padding:0 12px 8px;align-items:center}.ref-chip[data-v-d1ee181e]{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:4px;background:var(--bg2);border:.5px solid var(--border);font-size:11px;font-family:var(--mono);max-width:220px;overflow:hidden}.ref-chip--reactive[data-v-d1ee181e]{border-color:color-mix(in srgb,var(--purple) 40%,var(--border));background:color-mix(in srgb,var(--purple) 8%,var(--bg2))}.ref-chip--computed[data-v-d1ee181e]{border-color:color-mix(in srgb,var(--blue) 40%,var(--border));background:color-mix(in srgb,var(--blue) 8%,var(--bg2))}.ref-chip-key[data-v-d1ee181e]{color:var(--text2);flex-shrink:0}.ref-chip-val[data-v-d1ee181e]{color:var(--teal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.comp-detail[data-v-d1ee181e]{padding:4px 12px 12px;border-top:.5px solid var(--border);display:flex;flex-direction:column;gap:3px}.leak-banner[data-v-d1ee181e]{background:color-mix(in srgb,var(--red) 12%,transparent);border:.5px solid color-mix(in srgb,var(--red) 40%,var(--border));border-radius:var(--radius);padding:6px 10px;font-size:11px;color:var(--red);margin-bottom:6px;font-family:var(--mono)}.section-label[data-v-d1ee181e]{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin-top:6px;margin-bottom:3px}.ref-row[data-v-d1ee181e]{display:flex;align-items:center;gap:8px;padding:3px 0}.ref-key[data-v-d1ee181e]{min-width:90px;color:var(--text2);flex-shrink:0}.ref-val[data-v-d1ee181e]{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--teal)}.lc-row[data-v-d1ee181e]{display:flex;align-items:center;gap:8px;padding:2px 0}.lc-dot[data-v-d1ee181e]{width:6px;height:6px;border-radius:50%;flex-shrink:0}.ref-chip--shared[data-v-d1ee181e]{border-color:color-mix(in srgb,var(--amber) 50%,var(--border));background:color-mix(in srgb,var(--amber) 10%,var(--bg2))}.ref-chip-shared-dot[data-v-d1ee181e]{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--amber);flex-shrink:0;margin-left:1px}.global-banner[data-v-d1ee181e]{display:flex;align-items:flex-start;gap:8px;background:color-mix(in srgb,var(--amber) 10%,transparent);border:.5px solid color-mix(in srgb,var(--amber) 40%,var(--border));border-radius:var(--radius);padding:7px 10px;font-size:11px;color:var(--text2);margin-bottom:6px}.global-dot[data-v-d1ee181e]{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);flex-shrink:0;margin-top:3px}.badge-amber[data-v-d1ee181e]{background:color-mix(in srgb,var(--amber) 15%,transparent);color:color-mix(in srgb,var(--amber) 80%,var(--text));border:.5px solid color-mix(in srgb,var(--amber) 40%,var(--border))}.history-list[data-v-d1ee181e]{display:flex;flex-direction:column;gap:1px;background:var(--bg2);border-radius:var(--radius);padding:4px 8px;max-height:180px;overflow-y:auto}.history-row[data-v-d1ee181e]{display:flex;align-items:center;gap:8px;padding:2px 0;font-size:11px;font-family:var(--mono);border-bottom:.5px solid var(--border)}.history-row[data-v-d1ee181e]:last-child{border-bottom:none}.history-time[data-v-d1ee181e]{min-width:52px;color:var(--text3);flex-shrink:0}.history-key[data-v-d1ee181e]{min-width:80px;color:var(--text2);flex-shrink:0}.history-val[data-v-d1ee181e]{color:var(--amber);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.stat-card[data-v-d1ee181e]{background:var(--bg3);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:10px 14px}.stat-label[data-v-d1ee181e]{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin-bottom:4px}.stat-val[data-v-d1ee181e]{font-size:22px;font-weight:500;line-height:1;color:var(--text)}.ref-key--clickable[data-v-d1ee181e]{cursor:pointer;text-decoration:underline dotted var(--text3);text-underline-offset:2px}.ref-key--clickable[data-v-d1ee181e]:hover{color:var(--purple);text-decoration-color:var(--purple)}.edit-btn[data-v-d1ee181e]{font-size:10px;padding:1px 6px;border-radius:var(--radius);border:.5px solid var(--border);background:transparent;color:var(--text3);cursor:pointer;margin-left:auto;flex-shrink:0;font-family:var(--mono)}.edit-btn[data-v-d1ee181e]:hover{border-color:var(--purple);color:var(--purple);background:color-mix(in srgb,var(--purple) 8%,transparent)}.lookup-panel[data-v-d1ee181e]{flex-shrink:0;border:.5px solid var(--border);border-radius:var(--radius-lg);background:var(--bg3);overflow:hidden}.lookup-header[data-v-d1ee181e]{display:flex;align-items:center;gap:6px;padding:7px 12px;border-bottom:.5px solid var(--border);background:var(--bg2)}.lookup-row[data-v-d1ee181e]{display:flex;align-items:center;gap:8px;padding:5px 12px;border-bottom:.5px solid var(--border)}.lookup-row[data-v-d1ee181e]:last-child{border-bottom:none}.edit-overlay[data-v-d1ee181e]{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:100;display:flex;align-items:center;justify-content:center}.edit-dialog[data-v-d1ee181e]{background:var(--bg1, var(--bg2));border:.5px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;width:380px;max-width:92vw;display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 32px #0000004d}.edit-dialog-header[data-v-d1ee181e]{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);margin-bottom:2px}.edit-textarea[data-v-d1ee181e]{width:100%;font-family:var(--mono);font-size:12px;padding:8px 10px;background:var(--bg2);border:.5px solid var(--border);border-radius:var(--radius);color:var(--text);resize:vertical;outline:none}.edit-textarea[data-v-d1ee181e]:focus{border-color:var(--purple)}.edit-error[data-v-d1ee181e]{color:var(--red);font-family:var(--mono)}.edit-actions[data-v-d1ee181e]{display:flex;gap:6px;padding-top:4px}.slide-enter-active[data-v-d1ee181e],.slide-leave-active[data-v-d1ee181e]{transition:opacity .15s,transform .15s}.slide-enter-from[data-v-d1ee181e],.slide-leave-to[data-v-d1ee181e]{opacity:0;transform:translateY(6px)}.fade-enter-active[data-v-d1ee181e],.fade-leave-active[data-v-d1ee181e]{transition:opacity .15s}.fade-enter-from[data-v-d1ee181e],.fade-leave-to[data-v-d1ee181e]{opacity:0}.view[data-v-73881a11]{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:12px;gap:10px}.controls[data-v-73881a11]{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap}.mode-group[data-v-73881a11]{display:flex;gap:2px}.threshold-group[data-v-73881a11]{display:flex;align-items:center;gap:6px}.stats-row[data-v-73881a11]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex-shrink:0}.stat-sub[data-v-73881a11]{margin-top:4px;font-size:11px;color:var(--text3)}.inspector[data-v-73881a11]{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr) minmax(260px,320px);gap:12px;flex:1;min-height:0}.roots-panel[data-v-73881a11],.tree-panel[data-v-73881a11],.detail-panel[data-v-73881a11]{border:.5px solid var(--border);border-radius:var(--radius-lg);background:var(--bg3);min-height:0}.roots-panel[data-v-73881a11],.detail-panel[data-v-73881a11]{display:flex;flex-direction:column;overflow:auto;padding:12px;gap:8px}.panel-title[data-v-73881a11]{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;color:var(--text3)}.root-item[data-v-73881a11]{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg2);color:var(--text);text-align:left}.root-item.active[data-v-73881a11]{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 16%,var(--bg2))}.root-label[data-v-73881a11]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.root-copy[data-v-73881a11]{display:flex;flex-direction:column;min-width:0}.root-sub[data-v-73881a11]{font-size:11px}.root-meta[data-v-73881a11]{color:var(--text3);font-size:11px}.tree-panel[data-v-73881a11]{display:flex;flex-direction:column;overflow:hidden}.tree-toolbar[data-v-73881a11]{padding:12px;border-bottom:.5px solid var(--border)}.search-input[data-v-73881a11]{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg2);color:var(--text)}.tree-frame[data-v-73881a11]{flex:1;min-height:0;overflow:auto;padding:12px}[data-v-73881a11] .tree-canvas{display:inline-block;min-width:100%;width:max-content}[data-v-73881a11] .tree-node{margin-bottom:4px}[data-v-73881a11] .tree-row{display:grid;grid-template-columns:8px 18px minmax(0,1fr) auto;align-items:center;gap:6px;min-width:0;width:100%;padding:4px 8px;padding-left:calc(8px + (var(--tree-depth, 0) * 16px));border:1px solid transparent;border-radius:var(--radius);cursor:pointer;white-space:nowrap}[data-v-73881a11] .tree-row:hover{background:var(--bg2)}[data-v-73881a11] .tree-row.selected{background:color-mix(in srgb,var(--teal) 12%,var(--bg2));border-color:var(--teal)}[data-v-73881a11] .tree-row.hot{box-shadow:inset 2px 0 0 var(--red)}[data-v-73881a11] .tree-toggle{width:16px;height:16px;border:none;background:transparent;color:var(--text3);padding:0;font-size:14px;display:inline-flex;align-items:center;justify-content:center}[data-v-73881a11] .tree-toggle:disabled{cursor:default}[data-v-73881a11] .tree-toggle.empty{opacity:0}[data-v-73881a11] .tree-rail{display:block;width:2px;height:14px;border-radius:999px;background:color-mix(in srgb,var(--border) 75%,transparent)}[data-v-73881a11] .tree-copy{display:flex;align-items:center;min-width:0;gap:6px;overflow:hidden}[data-v-73881a11] .tree-name{font-size:12px;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis}[data-v-73881a11] .tree-badges{display:flex;gap:6px;flex-shrink:0;overflow:hidden}[data-v-73881a11] .tree-badge{border:1px solid var(--border);border-radius:999px;padding:2px 7px;font-size:10px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}[data-v-73881a11] .tree-metrics{display:flex;align-items:center;min-width:92px;justify-content:flex-end;flex-shrink:0;gap:6px}[data-v-73881a11] .tree-metric-pill{display:inline-flex;align-items:center;justify-content:center;min-width:78px;padding:2px 8px;border:1px solid var(--border);border-radius:999px;background:var(--bg2);font-size:10px;color:var(--text3)}[data-v-73881a11] .tree-persistent-pill{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid color-mix(in srgb,var(--amber) 55%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--amber) 10%,var(--bg2));font-size:10px;color:color-mix(in srgb,var(--amber) 80%,var(--text))}[data-v-73881a11] .tree-hydration-pill{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid color-mix(in srgb,var(--teal) 55%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--teal) 10%,var(--bg2));font-size:10px;color:color-mix(in srgb,var(--teal) 80%,var(--text))}[data-v-73881a11] .tree-children{margin-left:7px;padding-left:11px;border-left:1px solid color-mix(in srgb,var(--border) 72%,transparent)}.detail-empty[data-v-73881a11]{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text3);font-size:12px}.detail-header[data-v-73881a11]{display:flex;align-items:center;justify-content:space-between}.meta-grid[data-v-73881a11]{display:grid;grid-template-columns:auto 1fr;gap:4px 12px}.detail-pill-row[data-v-73881a11]{display:flex;flex-wrap:wrap;gap:6px}.detail-pill[data-v-73881a11]{border:1px solid var(--border);border-radius:999px;padding:4px 8px;background:var(--bg2);font-size:11px}.detail-pill.hot[data-v-73881a11]{border-color:color-mix(in srgb,var(--red) 50%,var(--border));color:var(--red)}.detail-pill.persistent[data-v-73881a11]{border-color:color-mix(in srgb,var(--amber) 55%,var(--border));color:color-mix(in srgb,var(--amber) 80%,var(--text))}.detail-pill.hydrated[data-v-73881a11]{border-color:color-mix(in srgb,var(--teal) 55%,var(--border));color:color-mix(in srgb,var(--teal) 80%,var(--text))}.detail-pill.muted[data-v-73881a11]{color:var(--text3);border-color:var(--border)}.section-label[data-v-73881a11]{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin-top:8px;margin-bottom:4px}.trigger-item[data-v-73881a11]{background:var(--bg2);border-radius:var(--radius);padding:4px 8px;margin-bottom:3px;color:var(--text2)}@media(max-width:1180px){.inspector[data-v-73881a11]{grid-template-columns:minmax(200px,240px) minmax(0,1fr)}.detail-panel[data-v-73881a11]{grid-column:1 / -1;max-height:220px}}.timeline-root[data-v-da869dac]{display:flex;flex-direction:column;height:100%;overflow:hidden}.stats-row[data-v-da869dac]{display:flex;gap:10px;padding:12px 14px 0;flex-shrink:0}.stat-card[data-v-da869dac]{background:var(--bg2);border:.5px solid var(--border);border-radius:var(--radius);padding:8px 14px;min-width:72px;text-align:center}.stat-val[data-v-da869dac]{font-size:20px;font-weight:600;font-family:var(--mono);line-height:1.1}.stat-unit[data-v-da869dac]{font-size:12px;opacity:.6;margin-left:1px}.stat-label[data-v-da869dac]{font-size:10px;color:var(--text3);margin-top:2px;text-transform:uppercase;letter-spacing:.4px}.toolbar[data-v-da869dac]{display:flex;align-items:center;gap:8px;padding:10px 14px;flex-shrink:0;border-bottom:.5px solid var(--border)}.search-input[data-v-da869dac]{flex:1;max-width:260px}.filter-group[data-v-da869dac]{display:flex;gap:4px}.content-area[data-v-da869dac]{display:flex;flex:1;overflow:hidden;min-height:0}.table-pane[data-v-da869dac]{flex:1;overflow:hidden auto;min-width:0}.bar-cell[data-v-da869dac]{width:200px;padding:4px 8px}.bar-track[data-v-da869dac]{position:relative;height:8px;background:var(--bg2);border-radius:4px;overflow:hidden}.bar-fill[data-v-da869dac]{position:absolute;top:0;height:100%;min-width:3px;border-radius:4px;transition:width .15s}.detail-panel[data-v-da869dac]{width:260px;flex-shrink:0;border-left:.5px solid var(--border);overflow-y:auto;background:var(--bg3);padding:0 0 16px}.panel-header[data-v-da869dac]{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 8px;border-bottom:.5px solid var(--border);position:sticky;top:0;background:var(--bg3);z-index:1}.panel-title[data-v-da869dac]{font-family:var(--mono);font-size:13px;font-weight:500}.close-btn[data-v-da869dac]{border:none;background:transparent;color:var(--text3);font-size:11px;padding:2px 6px;cursor:pointer}.panel-section[data-v-da869dac]{padding:10px 14px 6px;border-bottom:.5px solid var(--border)}.panel-section-title[data-v-da869dac]{font-size:10px;font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}.panel-row[data-v-da869dac]{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:3px 0;font-size:12px}.panel-key[data-v-da869dac]{color:var(--text3);flex-shrink:0}.panel-val[data-v-da869dac]{color:var(--text);text-align:right;word-break:break-all}.cancel-notice[data-v-da869dac],.active-notice[data-v-da869dac]{margin:10px 14px 0;font-size:11px;line-height:1.6;padding:8px 10px;border-radius:var(--radius)}.cancel-notice[data-v-da869dac]{background:#e24b4a1a;color:var(--red);border:.5px solid rgb(226 75 74 / 30%)}.active-notice[data-v-da869dac]{background:#7f77dd1a;color:var(--purple);border:.5px solid rgb(127 119 221 / 30%)}code[data-v-da869dac]{font-family:var(--mono);font-size:10px;background:#00000026;padding:1px 4px;border-radius:3px}.panel-slide-enter-active[data-v-da869dac],.panel-slide-leave-active[data-v-da869dac]{transition:transform .18s ease,opacity .18s ease}.panel-slide-enter-from[data-v-da869dac],.panel-slide-leave-to[data-v-da869dac]{transform:translate(12px);opacity:0}#app-root[data-v-08e3ddb5]{display:flex;flex-direction:column;height:100vh;overflow:hidden}.tabbar[data-v-08e3ddb5]{display:flex;align-items:center;gap:2px;padding:8px 12px 0;border-bottom:.5px solid var(--border);background:var(--bg3);flex-shrink:0}.tabbar-brand[data-v-08e3ddb5]{font-size:11px;font-weight:500;color:var(--purple);letter-spacing:.5px;margin-right:12px;padding-bottom:8px}.tab-btn[data-v-08e3ddb5]{border:none;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--text3);font-size:12px;padding:6px 12px 8px;cursor:pointer;transition:color .12s,border-color .12s;display:flex;align-items:center;gap:5px}.tab-btn[data-v-08e3ddb5]:hover{color:var(--text);background:transparent}.tab-btn.active[data-v-08e3ddb5]{color:var(--purple);border-bottom-color:var(--purple)}.tab-icon[data-v-08e3ddb5]{font-size:10px;opacity:.6}.tab-content[data-v-08e3ddb5]{flex:1;overflow:hidden;display:flex;flex-direction:column}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:13px;line-height:1.5}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}button{font-family:var(--font);font-size:12px;cursor:pointer;border:.5px solid var(--border);background:transparent;color:var(--text2);padding:4px 10px;border-radius:var(--radius);transition:background .12s}button:hover{background:var(--bg2)}button:active{transform:scale(.98)}button.active{background:#7f77dd26;color:var(--purple);border-color:var(--purple)}button.danger-active{background:#e24b4a1f;color:var(--red);border-color:var(--red)}button.success-active{background:#1d9e751f;color:var(--teal);border-color:var(--teal)}input[type=text],input[type=search]{font-family:var(--font);font-size:12px;border:.5px solid var(--border);background:var(--bg2);color:var(--text);padding:5px 10px;border-radius:var(--radius);outline:none;width:100%}input[type=text]:focus,input[type=search]:focus{border-color:var(--purple);box-shadow:0 0 0 2px #7f77dd33}input[type=range]{accent-color:var(--purple);cursor:pointer}.mono{font-family:var(--mono)}.muted{color:var(--text3)}.text-sm{font-size:11px}.text-xs{font-size:10px}.bold{font-weight:500}.badge{display:inline-block;font-size:10px;font-weight:500;padding:2px 7px;border-radius:99px;white-space:nowrap}.badge-ok{background:#1d9e7526;color:var(--teal)}.badge-err{background:#e24b4a1f;color:var(--red)}.badge-warn{background:#ef9f2726;color:var(--amber)}.badge-info{background:#378add1f;color:var(--blue)}.badge-gray{background:var(--bg2);color:var(--text3);border:.5px solid var(--border)}.badge-purple{background:#7f77dd26;color:var(--purple)}.card{background:var(--bg3);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px}.data-table{width:100%;border-collapse:collapse;font-size:12px}.data-table th{text-align:left;font-size:10px;font-weight:500;color:var(--text3);padding:6px 8px;border-bottom:.5px solid var(--border);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}.data-table td{padding:8px;border-bottom:.5px solid var(--border);color:var(--text);vertical-align:middle}.data-table tr:hover td{background:var(--bg2);cursor:pointer}.data-table tr.selected td{background:#7f77dd14}.stat-card{background:var(--bg2);border-radius:var(--radius);padding:10px 12px}.stat-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}.stat-val{font-size:20px;font-weight:500}.flex{display:flex}.items-center{align-items:center}.gap-2{gap:8px}.gap-3{gap:12px}.flex-1{flex:1}.overflow-auto{overflow:auto}.p-3{padding:12px}.p-4{padding:16px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mt-2{margin-top:8px}
@@ -38,8 +38,8 @@
38
38
  body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 13px; }
39
39
  #app { height: 100vh; display: flex; flex-direction: column; }
40
40
  </style>
41
- <script type="module" crossorigin src="/assets/index-DILjvs09.js"></script>
42
- <link rel="stylesheet" crossorigin href="/assets/index-BugqFK5S.css">
41
+ <script type="module" crossorigin src="/assets/index-BFrWlkvI.js"></script>
42
+ <link rel="stylesheet" crossorigin href="/assets/index-BUQNNbrq.css">
43
43
  </head>
44
44
  <body>
45
45
  <div id="app"></div>
@@ -6,7 +6,11 @@ const { composables: rawEntries, connected, clearComposables } = useObservatoryD
6
6
 
7
7
  function clearSession() {
8
8
  const origin = getObservatoryOrigin()
9
- if (!origin) return
9
+
10
+ if (!origin) {
11
+ return
12
+ }
13
+
10
14
  clearComposables()
11
15
  window.top?.postMessage({ type: 'observatory:clear-composables' }, origin)
12
16
  }
@@ -17,17 +21,28 @@ function clearSession() {
17
21
  // same composable in different components are two separate rows.
18
22
 
19
23
  function formatVal(v: unknown): string {
20
- if (v === null) return 'null'
21
- if (v === undefined) return 'undefined'
22
- if (typeof v === 'string') return `"${v}"`
24
+ if (v === null) {
25
+ return 'null'
26
+ }
27
+
28
+ if (v === undefined) {
29
+ return 'undefined'
30
+ }
31
+
32
+ if (typeof v === 'string') {
33
+ return `"${v}"`
34
+ }
35
+
23
36
  if (typeof v === 'object') {
24
37
  try {
25
38
  const s = JSON.stringify(v)
39
+
26
40
  return s.length > 80 ? s.slice(0, 80) + '…' : s
27
41
  } catch {
28
42
  return String(v)
29
43
  }
30
44
  }
45
+
31
46
  return String(v)
32
47
  }
33
48
 
@@ -48,16 +63,37 @@ const counts = computed(() => ({
48
63
 
49
64
  const filtered = computed(() => {
50
65
  return entries.value.filter((entry) => {
51
- if (filter.value === 'leak' && !entry.leak) return false
52
- if (filter.value === 'mounted' && entry.status !== 'mounted') return false
53
- if (filter.value === 'unmounted' && entry.status !== 'unmounted') return false
66
+ if (filter.value === 'leak' && !entry.leak) {
67
+ return false
68
+ }
69
+
70
+ if (filter.value === 'mounted' && entry.status !== 'mounted') {
71
+ return false
72
+ }
73
+
74
+ if (filter.value === 'unmounted' && entry.status !== 'unmounted') {
75
+ return false
76
+ }
77
+
54
78
  const q = search.value.toLowerCase()
79
+
55
80
  if (q) {
56
81
  const matchesName = entry.name.toLowerCase().includes(q)
57
82
  const matchesFile = entry.componentFile.toLowerCase().includes(q)
58
83
  const matchesRef = Object.keys(entry.refs).some((k) => k.toLowerCase().includes(q))
59
- if (!matchesName && !matchesFile && !matchesRef) return false
84
+ const matchesVal = Object.values(entry.refs).some((v) => {
85
+ try {
86
+ return String(JSON.stringify(v.value)).toLowerCase().includes(q)
87
+ } catch {
88
+ return false
89
+ }
90
+ })
91
+
92
+ if (!matchesName && !matchesFile && !matchesRef && !matchesVal) {
93
+ return false
94
+ }
60
95
  }
96
+
61
97
  return true
62
98
  })
63
99
  })
@@ -88,10 +124,91 @@ function lifecycleRows(entry: RuntimeComposableEntry) {
88
124
  }
89
125
 
90
126
  function typeBadgeClass(type: string) {
91
- if (type === 'computed') return 'badge-info'
92
- if (type === 'reactive') return 'badge-purple'
127
+ if (type === 'computed') {
128
+ return 'badge-info'
129
+ }
130
+
131
+ if (type === 'reactive') {
132
+ return 'badge-purple'
133
+ }
134
+
93
135
  return 'badge-gray'
94
136
  }
137
+
138
+ // ── Reverse lookup ────────────────────────────────────────────────────────
139
+ // Clicking a ref key shows every mounted instance that exposes the same key.
140
+
141
+ const lookupKey = ref<string | null>(null)
142
+
143
+ const lookupResults = computed(() => {
144
+ if (!lookupKey.value) {
145
+ return []
146
+ }
147
+
148
+ const key = lookupKey.value
149
+
150
+ return entries.value.filter((e) => key in e.refs)
151
+ })
152
+
153
+ function openLookup(key: string) {
154
+ lookupKey.value = lookupKey.value === key ? null : key
155
+ }
156
+
157
+ // ── Inline editing ────────────────────────────────────────────────────────
158
+ // Only writable refs (type === 'ref') can be edited. Computed are read-only.
159
+
160
+ interface EditTarget {
161
+ id: string
162
+ key: string
163
+ rawValue: string
164
+ }
165
+
166
+ const editTarget = ref<EditTarget | null>(null)
167
+ const editError = ref('')
168
+
169
+ function openEdit(id: string, key: string, currentValue: unknown) {
170
+ editError.value = ''
171
+ editTarget.value = {
172
+ id,
173
+ key,
174
+ rawValue: JSON.stringify(currentValue, null, 2),
175
+ }
176
+ }
177
+
178
+ function applyEdit() {
179
+ if (!editTarget.value) {
180
+ return
181
+ }
182
+
183
+ let parsed: unknown
184
+
185
+ try {
186
+ parsed = JSON.parse(editTarget.value.rawValue)
187
+ editError.value = ''
188
+ } catch (err) {
189
+ editError.value = `Invalid JSON: ${(err as Error).message}`
190
+
191
+ return
192
+ }
193
+
194
+ const origin = getObservatoryOrigin()
195
+
196
+ if (!origin) {
197
+ return
198
+ }
199
+
200
+ window.top?.postMessage(
201
+ {
202
+ type: 'observatory:edit-composable',
203
+ id: editTarget.value.id,
204
+ key: editTarget.value.key,
205
+ value: parsed,
206
+ },
207
+ origin
208
+ )
209
+
210
+ editTarget.value = null
211
+ }
95
212
  </script>
96
213
 
97
214
  <template>
@@ -187,10 +304,19 @@ function typeBadgeClass(type: string) {
187
304
  no tracked state returned
188
305
  </div>
189
306
  <div v-for="[k, v] in Object.entries(entry.refs)" :key="k" class="ref-row">
190
- <span class="mono text-sm ref-key">{{ k }}</span>
307
+ <span
308
+ class="mono text-sm ref-key ref-key--clickable"
309
+ :title="`click to see all instances exposing '${k}'`"
310
+ @click.stop="openLookup(k)"
311
+ >
312
+ {{ k }}
313
+ </span>
191
314
  <span class="mono text-sm ref-val">{{ formatVal(v.value) }}</span>
192
315
  <span class="badge text-xs" :class="typeBadgeClass(v.type)">{{ v.type }}</span>
193
316
  <span v-if="entry.sharedKeys?.includes(k)" class="badge badge-amber text-xs">global</span>
317
+ <button v-if="v.type === 'ref'" class="edit-btn" title="Edit value" @click.stop="openEdit(entry.id, k, v.value)">
318
+ edit
319
+ </button>
194
320
  </div>
195
321
 
196
322
  <template v-if="entry.history && entry.history.length">
@@ -251,6 +377,47 @@ function typeBadgeClass(type: string) {
251
377
  {{ connected ? 'No composables recorded yet.' : 'Waiting for connection to the Nuxt app…' }}
252
378
  </div>
253
379
  </div>
380
+
381
+ <!-- ── Reverse lookup panel ──────────────────────────────────────── -->
382
+ <Transition name="slide">
383
+ <div v-if="lookupKey" class="lookup-panel">
384
+ <div class="lookup-header">
385
+ <span class="mono text-sm">{{ lookupKey }}</span>
386
+ <span class="muted text-sm">— {{ lookupResults.length }} instance{{ lookupResults.length !== 1 ? 's' : '' }}</span>
387
+ <button class="clear-btn" style="margin-left: auto" @click="lookupKey = null">✕</button>
388
+ </div>
389
+ <div v-if="!lookupResults.length" class="muted text-sm" style="padding: 6px 0">No mounted instances expose this key.</div>
390
+ <div v-for="r in lookupResults" :key="r.id" class="lookup-row">
391
+ <span class="mono text-sm">{{ r.name }}</span>
392
+ <span class="muted text-sm">{{ basename(r.componentFile) }}</span>
393
+ <span class="muted text-sm" style="margin-left: auto">{{ r.route }}</span>
394
+ </div>
395
+ </div>
396
+ </Transition>
397
+
398
+ <!-- ── Edit value dialog ─────────────────────────────────────────── -->
399
+ <Transition name="fade">
400
+ <div v-if="editTarget" class="edit-overlay" @click.self="editTarget = null">
401
+ <div class="edit-dialog">
402
+ <div class="edit-dialog-header">
403
+ edit
404
+ <span class="mono">{{ editTarget.key }}</span>
405
+ <button class="clear-btn" style="margin-left: auto" @click="editTarget = null">✕</button>
406
+ </div>
407
+ <p class="muted text-sm" style="padding: 4px 0 8px">
408
+ Value applied immediately to the live ref. Only
409
+ <span class="mono">ref</span>
410
+ values are writable.
411
+ </p>
412
+ <textarea v-model="editTarget.rawValue" class="edit-textarea" rows="6" spellcheck="false" />
413
+ <div v-if="editError" class="edit-error text-sm">{{ editError }}</div>
414
+ <div class="edit-actions">
415
+ <button @click="applyEdit">apply</button>
416
+ <button class="clear-btn" @click="editTarget = null">cancel</button>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </Transition>
254
421
  </div>
255
422
  </template>
256
423
 
@@ -582,4 +749,151 @@ function typeBadgeClass(type: string) {
582
749
  line-height: 1;
583
750
  color: var(--text);
584
751
  }
752
+
753
+ /* Clickable ref key */
754
+ .ref-key--clickable {
755
+ cursor: pointer;
756
+ text-decoration: underline dotted var(--text3);
757
+ text-underline-offset: 2px;
758
+ }
759
+
760
+ .ref-key--clickable:hover {
761
+ color: var(--purple);
762
+ text-decoration-color: var(--purple);
763
+ }
764
+
765
+ /* Edit button inline with ref row */
766
+ .edit-btn {
767
+ font-size: 10px;
768
+ padding: 1px 6px;
769
+ border-radius: var(--radius);
770
+ border: 0.5px solid var(--border);
771
+ background: transparent;
772
+ color: var(--text3);
773
+ cursor: pointer;
774
+ margin-left: auto;
775
+ flex-shrink: 0;
776
+ font-family: var(--mono);
777
+ }
778
+
779
+ .edit-btn:hover {
780
+ border-color: var(--purple);
781
+ color: var(--purple);
782
+ background: color-mix(in srgb, var(--purple) 8%, transparent);
783
+ }
784
+
785
+ /* Reverse lookup panel — appears below the list */
786
+ .lookup-panel {
787
+ flex-shrink: 0;
788
+ border: 0.5px solid var(--border);
789
+ border-radius: var(--radius-lg);
790
+ background: var(--bg3);
791
+ overflow: hidden;
792
+ }
793
+
794
+ .lookup-header {
795
+ display: flex;
796
+ align-items: center;
797
+ gap: 6px;
798
+ padding: 7px 12px;
799
+ border-bottom: 0.5px solid var(--border);
800
+ background: var(--bg2);
801
+ }
802
+
803
+ .lookup-row {
804
+ display: flex;
805
+ align-items: center;
806
+ gap: 8px;
807
+ padding: 5px 12px;
808
+ border-bottom: 0.5px solid var(--border);
809
+ }
810
+
811
+ .lookup-row:last-child {
812
+ border-bottom: none;
813
+ }
814
+
815
+ /* Edit overlay + dialog */
816
+ .edit-overlay {
817
+ position: fixed;
818
+ inset: 0;
819
+ background: rgba(0, 0, 0, 0.4);
820
+ z-index: 100;
821
+ display: flex;
822
+ align-items: center;
823
+ justify-content: center;
824
+ }
825
+
826
+ .edit-dialog {
827
+ background: var(--bg1, var(--bg2));
828
+ border: 0.5px solid var(--border);
829
+ border-radius: var(--radius-lg);
830
+ padding: 14px 16px;
831
+ width: 380px;
832
+ max-width: 92vw;
833
+ display: flex;
834
+ flex-direction: column;
835
+ gap: 6px;
836
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
837
+ }
838
+
839
+ .edit-dialog-header {
840
+ display: flex;
841
+ align-items: center;
842
+ gap: 6px;
843
+ font-size: 12px;
844
+ color: var(--text2);
845
+ margin-bottom: 2px;
846
+ }
847
+
848
+ .edit-textarea {
849
+ width: 100%;
850
+ font-family: var(--mono);
851
+ font-size: 12px;
852
+ padding: 8px 10px;
853
+ background: var(--bg2);
854
+ border: 0.5px solid var(--border);
855
+ border-radius: var(--radius);
856
+ color: var(--text);
857
+ resize: vertical;
858
+ outline: none;
859
+ }
860
+
861
+ .edit-textarea:focus {
862
+ border-color: var(--purple);
863
+ }
864
+
865
+ .edit-error {
866
+ color: var(--red);
867
+ font-family: var(--mono);
868
+ }
869
+
870
+ .edit-actions {
871
+ display: flex;
872
+ gap: 6px;
873
+ padding-top: 4px;
874
+ }
875
+
876
+ /* Slide / fade transitions for the panels */
877
+ .slide-enter-active,
878
+ .slide-leave-active {
879
+ transition:
880
+ opacity 0.15s,
881
+ transform 0.15s;
882
+ }
883
+
884
+ .slide-enter-from,
885
+ .slide-leave-to {
886
+ opacity: 0;
887
+ transform: translateY(6px);
888
+ }
889
+
890
+ .fade-enter-active,
891
+ .fade-leave-active {
892
+ transition: opacity 0.15s;
893
+ }
894
+
895
+ .fade-enter-from,
896
+ .fade-leave-to {
897
+ opacity: 0;
898
+ }
585
899
  </style>
@@ -0,0 +1,124 @@
1
+ <script setup lang="ts">
2
+ import { ref } from 'vue'
3
+
4
+ defineProps<{
5
+ value: unknown
6
+ compact?: boolean
7
+ }>()
8
+
9
+ const open = ref(false)
10
+
11
+ function truncate(s: string, max: number) {
12
+ return s.length > max ? s.slice(0, max) + '…' : s
13
+ }
14
+ </script>
15
+
16
+ <template>
17
+ <span class="vi">
18
+ <!-- null / undefined -->
19
+ <span v-if="value === null || value === undefined" class="vi-null">{{ String(value) }}</span>
20
+
21
+ <!-- boolean -->
22
+ <span v-else-if="typeof value === 'boolean'" class="vi-bool">{{ value }}</span>
23
+
24
+ <!-- number -->
25
+ <span v-else-if="typeof value === 'number'" class="vi-num">{{ value }}</span>
26
+
27
+ <!-- string -->
28
+ <span v-else-if="typeof value === 'string'" class="vi-str">"{{ compact ? truncate(value, 40) : value }}"</span>
29
+
30
+ <!-- array -->
31
+ <span v-else-if="Array.isArray(value)">
32
+ <span v-if="compact || !open">
33
+ <span class="vi-punc">[</span>
34
+ <span class="vi-dim">{{ value.length }} item{{ value.length !== 1 ? 's' : '' }}</span>
35
+ <span class="vi-punc">]</span>
36
+ <button v-if="!compact" class="vi-toggle" @click.stop="open = true">▸</button>
37
+ </span>
38
+ <span v-else class="vi-block">
39
+ <button class="vi-toggle" @click.stop="open = false">▾</button>
40
+ <span class="vi-punc">[</span>
41
+ <span v-for="(item, i) in value" :key="i" class="vi-indent">
42
+ <ValueInspector :value="item" />
43
+ <span v-if="i < value.length - 1" class="vi-punc">,</span>
44
+ </span>
45
+ <span class="vi-punc">]</span>
46
+ </span>
47
+ </span>
48
+
49
+ <!-- object -->
50
+ <span v-else-if="typeof value === 'object'">
51
+ <span v-if="compact || !open">
52
+ <span class="vi-punc">{</span>
53
+ <span class="vi-dim">
54
+ {{
55
+ Object.keys(value as object)
56
+ .slice(0, 3)
57
+ .join(', ')
58
+ }}{{ Object.keys(value as object).length > 3 ? '…' : '' }}
59
+ </span>
60
+ <span class="vi-punc">}</span>
61
+ <button v-if="!compact" class="vi-toggle" @click.stop="open = true">▸</button>
62
+ </span>
63
+ <span v-else class="vi-block">
64
+ <button class="vi-toggle" @click.stop="open = false">▾</button>
65
+ <span class="vi-punc">{</span>
66
+ <span v-for="(v, k, i) in value as Record<string, unknown>" :key="k" class="vi-indent">
67
+ <span class="vi-key">{{ k }}</span>
68
+ <span class="vi-punc">:</span>
69
+ <ValueInspector :value="v" />
70
+ <span v-if="i < Object.keys(value as object).length - 1" class="vi-punc">,</span>
71
+ </span>
72
+ <span class="vi-punc">}</span>
73
+ </span>
74
+ </span>
75
+
76
+ <!-- fallback -->
77
+ <span v-else class="vi-dim">{{ String(value) }}</span>
78
+ </span>
79
+ </template>
80
+
81
+ <style scoped>
82
+ .vi {
83
+ font-family: var(--font-mono);
84
+ font-size: 12px;
85
+ }
86
+ .vi-null {
87
+ color: #888;
88
+ }
89
+ .vi-bool {
90
+ color: #534ab7;
91
+ }
92
+ .vi-num {
93
+ color: #ba7517;
94
+ }
95
+ .vi-str {
96
+ color: #0f6e56;
97
+ }
98
+ .vi-key {
99
+ color: #185195;
100
+ }
101
+ .vi-punc {
102
+ color: #888;
103
+ }
104
+ .vi-dim {
105
+ color: #888;
106
+ font-style: italic;
107
+ }
108
+ .vi-toggle {
109
+ background: none;
110
+ border: none;
111
+ cursor: pointer;
112
+ font-size: 10px;
113
+ color: #888;
114
+ padding: 0 2px;
115
+ }
116
+ .vi-block {
117
+ display: inline-flex;
118
+ flex-direction: column;
119
+ }
120
+ .vi-indent {
121
+ padding-left: 12px;
122
+ display: block;
123
+ }
124
+ </style>
package/dist/module.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "compatibility": {
5
5
  "nuxt": "^3.0.0 || ^4.0.0"
6
6
  },
7
- "version": "0.1.12",
7
+ "version": "0.1.13",
8
8
  "builder": {
9
9
  "@nuxt/module-builder": "1.0.2",
10
10
  "unbuild": "3.6.1"
@@ -53,6 +53,7 @@ export declare function setupComposableRegistry(): {
53
53
  getRoute: () => string;
54
54
  update: (id: string, patch: Partial<ComposableEntry>) => void;
55
55
  getAll: () => ComposableEntry[];
56
+ editValue: (id: string, key: string, value: unknown) => void;
56
57
  };
57
58
  export declare function __trackComposable<T>(name: string, callFn: () => T, meta: {
58
59
  file: string;