@skillpet/circuit 0.6.2 → 0.6.4

package/dist/circuit.esm.js

@@ -15146,8 +15146,8 @@ var _SvgFigure = class _SvgFigure {
     let [x0, y0] = this.xform(x, y);
     const fontsize = opts.fontsize ?? 14;
     let font = opts.fontfamily ?? "sans-serif";
-    if (font.toLowerCase() === "sans-serif" || font.toLowerCase() === "arial") {
-      font = "sans";
+    if (font.toLowerCase() === "sans" || font.toLowerCase() === "arial") {
+      font = "sans-serif";
     }
     const valign = opts.valign ?? "center";
     if (valign === "base") {
@@ -15159,14 +15159,13 @@ var _SvgFigure = class _SvgFigure {
     const rot = opts.rotation ?? 0;
     const transform = rot !== 0 ? ` transform="rotate(${fmt(rot)} ${fmt(x0)} ${fmt(y0)})"` : "";
     const color = opts.color ?? "black";
-    const textY = y0 - fontsize;
     let textContent;
     if (opts.textDecoration) {
       textContent = `<tspan text-decoration="${opts.textDecoration}">${escapeXml(s)}</tspan>`;
     } else {
       textContent = escapeXml(s);
     }
-    let inner2 = `<text x="${fmt(x0)}" y="${fmt(textY)}" dominant-baseline="${baseline}" fill="${escapeXml(color)}" font-size="${fmt(fontsize)}" font-family="${escapeXml(font)}" text-anchor="${anchor}"${transform}><tspan x="${fmt(x0)}" dy="${fmt(fontsize)}" dominant-baseline="${baseline}">${textContent}</tspan></text>`;
+    let inner2 = `<text x="${fmt(x0)}" y="${fmt(y0)}" dominant-baseline="${baseline}" fill="${escapeXml(color)}" font-size="${fmt(fontsize)}" font-family="${escapeXml(font)}" text-anchor="${anchor}"${transform}>${textContent}</text>`;
     if (opts.href) {
       inner2 = `<a href="${escapeXml(opts.href)}">${inner2}</a>`;
     }
@@ -17345,51 +17344,55 @@ function resolveElementColor(el) {
   const p = mergeParamsFirstWins(el.userParams, el.elmParams, el.defaults, el.dwgParams);
   return p.color ?? "black";
 }
-function getOutputAnchors(el) {
-  const pts = [];
-  const aa = el.absanchors;
-  if (aa.end) pts.push(aa.end);
-  if (aa.out && (!aa.end || !pointsClose(aa.out, aa.end, 0.01))) pts.push(aa.out);
-  return pts;
+var EXCLUDED_ANCHORS = /* @__PURE__ */ new Set([
+  "xy",
+  "center",
+  "istart",
+  "iend",
+  "mid",
+  "label",
+  "vd",
+  "vs",
+  "n1",
+  "n2",
+  "n1a",
+  "n2a"
+]);
+function isConnectionAnchor(name) {
+  return !EXCLUDED_ANCHORS.has(name);
 }
-function getInputAnchors(el) {
+function getConnectionAnchors(el) {
   const pts = [];
-  const aa = el.absanchors;
-  if (aa.start) pts.push(aa.start);
-  for (const [name, pt] of Object.entries(aa)) {
-    if (name.startsWith("in") && /^in\d+$/.test(name)) {
-      if (!aa.start || !pointsClose(pt, aa.start, 0.01)) pts.push(pt);
-    }
+  for (const [name, pt] of Object.entries(el.absanchors)) {
+    if (isConnectionAnchor(name)) pts.push(pt);
   }
   return pts;
 }
-function pointsClose(a, b, tol) {
-  return Math.hypot(a.x - b.x, a.y - b.y) <= tol;
-}
 function buildConnectionGraph(elements) {
   const edges = [];
   const seen = /* @__PURE__ */ new Set();
   const tol = 0.5;
   for (let i = 0; i < elements.length; i++) {
-    const fromEl = elements[i];
-    const fromPts = getOutputAnchors(fromEl);
-    if (fromPts.length === 0) continue;
-    const fromColor = resolveElementColor(fromEl);
-    for (let j = 0; j < elements.length; j++) {
-      if (i === j) continue;
-      const toEl = elements[j];
-      const toPts = getInputAnchors(toEl);
-      if (toPts.length === 0) continue;
-      const toColor = resolveElementColor(toEl);
-      if (colorsEqual(fromColor, toColor)) continue;
-      for (const fp of fromPts) {
-        for (const tp of toPts) {
-          if (!pointsClose(fp, tp, tol)) continue;
+    const elA = elements[i];
+    const colorA = resolveElementColor(elA);
+    const anchorsA = getConnectionAnchors(elA);
+    if (anchorsA.length === 0) continue;
+    for (let j = i + 1; j < elements.length; j++) {
+      const elB = elements[j];
+      const colorB = resolveElementColor(elB);
+      if (colorsEqual(colorA, colorB)) continue;
+      const anchorsB = getConnectionAnchors(elB);
+      if (anchorsB.length === 0) continue;
+      for (const pa of anchorsA) {
+        for (const pb of anchorsB) {
+          if (Math.hypot(pa.x - pb.x, pa.y - pb.y) > tol) continue;
           const key = `${i}|${j}`;
           if (seen.has(key)) continue;
           seen.add(key);
-          edges.push({ fromEl, toEl, fromColor, toColor, junctionPt: fp });
+          edges.push({ elA, elB, colorA, colorB, junctionPt: pa });
+          break;
         }
+        if (seen.has(`${i}|${j}`)) break;
       }
     }
   }
@@ -17405,26 +17408,28 @@ function assignLeadTransitionIds(elements, edges, scale) {
   const cleanups = [];
   let n = 0;
   for (const edge of edges) {
-    const lead2Seg = findLeadSegmentFor(edge.fromEl, "out", edge.junctionPt);
-    const lead1Seg = findLeadSegmentFor(edge.toEl, "in", edge.junctionPt);
-    if (!lead2Seg && !lead1Seg) continue;
-    if (lead2Seg?.gradientStrokeId && lead1Seg?.gradientStrokeId) continue;
+    const segA = findSegAtJunction(edge.elA, edge.junctionPt);
+    const segB = findSegAtJunction(edge.elB, edge.junctionPt);
+    if (!segA && !segB) continue;
+    if (segA?.gradientStrokeId && segB?.gradientStrokeId) continue;
     let gx1, gy1, gx2, gy2;
-    if (lead2Seg && lead1Seg) {
-      const from = segEndpointsSvg(edge.fromEl, lead2Seg, scale);
-      const to = segEndpointsSvg(edge.toEl, lead1Seg, scale);
-      gx1 = from.x1;
-      gy1 = from.y1;
-      gx2 = to.x2;
-      gy2 = to.y2;
-    } else if (lead2Seg) {
-      const c = segEndpointsSvg(edge.fromEl, lead2Seg, scale);
+    if (segA && segB) {
+      const a = segEndpointsSvg(edge.elA, segA, scale);
+      const b = segEndpointsSvg(edge.elB, segB, scale);
+      const aNear = nearFarSvg(edge.elA, segA, edge.junctionPt, scale);
+      const bNear = nearFarSvg(edge.elB, segB, edge.junctionPt, scale);
+      gx1 = aNear.farX;
+      gy1 = aNear.farY;
+      gx2 = bNear.farX;
+      gy2 = bNear.farY;
+    } else if (segA) {
+      const c = segEndpointsSvg(edge.elA, segA, scale);
       gx1 = c.x1;
       gy1 = c.y1;
       gx2 = c.x2;
       gy2 = c.y2;
     } else {
-      const c = segEndpointsSvg(edge.toEl, lead1Seg, scale);
+      const c = segEndpointsSvg(edge.elB, segB, scale);
       gx1 = c.x1;
       gy1 = c.y1;
       gx2 = c.x2;
@@ -17432,17 +17437,17 @@ function assignLeadTransitionIds(elements, edges, scale) {
     }
     if (gradientVectorLength({ x1: gx1, y1: gy1, x2: gx2, y2: gy2 }) < 1e-6) continue;
     const id = `sd-trans-${n++}`;
-    parts.push(gradientXml(id, gx1, gy1, gx2, gy2, edge.fromColor, edge.toColor));
-    if (lead2Seg && !lead2Seg.gradientStrokeId) {
-      lead2Seg.gradientStrokeId = id;
+    parts.push(gradientXml(id, gx1, gy1, gx2, gy2, edge.colorA, edge.colorB));
+    if (segA && !segA.gradientStrokeId) {
+      segA.gradientStrokeId = id;
       cleanups.push(() => {
-        lead2Seg.gradientStrokeId = void 0;
+        segA.gradientStrokeId = void 0;
       });
     }
-    if (lead1Seg && !lead1Seg.gradientStrokeId) {
-      lead1Seg.gradientStrokeId = id;
+    if (segB && !segB.gradientStrokeId) {
+      segB.gradientStrokeId = id;
       cleanups.push(() => {
-        lead1Seg.gradientStrokeId = void 0;
+        segB.gradientStrokeId = void 0;
       });
     }
   }
@@ -17453,26 +17458,21 @@ function assignLeadTransitionIds(elements, edges, scale) {
     }
   };
 }
-function findLeadSegmentFor(el, side, junctionPt) {
-  const role = side === "in" ? "lead1" : "lead2";
+function findSegAtJunction(el, junctionPt) {
+  const tol = 0.6;
   for (const s of el.segments) {
-    if (s instanceof Segment && s.role === role) return s;
+    if (!(s instanceof Segment)) continue;
+    if (s.role !== "lead1" && s.role !== "lead2") continue;
+    if (segTouchesPoint(el, s, junctionPt, tol)) return s;
   }
-  return findSegmentNearPoint(el, junctionPt);
-}
-function findSegmentNearPoint(el, absPt) {
   let best;
   let bestDist = Infinity;
-  const tol = 0.6;
   for (const s of el.segments) {
     if (!(s instanceof Segment)) continue;
     if (s.path.length < 2) continue;
     if (s.role === "body") continue;
-    const p0 = el.transform.transform(s.path[0]);
-    const pN = el.transform.transform(s.path[s.path.length - 1]);
-    const d0 = Math.hypot(p0.x - absPt.x, p0.y - absPt.y);
-    const dN = Math.hypot(pN.x - absPt.x, pN.y - absPt.y);
-    const d = Math.min(d0, dN);
+    if (s.path.length > 6) continue;
+    const d = segDistToPoint(el, s, junctionPt);
     if (d < bestDist && d < tol) {
       bestDist = d;
       best = s;
@@ -17480,6 +17480,25 @@ function findSegmentNearPoint(el, absPt) {
   }
   return best;
 }
+function segTouchesPoint(el, seg, absPt, tol) {
+  return segDistToPoint(el, seg, absPt) < tol;
+}
+function segDistToPoint(el, seg, absPt) {
+  const p0 = el.transform.transform(seg.path[0]);
+  const pN = el.transform.transform(seg.path[seg.path.length - 1]);
+  return Math.min(
+    Math.hypot(p0.x - absPt.x, p0.y - absPt.y),
+    Math.hypot(pN.x - absPt.x, pN.y - absPt.y)
+  );
+}
+function nearFarSvg(el, seg, junctionPt, scale) {
+  const p0 = el.transform.transform(seg.path[0]);
+  const pN = el.transform.transform(seg.path[seg.path.length - 1]);
+  const d0 = Math.hypot(p0.x - junctionPt.x, p0.y - junctionPt.y);
+  const dN = Math.hypot(pN.x - junctionPt.x, pN.y - junctionPt.y);
+  const far = d0 > dN ? p0 : pN;
+  return { farX: far.x * scale, farY: -far.y * scale };
+}
 function segEndpointsSvg(el, seg, scale) {
   const p0 = el.transform.transform(seg.path[0]);
   const p1 = el.transform.transform(seg.path[seg.path.length - 1]);

package/dist/drawing-transition.d.ts

@@ -8,19 +8,19 @@
 import type { Element } from "./element.js";
 import { Point } from "./geometry/point.js";
 interface ConnectionEdge {
-    fromEl: Element;
-    toEl: Element;
-    fromColor: string;
-    toColor: string;
-    /** The absolute point where the connection occurs. */
+    elA: Element;
+    elB: Element;
+    colorA: string;
+    colorB: string;
+    /** The absolute point where the two elements meet. */
     junctionPt: Point;
 }
 /**
- * Find directed pairs (fromEl → toEl) where an output anchor of fromEl meets
- * an input anchor of toEl (within tolerance) and resolved stroke colors differ.
+ * Find pairs of elements that share a connection point (any pin anchor within
+ * tolerance) and have different resolved colors.
  *
- * Checks end/out → start/in1/in2/… to support both two-terminal chains
- * and multi-terminal elements (logic gates, opamps, etc.).
+ * Checks pin-level anchors (start, end, out, in1, in2, base, collector, etc.)
+ * so connections via named pins on multi-terminal elements are detected.
  */
 export declare function buildConnectionGraph(elements: readonly Element[]): ConnectionEdge[];
 /**

package/dist/index.cjs

@@ -15533,8 +15533,8 @@ var _SvgFigure = class _SvgFigure {
     let [x0, y0] = this.xform(x, y);
     const fontsize = opts.fontsize ?? 14;
     let font = opts.fontfamily ?? "sans-serif";
-    if (font.toLowerCase() === "sans-serif" || font.toLowerCase() === "arial") {
-      font = "sans";
+    if (font.toLowerCase() === "sans" || font.toLowerCase() === "arial") {
+      font = "sans-serif";
     }
     const valign = opts.valign ?? "center";
     if (valign === "base") {
@@ -15546,14 +15546,13 @@ var _SvgFigure = class _SvgFigure {
     const rot = opts.rotation ?? 0;
     const transform = rot !== 0 ? ` transform="rotate(${fmt(rot)} ${fmt(x0)} ${fmt(y0)})"` : "";
     const color = opts.color ?? "black";
-    const textY = y0 - fontsize;
     let textContent;
     if (opts.textDecoration) {
       textContent = `<tspan text-decoration="${opts.textDecoration}">${escapeXml(s)}</tspan>`;
     } else {
       textContent = escapeXml(s);
     }
-    let inner2 = `<text x="${fmt(x0)}" y="${fmt(textY)}" dominant-baseline="${baseline}" fill="${escapeXml(color)}" font-size="${fmt(fontsize)}" font-family="${escapeXml(font)}" text-anchor="${anchor}"${transform}><tspan x="${fmt(x0)}" dy="${fmt(fontsize)}" dominant-baseline="${baseline}">${textContent}</tspan></text>`;
+    let inner2 = `<text x="${fmt(x0)}" y="${fmt(y0)}" dominant-baseline="${baseline}" fill="${escapeXml(color)}" font-size="${fmt(fontsize)}" font-family="${escapeXml(font)}" text-anchor="${anchor}"${transform}>${textContent}</text>`;
     if (opts.href) {
       inner2 = `<a href="${escapeXml(opts.href)}">${inner2}</a>`;
     }
@@ -17732,51 +17731,55 @@ function resolveElementColor(el) {
   const p = mergeParamsFirstWins(el.userParams, el.elmParams, el.defaults, el.dwgParams);
   return p.color ?? "black";
 }
-function getOutputAnchors(el) {
-  const pts = [];
-  const aa = el.absanchors;
-  if (aa.end) pts.push(aa.end);
-  if (aa.out && (!aa.end || !pointsClose(aa.out, aa.end, 0.01))) pts.push(aa.out);
-  return pts;
+var EXCLUDED_ANCHORS = /* @__PURE__ */ new Set([
+  "xy",
+  "center",
+  "istart",
+  "iend",
+  "mid",
+  "label",
+  "vd",
+  "vs",
+  "n1",
+  "n2",
+  "n1a",
+  "n2a"
+]);
+function isConnectionAnchor(name) {
+  return !EXCLUDED_ANCHORS.has(name);
 }
-function getInputAnchors(el) {
+function getConnectionAnchors(el) {
   const pts = [];
-  const aa = el.absanchors;
-  if (aa.start) pts.push(aa.start);
-  for (const [name, pt] of Object.entries(aa)) {
-    if (name.startsWith("in") && /^in\d+$/.test(name)) {
-      if (!aa.start || !pointsClose(pt, aa.start, 0.01)) pts.push(pt);
-    }
+  for (const [name, pt] of Object.entries(el.absanchors)) {
+    if (isConnectionAnchor(name)) pts.push(pt);
   }
   return pts;
 }
-function pointsClose(a, b, tol) {
-  return Math.hypot(a.x - b.x, a.y - b.y) <= tol;
-}
 function buildConnectionGraph(elements) {
   const edges = [];
   const seen = /* @__PURE__ */ new Set();
   const tol = 0.5;
   for (let i = 0; i < elements.length; i++) {
-    const fromEl = elements[i];
-    const fromPts = getOutputAnchors(fromEl);
-    if (fromPts.length === 0) continue;
-    const fromColor = resolveElementColor(fromEl);
-    for (let j = 0; j < elements.length; j++) {
-      if (i === j) continue;
-      const toEl = elements[j];
-      const toPts = getInputAnchors(toEl);
-      if (toPts.length === 0) continue;
-      const toColor = resolveElementColor(toEl);
-      if (colorsEqual(fromColor, toColor)) continue;
-      for (const fp of fromPts) {
-        for (const tp of toPts) {
-          if (!pointsClose(fp, tp, tol)) continue;
+    const elA = elements[i];
+    const colorA = resolveElementColor(elA);
+    const anchorsA = getConnectionAnchors(elA);
+    if (anchorsA.length === 0) continue;
+    for (let j = i + 1; j < elements.length; j++) {
+      const elB = elements[j];
+      const colorB = resolveElementColor(elB);
+      if (colorsEqual(colorA, colorB)) continue;
+      const anchorsB = getConnectionAnchors(elB);
+      if (anchorsB.length === 0) continue;
+      for (const pa of anchorsA) {
+        for (const pb of anchorsB) {
+          if (Math.hypot(pa.x - pb.x, pa.y - pb.y) > tol) continue;
           const key = `${i}|${j}`;
           if (seen.has(key)) continue;
           seen.add(key);
-          edges.push({ fromEl, toEl, fromColor, toColor, junctionPt: fp });
+          edges.push({ elA, elB, colorA, colorB, junctionPt: pa });
+          break;
         }
+        if (seen.has(`${i}|${j}`)) break;
       }
     }
   }
@@ -17792,26 +17795,28 @@ function assignLeadTransitionIds(elements, edges, scale) {
   const cleanups = [];
   let n = 0;
   for (const edge of edges) {
-    const lead2Seg = findLeadSegmentFor(edge.fromEl, "out", edge.junctionPt);
-    const lead1Seg = findLeadSegmentFor(edge.toEl, "in", edge.junctionPt);
-    if (!lead2Seg && !lead1Seg) continue;
-    if (lead2Seg?.gradientStrokeId && lead1Seg?.gradientStrokeId) continue;
+    const segA = findSegAtJunction(edge.elA, edge.junctionPt);
+    const segB = findSegAtJunction(edge.elB, edge.junctionPt);
+    if (!segA && !segB) continue;
+    if (segA?.gradientStrokeId && segB?.gradientStrokeId) continue;
     let gx1, gy1, gx2, gy2;
-    if (lead2Seg && lead1Seg) {
-      const from = segEndpointsSvg(edge.fromEl, lead2Seg, scale);
-      const to = segEndpointsSvg(edge.toEl, lead1Seg, scale);
-      gx1 = from.x1;
-      gy1 = from.y1;
-      gx2 = to.x2;
-      gy2 = to.y2;
-    } else if (lead2Seg) {
-      const c = segEndpointsSvg(edge.fromEl, lead2Seg, scale);
+    if (segA && segB) {
+      const a = segEndpointsSvg(edge.elA, segA, scale);
+      const b = segEndpointsSvg(edge.elB, segB, scale);
+      const aNear = nearFarSvg(edge.elA, segA, edge.junctionPt, scale);
+      const bNear = nearFarSvg(edge.elB, segB, edge.junctionPt, scale);
+      gx1 = aNear.farX;
+      gy1 = aNear.farY;
+      gx2 = bNear.farX;
+      gy2 = bNear.farY;
+    } else if (segA) {
+      const c = segEndpointsSvg(edge.elA, segA, scale);
       gx1 = c.x1;
       gy1 = c.y1;
       gx2 = c.x2;
       gy2 = c.y2;
     } else {
-      const c = segEndpointsSvg(edge.toEl, lead1Seg, scale);
+      const c = segEndpointsSvg(edge.elB, segB, scale);
       gx1 = c.x1;
       gy1 = c.y1;
       gx2 = c.x2;
@@ -17819,17 +17824,17 @@ function assignLeadTransitionIds(elements, edges, scale) {
     }
     if (gradientVectorLength({ x1: gx1, y1: gy1, x2: gx2, y2: gy2 }) < 1e-6) continue;
     const id = `sd-trans-${n++}`;
-    parts.push(gradientXml(id, gx1, gy1, gx2, gy2, edge.fromColor, edge.toColor));
-    if (lead2Seg && !lead2Seg.gradientStrokeId) {
-      lead2Seg.gradientStrokeId = id;
+    parts.push(gradientXml(id, gx1, gy1, gx2, gy2, edge.colorA, edge.colorB));
+    if (segA && !segA.gradientStrokeId) {
+      segA.gradientStrokeId = id;
       cleanups.push(() => {
-        lead2Seg.gradientStrokeId = void 0;
+        segA.gradientStrokeId = void 0;
       });
     }
-    if (lead1Seg && !lead1Seg.gradientStrokeId) {
-      lead1Seg.gradientStrokeId = id;
+    if (segB && !segB.gradientStrokeId) {
+      segB.gradientStrokeId = id;
       cleanups.push(() => {
-        lead1Seg.gradientStrokeId = void 0;
+        segB.gradientStrokeId = void 0;
       });
     }
   }
@@ -17840,26 +17845,21 @@ function assignLeadTransitionIds(elements, edges, scale) {
     }
   };
 }
-function findLeadSegmentFor(el, side, junctionPt) {
-  const role = side === "in" ? "lead1" : "lead2";
+function findSegAtJunction(el, junctionPt) {
+  const tol = 0.6;
   for (const s of el.segments) {
-    if (s instanceof Segment && s.role === role) return s;
+    if (!(s instanceof Segment)) continue;
+    if (s.role !== "lead1" && s.role !== "lead2") continue;
+    if (segTouchesPoint(el, s, junctionPt, tol)) return s;
   }
-  return findSegmentNearPoint(el, junctionPt);
-}
-function findSegmentNearPoint(el, absPt) {
   let best;
   let bestDist = Infinity;
-  const tol = 0.6;
   for (const s of el.segments) {
     if (!(s instanceof Segment)) continue;
     if (s.path.length < 2) continue;
     if (s.role === "body") continue;
-    const p0 = el.transform.transform(s.path[0]);
-    const pN = el.transform.transform(s.path[s.path.length - 1]);
-    const d0 = Math.hypot(p0.x - absPt.x, p0.y - absPt.y);
-    const dN = Math.hypot(pN.x - absPt.x, pN.y - absPt.y);
-    const d = Math.min(d0, dN);
+    if (s.path.length > 6) continue;
+    const d = segDistToPoint(el, s, junctionPt);
     if (d < bestDist && d < tol) {
       bestDist = d;
       best = s;
@@ -17867,6 +17867,25 @@ function findSegmentNearPoint(el, absPt) {
   }
   return best;
 }
+function segTouchesPoint(el, seg, absPt, tol) {
+  return segDistToPoint(el, seg, absPt) < tol;
+}
+function segDistToPoint(el, seg, absPt) {
+  const p0 = el.transform.transform(seg.path[0]);
+  const pN = el.transform.transform(seg.path[seg.path.length - 1]);
+  return Math.min(
+    Math.hypot(p0.x - absPt.x, p0.y - absPt.y),
+    Math.hypot(pN.x - absPt.x, pN.y - absPt.y)
+  );
+}
+function nearFarSvg(el, seg, junctionPt, scale) {
+  const p0 = el.transform.transform(seg.path[0]);
+  const pN = el.transform.transform(seg.path[seg.path.length - 1]);
+  const d0 = Math.hypot(p0.x - junctionPt.x, p0.y - junctionPt.y);
+  const dN = Math.hypot(pN.x - junctionPt.x, pN.y - junctionPt.y);
+  const far = d0 > dN ? p0 : pN;
+  return { farX: far.x * scale, farY: -far.y * scale };
+}
 function segEndpointsSvg(el, seg, scale) {
   const p0 = el.transform.transform(seg.path[0]);
   const p1 = el.transform.transform(seg.path[seg.path.length - 1]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skillpet/circuit",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "Circuit diagram library — render electrical schematics from JSON, with interactive SVG, themes, and Vue/React components",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",