fix(picker): variant-true previews + datasheet popover above the modal

- The card preview creates the live element but only forwarded
  defaultValues.value, so variants sharing a tag rendered identically (both
  M5Stack Chain matrices showed the dark RGB housing — the mono flag never
  reached the element). Forward every defaultValues entry, matching what
  DynamicComponent assigns at placement.
- The hover datasheet panel sat at z-index 2000 while the picker overlay was
  raised to 9000 (above the AI chat), hiding the popover behind the very
  modal that summons it. Raise it to 9100.
This commit is contained in:
David Montero Crespo 2026-07-23 05:15:31 +02:00
parent 78f5f5ebc3
commit 75680a408c
2 changed files with 14 additions and 5 deletions

View File

@ -485,7 +485,9 @@
* ------------------------------------------------------------------ */
.component-info-panel {
position: fixed;
z-index: 2000;
/* Above the picker overlay (9000) the popover is summoned by hovering
cards INSIDE that modal, so anything lower hides it behind the list. */
z-index: 9100;
width: 316px;
max-height: 74vh;
overflow-y: auto;

View File

@ -576,10 +576,17 @@ const ComponentCard: React.FC<ComponentCardProps> = ({ component, onSelect, hove
(element as HTMLElement).style.transform = `scale(${scale})`;
(element as HTMLElement).style.transformOrigin = 'center center';
// Pass the preset's default value through so value-sensitive elements
// (e.g. wokwi-resistor color bands) render the right look in the picker.
if (component.defaultValues?.value !== undefined) {
(element as any).value = component.defaultValues.value;
// Pass the preset's defaults through so variant-sensitive elements render
// the right look in the picker — e.g. wokwi-resistor color bands (value)
// or the M5Stack Chain matrix light/dark housing (mono). Same property
// assignment DynamicComponent performs when the part is placed, so any
// element that tolerates placement tolerates the preview.
for (const [key, val] of Object.entries(component.defaultValues ?? {})) {
try {
(element as any)[key] = val;
} catch {
/* read-only prop on some upstream element — skip */
}
}
// Set default properties for better preview appearance