vite-plugin-specter 0.2.0 → 0.2.2

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.
Files changed (5) hide show
  1. package/dist/client.js +8 -2
  2. package/dist/index.cjs +8 -2
  3. package/dist/index.js +8 -2
  4. package/extension/content.js +8 -2
  5. package/package.json +16 -2
package/dist/client.js CHANGED
@@ -379,6 +379,8 @@
379
379
  return {
380
380
  el: el,
381
381
  tag: el.tagName.toLowerCase(),
382
+ id: el.id || null,
383
+ classes: Array.prototype.slice.call(el.classList).filter(function (c) { return c.indexOf('__specter') !== 0; }),
382
384
  component: getComponentName(el),
383
385
  styleKey: el.dataset ? el.dataset.style : null,
384
386
  width: Math.round(rect.width),
@@ -405,8 +407,10 @@
405
407
  function buildHumanDisplay(data) {
406
408
  var h = '';
407
409
  var id = '<span style="color:#fff">&lt;' + data.tag + '&gt;</span>';
410
+ if (data.id) id += '<span style="color:#F0B86E">#' + esc(data.id) + '</span>';
411
+ if (data.classes.length) id += '<span style="color:#5FD3C0">.' + data.classes.map(esc).join('.') + '</span>';
408
412
  if (data.component) id += ' <span style="color:#E0A3F5;font-weight:600">' + esc(data.component) + '</span>';
409
- if (data.styleKey) id += ' <span style="color:' + LABEL + '">.' + esc(data.styleKey) + '</span>';
413
+ if (data.styleKey) id += ' <span style="color:' + LABEL + '">[' + esc(data.styleKey) + ']</span>';
410
414
  id += ' <span style="color:' + LABEL + '">' + data.width + '×' + data.height + '</span>';
411
415
  h += '<div style="margin-bottom:8px">' + id + '</div>';
412
416
  if (data.text) h += '<div style="color:' + LABEL + ';font-style:italic;margin-bottom:8px">"' + esc(data.text) + (data.textTrunc ? '…' : '') + '"</div>';
@@ -429,8 +433,10 @@
429
433
  function buildLLMClipboard(data) {
430
434
  var lines = ['[Specter]'];
431
435
  var head = '<' + data.tag + '>';
436
+ if (data.id) head += '#' + data.id;
437
+ if (data.classes.length) head += '.' + data.classes.join('.');
432
438
  if (data.component) head += ' ' + data.component;
433
- if (data.styleKey) head += ' .' + data.styleKey;
439
+ if (data.styleKey) head += ' [' + data.styleKey + ']';
434
440
  head += ' ' + data.width + '×' + data.height;
435
441
  lines.push(head);
436
442
  if (data.text) lines.push('"' + data.text + (data.textTrunc ? '…' : '') + '"');
package/dist/index.cjs CHANGED
@@ -409,6 +409,8 @@ function getClientScript(options) {
409
409
  return {
410
410
  el: el,
411
411
  tag: el.tagName.toLowerCase(),
412
+ id: el.id || null,
413
+ classes: Array.prototype.slice.call(el.classList).filter(function (c) { return c.indexOf('__specter') !== 0; }),
412
414
  component: getComponentName(el),
413
415
  styleKey: el.dataset ? el.dataset.style : null,
414
416
  width: Math.round(rect.width),
@@ -435,8 +437,10 @@ function getClientScript(options) {
435
437
  function buildHumanDisplay(data) {
436
438
  var h = '';
437
439
  var id = '<span style="color:#fff">&lt;' + data.tag + '&gt;</span>';
440
+ if (data.id) id += '<span style="color:#F0B86E">#' + esc(data.id) + '</span>';
441
+ if (data.classes.length) id += '<span style="color:#5FD3C0">.' + data.classes.map(esc).join('.') + '</span>';
438
442
  if (data.component) id += ' <span style="color:#E0A3F5;font-weight:600">' + esc(data.component) + '</span>';
439
- if (data.styleKey) id += ' <span style="color:' + LABEL + '">.' + esc(data.styleKey) + '</span>';
443
+ if (data.styleKey) id += ' <span style="color:' + LABEL + '">[' + esc(data.styleKey) + ']</span>';
440
444
  id += ' <span style="color:' + LABEL + '">' + data.width + '\xD7' + data.height + '</span>';
441
445
  h += '<div style="margin-bottom:8px">' + id + '</div>';
442
446
  if (data.text) h += '<div style="color:' + LABEL + ';font-style:italic;margin-bottom:8px">"' + esc(data.text) + (data.textTrunc ? '\u2026' : '') + '"</div>';
@@ -459,8 +463,10 @@ function getClientScript(options) {
459
463
  function buildLLMClipboard(data) {
460
464
  var lines = ['[Specter]'];
461
465
  var head = '<' + data.tag + '>';
466
+ if (data.id) head += '#' + data.id;
467
+ if (data.classes.length) head += '.' + data.classes.join('.');
462
468
  if (data.component) head += ' ' + data.component;
463
- if (data.styleKey) head += ' .' + data.styleKey;
469
+ if (data.styleKey) head += ' [' + data.styleKey + ']';
464
470
  head += ' ' + data.width + '\xD7' + data.height;
465
471
  lines.push(head);
466
472
  if (data.text) lines.push('"' + data.text + (data.textTrunc ? '\u2026' : '') + '"');
package/dist/index.js CHANGED
@@ -382,6 +382,8 @@ function getClientScript(options) {
382
382
  return {
383
383
  el: el,
384
384
  tag: el.tagName.toLowerCase(),
385
+ id: el.id || null,
386
+ classes: Array.prototype.slice.call(el.classList).filter(function (c) { return c.indexOf('__specter') !== 0; }),
385
387
  component: getComponentName(el),
386
388
  styleKey: el.dataset ? el.dataset.style : null,
387
389
  width: Math.round(rect.width),
@@ -408,8 +410,10 @@ function getClientScript(options) {
408
410
  function buildHumanDisplay(data) {
409
411
  var h = '';
410
412
  var id = '<span style="color:#fff">&lt;' + data.tag + '&gt;</span>';
413
+ if (data.id) id += '<span style="color:#F0B86E">#' + esc(data.id) + '</span>';
414
+ if (data.classes.length) id += '<span style="color:#5FD3C0">.' + data.classes.map(esc).join('.') + '</span>';
411
415
  if (data.component) id += ' <span style="color:#E0A3F5;font-weight:600">' + esc(data.component) + '</span>';
412
- if (data.styleKey) id += ' <span style="color:' + LABEL + '">.' + esc(data.styleKey) + '</span>';
416
+ if (data.styleKey) id += ' <span style="color:' + LABEL + '">[' + esc(data.styleKey) + ']</span>';
413
417
  id += ' <span style="color:' + LABEL + '">' + data.width + '\xD7' + data.height + '</span>';
414
418
  h += '<div style="margin-bottom:8px">' + id + '</div>';
415
419
  if (data.text) h += '<div style="color:' + LABEL + ';font-style:italic;margin-bottom:8px">"' + esc(data.text) + (data.textTrunc ? '\u2026' : '') + '"</div>';
@@ -432,8 +436,10 @@ function getClientScript(options) {
432
436
  function buildLLMClipboard(data) {
433
437
  var lines = ['[Specter]'];
434
438
  var head = '<' + data.tag + '>';
439
+ if (data.id) head += '#' + data.id;
440
+ if (data.classes.length) head += '.' + data.classes.join('.');
435
441
  if (data.component) head += ' ' + data.component;
436
- if (data.styleKey) head += ' .' + data.styleKey;
442
+ if (data.styleKey) head += ' [' + data.styleKey + ']';
437
443
  head += ' ' + data.width + '\xD7' + data.height;
438
444
  lines.push(head);
439
445
  if (data.text) lines.push('"' + data.text + (data.textTrunc ? '\u2026' : '') + '"');
package/extension/content.js CHANGED
@@ -379,6 +379,8 @@
379
379
  return {
380
380
  el: el,
381
381
  tag: el.tagName.toLowerCase(),
382
+ id: el.id || null,
383
+ classes: Array.prototype.slice.call(el.classList).filter(function (c) { return c.indexOf('__specter') !== 0; }),
382
384
  component: getComponentName(el),
383
385
  styleKey: el.dataset ? el.dataset.style : null,
384
386
  width: Math.round(rect.width),
@@ -405,8 +407,10 @@
405
407
  function buildHumanDisplay(data) {
406
408
  var h = '';
407
409
  var id = '<span style="color:#fff">&lt;' + data.tag + '&gt;</span>';
410
+ if (data.id) id += '<span style="color:#F0B86E">#' + esc(data.id) + '</span>';
411
+ if (data.classes.length) id += '<span style="color:#5FD3C0">.' + data.classes.map(esc).join('.') + '</span>';
408
412
  if (data.component) id += ' <span style="color:#E0A3F5;font-weight:600">' + esc(data.component) + '</span>';
409
- if (data.styleKey) id += ' <span style="color:' + LABEL + '">.' + esc(data.styleKey) + '</span>';
413
+ if (data.styleKey) id += ' <span style="color:' + LABEL + '">[' + esc(data.styleKey) + ']</span>';
410
414
  id += ' <span style="color:' + LABEL + '">' + data.width + '×' + data.height + '</span>';
411
415
  h += '<div style="margin-bottom:8px">' + id + '</div>';
412
416
  if (data.text) h += '<div style="color:' + LABEL + ';font-style:italic;margin-bottom:8px">"' + esc(data.text) + (data.textTrunc ? '…' : '') + '"</div>';
@@ -429,8 +433,10 @@
429
433
  function buildLLMClipboard(data) {
430
434
  var lines = ['[Specter]'];
431
435
  var head = '<' + data.tag + '>';
436
+ if (data.id) head += '#' + data.id;
437
+ if (data.classes.length) head += '.' + data.classes.join('.');
432
438
  if (data.component) head += ' ' + data.component;
433
- if (data.styleKey) head += ' .' + data.styleKey;
439
+ if (data.styleKey) head += ' [' + data.styleKey + ']';
434
440
  head += ' ' + data.width + '×' + data.height;
435
441
  lines.push(head);
436
442
  if (data.text) lines.push('"' + data.text + (data.textTrunc ? '…' : '') + '"');
package/package.json CHANGED
@@ -1,7 +1,16 @@
1
1
  {
2
2
  "name": "vite-plugin-specter",
3
- "version": "0.2.0",
3
+ "version": "0.2.2",
4
4
  "description": "Dev-only element inspector overlay for Vite projects. Hover any element to see its styles, component name, and spacing — then copy to clipboard for AI assistants.",
5
+ "author": "Setu Kathawate <dev@setugk.com>",
6
+ "homepage": "https://github.com/setugk/vite-plugin-specter#readme",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "https://github.com/setugk/vite-plugin-specter.git"
10
+ },
11
+ "bugs": {
12
+ "url": "https://github.com/setugk/vite-plugin-specter/issues"
13
+ },
5
14
  "type": "module",
6
15
  "main": "./dist/index.cjs",
7
16
  "module": "./dist/index.js",
@@ -33,11 +42,16 @@
33
42
  },
34
43
  "keywords": [
35
44
  "vite",
45
+ "vite-plugin",
36
46
  "plugin",
37
47
  "inspector",
48
+ "element-inspector",
38
49
  "devtools",
50
+ "overlay",
39
51
  "design",
40
- "css"
52
+ "css",
53
+ "ai",
54
+ "dx"
41
55
  ],
42
56
  "license": "MIT"
43
57
  }