app
Component Widgets
Public Made by Adomby adom
Reusable component widgets for pinouts, thermal vias, molecule relationships, reviewed chip outlines and lightweight four-level LOD cache listings.
← Commit history
Publish 1.1.5
3 files changed
+6−4
package.json+1−1@@ -2,7 +2,7 @@ "slug": "component-widgets", "title": "Component Widgets", "type": "app",- "version": "1.1.4",+ "version": "1.1.5", "description": "Reusable, dependency-free web-component widgets to drop into any component or molecule page: <adom-pinout> (datasheet-style pin diagram + synced table), <adom-heatsink-via> (exposed-pad thermal via array, only when the part has an EP), <adom-molecule> (ganged part set + nets), and <adom-chip-thumbnail> (rendered part image). Each is one custom element, self-contained (Shadow DOM, no deps), theme-aware (light + dark), fed by inline JSON or el.data, and all on one lbr-hover cross-highlight bus so a pin hovered in one lights the same pin everywhere. Symbol, footprint, and 3D stay with adom-lbr; the datasheet renders via the native viewer. Installs the widget JS, iframe-embeddable viewers, example data, and an AI skill to ~/.claude/skills/component-widgets. Live reference page renders them all as a readme.html.", "license": "MIT", "dependencies": {},
page.json+1−1@@ -4,7 +4,7 @@ "type": "app", "title": "Component Widgets", "brief": "One home for the reusable, readme-instantiable component/molecule widgets (pinout, heat-sink via, chip thumbnail, molecule) — self-contained web components on the shared adom-lbr hover bus.",- "version": "1.1.4",+ "version": "1.1.5", "visibility": "private", "author": { "name": "Ray",
skills/component-widgets/widgets/pinout-widget.js+4−2@@ -260,7 +260,7 @@ :host([theme="light"]){--bg:#f6f8fc;--panel:#fff;--line:#dbe2ee;--line2:#c3cede;--text:#1a2230;--dim:#5a6678;--dim2:#8592a6;--accent:#0d8f88;--hot:rgba(13,143,136,.10)} *{box-sizing:border-box} .card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:16px;color:var(--text);- font:14px/1.5 -apple-system,'Segoe UI',Roboto,Arial,sans-serif}+ font:14px/1.5 -apple-system,'Segoe UI',Roboto,Arial,sans-serif;container-type:inline-size} .hd{display:flex;align-items:baseline;gap:10px;margin-bottom:12px} .hd .mpn{font:700 17px ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:-.2px} .hd .pkg{font:600 11px ui-monospace,monospace;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding:2px 8px;border-radius:6px}@@ -271,7 +271,9 @@ .tbtn:hover{color:var(--text);border-color:var(--line2)} .tbtn.ok{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)} .body{display:grid;grid-template-columns:minmax(300px,1fr) minmax(220px,1fr);gap:20px;align-items:start}- @media(max-width:620px){.body{grid-template-columns:1fr}}+ /* stack diagram over table when the WIDGET (not the viewport) is narrow —+ e.g. side-by-side in a cross-link row — so the table never clips */+ @container (max-width:580px){.body{grid-template-columns:1fr}} .readout{height:24px;display:flex;align-items:center;gap:9px;font:600 13px ui-monospace,monospace;color:var(--dim);padding:0 4px} .readout b{color:var(--accent)} .readout .rt{margin-left:auto;font-size:11px;text-transform:uppercase;letter-spacing:.08em} .diagram{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px}