Component Widgets

@@ -113,6 +113,11 @@ adom-chip-thumbnail{display:inline-block} footer{margin-top:48px;padding-top:26px;border-top:1px solid var(--line);color:var(--dim2);font-size:13px} footer .files{font-family:ui-monospace,monospace;color:var(--dim);line-height:2} footer .url{margin-top:14px;color:var(--teal);font-family:ui-monospace,monospace;font-size:13px}++h2{scroll-margin-top:16px}+h2 .anchor{opacity:0;margin-left:6px;color:var(--dim2);text-decoration:none;font:400 20px ui-monospace,monospace;transition:opacity .12s;align-self:center}+h2:hover .anchor{opacity:.6}+h2 .anchor:hover{opacity:1;color:var(--teal)} </style> </head> <body>@@ -131,7 +136,7 @@ footer .url{margin-top:14px;color:var(--teal);font-family:ui-monospace,monospace   <!-- PINOUT -->   <section>     <div class="eyebrow">Datasheet-style chip diagram</div>-    <h2>Pinout <span class="tag">&lt;adom-pinout&gt;</span></h2>+    <h2 id="pinout">Pinout <span class="tag">&lt;adom-pinout&gt;</span><a class="anchor" href="#pinout" aria-label="direct link">#</a></h2>     <p class="sub">Pins on the sides, colored by type, exposed pad centered. The diagram and the table <b>cross-highlight each other</b> — hover a pin. Give it real pad <code>xy</code> and it lays out from the true footprint; omit it and it infers a quad/dual package.</p>     <pre><code><span class="tok-tag">&lt;adom-pinout&gt;</span><span class="tok-tag">&lt;script</span> <span class="tok-attr">type</span>=<span class="tok-str">"application/json"</span><span class="tok-tag">&gt;</span>   { <span class="tok-attr">mpn</span>, <span class="tok-attr">package</span>, <span class="tok-attr">pins</span>:[{ number, name, type?, xy? }] }@@ -145,7 +150,7 @@ footer .url{margin-top:14px;color:var(--teal);font-family:ui-monospace,monospace   <!-- HEAT-SINK VIA -->   <section>     <div class="eyebrow">Thermal design</div>-    <h2>Heat-sink via <span class="tag">&lt;adom-heatsink-via&gt;</span> <span class="new">new</span></h2>+    <h2 id="heatsink-via">Heat-sink via <span class="tag">&lt;adom-heatsink-via&gt;</span> <span class="new">new</span><a class="anchor" href="#heatsink-via" aria-label="direct link">#</a></h2>     <p class="sub">The recommended thermal-via array under the exposed pad, with via count, drill and pitch. It <b>only renders when the part actually has an exposed pad</b> — hand it a part with none and it says so instead of drawing a fake grid. Keyed on the EP's pin number, so it lights when you hover that pad in the pinout or footprint.</p>     <pre><code><span class="tok-tag">&lt;adom-heatsink-via&gt;</span><span class="tok-tag">&lt;script</span> <span class="tok-attr">type</span>=<span class="tok-str">"application/json"</span><span class="tok-tag">&gt;</span>   { <span class="tok-attr">mpn</span>, <span class="tok-attr">package</span>, <span class="tok-attr">ep</span>:{ w_mm, h_mm, number } }   <span class="tok-com">// or pads:[…] to detect the EP</span>@@ -159,7 +164,7 @@ footer .url{margin-top:14px;color:var(--teal);font-family:ui-monospace,monospace   <!-- MOLECULE -->   <section>     <div class="eyebrow">Reusable sub-circuit</div>-    <h2>Ganged molecule <span class="tag">&lt;adom-molecule&gt;</span> <span class="new">new</span></h2>+    <h2 id="molecule">Ganged molecule <span class="tag">&lt;adom-molecule&gt;</span> <span class="new">new</span><a class="anchor" href="#molecule" aria-label="direct link">#</a></h2>     <p class="sub">A molecule as its ganged part set plus how they connect. <b>Hover a net to light every part on it; hover a part to light its nets</b> — the ganged relationship, made legible.</p>     <pre><code><span class="tok-tag">&lt;adom-molecule&gt;</span><span class="tok-tag">&lt;script</span> <span class="tok-attr">type</span>=<span class="tok-str">"application/json"</span><span class="tok-tag">&gt;</span>   { <span class="tok-attr">name</span>, <span class="tok-attr">components</span>:[{ ref, mpn, value?, package?, type? }], <span class="tok-attr">nets</span>:[{ name, pins:[{ ref, pin }] }] }@@ -173,7 +178,7 @@ footer .url{margin-top:14px;color:var(--teal);font-family:ui-monospace,monospace   <!-- CHIP THUMBNAIL -->   <section>     <div class="eyebrow">At-a-glance render</div>-    <h2>Chip thumbnail <span class="tag">&lt;adom-chip-thumbnail&gt;</span> <span class="new">new</span></h2>+    <h2 id="chip-thumbnail">Chip thumbnail <span class="tag">&lt;adom-chip-thumbnail&gt;</span> <span class="new">new</span><a class="anchor" href="#chip-thumbnail" aria-label="direct link">#</a></h2>     <p class="sub">A small rendered image of the actual part — in production, <code>glb2png</code> / the chip-thumbnailer off the part's GLB. Falls back to a clean placeholder when there's no render.</p>     <pre><code><span class="tok-tag">&lt;adom-chip-thumbnail</span> <span class="tok-attr">src</span>=<span class="tok-str">"thumb.png"</span> <span class="tok-attr">mpn</span>=<span class="tok-str">"74HC00"</span> <span class="tok-attr">package</span>=<span class="tok-str">"SOIC-14"</span><span class="tok-tag">&gt;&lt;/adom-chip-thumbnail&gt;</span></code></pre>     <div class="stage" style="text-align:center">@@ -185,7 +190,7 @@ footer .url{margin-top:14px;color:var(--teal);font-family:ui-monospace,monospace   <!-- MOLECULIZE -->   <section>     <div class="eyebrow">Board page</div>-    <h2>Board → molecule <span class="tag">&lt;adom-moleculize&gt;</span> <span class="new">new</span></h2>+    <h2 id="moleculize">Board → molecule <span class="tag">&lt;adom-moleculize&gt;</span> <span class="new">new</span><a class="anchor" href="#moleculize" aria-label="direct link">#</a></h2>     <p class="sub"><b>Drop a <code>.kicad_pcb</code></b> and it reads the Edge.Cuts size <b>in your browser</b>, no backend, and shows the workcell molecule <code>kicad-to-molecule</code> would produce: wings + 4 grid-snapped machine pins. Only generating the file needs an AI thread.</p>     <pre><code><span class="tok-tag">&lt;adom-moleculize&gt;&lt;/adom-moleculize&gt;</span>  <span class="tok-com">&lt;!-- drop a .kicad_pcb, or seed { width_mm, height_mm } --&gt;</span></code></pre>     <div class="stage">@@ -202,7 +207,7 @@ footer .url{margin-top:14px;color:var(--teal);font-family:ui-monospace,monospace   <!-- ADOM-LBR + DATASHEET -->   <section>     <div class="eyebrow">Already covered — don't rebuild</div>-    <h2>Symbol · Footprint · 3D · Datasheet</h2>+    <h2 id="cad">Symbol · Footprint · 3D · Datasheet<a class="anchor" href="#cad" aria-label="direct link">#</a></h2>     <p class="sub">The heavy viewers already exist. These widgets sit <b>alongside</b> them on the same <code>lbr-hover</code> bus — they don't reimplement them.</p>     <div class="refgrid">       <div class="refcard">@@ -1089,5 +1094,8 @@ footer .url{margin-top:14px;color:var(--teal);font-family:ui-monospace,monospace })(); </script> +<script>+(function(){function go(){try{if(location.hash){var el=document.getElementById(decodeURIComponent(location.hash.slice(1)));if(el)el.scrollIntoView();}}catch(e){}}window.addEventListener('load',function(){setTimeout(go,120);});window.addEventListener('hashchange',go);})();+</script> </body> </html>