Create Structure Spec

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: Read instruction file
- [ ] Step 2: Verify MCP connection
- [ ] Step 3: Read template key from uspecs.config.json
- [ ] Step 4a: Visual and structural context (navigate, screenshot, file data)
- [ ] Step 4b: Run enhanced extraction script (sub-components, booleans, tokens, collapsed dimensions)
- [ ] Step 4c: Check variable modes
- [ ] Step 4d: Cross-variant dimensional comparison (deterministic script)
- [ ] Step 5: Navigate to destination (if different file)
- [ ] Step 6: AI interpretation layer — build section plan, write design-intent notes, detect anomalies, judge completeness
- [ ] Step 7: Generate structured data (component name, general notes, sections with columns and rows)
- [ ] Step 8: Re-read instruction file (Common Mistakes, Do NOT sections) and audit
- [ ] Step 9: Import and detach the Structure template
- [ ] Step 10: Fill header fields
- [ ] Step 11: For each section → render table, determine preview params, populate preview
- [ ] Step 12: Visual validation

const TARGET_NODE_ID = '__NODE_ID__';

async function resolveBinding(node, prop) {
  const bindings = node.boundVariables;
  if (!bindings || !bindings[prop]) return null;
  const binding = Array.isArray(bindings[prop]) ? bindings[prop][0] : bindings[prop];
  if (!binding?.id) return null;
  try {
    const v = await figma.variables.getVariableByIdAsync(binding.id);
    if (v) return v.name;
  } catch {}
  return null;
}

async function resolveTextStyle(textNode) {
  if (textNode.textStyleId && typeof textNode.textStyleId === 'string' && textNode.textStyleId !== '') {
    try {
      const style = await figma.getStyleByIdAsync(textNode.textStyleId);
      if (style) return style.name;
    } catch {}
  }
  return null;
}

function makeDisplayString(value, token) {
  if (token) return token + ' (' + value + ')';
  return String(value);
}

function collapsePadding(pT, pB, pS, pE, tT, tB, tS, tE) {
  const vT = Math.round(pT || 0), vB = Math.round(pB || 0);
  const vS = Math.round(pS || 0), vE = Math.round(pE || 0);
  if (vT === vB && vS === vE && vT === vS && tT === tB && tS === tE && tT === tS) {
    return { value: vT, token: tT || null, display: makeDisplayString(vT, tT) };
  }
  if (vT === vB && vS === vE && tT === tB && tS === tE) {
    return {
      vertical: { value: vT, token: tT || null, display: makeDisplayString(vT, tT) },
      horizontal: { value: vS, token: tS || null, display: makeDisplayString(vS, tS) }
    };
  }
  return {
    top: { value: vT, token: tT || null, display: makeDisplayString(vT, tT) },
    bottom: { value: vB, token: tB || null, display: makeDisplayString(vB, tB) },
    start: { value: vS, token: tS || null, display: makeDisplayString(vS, tS) },
    end: { value: vE, token: tE || null, display: makeDisplayString(vE, tE) }
  };
}

function collapseCornerRadius(tl, tr, bl, br, tTL, tTR, tBL, tBR) {
  if (tl === tr && tr === bl && bl === br && tTL === tTR && tTR === tBL && tBL === tBR) {
    return { value: tl, token: tTL || null, display: makeDisplayString(tl, tTL) };
  }
  return {
    topStart: { value: tl, token: tTL || null, display: makeDisplayString(tl, tTL) },
    topEnd: { value: tr, token: tTR || null, display: makeDisplayString(tr, tTR) },
    bottomStart: { value: bl, token: tBL || null, display: makeDisplayString(bl, tBL) },
    bottomEnd: { value: br, token: tBR || null, display: makeDisplayString(br, tBR) }
  };
}

async function extractDimensions(node) {
  const dims = {};
  const simpleProps = ['width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight', 'itemSpacing', 'counterAxisSpacing'];
  for (const p of simpleProps) {
    if (node[p] !== undefined && node[p] !== null && node[p] !== figma.mixed) {
      const token = await resolveBinding(node, p);
      const v = Math.round(node[p]);
      dims[p] = { value: v, token: token || null, display: makeDisplayString(v, token) };
    }
  }

  const tPT = await resolveBinding(node, 'paddingTop');
  const tPB = await resolveBinding(node, 'paddingBottom');
  const tPS = await resolveBinding(node, 'paddingLeft');
  const tPE = await resolveBinding(node, 'paddingRight');
  if (node.paddingTop !== undefined || node.paddingBottom !== undefined || node.paddingLeft !== undefined || node.paddingRight !== undefined) {
    dims.padding = collapsePadding(node.paddingTop, node.paddingBottom, node.paddingLeft, node.paddingRight, tPT, tPB, tPS, tPE);
  }

  if (node.cornerRadius !== undefined && node.cornerRadius !== null) {
    if (node.cornerRadius === figma.mixed) {
      const tTL = await resolveBinding(node, 'topLeftRadius');
      const tTR = await resolveBinding(node, 'topRightRadius');
      const tBL = await resolveBinding(node, 'bottomLeftRadius');
      const tBR = await resolveBinding(node, 'bottomRightRadius');
      dims.cornerRadius = collapseCornerRadius(
        Math.round(node.topLeftRadius || 0), Math.round(node.topRightRadius || 0),
        Math.round(node.bottomLeftRadius || 0), Math.round(node.bottomRightRadius || 0),
        tTL, tTR, tBL, tBR
      );
    } else {
      const token = await resolveBinding(node, 'cornerRadius');
      const v = Math.round(node.cornerRadius);
      dims.cornerRadius = { value: v, token: token || null, display: makeDisplayString(v, token) };
    }
  }

  if (node.strokeWeight !== undefined && node.strokeWeight !== null) {
    if (node.strokeWeight === figma.mixed) {
      const sides = {};
      for (const s of ['strokeTopWeight', 'strokeBottomWeight', 'strokeLeftWeight', 'strokeRightWeight']) {
        if (node[s] !== undefined) {
          const logicalKey = s.replace('strokeTopWeight', 'top').replace('strokeBottomWeight', 'bottom').replace('strokeLeftWeight', 'start').replace('strokeRightWeight', 'end');
          sides[logicalKey] = { value: Math.round(node[s]), token: null, display: String(Math.round(node[s])) };
        }
      }
      dims.strokeWeight = sides;
    } else {
      const token = await resolveBinding(node, 'strokeWeight');
      const v = Math.round(node.strokeWeight);
      dims.strokeWeight = { value: v, token: token || null, display: makeDisplayString(v, token) };
    }
  }

  if (node.layoutMode && node.layoutMode !== 'NONE') {
    dims.layoutMode = { value: node.layoutMode, token: null, display: node.layoutMode };
  }
  if (node.primaryAxisAlignItems) dims.primaryAxisAlignItems = { value: node.primaryAxisAlignItems, token: null, display: node.primaryAxisAlignItems };
  if (node.counterAxisAlignItems) dims.counterAxisAlignItems = { value: node.counterAxisAlignItems, token: null, display: node.counterAxisAlignItems };
  if (node.layoutSizingHorizontal) dims.layoutSizingHorizontal = { value: node.layoutSizingHorizontal, token: null, display: node.layoutSizingHorizontal };
  if (node.layoutSizingVertical) dims.layoutSizingVertical = { value: node.layoutSizingVertical, token: null, display: node.layoutSizingVertical };
  if (node.clipsContent !== undefined) dims.clipsContent = { value: node.clipsContent, token: null, display: String(node.clipsContent) };

  return dims;
}

async function extractTypography(node) {
  if (node.type !== 'TEXT') return null;
  const styleName = await resolveTextStyle(node);
  if (styleName) return { styleName };
  const props = {};
  if (typeof node.fontSize === 'number') props.fontSize = node.fontSize;
  if (typeof node.fontName === 'object') {
    props.fontFamily = node.fontName.family;
    props.fontWeight = node.fontName.style;
  }
  if (node.lineHeight && typeof node.lineHeight === 'object' && node.lineHeight.unit !== 'AUTO') {
    props.lineHeight = node.lineHeight.value;
  }
  if (node.letterSpacing && typeof node.letterSpacing === 'object' && node.letterSpacing.value !== 0) {
    props.letterSpacing = parseFloat(node.letterSpacing.value.toFixed(2));
  }
  return Object.keys(props).length > 0 ? props : null;
}

async function extractChildren(container, depth, discoverSubComps) {
  if (depth === undefined) depth = 0;
  const children = [];
  for (const child of container.children) {
    const entry = {
      name: child.name,
      type: child.type,
      visible: child.visible,
      dimensions: await extractDimensions(child)
    };
    if (child.type === 'TEXT') {
      entry.typography = await extractTypography(child);
    }
    if (child.type === 'INSTANCE') {
      try {
        const mc = await child.getMainComponentAsync();
        if (mc) {
          entry.mainComponentName = mc.name;
          const parentSet = mc.parent && mc.parent.type === 'COMPONENT_SET' ? mc.parent : null;
          entry.parentSetName = parentSet ? parentSet.name : mc.name;
          if (discoverSubComps && depth === 0) {
            const subCompSet = mc.parent && mc.parent.type === 'COMPONENT_SET' ? mc.parent : null;
            entry.subCompSetId = subCompSet ? subCompSet.id : mc.id;
            if (subCompSet && subCompSet.variantGroupProperties) {
              entry.subCompVariantAxes = {};
              for (const [k, v] of Object.entries(subCompSet.variantGroupProperties)) {
                entry.subCompVariantAxes[k] = v.values;
              }
            }
            const instProps = child.componentProperties;
            if (instProps) {
              entry.booleanOverrides = {};
              for (const [key, val] of Object.entries(instProps)) {
                if (val.type === 'BOOLEAN') entry.booleanOverrides[key] = val.value;
              }
            }
          }
        }
      } catch {}
    }
    const isTopLevelInstance = depth === 0 && child.type === 'INSTANCE';
    if ('children' in child && child.children.length > 0 && (child.type !== 'INSTANCE' || isTopLevelInstance)) {
      entry.children = await extractChildren(child, depth + 1, false);
    }
    children.push(entry);
  }
  return children;
}

function buildLayoutTree(node, depth) {
  if (depth === undefined) depth = 0;
  if (!('children' in node) || node.children.length === 0) return node.name;
  const isAutoLayout = node.layoutMode && node.layoutMode !== 'NONE';
  const childTrees = node.children.map(c => buildLayoutTree(c, depth + 1));
  if (!isAutoLayout && depth > 0) return childTrees.length === 1 ? childTrees[0] : childTrees;
  return {
    name: node.name,
    layoutMode: node.layoutMode || 'NONE',
    hasPadding: (node.paddingTop || 0) + (node.paddingBottom || 0) + (node.paddingLeft || 0) + (node.paddingRight || 0) > 0,
    hasSpacing: (node.itemSpacing || 0) > 0,
    children: childTrees
  };
}

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';
const variantAxes = {};
if (isComponentSet && node.variantGroupProperties) {
  for (const [key, val] of Object.entries(node.variantGroupProperties)) {
    variantAxes[key] = val.values;
  }
}

const propDefs = node.componentPropertyDefinitions;
const propertyDefs = {};
const booleanDefs = {};
if (propDefs) {
  for (const [key, def] of Object.entries(propDefs)) {
    propertyDefs[key] = { type: def.type, defaultValue: def.defaultValue };
    if (def.variantOptions) propertyDefs[key].variantOptions = def.variantOptions;
    if (def.type === 'BOOLEAN') booleanDefs[key] = def.defaultValue;
  }
}

const variantChildren = isComponentSet ? node.children : [node];
const defaultVariant = isComponentSet ? (node.defaultVariant || node.children[0]) : node;
const defaultVProps = isComponentSet ? (defaultVariant.variantProperties || {}) : {};
const defaultValues = {};
for (const [axis, vals] of Object.entries(variantAxes)) {
  defaultValues[axis] = defaultVProps[axis] || vals[0];
}

// Only vary dimension-affecting axes (Size, Density, Shape); skip visual-only (State, Mode, Theme)
const DIMENSION_AXES = /size|density|shape/i;
const dimensionAffectingAxes = Object.keys(variantAxes).filter(a => DIMENSION_AXES.test(a));
const axesToVary = dimensionAffectingAxes.length > 0 ? dimensionAffectingAxes : [Object.keys(variantAxes)[0] || ''];

const selectedVariants = new Set();
for (const axis of axesToVary) {
  const vals = variantAxes[axis] || [];
  for (const val of vals) {
    const props = { ...defaultValues, [axis]: val };
    const name = Object.entries(props).map(([k, v]) => k + '=' + v).join(', ');
    selectedVariants.add(name);
  }
}
if (selectedVariants.size === 0 && variantChildren.length > 0) {
  selectedVariants.add(variantChildren[0].name);
}

const variants = [];
for (const variant of variantChildren) {
  if (!isComponentSet || selectedVariants.has(variant.name)) {
    const dims = await extractDimensions(variant);
    variants.push({
      name: variant.name,
      dimensions: dims,
      children: await extractChildren(variant, 0, true),
      layoutTree: buildLayoutTree(variant)
    });
  }
}

let enrichedTree = null;
const subComponents = [];
const testInst = defaultVariant.createInstance();
if (Object.keys(booleanDefs).length > 0) {
  const enableAll = {};
  for (const key of Object.keys(booleanDefs)) enableAll[key] = true;
  try { testInst.setProperties(enableAll); } catch {}
}
enrichedTree = await extractChildren(testInst, 0, true);

for (const child of enrichedTree) {
  if (child.type === 'INSTANCE' && child.subCompSetId) {
    subComponents.push({
      name: child.name,
      mainComponentName: child.mainComponentName || child.name,
      subCompSetId: child.subCompSetId,
      subCompVariantAxes: child.subCompVariantAxes || {},
      booleanOverrides: child.booleanOverrides || {},
      dimensions: child.dimensions || {},
      children: child.children || [],
      typography: child.typography || null
    });
  }
}
testInst.remove();

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

const hasPreferred = Object.values(slotPropDefs).some(d => d.preferredValues && d.preferredValues.length > 0);
const allCompKeys = new Map();
if (hasPreferred) {
  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 = node; while (_rp.parent && _rp.parent.type !== 'DOCUMENT') _rp = _rp.parent;
  if (_rp.type === 'PAGE') await figma.setCurrentPageAsync(_rp);
}

const slotTestInst = defaultVariant.createInstance();
if (Object.keys(booleanDefs).length > 0) {
  const enableAll = {};
  for (const key of Object.keys(booleanDefs)) enableAll[key] = true;
  try { slotTestInst.setProperties(enableAll); } catch {}
}

for (const [rawKey, def] of Object.entries(slotPropDefs)) {
  const slotName = rawKey.split('#')[0];
  const slotNode = slotTestInst.findOne(n => n.type === 'SLOT' && n.name === slotName);
  const entry = {
    slotName,
    slotNodeType: 'SLOT',
    preferredComponents: [],
    defaultChildren: [],
    slotDimensions: slotNode ? await extractDimensions(slotNode) : {}
  };

  if (slotNode && 'children' in slotNode) {
    for (const sc of slotNode.children) {
      const scInfo = { name: sc.name, nodeType: sc.type };
      if (sc.type === 'INSTANCE') {
        try {
          const mc = await sc.getMainComponentAsync();
          if (mc) {
            scInfo.mainComponentName = mc.name;
            const isSet = mc.parent && mc.parent.type === 'COMPONENT_SET';
            scInfo.componentSetName = isSet ? mc.parent.name : mc.name;
          }
        } catch {}
      }
      entry.defaultChildren.push(scInfo);
    }
  }

  if (def.preferredValues && def.preferredValues.length > 0) {
    for (const pv of def.preferredValues) {
      if (pv.type !== 'COMPONENT') continue;
      const compNode2 = allCompKeys.get(pv.key);
      if (!compNode2) continue;
      const isSet = compNode2.parent && compNode2.parent.type === 'COMPONENT_SET';
      const setNode = isSet ? compNode2.parent : compNode2;
      const prefEntry = {
        componentKey: pv.key,
        componentName: compNode2.name,
        componentId: compNode2.id,
        componentSetId: isSet ? setNode.id : null,
        isComponentSet: isSet,
        variantAxes: {},
        booleanDefs: {}
      };
      if (isSet && setNode.variantGroupProperties) {
        for (const [k, v] of Object.entries(setNode.variantGroupProperties)) {
          prefEntry.variantAxes[k] = v.values;
        }
      }
      const prefPropDefs = setNode.componentPropertyDefinitions || {};
      for (const [pk, pd] of Object.entries(prefPropDefs)) {
        if (pd.type === 'BOOLEAN') prefEntry.booleanDefs[pk] = pd.defaultValue;
      }
      entry.preferredComponents.push(prefEntry);
    }
  }
  slotContents.push(entry);
}
slotTestInst.remove();

return {
  componentName: node.name,
  compSetNodeId: TARGET_NODE_ID,
  isComponentSet,
  variantAxes,
  propertyDefs,
  booleanDefs,
  variantCount: variantChildren.length,
  variants,
  enrichedTree,
  subComponents,
  slotContents
};

const TARGET_NODE_ID = '__NODE_ID__';
const SUB_COMPONENTS = __SUB_COMPONENTS_JSON__;
const BOOLEAN_DEFS = __BOOLEAN_DEFS_JSON__;
const VARIANT_AXES = __VARIANT_AXES_JSON__;

function makeDisplay(value, token) {
  if (token) return token + ' (' + value + ')';
  return String(value);
}

async function resolveBinding(node, prop) {
  const bindings = node.boundVariables;
  if (!bindings || !bindings[prop]) return null;
  const binding = Array.isArray(bindings[prop]) ? bindings[prop][0] : bindings[prop];
  if (!binding?.id) return null;
  try {
    const v = await figma.variables.getVariableByIdAsync(binding.id);
    if (v) return v.name;
  } catch {}
  return null;
}

function collapsePadding(pT, pB, pS, pE, tT, tB, tS, tE) {
  const vT = Math.round(pT || 0), vB = Math.round(pB || 0);
  const vS = Math.round(pS || 0), vE = Math.round(pE || 0);
  if (vT === vB && vS === vE && vT === vS && tT === tB && tS === tE && tT === tS) {
    return { value: vT, token: tT || null, display: makeDisplay(vT, tT) };
  }
  if (vT === vB && vS === vE && tT === tB && tS === tE) {
    return {
      vertical: { value: vT, token: tT || null, display: makeDisplay(vT, tT) },
      horizontal: { value: vS, token: tS || null, display: makeDisplay(vS, tS) }
    };
  }
  return {
    top: { value: vT, token: tT || null, display: makeDisplay(vT, tT) },
    bottom: { value: vB, token: tB || null, display: makeDisplay(vB, tB) },
    start: { value: vS, token: tS || null, display: makeDisplay(vS, tS) },
    end: { value: vE, token: tE || null, display: makeDisplay(vE, tE) }
  };
}

function collapseCornerRadius(tl, tr, bl, br, tTL, tTR, tBL, tBR) {
  if (tl === tr && tr === bl && bl === br && tTL === tTR && tTR === tBL && tBL === tBR) {
    return { value: tl, token: tTL || null, display: makeDisplay(tl, tTL) };
  }
  return {
    topStart: { value: tl, token: tTL || null, display: makeDisplay(tl, tTL) },
    topEnd: { value: tr, token: tTR || null, display: makeDisplay(tr, tTR) },
    bottomStart: { value: bl, token: tBL || null, display: makeDisplay(bl, tBL) },
    bottomEnd: { value: br, token: tBR || null, display: makeDisplay(br, tBR) }
  };
}

async function measureNode(node) {
  const m = {};
  const props = ['width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight', 'itemSpacing', 'counterAxisSpacing'];
  for (const p of props) {
    if (node[p] !== undefined && node[p] !== null && node[p] !== figma.mixed) {
      const token = await resolveBinding(node, p);
      const v = Math.round(node[p]);
      m[p] = { value: v, token: token || null, display: makeDisplay(v, token) };
    }
  }

  const tPT = await resolveBinding(node, 'paddingTop');
  const tPB = await resolveBinding(node, 'paddingBottom');
  const tPS = await resolveBinding(node, 'paddingLeft');
  const tPE = await resolveBinding(node, 'paddingRight');
  if (node.paddingTop !== undefined || node.paddingBottom !== undefined || node.paddingLeft !== undefined || node.paddingRight !== undefined) {
    m.padding = collapsePadding(node.paddingTop, node.paddingBottom, node.paddingLeft, node.paddingRight, tPT, tPB, tPS, tPE);
  }

  if (node.cornerRadius !== undefined && node.cornerRadius !== null) {
    if (node.cornerRadius === figma.mixed) {
      const tTL = await resolveBinding(node, 'topLeftRadius');
      const tTR = await resolveBinding(node, 'topRightRadius');
      const tBL = await resolveBinding(node, 'bottomLeftRadius');
      const tBR = await resolveBinding(node, 'bottomRightRadius');
      m.cornerRadius = collapseCornerRadius(
        Math.round(node.topLeftRadius || 0), Math.round(node.topRightRadius || 0),
        Math.round(node.bottomLeftRadius || 0), Math.round(node.bottomRightRadius || 0),
        tTL, tTR, tBL, tBR
      );
    } else {
      const token = await resolveBinding(node, 'cornerRadius');
      const v = Math.round(node.cornerRadius);
      m.cornerRadius = { value: v, token: token || null, display: makeDisplay(v, token) };
    }
  }

  if (node.strokeWeight !== undefined && node.strokeWeight !== null) {
    if (node.strokeWeight === figma.mixed) {
      const sides = {};
      for (const s of ['strokeTopWeight', 'strokeBottomWeight', 'strokeLeftWeight', 'strokeRightWeight']) {
        if (node[s] !== undefined) {
          const logicalKey = s.replace('strokeTopWeight', 'top').replace('strokeBottomWeight', 'bottom').replace('strokeLeftWeight', 'start').replace('strokeRightWeight', 'end');
          sides[logicalKey] = { value: Math.round(node[s]), token: null, display: String(Math.round(node[s])) };
        }
      }
      m.strokeWeight = sides;
    } else {
      const token = await resolveBinding(node, 'strokeWeight');
      const v = Math.round(node.strokeWeight);
      m.strokeWeight = { value: v, token: token || null, display: makeDisplay(v, token) };
    }
  }

  if (node.layoutMode && node.layoutMode !== 'NONE') m.layoutMode = { value: node.layoutMode, token: null, display: node.layoutMode };
  if (node.layoutSizingHorizontal) m.layoutSizingHorizontal = { value: node.layoutSizingHorizontal, token: null, display: node.layoutSizingHorizontal };
  if (node.layoutSizingVertical) m.layoutSizingVertical = { value: node.layoutSizingVertical, token: null, display: node.layoutSizingVertical };

  if (node.type === 'TEXT') {
    if (node.textStyleId && typeof node.textStyleId === 'string' && node.textStyleId !== '') {
      try {
        const style = await figma.getStyleByIdAsync(node.textStyleId);
        if (style) m.typography = { styleName: style.name };
      } catch {}
    } else {
      const typo = {};
      if (typeof node.fontSize === 'number') typo.fontSize = node.fontSize;
      if (typeof node.fontName === 'object') typo.fontWeight = node.fontName.style;
      if (node.lineHeight && typeof node.lineHeight === 'object' && node.lineHeight.unit !== 'AUTO') typo.lineHeight = node.lineHeight.value;
      if (Object.keys(typo).length > 0) m.typography = typo;
    }
  }
  return m;
}

async function measureChildren(container, enableBools) {
  if (enableBools && Object.keys(enableBools).length > 0) {
    try { container.setProperties(enableBools); } catch {}
  }
  const result = {};
  for (const child of container.children) {
    if (!child.visible && !enableBools) continue;
    result[child.name] = await measureNode(child);
    if ('children' in child && child.children.length > 0 && child.type !== 'INSTANCE') {
      const nested = {};
      for (const gc of child.children) {
        if (gc.visible) nested[gc.name] = await measureNode(gc);
      }
      if (Object.keys(nested).length > 0) result[child.name + '.__children'] = nested;
    }
  }
  return result;
}

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 compSet = await figma.getNodeByIdAsync(TARGET_NODE_ID);
if (!compSet) return { error: 'Node not found' };
const isCS = compSet.type === 'COMPONENT_SET';
const allVariants = isCS ? compSet.children : [compSet];
const axes = {};
if (isCS && compSet.variantGroupProperties) {
  for (const [k, v] of Object.entries(compSet.variantGroupProperties)) axes[k] = v.values;
}

const sizeAxis = Object.keys(axes).find(a => /size/i.test(a));
const stateAxis = Object.keys(axes).find(a => /state/i.test(a));

const defaultVariant = isCS ? (compSet.defaultVariant || compSet.children[0]) : compSet;
const defaultVProps = isCS ? (defaultVariant.variantProperties || {}) : {};
const defaultValues = {};
for (const [axis, vals] of Object.entries(axes)) {
  defaultValues[axis] = defaultVProps[axis] || vals[0];
}

const rootDimensions = {};
const subComponentDimensions = {};
const slotContentDimensions = {};
const SLOT_CONTENTS = __SLOT_CONTENTS_JSON__;

const sizeValues = sizeAxis ? axes[sizeAxis] : [null];
for (const sizeVal of sizeValues) {
  const targetProps = { ...defaultValues };
  if (sizeAxis && sizeVal) targetProps[sizeAxis] = sizeVal;

  const variant = isCS ? allVariants.find(v => {
    const vp = v.variantProperties || {};
    return Object.entries(targetProps).every(([k, val]) => vp[k] === val);
  }) : allVariants[0];
  if (!variant) continue;

  const label = sizeVal || variant.name;
  rootDimensions[label] = await measureNode(variant);

  const inst = variant.createInstance();
  const enableAll = {};
  for (const key of Object.keys(BOOLEAN_DEFS)) enableAll[key] = true;
  try { inst.setProperties(enableAll); } catch {}

  for (const sc of SUB_COMPONENTS) {
    const subInst = inst.findOne(n => n.name === sc.name && n.type === 'INSTANCE');
    if (subInst) {
      if (!subComponentDimensions[sc.name]) subComponentDimensions[sc.name] = {};
      const boolOverrides = {};
      for (const key of Object.keys(sc.booleanOverrides || {})) boolOverrides[key] = true;
      subComponentDimensions[sc.name][label] = {
        self: await measureNode(subInst),
        children: await measureChildren(subInst, boolOverrides)
      };
    }
  }

  for (const slot of SLOT_CONTENTS) {
    if (!slot.preferredComponents || slot.preferredComponents.length === 0) continue;
    if (!slotContentDimensions[slot.slotName]) slotContentDimensions[slot.slotName] = {};
    const slotNode = inst.findOne(n => n.type === 'SLOT' && n.name === slot.slotName);
    if (!slotNode) continue;
    for (const pref of slot.preferredComponents) {
      if (!slotContentDimensions[slot.slotName][pref.componentName]) {
        slotContentDimensions[slot.slotName][pref.componentName] = {};
      }
      const prefComp = await figma.getNodeByIdAsync(pref.componentId);
      if (!prefComp || prefComp.type !== 'COMPONENT') continue;
      const prefInst = prefComp.createInstance();
      while (slotNode.children.length > 0) slotNode.children[0].remove();
      slotNode.appendChild(prefInst);
      await loadAllFonts(inst);
      slotContentDimensions[slot.slotName][pref.componentName][label] = {
        self: await measureNode(prefInst),
        slotContext: await measureNode(slotNode)
      };
    }
  }

  inst.remove();
}

let stateComparison = null;
if (stateAxis && axes[stateAxis].length > 1) {
  stateComparison = {};
  for (const stateVal of axes[stateAxis]) {
    const targetProps = { ...defaultValues, [stateAxis]: stateVal };
    const variant = allVariants.find(v => {
      const vp = v.variantProperties || {};
      return Object.entries(targetProps).every(([k, val]) => vp[k] === val);
    });
    if (variant) stateComparison[stateVal] = await measureNode(variant);
  }
}

return {
  rootDimensions,
  subComponentDimensions,
  slotContentDimensions,
  stateComparison,
  sizeAxis: sizeAxis || null,
  stateAxis: stateAxis || null
};

sectionPlan = [
  {
    sectionType: "composition" | "variant" | "subComponent" | "stateConditional" | "slotContent",
    sectionName: string,
    sectionDescription: string | null,
    columns: string[],           // e.g., ["Spec", "Large", "Medium", "Small", "Notes"]
    subCompSetId: string | null, // for subComponent sections
    booleanOverrides: object,    // for subComponent sections
    variantAxis: string | null,  // axis name for variant sections
    dataSource: string,          // "rootDimensions" | "subComponentDimensions.Name" | "stateComparison" | "slotContentDimensions.SlotName.CompName"
    preferredComponentId: string | null,      // for slotContent sections — the preferred component's own component set ID (or component ID if not in a set)
    preferredComponentSetId: string | null,    // for slotContent sections — the preferred component's component set ID (for preview sourcing)
    slotName: string | null                   // for slotContent sections — the SLOT property name
  },
  ...
]

const TEMPLATE_KEY = '__STRUCTURE_TEMPLATE_KEY__';

const templateComponent = await figma.importComponentByKeyAsync(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__ Structure';
figma.currentPage.selection = [frame];
figma.viewport.scrollAndZoomIntoView([frame]);
return { frameId: frame.id };

const TEMPLATE_KEY = '__STRUCTURE_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(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__ Structure';
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 === '#compName');
if (compNameFrame) {
  const t = compNameFrame.findOne(n => n.type === 'TEXT');
  if (t) t.characters = '__COMPONENT_NAME__';
}

const notesFrame = frame.findOne(n => n.name === '#general-structure-notes');
if (notesFrame) {
  const hasNotes = __HAS_GENERAL_NOTES__;
  if (!hasNotes) {
    notesFrame.visible = false;
  } else {
    const t = notesFrame.findOne(n => n.type === 'TEXT');
    if (t) t.characters = '__GENERAL_NOTES__';
  }
}

return { success: true };

const FRAME_ID = '__FRAME_ID__';
const SECTION_NAME = '__SECTION_NAME__';
const SECTION_DESCRIPTION = '__SECTION_DESCRIPTION__';
const HAS_DESCRIPTION = __HAS_DESCRIPTION__;
const COLUMNS = __COLUMNS_JSON__;
const ROWS = __ROWS_JSON__;

const frame = await figma.getNodeByIdAsync(FRAME_ID);
const sectionTemplate = frame.findOne(n => n.name === '#section-template');

const section = sectionTemplate.clone();
sectionTemplate.parent.appendChild(section);
section.name = SECTION_NAME;
section.visible = true;

const textNodes = section.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 titleFrame = section.findOne(n => n.name === '#section-title');
if (titleFrame) {
  const t = titleFrame.findOne(n => n.type === 'TEXT');
  if (t) t.characters = SECTION_NAME;
}

const descFrame = section.findOne(n => n.name === '#section-description');
if (descFrame) {
  if (!HAS_DESCRIPTION) {
    descFrame.visible = false;
  } else {
    const t = descFrame.findOne(n => n.type === 'TEXT');
    if (t) t.characters = SECTION_DESCRIPTION;
  }
}

const specTable = section.findOne(n => n.name === '#spec-table');

const variantTitleFrame = specTable.findOne(n => n.name === '#variant-title');
if (variantTitleFrame) {
  const t = variantTitleFrame.findOne(n => n.type === 'TEXT');
  if (t) t.characters = COLUMNS[0];
}

const headerRow = specTable.children.find(c => c.name === 'Header row');
const variantValueTemplate = headerRow.findOne(n => n.name === '#variant-value');
const notesHeader = headerRow.findOne(n => n.name === '#notes-header');
const notesIndex = notesHeader ? headerRow.children.indexOf(notesHeader) : -1;
const valueColumns = COLUMNS.slice(1, -1);

if (notesHeader) {
  notesHeader.layoutSizingHorizontal = 'FILL';
}

const headerClones = [];
for (let i = 0; i < valueColumns.length; i++) {
  const clone = variantValueTemplate.clone();
  headerClones.push(clone);
  if (notesIndex >= 0) {
    headerRow.insertChild(notesIndex + i, clone);
  } else {
    headerRow.appendChild(clone);
  }
}
variantValueTemplate.remove();

for (let i = 0; i < headerClones.length; i++) {
  headerClones[i].layoutSizingHorizontal = 'FILL';
  const textNode = headerClones[i].children.find(c => c.type === 'TEXT');
  if (textNode) textNode.characters = valueColumns[i];
}

const rowTemplate = specTable.findOne(n => n.name === '#row-template');

for (const rowData of ROWS) {
  const row = rowTemplate.clone();
  specTable.appendChild(row);
  row.name = 'Row ' + rowData.spec;

  const propNameFrame = row.findOne(n => n.name === '#property-name');
  if (propNameFrame) {
    const t = propNameFrame.findOne(n => n.type === 'TEXT');
    if (t) t.characters = rowData.spec;
  }

  const propNotesFrame = row.findOne(n => n.name === '#property-notes');
  if (propNotesFrame) {
    const t = propNotesFrame.findOne(n => n.type === 'TEXT');
    if (t) t.characters = rowData.notes;
    propNotesFrame.layoutSizingHorizontal = 'FILL';
  }

  const hierarchyFrame = row.findOne(n => n.name === '#hierarchy-indicator');
  if (hierarchyFrame) {
    if (rowData.isSubProperty) {
      hierarchyFrame.visible = true;
      const withinGroup = hierarchyFrame.children.find(c => c.name === 'within-group');
      const lastInGroup = hierarchyFrame.children.find(c => c.name === '#hierarchy-indicator-last');
      if (rowData.isLastInGroup) {
        if (withinGroup) withinGroup.visible = false;
        if (lastInGroup) lastInGroup.visible = true;
      } else {
        if (withinGroup) withinGroup.visible = true;
        if (lastInGroup) lastInGroup.visible = false;
      }
    } else {
      hierarchyFrame.visible = false;
    }
  }

  const valueCellTemplate = row.findOne(n => n.name === '#property-value-cell');
  const notesCell = row.findOne(n => n.name === '#property-notes');
  const notesCellIndex = notesCell ? row.children.indexOf(notesCell) : -1;

  const cellClones = [];
  for (let i = 0; i < rowData.values.length; i++) {
    const clone = valueCellTemplate.clone();
    cellClones.push(clone);
    if (notesCellIndex >= 0) {
      row.insertChild(notesCellIndex + i, clone);
    } else {
      row.appendChild(clone);
    }
  }
  valueCellTemplate.remove();

  for (let i = 0; i < cellClones.length; i++) {
    cellClones[i].layoutSizingHorizontal = 'FILL';
    const textNode = cellClones[i].children.find(c => c.type === 'TEXT');
    if (textNode) textNode.characters = rowData.values[i];
  }
}

rowTemplate.remove();
return { success: true, section: SECTION_NAME, sectionId: section.id };

const SECTION_ID = '__SECTION_ID__';
const COMP_SET_ID = '__COMP_SET_NODE_ID__';
const SUB_COMP_SET_ID = '__SUB_COMP_SET_NODE_ID__';
const DEFAULT_PROPS = __DEFAULT_PROPS_JSON__;
const VARIANT_AXIS = '__VARIANT_AXIS__';
const COLUMN_VALUES = __COLUMN_VALUES_JSON__;
const PROPERTY_OVERRIDES = __PROPERTY_OVERRIDES_JSON__;
const SUB_COMP_OVERRIDES = __SUB_COMP_OVERRIDES_JSON__;
const FONT_FAMILY = '__FONT_FAMILY__';

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(() => {})));
}

async function loadFontWithFallback(family, preferredStyle, fallbackStyle) {
  fallbackStyle = fallbackStyle || 'Regular';
  const allFonts = await figma.listAvailableFontsAsync();
  const familyFonts = allFonts.filter(f => f.fontName.family === family);
  const match = familyFonts.find(f => f.fontName.style === preferredStyle);
  if (match) { await figma.loadFontAsync(match.fontName); return match.fontName; }
  const fallback = familyFonts.find(f => f.fontName.style === fallbackStyle);
  if (fallback) { await figma.loadFontAsync(fallback.fontName); return fallback.fontName; }
  if (familyFonts.length > 0) { await figma.loadFontAsync(familyFonts[0].fontName); return familyFonts[0].fontName; }
  await figma.loadFontAsync({ family: 'Inter', style: 'Regular' });
  return { family: 'Inter', style: 'Regular' };
}

const section = await figma.getNodeByIdAsync(SECTION_ID);
if (!section) return { error: 'Section not found: ' + SECTION_ID };

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

const preview = section.findOne(n => n.name === '#Preview');
if (!preview) return { error: 'No #Preview frame in section: ' + SECTION_ID };

const useSubComp = SUB_COMP_SET_ID && SUB_COMP_SET_ID !== '';
const sourceId = useSubComp ? SUB_COMP_SET_ID : COMP_SET_ID;
const compNode = await figma.getNodeByIdAsync(sourceId);
if (!compNode) return { error: 'Component not found: ' + sourceId };
const isComponentSet = compNode.type === 'COMPONENT_SET';

const instances = [];
for (let i = 0; i < COLUMN_VALUES.length; i++) {
  const colValue = COLUMN_VALUES[i];
  const variantProps = { ...DEFAULT_PROPS };
  if (VARIANT_AXIS && VARIANT_AXIS !== '') {
    variantProps[VARIANT_AXIS] = colValue;
  }
  if (PROPERTY_OVERRIDES.length > i) {
    for (const [k, v] of Object.entries(PROPERTY_OVERRIDES[i])) {
      variantProps[k] = v;
    }
  }

  let targetVariant = null;
  if (isComponentSet) {
    let bestFallback = null;
    let bestFallbackScore = -1;
    for (const child of compNode.children) {
      const vp = child.variantProperties || {};
      let score = 0;
      let exactMatch = true;
      for (const [k, v] of Object.entries(variantProps)) {
        if (vp[k] === v) { score++; } else { exactMatch = false; }
      }
      if (exactMatch) { targetVariant = child; break; }
      if (score > bestFallbackScore) { bestFallbackScore = score; bestFallback = child; }
    }
    if (!targetVariant) targetVariant = bestFallback;
  } else {
    targetVariant = compNode;
  }

  instances.push({ colValue, targetVariant, overrideIndex: i });
}

const LABEL_FONT = await loadFontWithFallback(FONT_FAMILY, 'Medium');
const wrappers = [];
for (const entry of instances) {
  const wrapper = figma.createFrame();
  wrapper.name = 'Instance ' + entry.colValue;
  wrapper.layoutMode = 'VERTICAL';
  wrapper.primaryAxisAlignItems = 'CENTER';
  wrapper.counterAxisAlignItems = 'CENTER';
  wrapper.layoutSizingHorizontal = 'HUG';
  wrapper.layoutSizingVertical = 'HUG';
  wrapper.itemSpacing = 10;
  wrapper.fills = [];

  if (!entry.targetVariant) {
    const placeholder = figma.createText();
    await figma.loadFontAsync({ family: 'Inter', style: 'Regular' });
    placeholder.characters = 'Variant unavailable';
    placeholder.fontSize = 12;
    placeholder.fills = [{ type: 'SOLID', color: { r: 0.6, g: 0.6, b: 0.6 } }];
    wrapper.appendChild(placeholder);
  } else {
    const inst = entry.targetVariant.createInstance();
    await loadAllFonts(inst);
    if (useSubComp && Object.keys(SUB_COMP_OVERRIDES).length > 0) {
      inst.setProperties(SUB_COMP_OVERRIDES);
      await loadAllFonts(inst);
    }
    if (!useSubComp && PROPERTY_OVERRIDES.length > entry.overrideIndex && Object.keys(PROPERTY_OVERRIDES[entry.overrideIndex]).length > 0) {
      inst.setProperties(PROPERTY_OVERRIDES[entry.overrideIndex]);
      await loadAllFonts(inst);
    }
    wrapper.appendChild(inst);
    entry._inst = inst;
  }

  const label = figma.createText();
  label.fontName = LABEL_FONT;
  label.characters = entry.colValue;
  label.fontSize = 14;
  label.fills = [{ type: 'SOLID', color: { r: 0.29, g: 0.29, b: 0.29 } }];
  wrapper.appendChild(label);

  preview.appendChild(wrapper);
  wrappers.push({ wrapper, entry });
}

return { success: true, section: SECTION_ID };

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