USB3.0 to Ethernet Molecule

@@ -0,0 +1,303 @@+<!doctype html>+<html lang="en">+<head>+<meta charset="utf-8" />+<meta name="viewport" content="width=device-width, initial-scale=1" />+<title>adom-schematic-viewer</title>+<style>+  :root { color-scheme: dark; --bg:#0d1117; --panel:#161b22cc; --line:#30363d; --txt:#c9d1d9; --muted:#8b949e; --accent:#00e6dc; }+  * { box-sizing: border-box; }+  html, body { margin: 0; height: 100%; background: var(--bg); color: var(--txt); font: 13px/1.4 ui-sans-serif, system-ui, sans-serif; overflow: hidden; }+  #svgbox { position: absolute; inset: 0; cursor: grab; background: #1c2128; }+  #svgbox:active { cursor: grabbing; }+  #svgbox svg { display: block; }+  .empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }++  /* component hotspots: transparent hit targets (no visual). */+  #svgbox svg .adom-comp { pointer-events: fill; cursor: pointer; }+  /* Hover highlight = KiCad's selection look: the symbol keeps its own colours and+     gains a bright halo around its strokes. Rest of the sheet untouched (no dim,+     no box, no recolour). KiCad haloes white on its dark theme; the SVG export is+     light, so we halo in the accent so it actually reads. */+  #svgbox svg .adom-sheet .symhl {+    filter: drop-shadow(0 0 .1px #00b3a6) drop-shadow(0 0 .1px #00b3a6) drop-shadow(0 0 .1px #00b3a6);+  }++  .panel { position: absolute; background: var(--panel); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 10px; }+  #side { top: 12px; right: 12px; width: 220px; max-height: 94vh; padding: 10px 12px; display: flex; flex-direction: column; }+  #side h1 { margin: 0 0 8px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }+  .sec-h { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 2px 0 5px; border-bottom: 1px solid var(--line); padding-bottom: 3px; }+  #complist { overflow-y: auto; max-height: 74vh; }+  .crow { padding: 3px 7px; border-radius: 5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }+  .crow b { color: var(--accent); }+  .crow:hover { background: #1c2a2a; }+  .crow.sel { background: var(--accent); color: #06232a; }+  .crow.sel b { color: #06232a; }+  #fitbtn { margin-top: 8px; width: 100%; background: #17231c; color: var(--txt); border: 1px solid var(--line); border-radius: 7px; padding: 5px; cursor: pointer; }+  #fitbtn:hover { border-color: var(--accent); }+  #stat { bottom: 12px; left: 12px; padding: 6px 11px; color: var(--muted); }+  .muted { color: var(--muted); }++  /* follows the cursor and flips away from the viewport edges (same as the+     layout viewer); a click pins it where it currently sits, and only then does+     it accept pointer events so the JLC/wiki/datasheet links are clickable. */+  #card { position: fixed; z-index: 9999; display: none; min-width: 210px; max-width: 300px; padding: 10px 12px; pointer-events: none; }+  /* abridged hover card (small/embedded screens): ref · MPN · stock only */+  #card.brief { min-width: 0; max-width: 230px; padding: 7px 9px; }+  #card.brief .ci-h { margin-bottom: 4px; padding-bottom: 4px; }+  #card.brief .ci-ref { font-size: 13px; }+  #card.pinned { pointer-events: auto; box-shadow: 0 0 0 1px var(--accent); }+  #card.pinned .ci-h::after { content: "📌"; font-size: 11px; opacity: .7; }+  .ci-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }+  .ci-ref { font-weight: 700; color: var(--accent); font-size: 15px; }+  .ci-val { color: var(--txt); }+  .ci-desc { color: var(--muted); font-size: 12px; margin-bottom: 6px; }+  .ci-row { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; }+  .ci-k { color: var(--muted); }+  .ci-v { text-align: right; word-break: break-word; }+  .ci-enrich { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); }+  .pills { display: flex; flex-wrap: wrap; gap: 5px; }+  .pill { background: #17231c; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; font-size: 11px; }+  .pill.ok { color: #57d97e; border-color: #2c5a3a; }+  .pill.no { color: #e08a8a; border-color: #5a2c2c; }+  .pill.tier { color: #f2d060; }+  .pill.pop { color: #cba6ff; }+  .ci-mfr { color: var(--txt); font-size: 12px; margin-bottom: 5px; }+  .ci-links { margin-top: 6px; display: flex; gap: 12px; }+  .ci-lnk, .ci-ds { color: #6bb3ff; text-decoration: none; font-size: 12px; }+  .ci-ds { display: inline-block; margin-top: 6px; }+</style>+</head>+<body>+  <div id="svgbox"><div class="empty">loading…</div></div>+  <div id="side" class="panel">+    <h1>adom-schematic-viewer</h1>+    <div class="sec-h">Components</div>+    <div id="complist"></div>+    <button id="fitbtn">Fit</button>+  </div>+  <div id="stat" class="panel"></div>+  <div id="card" class="panel"></div>