Function resolveScoped

packages/sdk/src/engine/model.ts:71–101

(document: Document, id: string)

 * element inside a sub-composition even when bare ids collide.
 */
export function resolveScoped(document: Document, id: string): Element | null {
  const parts = id.split("/");

  // Bare id: prefer the canonical (top-level) match when one exists, so
  // resolution agrees with getElement (scopedId === id wins over document order).
  if (parts.length === 1) {
    const escaped = escapeHfId(id);
    const matches = Array.from(document.querySelectorAll(`[data-hf-id="${escaped}"]`));
    if (matches.length > 0) {
      return matches.find((el) => isCanonicalScope(el)) ?? matches[0] ?? null;
    }
    // Fall back to a sub-composition ROOT addressed by its composition id. A
    // host element carries data-hf-id (its own leaf id) AND data-composition-id
    // (the id studio passes when targeting the sub-comp root). data-hf-id takes
    // precedence above; only when no hf-id matches do we treat the bare id as a
    // composition id, making comp-ids first-class resolvable addresses.
    return document.querySelector(`[data-composition-id="${escaped}"]`);
  }

  let context: Element | Document = document;
  for (const part of parts) {
    const escaped = escapeHfId(part);
    const found: Element | null =
      context === document
        ? (context as Document).querySelector(`[data-hf-id="${escaped}"]`)
        : (context as Element).querySelector(`[data-hf-id="${escaped}"]`);
    if (!found) return null;
    context = found;
  }
  return context as Element;
}

/**
 * Returns true when this element starts a new sub-composition scope — i.e. it