gap-inspector 0.1.0

package/dist/styles.d.ts

@@ -0,0 +1 @@
+export declare const gapInspectorStyles = "\n.gi-root,\n.gi-svg {\n  --gi-chrome: #131313;\n  --gi-surface: #1a1a1a;\n  --gi-well: #0d0d0d;\n  --gi-text: #f7f7f7;\n  --gi-text-secondary: #c2c6cc;\n  --gi-text-muted: #8a9099;\n  --gi-hairline: rgba(255, 255, 255, 0.09);\n  --gi-hairline-soft: rgba(255, 255, 255, 0.05);\n  --gi-accent: #12a0f0;\n  --gi-danger: #f04438;\n  --gi-amber: #f5a623;\n  --gi-margin: #f5a623;\n  --gi-padding: #4ade80;\n  --gi-border-kind: #f87171;\n  --gi-scrollbar: #2dd4bf;\n  --gi-gap-kind: #a78bfa;\n  --gi-layout: #9ba1a8;\n  --gi-content: #12a0f0;\n  --gi-unknown: #ec4899;\n  --gi-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.06),\n    0 1px 2px rgba(0, 0, 0, 0.6),\n    0 32px 70px -16px rgba(0, 0, 0, 0.75);\n  --gi-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Inter\", sans-serif;\n  --gi-mono: ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Consolas, monospace;\n}\n\n.gi-root {\n  color: var(--gi-text);\n  font-family: var(--gi-font);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-synthesis: none;\n  position: fixed;\n  inset: 0;\n  z-index: 2147483647;\n  pointer-events: none;\n}\n\n.gi-button {\n  align-items: center;\n  background: var(--gi-chrome);\n  border: 1px solid var(--gi-hairline);\n  border-radius: 10px;\n  bottom: 18px;\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.06),\n    0 1px 2px rgba(0, 0, 0, 0.6),\n    0 12px 32px -8px rgba(0, 0, 0, 0.6);\n  color: var(--gi-text);\n  cursor: pointer;\n  display: inline-flex;\n  font: inherit;\n  font-size: 12.5px;\n  font-weight: 500;\n  gap: 8px;\n  height: 34px;\n  padding: 0 14px;\n  pointer-events: auto;\n  position: fixed;\n  right: 18px;\n  touch-action: none;\n  transition: border-color 120ms ease, background-color 120ms ease;\n}\n\n.gi-button:hover {\n  background: #181818;\n  border-color: rgba(255, 255, 255, 0.16);\n}\n\n.gi-button-mark {\n  background: var(--gi-accent);\n  border-radius: 999px;\n  box-shadow: 0 0 8px rgba(18, 160, 240, 0.8);\n  display: inline-block;\n  height: 6px;\n  width: 6px;\n}\n\n.gi-panel {\n  background: var(--gi-chrome);\n  border-radius: 14px;\n  bottom: 18px;\n  box-shadow: var(--gi-shadow);\n  display: flex;\n  flex-direction: column;\n  max-height: min(560px, calc(100vh - 36px));\n  overflow: clip;\n  padding: 4px;\n  pointer-events: auto;\n  position: fixed;\n  right: 18px;\n  width: min(400px, calc(100vw - 36px));\n}\n\n.gi-body {\n  background: var(--gi-surface);\n  border: 1px solid var(--gi-hairline);\n  border-radius: 10px;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: clip;\n}\n\n.gi-header {\n  align-items: center;\n  border-bottom: 1px solid var(--gi-hairline-soft);\n  cursor: grab;\n  display: flex;\n  flex-shrink: 0;\n  justify-content: space-between;\n  padding: 11px 11px 11px 14px;\n  touch-action: none;\n  user-select: none;\n}\n\n.gi-header:active {\n  cursor: grabbing;\n}\n\n.gi-header .gi-close {\n  cursor: pointer;\n}\n\n.gi-title {\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  line-height: 16px;\n}\n\n.gi-close {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 7px;\n  color: var(--gi-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  height: 24px;\n  justify-content: center;\n  padding: 0;\n  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;\n  width: 24px;\n}\n\n.gi-close:hover {\n  background: rgba(255, 255, 255, 0.06);\n  border-color: var(--gi-hairline);\n  color: var(--gi-text-secondary);\n}\n\n.gi-content {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 14px;\n}\n\n.gi-content::-webkit-scrollbar {\n  width: 8px;\n}\n\n.gi-content::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.12);\n  background-clip: padding-box;\n  border: 2px solid transparent;\n  border-radius: 999px;\n}\n\n.gi-empty {\n  color: var(--gi-text-muted);\n  display: flex;\n  flex-direction: column;\n  font-size: 12.5px;\n  gap: 12px;\n  line-height: 1.55;\n}\n\n.gi-empty p {\n  margin: 0;\n}\n\n.gi-hint {\n  align-items: center;\n  color: var(--gi-text-muted);\n  display: flex;\n  font-size: 12px;\n  gap: 8px;\n}\n\n.gi-kbd {\n  align-items: center;\n  background: var(--gi-well);\n  border: 1px solid var(--gi-hairline);\n  border-radius: 5px;\n  color: var(--gi-text-secondary);\n  display: inline-flex;\n  flex-shrink: 0;\n  font-size: 11px;\n  height: 18px;\n  justify-content: center;\n  line-height: 1;\n  min-width: 18px;\n  padding: 0 4px;\n}\n\n.gi-footer {\n  align-items: center;\n  display: flex;\n  flex-shrink: 0;\n  gap: 8px;\n  justify-content: flex-end;\n  padding: 8px 6px 4px;\n}\n\n.gi-ghost,\n.gi-primary {\n  appearance: none;\n  border: 0;\n  border-radius: 8px;\n  cursor: pointer;\n  font: inherit;\n  font-size: 12.5px;\n  line-height: 16px;\n  padding: 7px 12px;\n  transition: background-color 120ms ease, filter 120ms ease;\n}\n\n.gi-ghost {\n  background: transparent;\n  color: var(--gi-text-secondary);\n  font-weight: 500;\n}\n\n.gi-ghost:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n\n.gi-primary {\n  background: var(--gi-accent);\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.24),\n    0 1px 2px rgba(0, 0, 0, 0.45);\n  color: #ffffff;\n  font-weight: 600;\n}\n\n.gi-primary:hover {\n  filter: brightness(1.08);\n}\n\n.gi-primary[data-state=\"failed\"] {\n  background: var(--gi-danger);\n}\n\n.gi-report-title {\n  align-items: baseline;\n  display: flex;\n  gap: 7px;\n}\n\n.gi-metric {\n  color: var(--gi-kind-color, var(--gi-text));\n  font-family: var(--gi-mono);\n  font-size: 18px;\n  font-variant-numeric: tabular-nums;\n  font-weight: 600;\n  letter-spacing: -0.02em;\n  line-height: 22px;\n}\n\n.gi-metric-axis {\n  color: var(--gi-text-muted);\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.gi-bar {\n  display: flex;\n  gap: 2px;\n  height: 14px;\n}\n\n.gi-bar-segment {\n  background: var(--gi-kind-color, var(--gi-layout));\n  background-clip: padding-box;\n  border-block: 4px solid transparent;\n  border-radius: 6px;\n  box-sizing: border-box;\n  flex-basis: 0;\n  min-width: 3px;\n}\n\n.gi-bar-segment:hover {\n  filter: brightness(1.25);\n}\n\n.gi-bar-unattributed {\n  background: repeating-linear-gradient(\n    135deg,\n    rgba(255, 255, 255, 0.28) 0 2px,\n    rgba(255, 255, 255, 0.08) 2px 5px\n  );\n}\n\n.gi-equation {\n  background: var(--gi-well);\n  border: 1px solid var(--gi-hairline);\n  border-radius: 9px;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);\n  color: var(--gi-text);\n  font-family: var(--gi-mono);\n  font-size: 11.5px;\n  font-variant-numeric: tabular-nums;\n  line-height: 1.6;\n  overflow-wrap: anywhere;\n  padding: 9px 11px;\n}\n\n.gi-caps {\n  color: var(--gi-text-muted);\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n\n.gi-contribs {\n  display: flex;\n  flex-direction: column;\n}\n\n.gi-contribs .gi-caps {\n  margin-bottom: 2px;\n}\n\n.gi-contrib {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 9px 1px;\n}\n\n.gi-contrib + .gi-contrib {\n  border-top: 1px solid var(--gi-hairline-soft);\n}\n\n.gi-contrib:hover {\n  background: rgba(255, 255, 255, 0.03);\n}\n\n.gi-contrib-row {\n  align-items: center;\n  display: flex;\n  gap: 8px;\n}\n\n.gi-kind-label {\n  background: color-mix(in srgb, var(--gi-kind-color) 15%, transparent);\n  border-radius: 5px;\n  color: var(--gi-kind-color);\n  flex-shrink: 0;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  line-height: 1;\n  padding: 4px 6px;\n  text-transform: uppercase;\n}\n\n.gi-contrib-prop {\n  color: var(--gi-text);\n  flex: 1;\n  font-size: 12px;\n  font-weight: 500;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.gi-contrib-css {\n  color: var(--gi-text-muted);\n  font-family: var(--gi-mono);\n  font-size: 11px;\n  font-weight: 400;\n}\n\n.gi-contrib-value {\n  color: var(--gi-text);\n  flex-shrink: 0;\n  font-family: var(--gi-mono);\n  font-size: 12px;\n  font-variant-numeric: tabular-nums;\n  font-weight: 600;\n  margin-left: auto;\n}\n\n.gi-contrib-note {\n  color: var(--gi-text-muted);\n  font-size: 11.5px;\n  line-height: 1.5;\n}\n\n.gi-warning {\n  background: color-mix(in srgb, var(--gi-amber) 9%, transparent);\n  border: 1px solid color-mix(in srgb, var(--gi-amber) 28%, transparent);\n  border-radius: 9px;\n  color: #f2c069;\n  font-size: 11.5px;\n  line-height: 1.55;\n  padding: 8px 11px;\n}\n\n.gi-hovercard {\n  background: var(--gi-surface);\n  border: 1px solid var(--gi-hairline);\n  border-radius: 10px;\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.06),\n    0 8px 24px rgba(0, 0, 0, 0.55);\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 10px 11px;\n  pointer-events: none;\n  position: fixed;\n  z-index: 10;\n}\n\n.gi-hovercard-row {\n  align-items: center;\n  display: flex;\n  gap: 8px;\n}\n\n.gi-hovercard-prop {\n  color: var(--gi-text);\n  flex: 1;\n  font-size: 12px;\n  font-weight: 500;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.gi-hovercard-value {\n  color: var(--gi-text);\n  flex-shrink: 0;\n  font-family: var(--gi-mono);\n  font-size: 12px;\n  font-variant-numeric: tabular-nums;\n  font-weight: 600;\n}\n\n.gi-hovercard-selector {\n  color: #dfe2e6;\n  font-family: var(--gi-mono);\n  font-size: 10.5px;\n  line-height: 1.5;\n  overflow-wrap: anywhere;\n}\n\n.gi-hovercard-meta {\n  color: var(--gi-text-muted);\n  font-family: var(--gi-mono);\n  font-size: 10.5px;\n}\n\n.gi-hovercard-note {\n  color: var(--gi-text-muted);\n  font-size: 11px;\n  line-height: 1.5;\n}\n\n.gi-canvas {\n  cursor: crosshair;\n  inset: 0;\n  pointer-events: auto;\n  position: fixed;\n  touch-action: none;\n}\n\n.gi-canvas[data-passthrough=\"true\"] {\n  pointer-events: none;\n}\n\n.gi-svg {\n  left: 0;\n  overflow: visible;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  z-index: 2147483646;\n}\n\n.gi-line {\n  stroke: var(--gi-accent);\n  stroke-dasharray: 5 5;\n  stroke-linecap: round;\n  stroke-width: 1.5;\n}\n\n.gi-gap-band {\n  fill: rgba(18, 160, 240, 0.16);\n  stroke: rgba(18, 160, 240, 0.8);\n  stroke-width: 1;\n}\n\n.gi-preview-gap {\n  fill: rgba(18, 160, 240, 0.1);\n  stroke-dasharray: 4 4;\n}\n\n.gi-element-box {\n  fill: rgba(18, 160, 240, 0.06);\n  stroke: rgba(18, 160, 240, 0.85);\n  stroke-width: 1;\n}\n\n.gi-preview-box {\n  fill: rgba(18, 160, 240, 0.03);\n  stroke-dasharray: 7 4;\n}\n\n.gi-contributor-box {\n  fill: color-mix(in srgb, var(--gi-kind-color) 38%, transparent);\n  stroke: color-mix(in srgb, var(--gi-kind-color) 85%, transparent);\n  stroke-width: 1;\n}\n\n.gi-preview-contributor {\n  opacity: 0.62;\n}\n\n.gi-series-box {\n  fill: color-mix(in srgb, var(--gi-kind-color) 5%, transparent);\n  opacity: 0.34;\n  stroke: var(--gi-kind-color);\n  stroke-dasharray: 2 6;\n  stroke-width: 1;\n}\n\n.gi-preview-series {\n  opacity: 0.2;\n}\n\n.gi-edge-marker {\n  fill: var(--gi-accent);\n  stroke: none;\n}\n\n.gi-preview-edge {\n  fill: rgba(18, 160, 240, 0.85);\n}\n\n.gi-from-edge {\n  opacity: 0.92;\n}\n\n.gi-to-edge {\n  opacity: 0.92;\n}\n\n.gi-kind-margin {\n  --gi-kind-color: var(--gi-margin);\n}\n\n.gi-kind-padding {\n  --gi-kind-color: var(--gi-padding);\n}\n\n.gi-kind-border {\n  --gi-kind-color: var(--gi-border-kind);\n}\n\n.gi-kind-scrollbar {\n  --gi-kind-color: var(--gi-scrollbar);\n}\n\n.gi-kind-gap {\n  --gi-kind-color: var(--gi-gap-kind);\n}\n\n.gi-kind-layout {\n  --gi-kind-color: var(--gi-layout);\n}\n\n.gi-kind-content {\n  --gi-kind-color: var(--gi-content);\n}\n\n.gi-kind-unknown {\n  --gi-kind-color: var(--gi-unknown);\n}\n\n.gi-hover-box {\n  fill: color-mix(in srgb, var(--gi-kind-color) 35%, transparent);\n  stroke: var(--gi-kind-color);\n  stroke-width: 1.5;\n}\n\n.gi-point-region {\n  fill: color-mix(in srgb, var(--gi-kind-color) 20%, transparent);\n  stroke: var(--gi-kind-color);\n  stroke-dasharray: 5 3;\n  stroke-width: 1.5;\n}\n\n.gi-point-dot {\n  fill: var(--gi-kind-color);\n  stroke: #131313;\n  stroke-width: 2;\n}\n";

package/dist/styles.js

@@ -0,0 +1,620 @@
+export const gapInspectorStyles = `
+.gi-root,
+.gi-svg {
+  --gi-chrome: #131313;
+  --gi-surface: #1a1a1a;
+  --gi-well: #0d0d0d;
+  --gi-text: #f7f7f7;
+  --gi-text-secondary: #c2c6cc;
+  --gi-text-muted: #8a9099;
+  --gi-hairline: rgba(255, 255, 255, 0.09);
+  --gi-hairline-soft: rgba(255, 255, 255, 0.05);
+  --gi-accent: #12a0f0;
+  --gi-danger: #f04438;
+  --gi-amber: #f5a623;
+  --gi-margin: #f5a623;
+  --gi-padding: #4ade80;
+  --gi-border-kind: #f87171;
+  --gi-scrollbar: #2dd4bf;
+  --gi-gap-kind: #a78bfa;
+  --gi-layout: #9ba1a8;
+  --gi-content: #12a0f0;
+  --gi-unknown: #ec4899;
+  --gi-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    0 1px 2px rgba(0, 0, 0, 0.6),
+    0 32px 70px -16px rgba(0, 0, 0, 0.75);
+  --gi-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
+  --gi-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+}
+
+.gi-root {
+  color: var(--gi-text);
+  font-family: var(--gi-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-synthesis: none;
+  position: fixed;
+  inset: 0;
+  z-index: 2147483647;
+  pointer-events: none;
+}
+
+.gi-button {
+  align-items: center;
+  background: var(--gi-chrome);
+  border: 1px solid var(--gi-hairline);
+  border-radius: 10px;
+  bottom: 18px;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    0 1px 2px rgba(0, 0, 0, 0.6),
+    0 12px 32px -8px rgba(0, 0, 0, 0.6);
+  color: var(--gi-text);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: 12.5px;
+  font-weight: 500;
+  gap: 8px;
+  height: 34px;
+  padding: 0 14px;
+  pointer-events: auto;
+  position: fixed;
+  right: 18px;
+  touch-action: none;
+  transition: border-color 120ms ease, background-color 120ms ease;
+}
+
+.gi-button:hover {
+  background: #181818;
+  border-color: rgba(255, 255, 255, 0.16);
+}
+
+.gi-button-mark {
+  background: var(--gi-accent);
+  border-radius: 999px;
+  box-shadow: 0 0 8px rgba(18, 160, 240, 0.8);
+  display: inline-block;
+  height: 6px;
+  width: 6px;
+}
+
+.gi-panel {
+  background: var(--gi-chrome);
+  border-radius: 14px;
+  bottom: 18px;
+  box-shadow: var(--gi-shadow);
+  display: flex;
+  flex-direction: column;
+  max-height: min(560px, calc(100vh - 36px));
+  overflow: clip;
+  padding: 4px;
+  pointer-events: auto;
+  position: fixed;
+  right: 18px;
+  width: min(400px, calc(100vw - 36px));
+}
+
+.gi-body {
+  background: var(--gi-surface);
+  border: 1px solid var(--gi-hairline);
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: clip;
+}
+
+.gi-header {
+  align-items: center;
+  border-bottom: 1px solid var(--gi-hairline-soft);
+  cursor: grab;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: space-between;
+  padding: 11px 11px 11px 14px;
+  touch-action: none;
+  user-select: none;
+}
+
+.gi-header:active {
+  cursor: grabbing;
+}
+
+.gi-header .gi-close {
+  cursor: pointer;
+}
+
+.gi-title {
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 16px;
+}
+
+.gi-close {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  color: var(--gi-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  height: 24px;
+  justify-content: center;
+  padding: 0;
+  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
+  width: 24px;
+}
+
+.gi-close:hover {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: var(--gi-hairline);
+  color: var(--gi-text-secondary);
+}
+
+.gi-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 14px;
+}
+
+.gi-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.gi-content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.12);
+  background-clip: padding-box;
+  border: 2px solid transparent;
+  border-radius: 999px;
+}
+
+.gi-empty {
+  color: var(--gi-text-muted);
+  display: flex;
+  flex-direction: column;
+  font-size: 12.5px;
+  gap: 12px;
+  line-height: 1.55;
+}
+
+.gi-empty p {
+  margin: 0;
+}
+
+.gi-hint {
+  align-items: center;
+  color: var(--gi-text-muted);
+  display: flex;
+  font-size: 12px;
+  gap: 8px;
+}
+
+.gi-kbd {
+  align-items: center;
+  background: var(--gi-well);
+  border: 1px solid var(--gi-hairline);
+  border-radius: 5px;
+  color: var(--gi-text-secondary);
+  display: inline-flex;
+  flex-shrink: 0;
+  font-size: 11px;
+  height: 18px;
+  justify-content: center;
+  line-height: 1;
+  min-width: 18px;
+  padding: 0 4px;
+}
+
+.gi-footer {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+  justify-content: flex-end;
+  padding: 8px 6px 4px;
+}
+
+.gi-ghost,
+.gi-primary {
+  appearance: none;
+  border: 0;
+  border-radius: 8px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 12.5px;
+  line-height: 16px;
+  padding: 7px 12px;
+  transition: background-color 120ms ease, filter 120ms ease;
+}
+
+.gi-ghost {
+  background: transparent;
+  color: var(--gi-text-secondary);
+  font-weight: 500;
+}
+
+.gi-ghost:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.gi-primary {
+  background: var(--gi-accent);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.24),
+    0 1px 2px rgba(0, 0, 0, 0.45);
+  color: #ffffff;
+  font-weight: 600;
+}
+
+.gi-primary:hover {
+  filter: brightness(1.08);
+}
+
+.gi-primary[data-state="failed"] {
+  background: var(--gi-danger);
+}
+
+.gi-report-title {
+  align-items: baseline;
+  display: flex;
+  gap: 7px;
+}
+
+.gi-metric {
+  color: var(--gi-kind-color, var(--gi-text));
+  font-family: var(--gi-mono);
+  font-size: 18px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  line-height: 22px;
+}
+
+.gi-metric-axis {
+  color: var(--gi-text-muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.gi-bar {
+  display: flex;
+  gap: 2px;
+  height: 14px;
+}
+
+.gi-bar-segment {
+  background: var(--gi-kind-color, var(--gi-layout));
+  background-clip: padding-box;
+  border-block: 4px solid transparent;
+  border-radius: 6px;
+  box-sizing: border-box;
+  flex-basis: 0;
+  min-width: 3px;
+}
+
+.gi-bar-segment:hover {
+  filter: brightness(1.25);
+}
+
+.gi-bar-unattributed {
+  background: repeating-linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.28) 0 2px,
+    rgba(255, 255, 255, 0.08) 2px 5px
+  );
+}
+
+.gi-equation {
+  background: var(--gi-well);
+  border: 1px solid var(--gi-hairline);
+  border-radius: 9px;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+  color: var(--gi-text);
+  font-family: var(--gi-mono);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+  padding: 9px 11px;
+}
+
+.gi-caps {
+  color: var(--gi-text-muted);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.gi-contribs {
+  display: flex;
+  flex-direction: column;
+}
+
+.gi-contribs .gi-caps {
+  margin-bottom: 2px;
+}
+
+.gi-contrib {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 9px 1px;
+}
+
+.gi-contrib + .gi-contrib {
+  border-top: 1px solid var(--gi-hairline-soft);
+}
+
+.gi-contrib:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.gi-contrib-row {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+}
+
+.gi-kind-label {
+  background: color-mix(in srgb, var(--gi-kind-color) 15%, transparent);
+  border-radius: 5px;
+  color: var(--gi-kind-color);
+  flex-shrink: 0;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  line-height: 1;
+  padding: 4px 6px;
+  text-transform: uppercase;
+}
+
+.gi-contrib-prop {
+  color: var(--gi-text);
+  flex: 1;
+  font-size: 12px;
+  font-weight: 500;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.gi-contrib-css {
+  color: var(--gi-text-muted);
+  font-family: var(--gi-mono);
+  font-size: 11px;
+  font-weight: 400;
+}
+
+.gi-contrib-value {
+  color: var(--gi-text);
+  flex-shrink: 0;
+  font-family: var(--gi-mono);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  margin-left: auto;
+}
+
+.gi-contrib-note {
+  color: var(--gi-text-muted);
+  font-size: 11.5px;
+  line-height: 1.5;
+}
+
+.gi-warning {
+  background: color-mix(in srgb, var(--gi-amber) 9%, transparent);
+  border: 1px solid color-mix(in srgb, var(--gi-amber) 28%, transparent);
+  border-radius: 9px;
+  color: #f2c069;
+  font-size: 11.5px;
+  line-height: 1.55;
+  padding: 8px 11px;
+}
+
+.gi-hovercard {
+  background: var(--gi-surface);
+  border: 1px solid var(--gi-hairline);
+  border-radius: 10px;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    0 8px 24px rgba(0, 0, 0, 0.55);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 11px;
+  pointer-events: none;
+  position: fixed;
+  z-index: 10;
+}
+
+.gi-hovercard-row {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+}
+
+.gi-hovercard-prop {
+  color: var(--gi-text);
+  flex: 1;
+  font-size: 12px;
+  font-weight: 500;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.gi-hovercard-value {
+  color: var(--gi-text);
+  flex-shrink: 0;
+  font-family: var(--gi-mono);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+.gi-hovercard-selector {
+  color: #dfe2e6;
+  font-family: var(--gi-mono);
+  font-size: 10.5px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.gi-hovercard-meta {
+  color: var(--gi-text-muted);
+  font-family: var(--gi-mono);
+  font-size: 10.5px;
+}
+
+.gi-hovercard-note {
+  color: var(--gi-text-muted);
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.gi-canvas {
+  cursor: crosshair;
+  inset: 0;
+  pointer-events: auto;
+  position: fixed;
+  touch-action: none;
+}
+
+.gi-canvas[data-passthrough="true"] {
+  pointer-events: none;
+}
+
+.gi-svg {
+  left: 0;
+  overflow: visible;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  z-index: 2147483646;
+}
+
+.gi-line {
+  stroke: var(--gi-accent);
+  stroke-dasharray: 5 5;
+  stroke-linecap: round;
+  stroke-width: 1.5;
+}
+
+.gi-gap-band {
+  fill: rgba(18, 160, 240, 0.16);
+  stroke: rgba(18, 160, 240, 0.8);
+  stroke-width: 1;
+}
+
+.gi-preview-gap {
+  fill: rgba(18, 160, 240, 0.1);
+  stroke-dasharray: 4 4;
+}
+
+.gi-element-box {
+  fill: rgba(18, 160, 240, 0.06);
+  stroke: rgba(18, 160, 240, 0.85);
+  stroke-width: 1;
+}
+
+.gi-preview-box {
+  fill: rgba(18, 160, 240, 0.03);
+  stroke-dasharray: 7 4;
+}
+
+.gi-contributor-box {
+  fill: color-mix(in srgb, var(--gi-kind-color) 38%, transparent);
+  stroke: color-mix(in srgb, var(--gi-kind-color) 85%, transparent);
+  stroke-width: 1;
+}
+
+.gi-preview-contributor {
+  opacity: 0.62;
+}
+
+.gi-series-box {
+  fill: color-mix(in srgb, var(--gi-kind-color) 5%, transparent);
+  opacity: 0.34;
+  stroke: var(--gi-kind-color);
+  stroke-dasharray: 2 6;
+  stroke-width: 1;
+}
+
+.gi-preview-series {
+  opacity: 0.2;
+}
+
+.gi-edge-marker {
+  fill: var(--gi-accent);
+  stroke: none;
+}
+
+.gi-preview-edge {
+  fill: rgba(18, 160, 240, 0.85);
+}
+
+.gi-from-edge {
+  opacity: 0.92;
+}
+
+.gi-to-edge {
+  opacity: 0.92;
+}
+
+.gi-kind-margin {
+  --gi-kind-color: var(--gi-margin);
+}
+
+.gi-kind-padding {
+  --gi-kind-color: var(--gi-padding);
+}
+
+.gi-kind-border {
+  --gi-kind-color: var(--gi-border-kind);
+}
+
+.gi-kind-scrollbar {
+  --gi-kind-color: var(--gi-scrollbar);
+}
+
+.gi-kind-gap {
+  --gi-kind-color: var(--gi-gap-kind);
+}
+
+.gi-kind-layout {
+  --gi-kind-color: var(--gi-layout);
+}
+
+.gi-kind-content {
+  --gi-kind-color: var(--gi-content);
+}
+
+.gi-kind-unknown {
+  --gi-kind-color: var(--gi-unknown);
+}
+
+.gi-hover-box {
+  fill: color-mix(in srgb, var(--gi-kind-color) 35%, transparent);
+  stroke: var(--gi-kind-color);
+  stroke-width: 1.5;
+}
+
+.gi-point-region {
+  fill: color-mix(in srgb, var(--gi-kind-color) 20%, transparent);
+  stroke: var(--gi-kind-color);
+  stroke-dasharray: 5 3;
+  stroke-width: 1.5;
+}
+
+.gi-point-dot {
+  fill: var(--gi-kind-color);
+  stroke: #131313;
+  stroke-width: 2;
+}
+`;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "gap-inspector",
+  "version": "0.1.0",
+  "description": "A React dev overlay that measures visual gaps and explains the CSS/layout contributions behind them.",
+  "license": "MIT",
+  "author": "Bence Redmond <bence@carboncopy.inc>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bencered/gap-inspector.git",
+    "directory": "packages/gap-inspector"
+  },
+  "homepage": "https://github.com/bencered/gap-inspector#readme",
+  "bugs": "https://github.com/bencered/gap-inspector/issues",
+  "keywords": [
+    "react",
+    "devtools",
+    "css",
+    "layout",
+    "spacing",
+    "gap",
+    "measurement",
+    "overlay",
+    "debugging"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "prepublishOnly": "pnpm build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.5",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "typescript": "^5.7.2"
+  }
+}