Create Anatomy Annotation

let _p = node; while (_p.parent && _p.parent.type !== 'DOCUMENT') _p = _p.parent;
if (_p.type === 'PAGE') await figma.setCurrentPageAsync(_p);

Task Progress:
- [ ] Step 1: Verify MCP connection
- [ ] Step 2: Read template key from uspecs.config.json
- [ ] Step 3: Navigate to the component and extract anatomy data (incl. property definitions)
- [ ] Step 4: Evaluate variant selection, classify elements, and enrich notes (AI reasoning)
- [ ] Step 5: Navigate to destination (if different file)
- [ ] Step 6: Import and detach the Anatomy template
- [ ] Step 7: Fill header fields and create composition section
- [ ] Step 8: Build composition artwork with markers + fill table
- [ ] Step 8b: Per-sub-component child sections (property-aware unhide)
- [ ] Step 10: Visual validation

const TARGET_NODE_ID = '__NODE_ID__';
const PREFERRED_VARIANT_PROPS = __PREFERRED_VARIANT_PROPS__;
const STRUCTURAL_TYPES = ['RECTANGLE', 'VECTOR', 'ELLIPSE', 'LINE', 'POLYGON', 'STAR', 'BOOLEAN_OPERATION'];

function hasVisuals(n) {
  const f = n.fills && n.fills.length > 0 && n.fills.some(f => f.visible !== false);
  const s = n.strokes && n.strokes.length > 0 && n.strokes.some(s => s.visible !== false);
  const e = n.effects && n.effects.length > 0 && n.effects.some(e => e.visible !== false);
  return { hasFills: !!f, hasStrokes: !!s, hasEffects: !!e, hasAny: !!f || !!s || !!e };
}

async function resolveInstanceInfo(instNode) {
  try {
    const mc = await instNode.getMainComponentAsync();
    if (!mc) return null;
    const isSet = mc.parent && mc.parent.type === 'COMPONENT_SET';
    const cs = isSet ? mc.parent : null;
    const info = {
      mainComponentId: mc.id,
      mainComponentSetId: cs ? cs.id : null,
      childIsComponentSet: !!cs,
      componentSetName: cs ? cs.name : mc.name,
      childVariantCount: cs ? cs.children.length : 1,
      childVariantAxes: []
    };
    if (cs) {
      const csPropDefs = cs.componentPropertyDefinitions || {};
      for (const [ck, cd] of Object.entries(csPropDefs)) {
        if (cd.type === 'VARIANT') {
          info.childVariantAxes.push({ name: ck.split('#')[0], options: cd.variantOptions || [], defaultValue: cd.defaultValue });
        }
      }
    }
    return info;
  } catch { return null; }
}

async function walkToInnerInstance(node, depth) {
  if (depth > 8) return null;
  if (node.type === 'INSTANCE') return node;
  if ((node.type === 'FRAME' || node.type === 'GROUP') && 'children' in node && node.children.length === 1) {
    return walkToInnerInstance(node.children[0], depth + 1);
  }
  return null;
}

async function extractElement(node, index, artworkAbsX, artworkAbsY) {
  const absX = node.absoluteTransform[0][2];
  const absY = node.absoluteTransform[1][2];
  const element = {
    index,
    name: node.name,
    originalName: null,
    nodeType: node.type,
    classification: null,
    visible: node.visible,
    bbox: {
      x: Math.round(absX - artworkAbsX),
      y: Math.round(absY - artworkAbsY),
      w: Math.round(node.width),
      h: Math.round(node.height)
    },
    notes: '',
    controlledByBoolean: null,
    wrappedInstance: null,
    mainComponentId: null,
    mainComponentSetId: null,
    childIsComponentSet: false,
    childVariantAxes: [],
    childVariantCount: 1,
    shouldCreateSection: false
  };

  if (node.type === 'INSTANCE') {
    const info = await resolveInstanceInfo(node);
    if (info) {
      Object.assign(element, info);
      element.notes = info.componentSetName + ' instance';
    }
    element.classification = 'instance';
  } else if (node.type === 'TEXT') {
    element.classification = 'text';
    const content = node.characters || '';
    if (content.length > 0 && content.length <= 30) {
      element.notes = 'Text element \u2014 "' + content + '"';
    } else {
      element.notes = 'Text element';
    }
  } else if (node.type === 'FRAME' || node.type === 'GROUP') {
    const innerInst = await walkToInnerInstance(node, 0);
    if (innerInst && innerInst !== node) {
      const info = await resolveInstanceInfo(innerInst);
      if (info) {
        element.wrappedInstance = info;
        element.originalName = element.name;
        element.nodeType = 'INSTANCE';
        element.classification = 'instance-unwrapped';
        Object.assign(element, {
          mainComponentId: info.mainComponentId,
          mainComponentSetId: info.mainComponentSetId,
          childIsComponentSet: info.childIsComponentSet,
          childVariantAxes: info.childVariantAxes,
          childVariantCount: info.childVariantCount
        });
        element.notes = element.name + ' instance';
      } else {
        element.classification = 'container';
        const childCount = ('children' in node) ? node.children.length : 0;
        element.notes = 'Container with ' + childCount + ' children';
      }
    } else if ('children' in node && node.children.length === 1 && node.children[0].type === 'TEXT') {
      const textChild = node.children[0];
      element.originalName = element.name;
      element.nodeType = 'TEXT';
      element.classification = 'text';
      const content = textChild.characters || '';
      if (content.length > 0 && content.length <= 30) {
        element.notes = 'Text element \u2014 "' + content + '"';
      } else {
        element.notes = 'Text element';
      }
    } else {
      const childCount = ('children' in node) ? node.children.length : 0;
      element.classification = childCount > 0 ? 'container' : 'structural';
      element.notes = childCount > 0 ? 'Container with ' + childCount + ' children' : 'Empty container';
    }
  } else if (node.type === 'SLOT') {
    element.classification = 'slot';
    const childCount = ('children' in node) ? node.children.length : 0;
    element.notes = 'Composable slot with ' + childCount + ' children';
  } else if (STRUCTURAL_TYPES.includes(node.type)) {
    element.classification = 'structural';
    element.notes = node.type;
  } else {
    element.classification = 'structural';
    element.notes = node.type;
  }

  return element;
}

const node = await figma.getNodeByIdAsync(TARGET_NODE_ID);
if (!node || (node.type !== 'COMPONENT_SET' && node.type !== 'COMPONENT')) {
  return { error: 'Node is not a component set or component. Type: ' + (node ? node.type : 'null') };
}

const isComponentSet = node.type === 'COMPONENT_SET';

function resolveChildContainer(v) {
  let cc = v;
  while (cc.children.length === 1 && cc.children[0].type === 'FRAME' && cc.children[0].layoutMode !== 'NONE') {
    cc = cc.children[0];
  }
  if (cc.children.length === 1 && cc.children[0].type === 'SLOT') {
    cc = cc.children[0];
  }
  if (cc === v && cc.children.length > 1) {
    const autoLayoutFrames = cc.children.filter(c => c.type === 'FRAME' && c.layoutMode !== 'NONE' && ('children' in c) && c.children.length >= 2);
    const structuralOnly = cc.children.filter(c => STRUCTURAL_TYPES.includes(c.type));
    if (autoLayoutFrames.length === 1 && structuralOnly.length === cc.children.length - 1) {
      cc = autoLayoutFrames[0];
    }
  }
  return cc;
}

let variant;
if (PREFERRED_VARIANT_PROPS && isComponentSet) {
  variant = node.children.find(v => {
    const props = v.variantProperties || {};
    return Object.entries(PREFERRED_VARIANT_PROPS).every(
      ([k, val]) => props[k] === val
    );
  }) || node.defaultVariant || node.children[0];
} else {
  variant = isComponentSet ? (node.defaultVariant || node.children[0]) : node;
}
let childContainer = resolveChildContainer(variant);

if (isComponentSet && childContainer.children.length === 0 && node.children.length > 1) {
  function countDescendants(n) {
    let c = 0;
    if ('children' in n) { for (const ch of n.children) { c += 1 + countDescendants(ch); } }
    return c;
  }
  let bestVariant = variant;
  let bestCount = 0;
  for (const v of node.children) {
    const cnt = countDescendants(v);
    if (cnt > bestCount) { bestCount = cnt; bestVariant = v; }
  }
  if (bestVariant !== variant) {
    variant = bestVariant;
    childContainer = resolveChildContainer(variant);
  }
}

const varAbsX = variant.absoluteTransform[0][2];
const varAbsY = variant.absoluteTransform[1][2];

const rootVis = hasVisuals(variant);
const rootVariantVisuals = {
  hasFills: rootVis.hasFills, hasStrokes: rootVis.hasStrokes, hasEffects: rootVis.hasEffects,
  cornerRadius: variant.cornerRadius || 0
};

const traversedFrames = [];
let walker = variant;
while (walker !== childContainer) {
  if ('children' in walker && walker.children.length === 1) {
    const child = walker.children[0];
    const vis = hasVisuals(child);
    const cAbsX = child.absoluteTransform[0][2];
    const cAbsY = child.absoluteTransform[1][2];
    traversedFrames.push({
      name: child.name, nodeType: child.type,
      hasFills: vis.hasFills, hasStrokes: vis.hasStrokes, hasEffects: vis.hasEffects,
      cornerRadius: child.cornerRadius || 0,
      bbox: { x: Math.round(cAbsX - varAbsX), y: Math.round(cAbsY - varAbsY), w: Math.round(child.width), h: Math.round(child.height) }
    });
    walker = child;
  } else break;
}

const absX = varAbsX;
const absY = varAbsY;

const elements = [];
let idx = 1;
for (const child of childContainer.children) {
  elements.push(await extractElement(child, idx++, absX, absY));
}

const propDefs = node.componentPropertyDefinitions || {};
const booleanProps = [];
const variantAxes = [];
const instanceSwapProps = [];

for (const [rawKey, def] of Object.entries(propDefs)) {
  const cleanKey = rawKey.split('#')[0];
  if (def.type === 'VARIANT') {
    variantAxes.push({ name: cleanKey, options: def.variantOptions || [], defaultValue: def.defaultValue });
  } else if (def.type === 'BOOLEAN') {
    let associatedLayer = null;
    let boundElementIndex = null;
    const defaultVariantProps = variant.componentProperties;
    if (defaultVariantProps) {
      for (const [k, v] of Object.entries(defaultVariantProps)) {
        if (k.split('#')[0] === cleanKey && v.type === 'BOOLEAN') {
          const nodeIdSuffix = k.split('#')[1];
          if (nodeIdSuffix) {
            try {
              const lid = variant.id.split(';')[0] + ';' + nodeIdSuffix;
              const layerNode = await figma.getNodeByIdAsync(lid);
              if (layerNode) {
                associatedLayer = layerNode.name;
                for (const el of elements) {
                  const matchName = el.originalName || el.name;
                  if (matchName === layerNode.name) {
                    boundElementIndex = el.index;
                    break;
                  }
                }
              }
            } catch {}
          }
        }
      }
    }
    if (boundElementIndex === null) {
      for (const el of elements) {
        const matchName = el.originalName || el.name;
        if (matchName.toLowerCase() === cleanKey.toLowerCase()) {
          boundElementIndex = el.index;
          if (!associatedLayer) associatedLayer = matchName;
          break;
        }
      }
    }
    booleanProps.push({ name: cleanKey, defaultValue: def.defaultValue, associatedLayer, rawKey, boundElementIndex });
  } else if (def.type === 'INSTANCE_SWAP') {
    let swapTargetName = def.defaultValue;
    try {
      const swapNode = await figma.getNodeByIdAsync(def.defaultValue);
      if (swapNode) swapTargetName = swapNode.name;
    } catch {}
    instanceSwapProps.push({ name: cleanKey, defaultValue: swapTargetName, rawKey });
  }
}

for (const bp of booleanProps) {
  if (bp.boundElementIndex !== null) {
    const el = elements.find(e => e.index === bp.boundElementIndex);
    if (el) {
      el.controlledByBoolean = { propName: bp.name, rawKey: bp.rawKey, defaultValue: bp.defaultValue };
    }
  }
}

for (const el of elements) {
  if (el.classification === 'instance' || el.classification === 'instance-unwrapped') {
    el.shouldCreateSection = true;
    const UTILITY_NAMES = ['spacer', 'divider', 'separator', 'divider line', 'gap', 'padding', 'filler'];
    if (UTILITY_NAMES.includes(el.name.toLowerCase())) {
      el.shouldCreateSection = false;
    }
  }
}

// --- Resolve slot preferred instances and boolean bindings ---
const slotPropDefs = {};
for (const [rawKey, def] of Object.entries(propDefs)) {
  if (def.type === 'SLOT') {
    slotPropDefs[rawKey] = def;
  }
}

const allCompKeys = new Map();
if (Object.values(slotPropDefs).some(d => d.preferredValues && d.preferredValues.length > 0)) {
  for (const page of figma.root.children) {
    try { await figma.setCurrentPageAsync(page); } catch { continue; }
    const comps = page.findAll(n => n.type === 'COMPONENT' || n.type === 'COMPONENT_SET');
    for (const c of comps) {
      if (c.key) allCompKeys.set(c.key, c);
      if (c.type === 'COMPONENT_SET' && 'children' in c) {
        for (const v of c.children) { if (v.type === 'COMPONENT' && v.key) allCompKeys.set(v.key, v); }
      }
    }
  }
  let _rp = variant; while (_rp.parent && _rp.parent.type !== 'DOCUMENT') _rp = _rp.parent;
  if (_rp.type === 'PAGE') await figma.setCurrentPageAsync(_rp);
}

for (const el of elements) {
  if (el.classification !== 'slot') continue;
  const slotNode = childContainer.children[el.index - 1];
  if (!slotNode) continue;

  const cpRefs = slotNode.componentPropertyReferences || {};
  if (cpRefs.visible) {
    const visRawKey = cpRefs.visible;
    const visClean = visRawKey.split('#')[0];
    el.slotBooleanBinding = { propName: visClean, rawKey: visRawKey };
    if (!el.controlledByBoolean) {
      const bp = booleanProps.find(b => b.rawKey === visRawKey);
      if (bp) el.controlledByBoolean = { propName: bp.name, rawKey: bp.rawKey, defaultValue: bp.defaultValue };
    }
  }

  const slotName = slotNode.name;
  let matchedSlotDef = null;
  for (const [rawKey, def] of Object.entries(slotPropDefs)) {
    if (rawKey.split('#')[0] === slotName) { matchedSlotDef = def; break; }
  }
  if (matchedSlotDef && matchedSlotDef.preferredValues && matchedSlotDef.preferredValues.length > 0) {
    el.slotPreferredInstances = [];
    for (const pv of matchedSlotDef.preferredValues) {
      if (pv.type !== 'COMPONENT') continue;
      const compNode = allCompKeys.get(pv.key);
      if (compNode) {
        const isSet = compNode.parent && compNode.parent.type === 'COMPONENT_SET';
        el.slotPreferredInstances.push({
          componentKey: pv.key,
          componentName: compNode.name,
          componentId: compNode.id,
          isComponentSet: isSet,
          componentSetId: isSet ? compNode.parent.id : null,
          componentSetName: isSet ? compNode.parent.name : compNode.name
        });
      }
    }
  }

  if ('children' in slotNode && slotNode.children.length > 0) {
    el.slotDefaultChildren = [];
    for (const sc of slotNode.children) {
      const scInfo = { name: sc.name, nodeType: sc.type, visible: sc.visible };
      if (sc.type === 'INSTANCE') {
        try {
          const mc = await sc.getMainComponentAsync();
          if (mc) {
            scInfo.mainComponentId = mc.id;
            scInfo.mainComponentKey = mc.key;
            const isSet = mc.parent && mc.parent.type === 'COMPONENT_SET';
            scInfo.componentSetName = isSet ? mc.parent.name : mc.name;
            scInfo.componentSetId = isSet ? mc.parent.id : null;
            scInfo.isComponentSet = isSet;
          }
        } catch {}
      }
      el.slotDefaultChildren.push(scInfo);
    }
  }
}

return {
  componentName: node.name,
  variantName: variant.name,
  selectedVariantId: variant.id,
  compSetNodeId: TARGET_NODE_ID,
  isComponentSet,
  rootSize: { w: Math.round(variant.width), h: Math.round(variant.height) },
  elements,
  booleanProps,
  variantAxes,
  instanceSwapProps,
  rootVariantVisuals,
  traversedFrames,
  childContainerIsVariant: childContainer === variant
};

const ANATOMY_TEMPLATE_KEY = '__ANATOMY_TEMPLATE_KEY__';

const templateComponent = await figma.importComponentByKeyAsync(ANATOMY_TEMPLATE_KEY);
const instance = templateComponent.createInstance();
const { x, y } = figma.viewport.center;
instance.x = x - instance.width / 2;
instance.y = y - instance.height / 2;
const frame = instance.detachInstance();
frame.name = '__COMPONENT_NAME__ Anatomy';
figma.currentPage.selection = [frame];
figma.viewport.scrollAndZoomIntoView([frame]);
return { frameId: frame.id };

const ANATOMY_TEMPLATE_KEY = '__ANATOMY_TEMPLATE_KEY__';
const COMP_NODE_ID = '__COMPONENT_NODE_ID__';

const compNode = await figma.getNodeByIdAsync(COMP_NODE_ID);
let _p = compNode;
while (_p.parent && _p.parent.type !== 'DOCUMENT') _p = _p.parent;
if (_p.type === 'PAGE') await figma.setCurrentPageAsync(_p);

const templateComponent = await figma.importComponentByKeyAsync(ANATOMY_TEMPLATE_KEY);
const instance = templateComponent.createInstance();
const frame = instance.detachInstance();

const GAP = 200;
frame.x = compNode.x + compNode.width + GAP;
frame.y = compNode.y;

frame.name = '__COMPONENT_NAME__ Anatomy';
figma.currentPage.selection = [frame];
figma.viewport.scrollAndZoomIntoView([frame]);
return { frameId: frame.id, pageId: _p.id, pageName: _p.name };

const frame = await figma.getNodeByIdAsync('__FRAME_ID__');
const textNodes = frame.findAll(n => n.type === 'TEXT');
const fontSet = new Set();
const fontsToLoad = [];
for (const tn of textNodes) {
  try {
    const fn = tn.fontName;
    if (fn && fn !== figma.mixed && fn.family) {
      const key = fn.family + '|' + fn.style;
      if (!fontSet.has(key)) { fontSet.add(key); fontsToLoad.push(fn); }
    }
  } catch {}
}
await Promise.all(fontsToLoad.map(f => figma.loadFontAsync(f).catch(() => {})));

const compNameFrame = frame.findOne(n => n.name === '#comp-name-anatomy');
if (compNameFrame) {
  const t = compNameFrame.findOne(n => n.type === 'TEXT');
  if (t) t.characters = '__COMPONENT_NAME__';
}

const descFrame = frame.findOne(n => n.name === '#brief-component-description');
if (descFrame) {
  const t = descFrame.findOne(n => n.type === 'TEXT');
  if (t) t.characters = '__BRIEF_DESCRIPTION__';
}

const anatomySectionTemplate = frame.findOne(n => n.name === '#anatomy-section');
const compositionSection = anatomySectionTemplate.clone();
anatomySectionTemplate.parent.appendChild(compositionSection);
compositionSection.name = 'Component structure';
compositionSection.visible = true;

const sectionFrame = compositionSection.findOne(n => n.name === '#section-name');
if (sectionFrame) {
  const t = sectionFrame.findOne(n => n.type === 'TEXT');
  if (t) t.characters = 'Component structure';
}

const sectionDescFrame = compositionSection.findOne(n => n.name === '#optional-section-description');
if (sectionDescFrame) {
  const t = sectionDescFrame.findOne(n => n.type === 'TEXT');
  if (t) t.characters = 'Elements that compose the __COMPONENT_NAME__ and their key attributes.';
}

anatomySectionTemplate.visible = false;

return { success: true, compositionSectionId: compositionSection.id };

const COMPOSITION_SECTION_ID = '__COMPOSITION_SECTION_ID__';
const COMP_SET_ID = '__COMP_SET_NODE_ID__';
const SELECTED_VARIANT_ID = '__SELECTED_VARIANT_ID__';
const IS_COMPONENT_SET = __IS_COMPONENT_SET__;
const MARKER_COLOR = { r: 0.922, g: 0, b: 0.431 };

const elements = __ELEMENTS_JSON__;

const section = await figma.getNodeByIdAsync(COMPOSITION_SECTION_ID);
const frame = section.parent.parent;
const preview = section.findOne(n => n.name === '#preview');
const markerExample = frame.findOne(n => n.name === '#marker-example');

const MARKER_SIZE = 33;
const MARKER_OFFSET = 40;
const PADDING = 80;
const MIN_W = 1400;
const MIN_H = 290;
const COLLISION_GAP = 8;
const INLINE_STUB = 16;

async function loadAllFonts(rootNode) {
  const textNodes = rootNode.findAll(n => n.type === 'TEXT');
  const fontSet = new Set();
  const fontsToLoad = [];
  for (const tn of textNodes) {
    try {
      const fn = tn.fontName;
      if (fn && fn !== figma.mixed && fn.family) {
        const key = fn.family + '|' + fn.style;
        if (!fontSet.has(key)) { fontSet.add(key); fontsToLoad.push(fn); }
      }
    } catch {}
  }
  await Promise.all(fontsToLoad.map(f => figma.loadFontAsync(f).catch(() => {})));
}

const selectedVariant = await figma.getNodeByIdAsync(SELECTED_VARIANT_ID);
const compInstance = selectedVariant.createInstance();
await loadAllFonts(compInstance);

let rootW = Math.round(compInstance.width);
let rootH = Math.round(compInstance.height);

const perimeterCount = elements.filter(el => !el.inlineMarker).length;
const markerPadding = Math.ceil(perimeterCount / 4) * (MARKER_SIZE + COLLISION_GAP);
const sideRoom = MARKER_SIZE + MARKER_OFFSET + PADDING + markerPadding;
let neededW = rootW + 2 * sideRoom;
let neededH = rootH + 2 * sideRoom;
let ARTWORK_W = Math.max(MIN_W, Math.round(neededW));
let ARTWORK_H = Math.max(MIN_H, Math.round(neededH));

const wrapper = figma.createFrame();
wrapper.name = 'Artwork wrapper';
wrapper.layoutMode = 'NONE';
wrapper.resize(ARTWORK_W, ARTWORK_H);
wrapper.clipsContent = true;
wrapper.fills = [];
preview.appendChild(wrapper);

let compX = Math.round((ARTWORK_W - rootW) / 2);
let compY = Math.round((ARTWORK_H - rootH) / 2);

wrapper.appendChild(compInstance);
compInstance.x = compX;
compInstance.y = compY;

const BOOLEAN_UNHIDES = __BOOLEAN_UNHIDES_JSON__;

if (BOOLEAN_UNHIDES.length > 0) {
  const currentProps = {};
  for (const bu of BOOLEAN_UNHIDES) {
    currentProps[bu.booleanRawKey] = true;
  }
  compInstance.setProperties(currentProps);
  await loadAllFonts(compInstance);
}

for (const el of elements) {
  if (!el.visible && (!el.unhideStrategy || el.unhideStrategy.method === 'direct')) {
    function findAndUnhide(node, targetName) {
      if (node.name === targetName && !node.visible) { node.visible = true; return true; }
      if ('children' in node) { for (const c of node.children) { if (findAndUnhide(c, targetName)) return true; } }
      return false;
    }
    findAndUnhide(compInstance, el.name);
  }
}
await loadAllFonts(compInstance);

const markerTextNodes = markerExample.findAll(n => n.type === 'TEXT');
const tableSectionNodes = section.findAll(n => n.type === 'TEXT');
const allPreloadTexts = [...markerTextNodes, ...tableSectionNodes];
const fontSet = new Set();
const fontsToLoad = [];
for (const tn of allPreloadTexts) {
  try {
    const fn = tn.fontName;
    if (fn && fn !== figma.mixed && fn.family) {
      const key = fn.family + '|' + fn.style;
      if (!fontSet.has(key)) { fontSet.add(key); fontsToLoad.push(fn); }
    }
  } catch {}
}
await Promise.all(fontsToLoad.map(f => figma.loadFontAsync(f).catch(() => {})));

const instAbsX = compInstance.absoluteTransform[0][2];
const instAbsY = compInstance.absoluteTransform[1][2];
let childContainer = compInstance;
while (childContainer.children.length === 1 && childContainer.children[0].type === 'FRAME' && childContainer.children[0].layoutMode !== 'NONE') {
  childContainer = childContainer.children[0];
}
if (childContainer.children.length === 1 && childContainer.children[0].type === 'SLOT') {
  childContainer = childContainer.children[0];
}

if (childContainer === compInstance && childContainer.children.length > 1) {
  const LEAF_STRUCTURAL = ['RECTANGLE', 'VECTOR', 'ELLIPSE', 'LINE', 'POLYGON', 'STAR', 'BOOLEAN_OPERATION'];
  const autoLayoutFrames = childContainer.children.filter(c => c.type === 'FRAME' && c.layoutMode !== 'NONE' && ('children' in c) && c.children.length >= 2);
  const structuralOnly = childContainer.children.filter(c => LEAF_STRUCTURAL.includes(c.type));
  if (autoLayoutFrames.length === 1 && structuralOnly.length === childContainer.children.length - 1) {
    childContainer = autoLayoutFrames[0];
  }
}

// --- Populate slot content via appendChild into SLOT node, ghost overlay as fallback ---
// Must run BEFORE bbox re-computation so auto-layout reflow is captured in positions.
let slotChildIdx = 0;
for (const el of elements) {
  if (el.isSynthetic) continue;
  if (el.populateSlot && el.populateWith) {
    try {
      const prefNode = await figma.getNodeByIdAsync(el.populateWith.componentId);
      if (prefNode && prefNode.type === 'COMPONENT') {
        const inst = prefNode.createInstance();
        await loadAllFonts(inst);
        let inserted = false;
        const slotNode = childContainer.children[slotChildIdx];
        if (slotNode && slotNode.type === 'SLOT') {
          try { slotNode.appendChild(inst); inserted = true; } catch {}
        }
        if (!inserted) {
          wrapper.appendChild(inst);
          inst.x = Math.round(compX + el.bbox.x + (el.bbox.w - inst.width) / 2);
          inst.y = Math.round(compY + el.bbox.y + (el.bbox.h - inst.height) / 2);
          inst.opacity = 0.6;
        }
      }
    } catch {}
  }
  slotChildIdx++;
}

// --- Update dimensions after all mutations (boolean unhide + slot population may reflow auto-layout) ---
rootW = Math.round(compInstance.width);
rootH = Math.round(compInstance.height);
neededW = rootW + 2 * sideRoom;
neededH = rootH + 2 * sideRoom;
ARTWORK_W = Math.max(MIN_W, Math.round(neededW));
ARTWORK_H = Math.max(MIN_H, Math.round(neededH));
wrapper.resize(ARTWORK_W, ARTWORK_H);
compX = Math.round((ARTWORK_W - rootW) / 2);
compY = Math.round((ARTWORK_H - rootH) / 2);
compInstance.x = compX;
compInstance.y = compY;

for (const el of elements) {
  if (el.isSynthetic && el.classification === 'container') {
    el.bbox = { x: 0, y: 0, w: rootW, h: rootH };
  }
  if (el.isSynthetic && el.classification === 'structural' && el.bbox.x === 0 && el.bbox.y === 0) {
    el.bbox.w = rootW;
    el.bbox.h = rootH;
  }
}

// --- Re-compute bboxes from live instance positions (after slot population + auto-layout reflow) ---
let childIdx = 0;
for (let i = 0; i < elements.length; i++) {
  const el = elements[i];
  if (el.isSynthetic) continue;
  const match = childContainer.children[childIdx];
  if (match) {
    const absX = match.absoluteTransform[0][2];
    const absY = match.absoluteTransform[1][2];
    el.bbox = {
      x: Math.round(absX - instAbsX),
      y: Math.round(absY - instAbsY),
      w: Math.round(match.width),
      h: Math.round(match.height)
    };
  }
  childIdx++;
}

const LINE_WIDTH = 1;

// --- Draw dashed outlines ---
for (const el of elements) {
  const outline = figma.createRectangle();
  wrapper.appendChild(outline);
  outline.name = 'Outline ' + el.index;
  outline.x = Math.round(compX + el.bbox.x);
  outline.y = Math.round(compY + el.bbox.y);
  outline.resize(Math.max(1, el.bbox.w), Math.max(1, el.bbox.h));
  outline.fills = [];
  outline.strokes = [{ type: 'SOLID', color: MARKER_COLOR }];
  outline.strokeWeight = 1;
  outline.dashPattern = [4, 4];
}

// --- Nearest-edge marker placement with collision avoidance ---
function scoreSides(el, rootW, rootH) {
  const pref = { top: 0, bottom: 1, left: 2, right: 3 };
  return [
    { side: 'left', dist: el.bbox.x },
    { side: 'top', dist: el.bbox.y },
    { side: 'right', dist: rootW - (el.bbox.x + el.bbox.w) },
    { side: 'bottom', dist: rootH - (el.bbox.y + el.bbox.h) }
  ].sort((a, b) => a.dist !== b.dist ? a.dist - b.dist : pref[a.side] - pref[b.side]);
}

function markerPos(side, el, compX, compY, rootW, rootH, offset) {
  const cX = compX + el.bbox.x + el.bbox.w / 2;
  const cY = compY + el.bbox.y + el.bbox.h / 2;
  const eL = compX + el.bbox.x;
  const eR = compX + el.bbox.x + el.bbox.w;
  const eT = compY + el.bbox.y;
  const eB = compY + el.bbox.y + el.bbox.h;
  const off = offset || 0;
  if (side === 'left') {
    return { dotX: compX - MARKER_OFFSET - MARKER_SIZE, dotY: cY - MARKER_SIZE / 2 + off, anchorX: eL, anchorY: cY + off, markerEdgeX: compX - MARKER_OFFSET, markerEdgeY: cY + off };
  } else if (side === 'right') {
    return { dotX: compX + rootW + MARKER_OFFSET, dotY: cY - MARKER_SIZE / 2 + off, anchorX: eR, anchorY: cY + off, markerEdgeX: compX + rootW + MARKER_OFFSET, markerEdgeY: cY + off };
  } else if (side === 'top') {
    return { dotX: cX - MARKER_SIZE / 2 + off, dotY: compY - MARKER_OFFSET - MARKER_SIZE, anchorX: cX + off, anchorY: eT, markerEdgeX: cX + off, markerEdgeY: compY - MARKER_OFFSET };
  } else {
    return { dotX: cX - MARKER_SIZE / 2 + off, dotY: eB + MARKER_OFFSET, anchorX: cX + off, anchorY: eB, markerEdgeX: cX + off, markerEdgeY: eB + MARKER_OFFSET };
  }
}

function overlapsPlaced(dotX, dotY, placed) {
  for (const p of placed) {
    if (Math.abs(dotX - p.x) < MARKER_SIZE + COLLISION_GAP && Math.abs(dotY - p.y) < MARKER_SIZE + COLLISION_GAP) return true;
  }
  return false;
}

function inBounds(dotX, dotY, aw, ah) {
  return dotX >= -MARKER_SIZE && dotY >= -MARKER_SIZE && dotX <= aw && dotY <= ah;
}

const placed = [];

function drawLine(wrapper, x1, y1, x2, y2, name) {
  if (Math.abs(x1 - x2) < 1 && Math.abs(y1 - y2) < 1) return;
  const seg = figma.createRectangle();
  wrapper.appendChild(seg);
  seg.name = name;
  seg.fills = [{ type: 'SOLID', color: MARKER_COLOR }];
  if (Math.abs(x1 - x2) < 1) {
    seg.x = Math.round(x1 - LINE_WIDTH / 2);
    seg.y = Math.round(Math.min(y1, y2));
    seg.resize(LINE_WIDTH, Math.max(1, Math.abs(y2 - y1)));
  } else {
    seg.x = Math.round(Math.min(x1, x2));
    seg.y = Math.round(y1 - LINE_WIDTH / 2);
    seg.resize(Math.max(1, Math.abs(x2 - x1)), LINE_WIDTH);
  }
}

for (const el of elements) {
  const elCenterX = compX + el.bbox.x + el.bbox.w / 2;
  const elCenterY = compY + el.bbox.y + el.bbox.h / 2;

  const dot = markerExample.clone();
  wrapper.appendChild(dot);
  dot.name = 'Marker ' + el.index;
  dot.visible = true;
  const numText = dot.findOne(n => n.type === 'TEXT');
  if (numText) numText.characters = String(el.index);

  if (el.inlineMarker) {
    const eL = compX + el.bbox.x;
    const eR = compX + el.bbox.x + el.bbox.w;
    const eT = compY + el.bbox.y;
    const eB = compY + el.bbox.y + el.bbox.h;
    const sides = scoreSides(el, rootW, rootH);
    const best = sides[0].side;
    let dX, dY, stubX1, stubY1, stubX2, stubY2;
    if (best === 'left') {
      dX = eL - MARKER_SIZE - 4; dY = elCenterY - MARKER_SIZE / 2;
      stubX1 = eL - 4; stubY1 = elCenterY; stubX2 = eL + INLINE_STUB; stubY2 = elCenterY;
    } else if (best === 'right') {
      dX = eR + 4; dY = elCenterY - MARKER_SIZE / 2;
      stubX1 = eR + 4; stubY1 = elCenterY; stubX2 = eR - INLINE_STUB; stubY2 = elCenterY;
    } else if (best === 'top') {
      dX = elCenterX - MARKER_SIZE / 2; dY = eT - MARKER_SIZE - 4;
      stubX1 = elCenterX; stubY1 = eT - 4; stubX2 = elCenterX; stubY2 = eT + INLINE_STUB;
    } else {
      dX = elCenterX - MARKER_SIZE / 2; dY = eB + 4;
      stubX1 = elCenterX; stubY1 = eB + 4; stubX2 = elCenterX; stubY2 = eB - INLINE_STUB;
    }
    dot.x = Math.round(dX);
    dot.y = Math.round(dY);
    drawLine(wrapper, stubX1, stubY1, stubX2, stubY2, 'Stub ' + el.index);
    continue;
  }

  const rankedSides = scoreSides(el, rootW, rootH);
  let finalDotX, finalDotY, finalSide, finalOffset = 0;
  let foundSpot = false;

  for (let off = 0; off <= perimeterCount * (MARKER_SIZE + COLLISION_GAP); off += MARKER_SIZE + COLLISION_GAP) {
    for (const { side } of rankedSides) {
      if (off === 0) {
        const pos = markerPos(side, el, compX, compY, rootW, rootH, 0);
        if (inBounds(pos.dotX, pos.dotY, ARTWORK_W, ARTWORK_H) && !overlapsPlaced(pos.dotX, pos.dotY, placed)) {
          finalDotX = pos.dotX; finalDotY = pos.dotY; finalSide = side; finalOffset = 0;
          foundSpot = true; break;
        }
      } else {
        for (const sign of [1, -1]) {
          const perpOff = off * sign;
          const pos = markerPos(side, el, compX, compY, rootW, rootH, perpOff);
          if (!inBounds(pos.dotX, pos.dotY, ARTWORK_W, ARTWORK_H)) continue;
          if (!overlapsPlaced(pos.dotX, pos.dotY, placed)) {
            finalDotX = pos.dotX; finalDotY = pos.dotY; finalSide = side; finalOffset = perpOff;
            foundSpot = true; break;
          }
        }
        if (foundSpot) break;
      }
    }
    if (foundSpot) break;
  }

  if (!foundSpot) {
    const pos = markerPos(rankedSides[0].side, el, compX, compY, rootW, rootH, 0);
    finalDotX = pos.dotX; finalDotY = pos.dotY; finalSide = rankedSides[0].side; finalOffset = 0;
  }

  placed.push({ x: finalDotX, y: finalDotY });
  dot.x = Math.round(finalDotX);
  dot.y = Math.round(finalDotY);

  const pos = markerPos(finalSide, el, compX, compY, rootW, rootH, finalOffset);
  drawLine(wrapper, pos.markerEdgeX, pos.markerEdgeY, pos.anchorX, pos.anchorY, 'Line ' + el.index);
}

markerExample.visible = false;

// --- Fill annotation table ---
const annotationTable = section.findOne(n => n.name === '#annotation-table');
const rows = annotationTable.children.filter(c => c.name === 'row');
const rowTemplate = rows[rows.length - 1];

for (const el of elements) {
  const row = rowTemplate.clone();
  annotationTable.appendChild(row);
  row.name = 'Row ' + el.index;

  const numCell = row.findOne(n => n.name === '#number');
  if (numCell) {
    const t = numCell.findOne(n => n.type === 'TEXT');
    if (t) t.characters = String(el.index);
  }

  const indicator = row.findOne(n => n.name === '#indicator');
  if (indicator) {
    const instIcon = indicator.findOne(n => n.name === '#instance');
    const textIcon = indicator.findOne(n => n.name === '#text');
    const slotIcon = indicator.findOne(n => n.name === '#slot');
    const frameIcon = indicator.findOne(n => n.name === '#frame');
    if (el.nodeType === 'INSTANCE') {
      if (instIcon) instIcon.visible = true;
      if (textIcon) textIcon.visible = false;
      if (slotIcon) slotIcon.visible = false;
      if (frameIcon) frameIcon.visible = false;
    } else if (el.nodeType === 'TEXT') {
      if (instIcon) instIcon.visible = false;
      if (textIcon) textIcon.visible = true;
      if (slotIcon) slotIcon.visible = false;
      if (frameIcon) frameIcon.visible = false;
    } else if (el.nodeType === 'SLOT' || el.classification === 'slot') {
      if (instIcon) instIcon.visible = false;
      if (textIcon) textIcon.visible = false;
      if (slotIcon) slotIcon.visible = true;
      if (frameIcon) frameIcon.visible = false;
    } else if (el.nodeType === 'FRAME' || el.nodeType === 'GROUP') {
      if (instIcon) instIcon.visible = false;
      if (textIcon) textIcon.visible = false;
      if (slotIcon) slotIcon.visible = false;
      if (frameIcon) frameIcon.visible = true;
    } else {
      if (instIcon) instIcon.visible = false;
      if (textIcon) textIcon.visible = false;
      if (slotIcon) slotIcon.visible = false;
      if (frameIcon) frameIcon.visible = false;
    }
  }

  const nameCell = row.findOne(n => n.name === '#element-name');
  if (nameCell) {
    const t = nameCell.findOne(n => n.type === 'TEXT');
    if (t) {
      const hiddenLabel = el.visible ? '' : ' (hidden)';
      const countSuffix = el.count > 1 ? ' (x' + el.count + ')' : '';
      t.characters = el.name + countSuffix + hiddenLabel;
    }
  }

  const notesCell = row.findOne(n => n.name === '#notes');
  if (notesCell) {
    const t = notesCell.findOne(n => n.type === 'TEXT');
    if (t) t.characters = el.notes || el.nodeType;
  }
}

rowTemplate.remove();
return { success: true };

const FRAME_ID = '__FRAME_ID__';
const CHILD_NAME = '__CHILD_NAME__';
const CHILD_COMP_ID = '__CHILD_COMP_ID__';
const CHILD_IS_COMP_SET = __CHILD_IS_COMP_SET__;
const MARKER_COLOR = { r: 0.922, g: 0, b: 0.431 };
const CHILD_BOOLEAN_PROPS = __CHILD_BOOLEAN_PROPS_JSON__;

async function loadAllFonts(rootNode) {
  const textNodes = rootNode.findAll(n => n.type === 'TEXT');
  const fontSet = new Set();
  const fontsToLoad = [];
  for (const tn of textNodes) {
    try {
      const fn = tn.fontName;
      if (fn && fn !== figma.mixed && fn.family) {
        const key = fn.family + '|' + fn.style;
        if (!fontSet.has(key)) { fontSet.add(key); fontsToLoad.push(fn); }
      }
    } catch {}
  }
  await Promise.all(fontsToLoad.map(f => figma.loadFontAsync(f).catch(() => {})));
}

const frame = await figma.getNodeByIdAsync(FRAME_ID);
const anatomySectionTemplate = frame.findOne(n => n.name === '#anatomy-section');
const markerExample = frame.findOne(n => n.name === '#marker-example');

const childSection = anatomySectionTemplate.clone();
anatomySectionTemplate.parent.appendChild(childSection);
childSection.name = CHILD_NAME + ' anatomy';
childSection.visible = true;

const markerTextNodes = markerExample.findAll(n => n.type === 'TEXT');
const sectionTextNodes = childSection.findAll(n => n.type === 'TEXT');
const allTexts = [...markerTextNodes, ...sectionTextNodes];
const fontSet = new Set();
const fontsToLoad = [];
for (const tn of allTexts) {
  try {
    const fn = tn.fontName;
    if (fn && fn !== figma.mixed && fn.family) {
      const key = fn.family + '|' + fn.style;
      if (!fontSet.has(key)) { fontSet.add(key); fontsToLoad.push(fn); }
    }
  } catch {}
}
await Promise.all(fontsToLoad.map(f => figma.loadFontAsync(f).catch(() => {})));

const sectionFrame = childSection.findOne(n => n.name === '#section-name');
if (sectionFrame) {
  const t = sectionFrame.findOne(n => n.type === 'TEXT');
  if (t) t.characters = CHILD_NAME + ' anatomy';
}

const sectionDescFrame = childSection.findOne(n => n.name === '#optional-section-description');
if (sectionDescFrame) {
  const t = sectionDescFrame.findOne(n => n.type === 'TEXT');
  if (t) t.characters = 'Internal elements of the ' + CHILD_NAME + ' sub-component.';
}

const childCompNode = await figma.getNodeByIdAsync(CHILD_COMP_ID);

function directUnhide(node) {
  if (!node.visible) node.visible = true;
  if ('children' in node) { for (const c of node.children) directUnhide(c); }
}

let singleVariant = CHILD_IS_COMP_SET
  ? (childCompNode.defaultVariant || childCompNode.children[0])
  : childCompNode;

if (CHILD_IS_COMP_SET && childCompNode.children.length > 1) {
  const defChildren = singleVariant.children ? singleVariant.children.length : 0;
  if (defChildren <= 1) {
    let bestVariant = singleVariant;
    let bestCount = defChildren;
    for (const v of childCompNode.children) {
      const cnt = v.children ? v.children.length : 0;
      if (cnt > bestCount) { bestCount = cnt; bestVariant = v; }
    }
    if (bestCount > defChildren) singleVariant = bestVariant;
  }
}

const compInstance = singleVariant.createInstance();
await loadAllFonts(compInstance);

if (CHILD_BOOLEAN_PROPS.length > 0) {
  const boolProps = {};
  for (const bp of CHILD_BOOLEAN_PROPS) {
    boolProps[bp.rawKey] = true;
  }
  try { compInstance.setProperties(boolProps); } catch {}
  await loadAllFonts(compInstance);
}
directUnhide(compInstance);
await loadAllFonts(compInstance);

let grandchildContainer = compInstance;
while (grandchildContainer.children.length === 1 && grandchildContainer.children[0].type === 'FRAME' && grandchildContainer.children[0].layoutMode !== 'NONE') {
  grandchildContainer = grandchildContainer.children[0];
}
if (grandchildContainer.children.length === 1 && grandchildContainer.children[0].type === 'SLOT') {
  grandchildContainer = grandchildContainer.children[0];
}

if (grandchildContainer === compInstance && grandchildContainer.children.length > 1) {
  const LEAF_STRUCTURAL = ['RECTANGLE', 'VECTOR', 'ELLIPSE', 'LINE', 'POLYGON', 'STAR', 'BOOLEAN_OPERATION'];
  const autoLayoutFrames = grandchildContainer.children.filter(c => c.type === 'FRAME' && c.layoutMode !== 'NONE' && ('children' in c) && c.children.length >= 2);
  const structuralOnly = grandchildContainer.children.filter(c => LEAF_STRUCTURAL.includes(c.type));
  if (autoLayoutFrames.length === 1 && structuralOnly.length === grandchildContainer.children.length - 1) {
    grandchildContainer = autoLayoutFrames[0];
  }
}

const LEAF_TYPES = ['TEXT', 'INSTANCE', 'VECTOR', 'RECTANGLE', 'ELLIPSE', 'LINE', 'POLYGON', 'STAR', 'BOOLEAN_OPERATION'];

function resolveLeafElements(node, depth, maxDepth, parentVisible) {
  const vis = parentVisible && node.visible;
  if (LEAF_TYPES.includes(node.type)) {
    return [{ node, name: node.name, visible: vis }];
  }
  if (('children' in node) && node.children.length > 0 && depth < maxDepth) {
    const leaves = [];
    for (const child of node.children) {
      const resolved = resolveLeafElements(child, depth + 1, maxDepth, vis);
      if (resolved.length === 1 && node.children.length === 1) {
        resolved[0].name = node.name;
      }
      leaves.push(...resolved);
    }
    return leaves;
  }
  return [{ node, name: node.name, visible: vis }];
}

const rawLeaves = [];
for (const gc of grandchildContainer.children) {
  rawLeaves.push(...resolveLeafElements(gc, 0, 4, true));
}

const gcElements = [];
let gcIdx = 1;
for (const leaf of rawLeaves) {
  const gc = leaf.node;
  const gcEl = {
    index: gcIdx++,
    name: leaf.name,
    nodeType: gc.type,
    visible: leaf.visible,
    nodeRef: gc,
    bbox: { x: 0, y: 0, w: Math.round(gc.width), h: Math.round(gc.height) },
    notes: ''
  };
  if (gc.type === 'INSTANCE') {
    try {
      const mc = await gc.getMainComponentAsync();
      if (mc) {
        const compSetName = (mc.parent && mc.parent.type === 'COMPONENT_SET') ? mc.parent.name : mc.name;
        gcEl.notes = compSetName + ' instance';
        gcEl.resolvedCompKey = (mc.parent && mc.parent.type === 'COMPONENT_SET') ? mc.parent.id : mc.id;
      }
    } catch { gcEl.notes = 'Instance'; }
  } else if (gc.type === 'TEXT') {
    const content = gc.characters || '';
    if (content.length > 0 && content.length <= 30) {
      gcEl.notes = 'Text element — "' + content + '"';
    } else {
      gcEl.notes = 'Text element';
    }
  } else if (gc.type === 'FRAME' || gc.type === 'GROUP') {
    const childCount = ('children' in gc) ? gc.children.length : 0;
    gcEl.notes = childCount > 0 ? 'Contains ' + childCount + ' elements' : 'Empty container';
  } else if (['VECTOR', 'RECTANGLE', 'ELLIPSE', 'LINE', 'POLYGON', 'STAR', 'BOOLEAN_OPERATION'].includes(gc.type)) {
    gcEl.notes = 'Illustration';
  }
  gcElements.push(gcEl);
}

// --- Collapse repeated identical siblings ---
const grouped = [];
for (const el of gcElements) {
  const groupKey = el.resolvedCompKey || el.name;
  const prev = grouped[grouped.length - 1];
  const prevKey = prev ? (prev.resolvedCompKey || prev.name) : null;
  if (prev && prev.name === el.name && prev.nodeType === el.nodeType && prevKey === groupKey) {
    prev.count = (prev.count || 1) + 1;
  } else {
    el.count = 1;
    grouped.push(el);
  }
}
let reIdx = 1;
for (const el of grouped) { el.index = reIdx++; }
const gcElementsGrouped = grouped;

if (gcElementsGrouped.length <= 1) {
  childSection.remove();
  compInstance.remove();
  return { success: true, skipped: true, childName: CHILD_NAME, elementCount: gcElementsGrouped.length, rawLeafCount: gcElements.length, reason: 'Sub-component has 1 or fewer unique element groups — section not needed' };
}

// --- Build artwork in #preview ---
const preview = childSection.findOne(n => n.name === '#preview');

const MARKER_SIZE = 33;
const MARKER_OFFSET = 40;
const PADDING = 80;
const MIN_W = 1400;
const MIN_H = 290;
const COLLISION_GAP = 8;
const INLINE_STUB = 16;

const rootW = Math.round(compInstance.width);
const rootH = Math.round(compInstance.height);

const perimeterCount = gcElementsGrouped.filter(el => !el.inlineMarker).length;
const markerPadding = Math.ceil(perimeterCount / 4) * (MARKER_SIZE + COLLISION_GAP);
const sideRoom = MARKER_SIZE + MARKER_OFFSET + PADDING + markerPadding;
const neededW = rootW + 2 * sideRoom;
const neededH = rootH + 2 * sideRoom;
const ARTWORK_W = Math.max(MIN_W, Math.round(neededW));
const ARTWORK_H = Math.max(MIN_H, Math.round(neededH));

const wrapper = figma.createFrame();
wrapper.name = 'Artwork wrapper';
wrapper.layoutMode = 'NONE';
wrapper.resize(ARTWORK_W, ARTWORK_H);
wrapper.clipsContent = true;
wrapper.fills = [];
preview.appendChild(wrapper);

const compX = Math.round((ARTWORK_W - rootW) / 2);
const compY = Math.round((ARTWORK_H - rootH) / 2);

wrapper.appendChild(compInstance);
compInstance.x = compX;
compInstance.y = compY;

const instAbsX = compInstance.absoluteTransform[0][2];
const instAbsY = compInstance.absoluteTransform[1][2];
for (const el of gcElementsGrouped) {
  const n = el.nodeRef;
  if (n && n.absoluteTransform) {
    const absX = n.absoluteTransform[0][2];
    const absY = n.absoluteTransform[1][2];
    el.bbox = {
      x: Math.round(absX - instAbsX),
      y: Math.round(absY - instAbsY),
      w: Math.round(n.width),
      h: Math.round(n.height)
    };
  }
}

const LINE_WIDTH = 1;

// --- Nearest-edge marker placement with collision avoidance ---
function scoreSides(el, rW, rH) {
  const pref = { top: 0, bottom: 1, left: 2, right: 3 };
  return [
    { side: 'left', dist: el.bbox.x },
    { side: 'top', dist: el.bbox.y },
    { side: 'right', dist: rW - (el.bbox.x + el.bbox.w) },
    { side: 'bottom', dist: rH - (el.bbox.y + el.bbox.h) }
  ].sort((a, b) => a.dist !== b.dist ? a.dist - b.dist : pref[a.side] - pref[b.side]);
}

function markerPos(side, el, cX, cY, rW, rH, offset) {
  const eCX = cX + el.bbox.x + el.bbox.w / 2;
  const eCY = cY + el.bbox.y + el.bbox.h / 2;
  const eL = cX + el.bbox.x;
  const eR = cX + el.bbox.x + el.bbox.w;
  const eT = cY + el.bbox.y;
  const eB = cY + el.bbox.y + el.bbox.h;
  const off = offset || 0;
  if (side === 'left') {
    return { dotX: cX - MARKER_OFFSET - MARKER_SIZE, dotY: eCY - MARKER_SIZE / 2 + off, anchorX: eL, anchorY: eCY + off, markerEdgeX: cX - MARKER_OFFSET, markerEdgeY: eCY + off };
  } else if (side === 'right') {
    return { dotX: cX + rW + MARKER_OFFSET, dotY: eCY - MARKER_SIZE / 2 + off, anchorX: eR, anchorY: eCY + off, markerEdgeX: cX + rW + MARKER_OFFSET, markerEdgeY: eCY + off };
  } else if (side === 'top') {
    return { dotX: eCX - MARKER_SIZE / 2 + off, dotY: cY - MARKER_OFFSET - MARKER_SIZE, anchorX: eCX + off, anchorY: eT, markerEdgeX: eCX + off, markerEdgeY: cY - MARKER_OFFSET };
  } else {
    return { dotX: eCX - MARKER_SIZE / 2 + off, dotY: eB + MARKER_OFFSET, anchorX: eCX + off, anchorY: eB, markerEdgeX: eCX + off, markerEdgeY: eB + MARKER_OFFSET };
  }
}

function overlapsPlaced(dX, dY, placed) {
  for (const p of placed) {
    if (Math.abs(dX - p.x) < MARKER_SIZE + COLLISION_GAP && Math.abs(dY - p.y) < MARKER_SIZE + COLLISION_GAP) return true;
  }
  return false;
}

function inBounds(dX, dY, aw, ah) {
  return dX >= -MARKER_SIZE && dY >= -MARKER_SIZE && dX <= aw && dY <= ah;
}

const placed = [];

function drawLine(wr, x1, y1, x2, y2, nm) {
  if (Math.abs(x1 - x2) < 1 && Math.abs(y1 - y2) < 1) return;
  const seg = figma.createRectangle();
  wr.appendChild(seg);
  seg.name = nm;
  seg.fills = [{ type: 'SOLID', color: MARKER_COLOR }];
  if (Math.abs(x1 - x2) < 1) {
    seg.x = Math.round(x1 - LINE_WIDTH / 2);
    seg.y = Math.round(Math.min(y1, y2));
    seg.resize(LINE_WIDTH, Math.max(1, Math.abs(y2 - y1)));
  } else {
    seg.x = Math.round(Math.min(x1, x2));
    seg.y = Math.round(y1 - LINE_WIDTH / 2);
    seg.resize(Math.max(1, Math.abs(x2 - x1)), LINE_WIDTH);
  }
}

for (const el of gcElementsGrouped) {
  const outline = figma.createRectangle();
  wrapper.appendChild(outline);
  outline.name = 'Outline ' + el.index;
  outline.x = Math.round(compX + el.bbox.x);
  outline.y = Math.round(compY + el.bbox.y);
  outline.resize(Math.max(1, el.bbox.w), Math.max(1, el.bbox.h));
  outline.fills = [];
  outline.strokes = [{ type: 'SOLID', color: MARKER_COLOR }];
  outline.strokeWeight = 1;
  outline.dashPattern = [4, 4];
}

for (const el of gcElementsGrouped) {
  const elCenterX = compX + el.bbox.x + el.bbox.w / 2;
  const elCenterY = compY + el.bbox.y + el.bbox.h / 2;

  const dot = markerExample.clone();
  wrapper.appendChild(dot);
  dot.visible = true;
  dot.name = 'Marker ' + el.index;
  const numText = dot.findOne(n => n.type === 'TEXT');
  if (numText) numText.characters = String(el.index);

  if (el.inlineMarker) {
    const eL = compX + el.bbox.x;
    const eR = compX + el.bbox.x + el.bbox.w;
    const eT = compY + el.bbox.y;
    const eB = compY + el.bbox.y + el.bbox.h;
    const sides = scoreSides(el, rootW, rootH);
    const best = sides[0].side;
    let dX, dY, sX1, sY1, sX2, sY2;
    if (best === 'left') {
      dX = eL - MARKER_SIZE - 4; dY = elCenterY - MARKER_SIZE / 2;
      sX1 = eL - 4; sY1 = elCenterY; sX2 = eL + INLINE_STUB; sY2 = elCenterY;
    } else if (best === 'right') {
      dX = eR + 4; dY = elCenterY - MARKER_SIZE / 2;
      sX1 = eR + 4; sY1 = elCenterY; sX2 = eR - INLINE_STUB; sY2 = elCenterY;
    } else if (best === 'top') {
      dX = elCenterX - MARKER_SIZE / 2; dY = eT - MARKER_SIZE - 4;
      sX1 = elCenterX; sY1 = eT - 4; sX2 = elCenterX; sY2 = eT + INLINE_STUB;
    } else {
      dX = elCenterX - MARKER_SIZE / 2; dY = eB + 4;
      sX1 = elCenterX; sY1 = eB + 4; sX2 = elCenterX; sY2 = eB - INLINE_STUB;
    }
    dot.x = Math.round(dX);
    dot.y = Math.round(dY);
    drawLine(wrapper, sX1, sY1, sX2, sY2, 'Stub ' + el.index);
    continue;
  }

  const rankedSides = scoreSides(el, rootW, rootH);
  let finalDotX, finalDotY, finalSide, finalOffset = 0;
  let foundSpot = false;

  for (let off = 0; off <= perimeterCount * (MARKER_SIZE + COLLISION_GAP); off += MARKER_SIZE + COLLISION_GAP) {
    for (const { side } of rankedSides) {
      if (off === 0) {
        const pos = markerPos(side, el, compX, compY, rootW, rootH, 0);
        if (inBounds(pos.dotX, pos.dotY, ARTWORK_W, ARTWORK_H) && !overlapsPlaced(pos.dotX, pos.dotY, placed)) {
          finalDotX = pos.dotX; finalDotY = pos.dotY; finalSide = side; finalOffset = 0;
          foundSpot = true; break;
        }
      } else {
        for (const sign of [1, -1]) {
          const perpOff = off * sign;
          const pos = markerPos(side, el, compX, compY, rootW, rootH, perpOff);
          if (!inBounds(pos.dotX, pos.dotY, ARTWORK_W, ARTWORK_H)) continue;
          if (!overlapsPlaced(pos.dotX, pos.dotY, placed)) {
            finalDotX = pos.dotX; finalDotY = pos.dotY; finalSide = side; finalOffset = perpOff;
            foundSpot = true; break;
          }
        }
        if (foundSpot) break;
      }
    }
    if (foundSpot) break;
  }

  if (!foundSpot) {
    const pos = markerPos(rankedSides[0].side, el, compX, compY, rootW, rootH, 0);
    finalDotX = pos.dotX; finalDotY = pos.dotY; finalSide = rankedSides[0].side; finalOffset = 0;
  }

  placed.push({ x: finalDotX, y: finalDotY });
  dot.x = Math.round(finalDotX);
  dot.y = Math.round(finalDotY);

      const pos = markerPos(finalSide, el, compX, compY, rootW, rootH, finalOffset);
      drawLine(wrapper, pos.markerEdgeX, pos.markerEdgeY, pos.anchorX, pos.anchorY, 'Line ' + el.index);
}

// --- Fill annotation table ---
const annotationTable = childSection.findOne(n => n.name === '#annotation-table');
const rows = annotationTable.children.filter(c => c.name === 'row');
const rowTemplate = rows[rows.length - 1];

for (const el of gcElementsGrouped) {
  const row = rowTemplate.clone();
  annotationTable.appendChild(row);
  row.name = 'Row ' + el.index;

  const numCell = row.findOne(n => n.name === '#number');
  if (numCell) {
    const t = numCell.findOne(n => n.type === 'TEXT');
    if (t) t.characters = String(el.index);
  }

  const indicator = row.findOne(n => n.name === '#indicator');
  if (indicator) {
    const instIcon = indicator.findOne(n => n.name === '#instance');
    const textIcon = indicator.findOne(n => n.name === '#text');
    const slotIcon = indicator.findOne(n => n.name === '#slot');
    const frameIcon = indicator.findOne(n => n.name === '#frame');
    if (el.nodeType === 'INSTANCE') {
      if (instIcon) instIcon.visible = true;
      if (textIcon) textIcon.visible = false;
      if (slotIcon) slotIcon.visible = false;
      if (frameIcon) frameIcon.visible = false;
    } else if (el.nodeType === 'TEXT') {
      if (instIcon) instIcon.visible = false;
      if (textIcon) textIcon.visible = true;
      if (slotIcon) slotIcon.visible = false;
      if (frameIcon) frameIcon.visible = false;
    } else if (el.nodeType === 'SLOT') {
      if (instIcon) instIcon.visible = false;
      if (textIcon) textIcon.visible = false;
      if (slotIcon) slotIcon.visible = true;
      if (frameIcon) frameIcon.visible = false;
    } else if (el.nodeType === 'FRAME' || el.nodeType === 'GROUP') {
      if (instIcon) instIcon.visible = false;
      if (textIcon) textIcon.visible = false;
      if (slotIcon) slotIcon.visible = false;
      if (frameIcon) frameIcon.visible = true;
    } else {
      if (instIcon) instIcon.visible = false;
      if (textIcon) textIcon.visible = false;
      if (slotIcon) slotIcon.visible = false;
      if (frameIcon) frameIcon.visible = false;
    }
  }

  const nameCell = row.findOne(n => n.name === '#element-name');
  if (nameCell) {
    const t = nameCell.findOne(n => n.type === 'TEXT');
    if (t) {
      const hiddenLabel = el.visible ? '' : ' (hidden)';
      const countSuffix = el.count > 1 ? ' (x' + el.count + ')' : '';
      t.characters = el.name + countSuffix + hiddenLabel;
    }
  }

  const notesCell = row.findOne(n => n.name === '#notes');
  if (notesCell) {
    const t = notesCell.findOne(n => n.type === 'TEXT');
    if (t) t.characters = el.notes || el.nodeType;
  }
}

rowTemplate.remove();
return { success: true, childSectionId: childSection.id, childName: CHILD_NAME, elementCount: gcElementsGrouped.length, groupedElements: gcElementsGrouped.map(el => ({ index: el.index, name: el.name, nodeType: el.nodeType, visible: el.visible, notes: el.notes, count: el.count })) };

const CHILD_SECTION_ID = '__CHILD_SECTION_ID__';
const ENRICHED_ELEMENTS = __ENRICHED_ELEMENTS_JSON__;

const section = await figma.getNodeByIdAsync(CHILD_SECTION_ID);
const annotationTable = section.findOne(n => n.name === '#annotation-table');
const rows = annotationTable.children.filter(c => c.name.startsWith('Row '));

const textNodes = annotationTable.findAll(n => n.type === 'TEXT');
const fontSet = new Set();
const fontsToLoad = [];
for (const tn of textNodes) {
  try {
    const fn = tn.fontName;
    if (fn && fn !== figma.mixed && fn.family) {
      const key = fn.family + '|' + fn.style;
      if (!fontSet.has(key)) { fontSet.add(key); fontsToLoad.push(fn); }
    }
  } catch {}
}
await Promise.all(fontsToLoad.map(f => figma.loadFontAsync(f).catch(() => {})));

for (const el of ENRICHED_ELEMENTS) {
  const row = rows.find(r => r.name === 'Row ' + el.index);
  if (!row) continue;
  const notesCell = row.findOne(n => n.name === '#notes');
  if (notesCell) {
    const t = notesCell.findOne(n => n.type === 'TEXT');
    if (t) t.characters = el.notes;
  }
}

return { success: true };

Anatomy spec complete: https://www.figma.com/design/{fileKey}/?node-id={frameId}